@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* //color $white: #ffffff; $black: #000000; $grey: #555; */ /*// easings $easeIn = cubic-bezier(0, 0, 0.2, 1); $easeOut = cubic-bezier(0.40, 0.00, 1.00, 1.00); $easeInOut = cubic-bezier(0.40, 0.00, 0.20, 1.00);*/ /*$desktop = "only screen and (min-width: 1024px)"*/ :root { --debug-grid-color: #ff000022; --scale: 1px; --grid-gap: 22rem; --header-min-height: 102rem; --color: #000000; --background-color: #ffffff; --white: #ffffff; --grey: #6C6C6C; --nav-item-padding: 17rem; } @media only screen and (max-width: 1199px) { :root { --nav-item-padding: 10rem; } } @media only screen and (max-width: 1023px) { :root { --grid-gap: 12rem; --header-min-height: 110rem; --nav-item-padding: 0; } } @media only screen and (max-width: 767px) { :root { --grid-gap: 8rem; --header-min-height: 90rem; } } /*$grid-gap: 22rem;*/ html, body { -webkit-text-size-adjust: none; overscroll-behavior-y: contain; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; font-size: var(--scale); } body { background-color: var(--background-color); color: var(--color); transition: background-color 0.3s; font-size: 35rem; line-height: 1.14; font-weight: 400; } @media only screen and (max-width: 1023px) { body { font-size: 17rem; line-height: 1.3; } } body { scrollbar-width: thin; scrollbar-color: var(--grey) transparent; } body::-webkit-scrollbar { width: 4rem; height: 4rem; border-radius: 2rem; } body::-webkit-scrollbar-track { background: transparent; border-radius: 2rem; margin: 0rem 0; } body::-webkit-scrollbar-thumb { background-color: var(--grey); border-radius: 2rem; } body.is-fake-scroll::after { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; z-index: 3; } body, input, button { font-family: "ONYOneBeta", Roboto, Arial, Helvetica, sans-serif; } input, button { padding: 0; margin: 0; } button { cursor: pointer; } svg { fill: currentColor; } a { text-decoration: none; color: currentColor; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; } h1, h2 { font-size: 90rem; line-height: 1.17; } @media only screen and (max-width: 1920px) { h1, h2 { font-size: 75rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 1199px) { h1, h2 { font-size: 60rem; line-height: 1.25; letter-spacing: -0.02em; } } @media only screen and (max-width: 1023px) { h1, h2 { font-size: 50rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { h1, h2 { font-size: 30rem; line-height: 1.17; letter-spacing: 0; } } img, video { display: block; max-width: 100%; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* @include mixins.webfont('ONYSans', 'ONYSans/ONYSans-Regular', 400); @include mixins.webfont('ONYOneBeta', 'ONYOneBeta/ONYOneBeta-Regular', 400); @include mixins.webfont('ONYOneBeta', 'ONYOneBeta/ONYOneBeta-Medium', 500); */ @font-face { font-family: "ONYOneBeta"; src: url("../fonts/ONYOneBeta/ONYOneBeta-Medium.otf") format("truetype"); font-style: normal; font-weight: 500; } @font-face { font-family: "ONYOneBeta"; src: url("../fonts/ONYOneBeta/ONYOneBeta-Regular.otf") format("truetype"); font-style: normal; font-weight: 400; } @font-face { font-family: "ONYOneBeta"; src: url("../fonts/ONYOneBeta/ONYOneBeta-Light.otf") format("truetype"); font-style: normal; font-weight: 300; } @font-face { font-family: "WilliamTextPro"; src: url("../fonts/WilliamTextPro/WilliamTextPro.ttf") format("truetype"); src: url("../fonts/WilliamTextPro/WilliamTextPro.woff2") format("woff2"), url("../fonts/WilliamTextPro/WilliamTextPro.woff") format("woff"); font-style: normal; font-weight: 400; } body.is-loading .body-loader { will-change: opacity; opacity: 1; pointer-events: auto; } body.is-header-loader .line-loader { opacity: 0; transform: scaleY(1); } body.is-nav::before { opacity: 1; } body::before { pointer-events: none; content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 95; backdrop-filter: blur(100px); opacity: 0; will-change: opacity; transition: opacity 0.3s; } .wrapper { display: flex; flex-flow: column nowrap; width: 100%; min-height: 100%; } .main { position: relative; z-index: 2; transition: transform 0.9s; } .main { display: flex; flex-flow: column nowrap; flex-grow: 1; } .header + .main { padding-top: var(--header-min-height); } .inverse { --color: #ffffff; --background-color: #000000; color: var(--color); background-color: var(--background-color); } .inverse-body { background-color: #000; } .body-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; opacity: 0; pointer-events: none; background-color: #fff; transition: opacity 0.9s; } .static .case__block:last-child { margin: 120rem 0; } .is-hidden { display: none; } .is-overflow { overflow: hidden; } .h1 { font-size: 90rem; line-height: 1.17; } @media only screen and (max-width: 1920px) { .h1 { font-size: 75rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 1199px) { .h1 { font-size: 60rem; line-height: 1.25; letter-spacing: -0.02em; } } @media only screen and (max-width: 1023px) { .h1 { font-size: 50rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .h1 { font-size: 30rem; line-height: 1.17; letter-spacing: 0; } } .h2 { font-size: 55rem; line-height: 1.1; font-weight: 400; } @media only screen and (max-width: 1023px) { .h2 { font-size: 45rem; } } @media only screen and (max-width: 767px) { .h2 { font-size: 30rem; } } .body-s { font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .body-s { font-size: 17rem; } } .body-m { font-size: 35rem; line-height: 1.14; font-weight: 400; } @media only screen and (max-width: 1023px) { .body-m { font-size: 17rem; line-height: 1.3; } } .body-l { font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .body-l { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .body-l { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .body-l { font-size: 17rem; line-height: 1.47; } } a.brief-btn { position: fixed; bottom: 20rem; right: calc(2 * var(--grid-gap)); z-index: 10; padding: 11rem 24rem; line-height: 25rem; transition: background-color 0.3s; } @media only screen and (max-width: 767px) { a.brief-btn { bottom: 10rem; right: 50%; transform: translateX(50%); } } @media only screen and (hover: hover) { a.brief-btn:hover { color: var(--white); background-color: var(--grey); } } body.is-debug .debug { display: block; } body.is-debug-grid .debug-grid { display: block; } .debug { display: none; position: absolute; top: 0; left: 0; } .debug-grid { display: none; pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; } .debug-grid__container { height: 100%; width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .debug-grid__row { height: 100%; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .debug-grid span { display: flex; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 8.3333333333%; } .debug-grid i { flex-grow: 1; height: 100%; display: block; background-color: var(--debug-grid-color); } .debug-panel { position: fixed; bottom: 10px; left: 10px; z-index: 105; } .about__heading { padding-top: 45rem; } .about__info { padding-top: 245rem; } .about__info .infoblock__text { font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .about__info .infoblock__text { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .about__info .infoblock__text { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .about__info .infoblock__text { font-size: 17rem; line-height: 1.47; } } .about__awards { padding-top: 140rem; } .about__more-awards { padding-top: 100rem; padding-bottom: 200rem; } .about__vacancies { padding-top: 140rem; } .about__bubbles { padding: 180rem 0 280rem; } @media only screen and (max-width: 1023px) { .about__heading { padding-top: 40rem; } .about__info { padding-top: 140rem; } .about__awards { padding-top: 80rem; } .about__more-awards { padding-top: 60rem; padding-bottom: 100rem; } .about__vacancies { padding-top: 80rem; } .about__bubbles { padding: 80rem 0 200rem; } } @media only screen and (max-width: 767px) { .about__heading { padding-top: 15rem; } .about__info { padding-top: 70rem; } .about__awards { padding-top: 50rem; } .about__more-awards { padding-top: 25rem; padding-bottom: 70rem; } .about__vacancies { padding-top: 40rem; } .about__bubbles { padding: 80rem 0; } } .advantages__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .advantages__title { margin-bottom: 70rem; } .advantages__main { width: calc((100% - var(--grid-gap)) / 6 * 4); margin-left: auto; } .advantages__list { margin-top: -60rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .advantages__item { margin-top: 60rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .advantages-card { padding-top: 30rem; border-top: 1px solid currentColor; } .advantages-card__subtitle { font-size: 25rem; margin-bottom: 30rem; } .advantages-card__text { font-size: 19rem; line-height: 1.2; color: #565656; } @media only screen and (max-width: 1023px) { .advantages__main { width: 100%; } } @media only screen and (max-width: 767px) { .advantages__title { margin-bottom: 50rem; } .advantages__main { width: 100%; } .advantages__list { margin-top: -35rem; } .advantages__item { margin-top: 35rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .advantages-card { padding-top: 15rem; } .advantages-card__subtitle { margin-bottom: 10rem; font-size: 17rem; line-height: 1.3; } .advantages-card__text { font-size: 17rem; line-height: 1.3; } } .approach__row { margin-bottom: 30rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .approach__row:last-child { margin-bottom: 0; } .approach__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .approach__text { color: #B2B2B2; } @media only screen and (max-width: 1023px) { .approach { font-size: 17rem; line-height: 22rem; } .approach__row { margin-bottom: 15rem; } } @media only screen and (max-width: 767px) { .approach__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .approach__title { margin-bottom: 5rem; } } .audio__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .audio__list { margin-top: -34rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .audio__item { margin-top: 34rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .audio__item:last-child { margin-left: 50%; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .audio-card { display: flex; gap: 20rem; } .audio-card__player { margin-top: 7rem; flex-shrink: 0; width: 42rem; height: 42rem; position: relative; cursor: pointer; } .audio-card__player .svg-icon { fill: none; width: 100%; height: 100%; } .audio-card__player .pause { display: none; } .audio-card__player .survey-results__circle { fill: none; transform: rotate(-90deg); transform-origin: center; } .audio-card__player.is-active .pause { display: block; } .audio-card__player.is-active .play { display: none; } .audio-card__player.is-active .audio-card__player-bg { fill: #565656; } .audio-card__title { line-height: 1; letter-spacing: -0.01em; } .audio-card__subtitle { color: #565656; font-size: 19rem; line-height: 20rem; margin-top: 18rem; } @media only screen and (max-width: 1023px) { .audio__list { margin-top: 0; } .audio__item { margin-top: 50rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .audio__item:last-child { margin-left: 0; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .audio__item:first-child { margin-top: 0; } .audio-card__player { margin-top: 1rem; } } @media only screen and (max-width: 767px) { .audio__item { margin-top: 30rem; } .audio-card__player { width: 32rem; height: 32rem; } .audio-card__subtitle { margin-top: 10rem; } } .audiobranding__intro { padding-top: 120rem; } @media only screen and (max-width: 1440px) { .audiobranding__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .audiobranding__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .audiobranding__intro { padding-top: 40rem; } } .audiobranding__intro .intro__title { margin-bottom: 34rem; max-width: 952rem; } .audiobranding__intro .intro__image { aspect-ratio: 1395/600; } .audiobranding__intro + .audiobranding__info { margin-top: 40rem; } .audiobranding__intro + .audiobranding__info .audiobranding-info__title { margin-bottom: 30rem; } .audiobranding__cases { margin-top: 170rem; } .audiobranding__cases .cases__list { margin-top: -70rem; } .audiobranding__cases .cases__item { margin-top: 70rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .audiobranding__cases .cases__item:nth-of-type(2) { margin-left: auto; } .audiobranding__cases .cases__item:nth-of-type(3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-right: 50%; } .audiobranding__cases .cases__item:nth-of-type(4) { margin-left: 33.3333333333%; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .audiobranding__cases .cases__item:nth-of-type(5) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .audiobranding__cases .case-card-static__preview { margin-bottom: 20rem; } .audiobranding__cases .case-card-static__subtitle { transition: opacity 0.3s; } .audiobranding__info { margin-top: 120rem; } .audiobranding__audio { margin-top: 160rem; } .audiobranding__audio + .audiobranding__info .audiobranding-info__title { margin-bottom: 40rem; } .audiobranding__reviews { margin-top: 170rem; } .audiobranding__form { margin-top: 120rem; } .audiobranding__form .brief__wrap { padding: 50rem 0 85rem; } .audiobranding__form .brief__form { margin-top: 90rem; } .audiobranding-info__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .audiobranding-info__main { width: calc((100% - var(--grid-gap)) / 12 * 8); margin-left: auto; } .audiobranding-info__block { margin-bottom: 120rem; } .audiobranding-info__block:last-child { margin-bottom: 0; } .audiobranding-info__block .case-card-static__preview, .audiobranding-info__block .case-card-static__iframe { margin-bottom: 20rem; } .audiobranding-info__block .case-card-static__subtitle { transition: opacity 0.3s; } .audiobranding-info__title { color: #565656; margin-bottom: 20rem; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .audiobranding-info__title { font-size: 17rem; } } .audiobranding-info__description { max-width: 87%; font-size: 55rem; line-height: 1.1; font-weight: 400; } @media only screen and (max-width: 1023px) { .audiobranding-info__description { font-size: 45rem; } } @media only screen and (max-width: 767px) { .audiobranding-info__description { font-size: 30rem; } } .audiobranding-info__description { line-height: 1; letter-spacing: -0.01em; } .audiobranding-info__content ul li { position: relative; padding-left: 40rem; } .audiobranding-info__content ul li::before { content: ""; display: block; width: 30rem; height: 2rem; background-color: currentColor; position: absolute; left: 0; top: 20rem; margin-top: -1rem; } @media only screen and (hover: hover) { .audiobranding__cases a.case-card-static__subtitle:hover { opacity: 0.7; } .audiobranding-info__block a.case-card-static__subtitle:hover { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .audiobranding .h2 { line-height: 1; letter-spacing: 0; } .audiobranding__intro .intro__title { margin-bottom: 30rem; } .audiobranding__intro + .audiobranding__info .audiobranding-info__title { margin-bottom: 20rem; } .audiobranding__cases { margin-top: 120rem; } .audiobranding__cases .cases__list { margin-top: -120rem; } .audiobranding__cases .cases__item { margin-top: 120rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .audiobranding__cases .cases__item:nth-of-type(2) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .audiobranding__cases .cases__item:nth-of-type(3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-right: 16.6666666667%; } .audiobranding__cases .cases__item:nth-of-type(4) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .audiobranding__cases .cases__item:nth-of-type(5) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .audiobranding__audio + .audiobranding__info { margin-top: 150rem; } .audiobranding__audio + .audiobranding__info .audiobranding-info__title { margin-bottom: 20rem; } .audiobranding__reviews { margin-top: 160rem; } .audiobranding__form { margin-top: 90rem; } .audiobranding__form .brief__form { margin-top: 70rem; } .audiobranding-info__main { width: 100%; } .audiobranding-info__description { max-width: 100%; } .audiobranding-info__content ul li { padding-left: 30rem; } .audiobranding-info__content ul li::before { width: 20rem; top: 16rem; } } @media only screen and (max-width: 767px) { .audiobranding__intro .intro__image { aspect-ratio: 375/250; } .audiobranding__intro + .audiobranding__info { margin-top: 20rem; } .audiobranding__cases { margin-top: 110rem; } .audiobranding__cases .cases__list { margin-top: -60rem; } .audiobranding__cases .cases__item { margin-top: 60rem; } .audiobranding__info { margin-top: 95rem; } .audiobranding__audio { margin-top: 110rem; } .audiobranding__audio + .audiobranding__info { margin-top: 120rem; } .audiobranding__reviews { margin-top: 140rem; } .audiobranding__form { margin-top: 110rem; } .audiobranding__form .brief__wrap { padding: 20rem 0 85rem; } .audiobranding__form .brief__form { margin-top: 50rem; } .audiobranding-info__description { font-size: 30rem; line-height: 35rem; letter-spacing: 0; } .audiobranding-info__main { width: 100%; margin-top: 75rem; } .audiobranding-info__content { font-size: 17rem; line-height: 22rem; } .audiobranding-info__content ul li { padding-left: 22rem; } .audiobranding-info__content ul li::before { width: 15rem; top: 12rem; } } .brand__intro { margin-bottom: 44rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .brand__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .brand__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .brand__intro { padding-top: 40rem; } } .brand__intro .intro__head { max-width: 1200rem; } .brand__info { margin-bottom: 120rem; } .brand__info .infoblock__block:nth-child(1) .infoblock__text { font-size: 25rem; line-height: 1.2; } .brand__info .infoblock__block:nth-child(2) .infoblock__text { line-height: 1.3; } .brand__info .infoblock__title { margin-top: 0; } .brand__info .infoblock__list { margin-top: 40rem; } .brand__info .infoblock__item { border-bottom: 1px solid #ccc; } .brand__info .infoblock__item:first-child { border-top: 1px solid #ccc; } .brand__info .infoblock__links a span { border-color: #ccc; } .brand__cases { margin-bottom: 120rem; } .brand__advantages { padding: 50rem 0 120rem; } .brand__block { margin-bottom: 120rem; } .brand__block:last-child { margin-bottom: 0; } .brand__reviews { padding: 40rem 0 80rem; } .brand__form .brief__wrap { padding: 40rem 0 100rem; } .brand__form .brief__title { margin-bottom: 90rem; } .brand--fashion .brand__intro .intro__head { max-width: 955rem; } .brand--fashion .brand__info { margin-bottom: 155rem; } .brand--fashion .brand__info .infoblock__block:nth-child(1) .infoblock__text { font-size: 35rem; line-height: 1.2; } .brand--fashion .brand__info .infoblock-card__content { padding-left: 0; } .brand--fashion .brand__cases { margin-bottom: 155rem; } @media only screen and (max-width: 1023px) { .brand__intro { /* .intro { &__title { margin-bottom: 30rem; } } */ } .brand--fashion .brand__intro { margin-bottom: 28rem; } .brand--fashion .brand__info { margin-bottom: 135rem; } .brand--fashion .brand__info .infoblock__block:nth-child(1) .infoblock__text { font-size: 25rem; line-height: 1.25; } .brand--fashion .brand__info .infoblock-card__content { padding-top: 0; } .brand--fashion .brand__info .infoblock-card__content ul li { padding-left: 20rem; } .brand--fashion .brand__cases { margin-bottom: 135rem; } } @media only screen and (max-width: 767px) { .brand__intro { /* .intro { &__title { margin-bottom: 16rem; } } */ } .brand__info { margin-bottom: 80rem; } .brand__info .infoblock__title { font-size: 30rem; line-height: 1.17; margin-bottom: 18rem; } .brand__info .infoblock__block { margin-bottom: 80rem; /* &:nth-child(2) { .infoblock { &__text { line-height: 1.3; } } } */ } .brand__info .infoblock__block:nth-child(1) .infoblock__text { font-size: 17rem; line-height: 1.3; } .brand__info .infoblock__list { margin-top: 34rem; } .brand__advantages { padding: 20rem 0 60rem; } .brand__block { margin-bottom: 80rem; } .brand__reviews { padding: 20rem 0 60rem; } .brand__form .brief__title { margin-bottom: 50rem; } .brand--fashion .brand__intro { margin-bottom: 23rem; } .brand--fashion .brand__info { margin-bottom: 96rem; } .brand--fashion .brand__info .infoblock__block:nth-child(1) .infoblock__text { font-size: 17rem; line-height: 22rem; } .brand--fashion .brand__cases { margin-bottom: 96rem; } } .branding { background-color: #fff; } .branding__intro { margin-bottom: 100rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .branding__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .branding__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .branding__intro { padding-top: 40rem; } } .branding__intro .intro__head { max-width: 100%; } .branding__cases { margin-bottom: 200rem; } .branding__cases--1 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; margin-left: 33.3333333333%; } .branding__cases--1 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .branding__cases--2 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .branding__cases--2 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .branding__cases--3 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .branding__cases--3 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; margin-left: 33.3333333333%; } .branding__info { margin-bottom: 100rem; } .branding__info .infoblock__text { font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .branding__info .infoblock__text { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .branding__info .infoblock__text { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .branding__info .infoblock__text { font-size: 17rem; line-height: 1.47; } } .branding__info .infoblock__services { font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .branding__info .infoblock__services { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .branding__info .infoblock__services { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .branding__info .infoblock__services { font-size: 17rem; line-height: 1.47; } } .branding__info .infoblock__services > div, .branding__info .infoblock__services li { margin-bottom: 25rem; } .branding__info .infoblock__services > div:last-child, .branding__info .infoblock__services li:last-child { margin-bottom: 0; } .branding__info--services { margin-bottom: 200rem; } .branding__info--process .infoblock__list { counter-reset: section; } .branding__info--process .infoblock__group { counter-increment: section; position: relative; padding-left: 40rem; margin-bottom: 45px; } .branding__info--process .infoblock__group::before { content: counter(section) "."; /* Выводим номер */ position: absolute; left: 0; top: 0; } .branding__info--process .infoblock__item { margin-bottom: 18rem; } .branding__info--process .infoblock__item:last-child { margin-bottom: 0; } .branding__info--process .infoblock-card__top { padding: 0; } .branding__info--process .infoblock-card__top::before, .branding__info--process .infoblock-card__top::after { display: none; } .branding__info--process .infoblock-card__top span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .branding__info--process .infoblock-card__top .svg-icon { margin-left: 10rem; opacity: 0; transition: opacity 0.3s; } .branding__info--process .infoblock-card__content { padding: 40rem 0 45rem; font-size: 35rem; line-height: 1.25; max-width: 100%; } .branding__info--process .infoblock-card.is-open .infoblock-card__top span { border-color: transparent; } .branding__info--process .infoblock-card.is-open .infoblock-card__top .svg-icon { opacity: 1; } .branding__info--links { margin-bottom: 200rem; } .branding__info--links .infoblock__links a { font-size: 90rem; line-height: 1.17; } @media only screen and (max-width: 1920px) { .branding__info--links .infoblock__links a { font-size: 75rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 1199px) { .branding__info--links .infoblock__links a { font-size: 60rem; line-height: 1.25; letter-spacing: -0.02em; } } @media only screen and (max-width: 1023px) { .branding__info--links .infoblock__links a { font-size: 50rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .branding__info--links .infoblock__links a { font-size: 30rem; line-height: 1.17; letter-spacing: 0; } } .branding__bubbles { margin-bottom: 160rem; } .branding__bubbles .bubbles__list { margin-top: 100rem; } .branding__awards { padding: 140rem 0; } .branding__team { padding: 55rem 0 140rem; } @media only screen and (max-width: 1023px) { .branding__intro { margin-bottom: 45rem; /* .intro { &__title { margin-bottom: 30rem; } } */ } .branding__cases { margin-bottom: 140rem; } .branding__cases--1 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .branding__cases--1 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .branding__cases--2 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .branding__cases--2 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .branding__cases--3 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .branding__cases--3 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .branding__info { margin-bottom: 45rem; } .branding__info--process .infoblock__group::before { font-size: 35rem; line-height: 1.14; } .branding__info--process .infoblock-card__top { font-size: 35rem; line-height: 1.14; } .branding__info--process .infoblock-card__content { font-size: 17rem; line-height: 1.25; } .branding__bubbles { margin-bottom: 140rem; } .branding__bubbles .bubbles__list { margin-top: 45rem; } .branding__awards { padding: 80rem 0; } .branding__team { padding: 35rem 0 80rem; } } @media only screen and (max-width: 767px) { .branding__intro { /* .intro { &__title { margin-bottom: 16rem; } } */ } .branding__cases { margin-bottom: 80rem; } .branding__cases--1 .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .branding__cases--2 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .branding__cases--3 .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .branding__info { margin-bottom: 45rem; } .branding__info .infoblock__title { font-size: 17rem; line-height: 1.3; } .branding__info .infoblock__services > div, .branding__info .infoblock__services li { margin-bottom: 10rem; } .branding__info--process .infoblock__group { padding-left: 20rem; margin-bottom: 20rem; } .branding__info--process .infoblock__group::before { font-size: 17rem; line-height: 1.3; top: 4rem; } .branding__info--process .infoblock__item { margin-bottom: 10rem; } .branding__info--process .infoblock-card__top { font-size: 17rem; line-height: 1.3; font-weight: 400; } .branding__info--process .infoblock-card__top .svg-icon { width: 21rem; height: 21rem; margin-left: 4rem; } .branding__info--process .infoblock-card__content { padding: 20rem 0 25rem; } .branding__bubbles { margin-bottom: 80rem; } .branding__bubbles .bubbles__letter { display: none; } .branding__awards { padding: 60rem 0; } .branding__team { padding: 15rem 0 60rem; } } /* WARN: API FIX STYLES ->*/ .branding__info--links .infoblock--api .infoblock__links a { margin-right: 10rem; } .branding__info--links .infoblock--api .infoblock__links a::after { content: ","; display: inline-block; } .branding__info--links .infoblock--api .infoblock__links a:last-child { margin-right: 0; } .branding__info--links .infoblock--api .infoblock__links a:last-child::after { content: "."; } .brief { background-color: var(--background-color); } .brief__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .brief__wrap { padding-bottom: 50rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .brief__wrap { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .brief__wrap { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .brief__wrap { padding-top: 40rem; } } .brief__title a span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .brief__description { font-size: 19rem; font-weight: 400; line-height: 25.65rem; max-width: 900rem; margin-top: 40rem; } .brief__description + .brief__form { margin-top: 60px; } .brief__form { width: calc((100% - var(--grid-gap)) / 12 * 8); margin-top: 20rem; } .brief--content .brief__wrap { padding: 245rem 0; } .brief--content .brief__title { margin-bottom: 0; } .brief--content .brief__title a { border-bottom: 1px solid #000; transition: border-color 0.3s; } .brief.inverse .brief__title a { border-bottom-color: currentColor; } @media only screen and (hover: hover) { .brief__title a:hover span { border-color: transparent; } .brief--content .brief__title a:hover { border-color: transparent; } } @media only screen and (max-width: 1023px) { .brief__title { margin-bottom: 45rem; } .brief__form { width: 100%; } .brief--content .brief__wrap { padding: 140rem 0; } .brief--content .brief__title { margin-bottom: 0; } } @media only screen and (max-width: 767px) { .brief--content .brief__wrap { padding: 70rem 0; } .brief--content .brief__title br { display: none; } } .bubbles__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .bubbles__list { display: flex; justify-content: center; position: relative; } .bubbles__item { flex-shrink: 0; aspect-ratio: 1; border-radius: 50%; border: 1rem solid #404040; width: 35.3333333333%; margin: 0 -2%; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s; cursor: pointer; } .bubbles__main { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; } .bubbles__letter { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 135rem; height: 135rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: border-color 0.6s; z-index: 2; } .bubbles__content { position: absolute; left: 0; top: 0; width: 100%; min-height: 100%; background-color: #fff; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s; padding-top: 160rem; font-size: 55rem; line-height: 1.36; } /* WARN: API FIX STYLES ->*/ .bubbles .rounder { flex-shrink: 0; aspect-ratio: 1; border-radius: 50%; border: 1rem solid #404040; width: 35.3333333333%; margin: 0 -2%; display: flex; align-items: center; justify-content: center; } /* WARN: API FIX STYLES <-*/ @media only screen and (hover: hover) { .bubbles__list:hover .bubbles__item { border-color: transparent; } .bubbles__item:hover .bubbles__letter { border-color: currentColor; } .bubbles__item:hover .bubbles__content { opacity: 1; } } @media only screen and (max-width: 1440px) { .bubbles__letter { width: 80rem; height: 80rem; font-size: 19rem; line-height: 1; } .bubbles__content { font-size: 35rem; line-height: 1.3; padding-top: 100rem; } } @media only screen and (max-width: 1199px) { .bubbles__title { font-size: 19rem; line-height: 1.3; } .bubbles__letter { width: 70rem; height: 70rem; } .bubbles__content { font-size: 19rem; line-height: 1.6; padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .bubbles__title { font-size: 17rem; line-height: 1.3; } } @media only screen and (max-width: 767px) { .bubbles__list { flex-direction: column; } .bubbles__item { width: 70%; margin: -5% 15%; } } /* WARN: API FIX STYLES ->*/ @media only screen and (max-width: 767px) { .bubbles .rounder { width: 70%; margin: -5% 15%; } } /* WARN: API FIX STYLES <-*/ .button { display: inline-flex; color: currentColor; background-color: transparent; border: 1rem solid currentColor; border-radius: 32rem; padding: 11rem 36rem; white-space: nowrap; font-size: 19rem; line-height: 26rem; font-weight: 400; transition: border-color 0.3s, color 0.3s; } .button--inverse { color: #fff; background-color: #000; border-color: transparent !important; } .btn-link { display: inline-block; color: currentColor; } .btn-link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .btn-link--icon { font-size: 35rem; display: inline-flex; gap: 10rem; align-items: center; } .btn-link--bb span { border-color: currentColor; } @media only screen and (hover: hover) { .button:hover { border-color: var(--grey); color: var(--grey); } .btn-link:hover span { border-color: currentColor; } .btn-link--bb:hover span { border-color: transparent; } } @media only screen and (max-width: 767px) { .btn-link--icon { font-size: 19px; line-height: 1.3; } } .case__wrap { margin: 80rem 0 200rem; } .case__block--content { margin-top: 80rem; margin-bottom: 120rem; } .case__block--content.inverse { margin: 0; padding: 80rem 0; } .case__block--gallery .media__wrap { padding: 0; } .case__block--gallery.inverse { margin: 0; } .case__block--gallery.inverse .media__wrap { padding: 45rem 0; } .case__block:last-child { margin-bottom: 0; } .case-info__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .case-info__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .case-info__col--side { align-self: center; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .case-info__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .case-info__list { margin-top: -60rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .case-info__item { margin-top: 60rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .case-info__item--full { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .case-info__tags { margin-top: 20rem; } .case-info__subtitle { margin-bottom: 20rem; font-size: 19rem; line-height: 1.3; } .case-info__media { max-width: 82%; } .case-info__media img, .case-info__media video { width: 100%; height: auto; } .case-info__text { display: inline-block; } .case-info__text a { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .case-info--content .case-info__wrap { padding-top: 45rem; border-top: 1px solid var(--color); } .case-info--content .case-info__col--side { align-self: unset; } .case-info--content .case-info__subtitle { margin: 0; } .case-info--content .case-info__subtitle--position { opacity: 0.5; } .case-info--custom2 .case-info__col--side { align-self: unset; } .case-info--custom2 .case-info__box { margin-top: 60rem; } .case-info--custom2 .case-info__box:first-child { margin-top: 0; } .case-info--custom2 .case-info__subtitle { font-size: 35rem; line-height: 1.3; margin: 0; } .case-info--custom2 .case-info__tags { position: static; margin: 20rem 0 0; } .case-card-slider { display: flex; position: relative; height: 100%; color: #fff; } .case-card-slider__image { flex-shrink: 0; flex-grow: 1; display: flex; width: 100%; aspect-ratio: 54/25; max-height: 1040px; } .case-card-slider__image img, .case-card-slider__image video { width: 100%; height: 100%; object-fit: cover; } .case-card-slider__content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 25rem calc(2 * var(--grid-gap)); font-size: 19rem; line-height: 1.3; } .case-card-slider__title { margin-bottom: 10rem; text-transform: uppercase; font-size: 35rem; line-height: 1; font-weight: 500; } @media only screen and (hover: hover) { .case-info__text a:hover { border-color: transparent; } } @media only screen and (max-width: 1023px) { .case__wrap { margin: 25rem 0 75rem; } .case__block--content { margin-top: 25rem; margin-bottom: 80rem; } .case-info { position: relative; } .case-info__col--side, .case-info__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .case-info__media { margin-top: 35rem; max-width: 100%; } .case-info__title, .case-info__text { font-size: 25rem; margin-top: 25rem; } .case-info__subtitle { font-size: 25rem; } .case-info__tags { position: absolute; top: 0; margin: 0 0 10rem; } .case-info__tags div.case-title { margin-top: 0; } .case-info__list { margin-top: 0; } .case-info__item { margin-top: 0; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .case-info__item:not(.case-info__item--full) { margin-top: 35rem; } .case-info__box { padding-top: 10rem; border-top: 1px solid currentColor; column-count: 2; } .case-info--content .case-info__wrap { padding-top: 90rem; border-top: 1px solid currentColor; } .case-info--content .case-info__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .case-info--custom2 .case-info__box { margin-top: 30rem; padding-top: 30rem; column-count: 1; } .case-info--custom2 .case-info__subtitle { font-size: 25rem; } .case-info--custom2 .case-info__text { font-size: 19rem; margin-top: 20rem; } } @media only screen and (max-width: 767px) { .case__wrap { margin: 25rem 0 55rem; } .case__block--content { margin-bottom: 55rem; } .case-info__box { column-count: 1; } .case-info__text { margin-top: 0; } .case-info--content .case-info__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .case-card-slider__content { font-size: 17rem; padding-top: 15rem; padding-bottom: 15rem; } .case-card-slider__title { font-size: 19rem; line-height: 1.3; margin-bottom: 6rem; } .case-card-slider__image { aspect-ratio: 16/9; } } /* WARN: API FIX STYLES ->*/ .case-info__tags .case-title { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; margin-top: 20rem; font-size: 19rem; line-height: 1.3; } .case-info__tags .case-title__tag { position: relative; display: flex; align-items: center; justify-content: flex-start; } .case-info__tags .case-title__tag::after { content: ""; display: block; width: 3rem; height: 3rem; border-radius: 50%; background-color: currentColor; margin: 0 10rem; } .case-info__tags .case-title__tag:last-of-type::after { display: none; } /* WARN: API FIX STYLES <-*/ .cases__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .cases__list { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .cases__list { margin-top: -245rem; } .cases__item { margin-top: 245rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .cases__link { margin-top: 60rem; } .cases--triple .cases__item:nth-of-type(3n-1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-left: 16.6666666667%; } .cases--triple .cases__item:nth-of-type(3n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; margin-left: 33.3333333333%; } .cases--hexagonal .cases__item:nth-of-type(6n-5) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-right: 16.6666666667%; } .cases--hexagonal .cases__item:nth-of-type(6n-3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; margin-right: 33.3333333333%; } .cases--hexagonal .cases__item:nth-of-type(6n-1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-left: 16.6666666667%; } .cases--hexagonal .cases__item:nth-of-type(6n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; margin-left: 33.3333333333%; } .cases--serviсes-page .cases__list { margin-top: -149rem; } .cases--serviсes-page .cases__item { margin-top: 149rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; /* &:nth-of-type(5) { @include mixins.grid-col(4, 6); } */ } .cases--serviсes-page .cases__item:nth-of-type(4n + 1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .cases--serviсes-page .cases__item:nth-of-type(4n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-left: 16.6666666667%; } .cases--serviсes-page .cases__item:nth-of-type(3):last-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .cases--serviсes-page .case-card-static__subtitle { margin-bottom: 18rem; width: 85%; max-width: 440rem; } .cases--serviсes-page .case-card-static__note { margin-top: 18rem; } .cases--multibrands-page { padding: 70rem 0 200rem; } .cases--multibrands-page .cases__list { margin-top: -70rem; } .cases--multibrands-page .cases__item { margin-top: 70rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .cases--multibrands-page .cases__item:nth-of-type(4n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .cases--multibrands-page .cases__item:nth-of-type(4n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-left: 16.6666666667%; } .cases--multibrands-page .case-card-static__subtitle { margin-bottom: 18rem; width: 85%; max-width: 440rem; } .cases--multibrands-page .case-card-static__note { margin-top: 18rem; } .cases--full .cases__list { margin-top: 0; } .cases--full .cases__item { margin-top: 80px; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .cases--full .cases__item:first-child { margin-top: 0; } .case-card { --hoverSpeedIn: 0.4s; --hoverSpeedOut: 0.4s; position: relative; display: block; } .case-card::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; opacity: 0; pointer-events: none; background-color: #fff; transition: opacity 0.7s; } .case-card--mini { opacity: 0; --line-height: 25rem; } .case-card--mini.is-visible { opacity: 1; transition: opacity 0.2s; } .case-card--mini .case-card__preview { transform: scaleY(1) perspective(2000px) rotateX(25deg); } .case-card--mini .case-card__head { position: absolute; top: 100%; transform: translateY(calc(-1 * var(--line-height))); text-align: left; color: var(--color); transition: opacity 0.2s; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .case-card--mini .case-card__head { font-size: 17rem; } } .case-card--mini .case-card__head { line-height: var(--line-height); } .case-card--mini .case-card__head > div { transform: none; } .case-card--mini .case-card__title { line-height: var(--line-height); transition: opacity 0.2s; } .case-card--mini .case-card__main { position: relative; } .case-card.is-hide::before { opacity: 1; } .case-card.is-visible .case-card__preview { opacity: 1; transform: none; transition: transform 0.9s 0.2s, opacity 0.5s 0.2s; } .case-card__preview { width: 100%; position: relative; margin-bottom: 10rem; opacity: 1; transform-origin: center bottom; transform: scaleY(0.9); } .case-card__preview::before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 56.25%; } .case-card__preview img, .case-card__preview video, .case-card__preview iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .case-card__preview:empty { display: none; } .case-card__title { font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .case-card__title { font-size: 17rem; } } .case-card__title { transition: opacity var(--hoverSpeedIn); } .case-card__head { pointer-events: none; position: fixed; top: 50%; right: 0; left: 0; z-index: 1009; font-size: 80rem; mix-blend-mode: difference; color: #fff; opacity: 0; text-align: center; transform: perspective(2000px); perspective: 2000px; perspective-origin: 50% 50%; } .case-card__head { transition: opacity var(--hoverSpeedIn); } .case-card__head > div { transform: translate3d(0px, 70px, 0px) scale3d(1, 1, 1) rotateX(-45deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); } .case-card[data-state="1"] .case-card__head { opacity: 1; } .case-card[data-state="1"] .case-card__head > div { transition: transform var(--hoverSpeedIn); transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); } .case-card[data-state="2"] .case-card__head { opacity: 0; } .case-card[data-state="2"] .case-card__head > div { transition: transform var(--hoverSpeedOut); transform: translate3d(0px, -70px, 0px) scale3d(1, 1, 1) rotateX(45deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); } .case-card[data-state="3"] .case-card__head { transition: none !important; } .case-card-static { display: block; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .case-card-static { font-size: 17rem; } } .case-card-static__preview { width: 100%; position: relative; margin-bottom: 10rem; } .case-card-static__preview::before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 56.25%; } .case-card-static__preview img, .case-card-static__preview video, .case-card-static__preview iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .case-card-static__preview:empty { display: none; } .case-card-static__iframe { position: relative; width: 100%; padding-bottom: 87.66%; height: 0; overflow: hidden; margin-bottom: 10rem; } .case-card-static__iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .case-card-static__title { font-weight: 500; } .case-card-static__subtitle i { opacity: 0.25; } .case-card-static__note { opacity: 0.25; margin-top: 5rem; transition: opacity 0.3s; } .case-card-static__link { display: inline-flex; align-items: center; gap: 4rem; font-size: 19rem; line-height: 1.35; } .case-card-static__link i { color: #B2B2B2; } .case-card-static__link .svg-icon { color: #B2B2B2; opacity: 0; transition: opacity 0.3s; } .case-card-static__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .case-card-static__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .case-card-static__col .case-card-static__title { font-size: 35rem; line-height: 1.14; font-weight: 400; margin-bottom: 30rem; } @media only screen and (hover: hover) { .case-card--mini:hover .case-card__title { opacity: 0; } .case-card--mini:hover .case-card__head { opacity: 1; } a.case-card-static:hover .case-card-static__note { opacity: 1; } .case-card-static__link:hover .svg-icon { opacity: 1; } } @media only screen and (max-width: 1023px) { .cases__list { margin-top: -140rem; } .cases__item { margin-top: 140rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .cases--triple .cases__item:nth-of-type(3n-2) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-right: 16.6666666667%; } .cases--triple .cases__item:nth-of-type(3n-1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .cases--triple .cases__item:nth-of-type(3n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .cases--hexagonal .cases__item:nth-of-type(6n-5) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-right: 0%; } .cases--hexagonal .cases__item:nth-of-type(6n-4) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .cases--hexagonal .cases__item:nth-of-type(6n-3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-right: 0%; } .cases--hexagonal .cases__item:nth-of-type(6n-2) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .cases--hexagonal .cases__item:nth-of-type(6n-1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .cases--hexagonal .cases__item:nth-of-type(6n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .cases--serviсes-page .cases__list { margin-top: -52rem; } .cases--serviсes-page .cases__item { margin-top: 52rem; } .cases--serviсes-page .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .cases--serviсes-page .cases__item:nth-of-type(2n) { margin-left: 16.6666666667%; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .cases--multibrands-page { padding: 40rem 0 140rem; } .cases--multibrands-page .cases__list { margin-top: -70rem; } .cases--multibrands-page .cases__item { margin-top: 70rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .cases--multibrands-page .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .cases--multibrands-page .cases__item:nth-of-type(4n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } } @media only screen and (max-width: 767px) { .cases__list { margin-top: -70rem; } .cases__item { margin-top: 70rem; } .cases--triple .cases__item:nth-of-type(3n-2) { margin-right: 0%; margin-left: 16.6666666667%; } .cases--services-page .cases__list { margin-top: -49rem; } .cases--services-page .cases__item { margin-top: 49rem; } .cases--services-page .case-card-static__subtitle { margin-bottom: 10rem; } .cases--services-page .case-card-static__note { margin-top: 10rem; } .case-card-static__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .case-card-static__col .case-card-static__preview { margin-bottom: 40rem; } } .checkbox { display: inline-flex; align-items: flex-start; justify-content: flex-start; white-space: nowrap; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .checkbox { font-size: 17rem; } } .checkbox { line-height: 25rem; } .checkbox__control { flex-shrink: 0; display: inline-block; position: relative; margin-top: 3rem; } .checkbox__input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; margin: 0; cursor: pointer; } .checkbox__input:checked ~ .checkbox__icon { box-shadow: inset 0 0 0 1px #000; background-color: #000; } .checkbox__input:checked ~ .checkbox__icon::before { opacity: 1; } .checkbox__input:checked ~ .checkbox__icon .svg-icon { opacity: 1; } .checkbox__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #E0E0E0; background-color: #fff; color: #fff; z-index: 1; transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; /* &::before { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; position: absolute; left: 0; top: 0; background-color: #000; opacity: 0; transition: opacity .3s; z-index: -1; } */ } .checkbox__icon .svg-icon { flex-shrink: 0; opacity: 0; transition: opacity 0.3s; } .checkbox__label { display: inline; padding-left: 10px; cursor: pointer; white-space: normal; } .checkbox__label a { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .checkbox--button { position: relative; width: 100%; } .checkbox--button .checkbox__label { display: flex; align-items: center; justify-content: start; border: 1px solid #fff; padding: 20rem; width: 100%; transition: background-color 0.3s, color 0.3s; } .checkbox--button .checkbox__icon { width: 20rem; height: 20rem; flex-shrink: 0; margin-right: 15rem; background-color: transparent !important; box-shadow: none; border-radius: unset; transition: color 0.3s, background-color 0.3s; } .checkbox--button .checkbox__icon .svg-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .checkbox--button .checkbox__icon .svg-icon:first-child { opacity: 1; } .checkbox--button .checkbox__input:checked ~ .checkbox__label { background-color: #fff; color: #000; } .checkbox--button .checkbox__input:checked ~ .checkbox__label .svg-icon:first-child { opacity: 0; } .checkbox--button .checkbox__input:checked ~ .checkbox__label .svg-icon:last-child { opacity: 1; } @media only screen and (hover: hover) { .checkbox__label a:hover { border-color: transparent; } } @media only screen and (max-width: 1023px) { .checkbox { line-height: 22rem; } .checkbox__control { margin-top: 1rem; } } .contacts__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .contacts__wrap { padding-bottom: 155rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .contacts__wrap { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .contacts__wrap { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .contacts__wrap { padding-top: 40rem; } } .contacts__info { margin-bottom: 45rem; } .contacts__info:last-child { margin-bottom: 0; } .contact-infoblock { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .contact-infoblock dt { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .contact-infoblock dt h3 { margin-bottom: 15rem; } .contact-infoblock dd { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .contact-infoblock__link { line-height: 1.3; } .contact-infoblock__link span { border-bottom: 1px solid transparent; transition: border-color 0.3s, opacity 0.3s; } .contact-infoblock__link--underline span { border-color: currentColor; } @media only screen and (hover: hover) { .contact-infoblock__link { /* &--underline { &:hover { span { border-color: transparent; } } } */ } .contact-infoblock__link:hover span { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .contacts__wrap { padding-bottom: 80rem; } .contacts__info { margin-bottom: 40rem; } } @media only screen and (max-width: 767px) { .contacts__wrap { padding-bottom: 70rem; } .contact-infoblock dt, .contact-infoblock dd { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } } /* WARN: API FIX STYLES ->*/ /* .contacts { &__info { &:last-child { .w-inline-block { border-bottom: 1px solid currentColor; } } } } */ .contact-infoblock dd { display: flex; flex-direction: column; align-items: flex-start; } .contact-infoblock dd .w-inline-block { border-bottom: 1px solid currentColor; } .contact-infoblock dd .no-underline-on-pc { border-color: transparent; } .w-inline-block { transition: border-color 0.3s, opacity 0.3s; } @media only screen and (hover: hover) { .contact-infoblock .w-inline-block:hover { border-color: transparent; } } /* WARN: API FIX STYLES <-*/ .cookies { position: fixed; bottom: 20px; left: calc(2 * var(--grid-gap)); right: calc(2 * var(--grid-gap)); max-width: 630rem; opacity: 0; visibility: hidden; z-index: 100; transition: opacity 0.3s, visibility 0.3s; } .cookies.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s; } .cookies__container { color: var(--background-color); background-color: var(--color); padding: 30rem; display: flex; flex-direction: column; align-items: flex-start; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .cookies__container { font-size: 17rem; } } .cookies__text a span { padding-bottom: 2rem; border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .cookies__btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; margin-top: 33rem; transition: opacity 0.3s; } @media only screen and (hover: hover) { .cookies__text a:hover span { border-color: transparent; } .cookies__btn:hover { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .cookies { max-width: 470rem; } } @media only screen and (max-width: 767px) { .cookies { bottom: 10rem; } .cookies__container { padding: 15rem; } } .corpweb__intro { margin-bottom: 44rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .corpweb__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .corpweb__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .corpweb__intro { padding-top: 40rem; } } .corpweb__info { margin-bottom: 160rem; } .corpweb__info .infoblock__item { border-bottom: 1px solid #ccc; } .corpweb__info .infoblock__item:first-child { border-top: 1px solid #ccc; } .corpweb__info .infoblock__numbers { margin-top: 80rem; } .corpweb__info .info-num__list { margin-top: -80rem; } .corpweb__info .info-num__item { margin-top: 80rem; } .corpweb__info .infoblock-card__content { padding: 0 100rem 40rem 0; max-width: 100%; } .corpweb__media .media__wrap { padding-top: 0; } .corpweb__cases, .corpweb__ratings, .corpweb__reviews { margin-bottom: 160rem; } .corpweb__ratings .ratings__item { border-color: #ccc; } .corpweb__ratings .ratings-card__num, .corpweb__ratings .ratings-card__source { color: #ccc; } .corpweb__form .brief__wrap { padding: 40rem 0 100rem; } .corpweb__form .brief__title { margin-bottom: 90rem; } @media only screen and (max-width: 1023px) { .corpweb__info { margin-bottom: 120rem; } .corpweb__info .infoblock__numbers { margin-top: 60rem; } .corpweb__info .info-num__list { margin-top: -60rem; } .corpweb__info .info-num__item { margin-top: 60rem; } .corpweb__cases, .corpweb__ratings, .corpweb__reviews { margin-bottom: 120rem; } } @media only screen and (max-width: 767px) { .corpweb__info { margin-bottom: 80rem; } .corpweb__info .infoblock__title { font-size: 30rem; line-height: 1.17; margin-bottom: 18rem; } .corpweb__info .infoblock__list { margin-top: 34rem; } .corpweb__info .infoblock__numbers { margin-top: 40rem; } .corpweb__info .infoblock-card__content { padding-right: 40rem; } .corpweb__info .info-num__list { margin-top: -40rem; } .corpweb__info .info-num__item { margin-top: 40rem; } .corpweb__info .info-num__title { font-size: 30rem; } .corpweb__cases, .corpweb__ratings, .corpweb__reviews { margin-bottom: 80rem; } .corpweb__form .brief__title { margin-bottom: 50rem; } .corpweb__form .brief__form { margin-top: 0; } } .digital { --grid-gap: 12rem; --min-height-header: 72rem; font-size: 16rem; line-height: 1.375; font-weight: 400; letter-spacing: 0.03em; padding-top: var(--min-height-header); } .digital__section { margin-bottom: 160rem; } .digital .swiper { padding-top: 64rem; margin-top: -64rem; } .digital .swiper-slide { height: auto; } .digital .swiper-arrows { display: flex; gap: 4rem; position: absolute; top: 0; right: 0; } .digital .swiper-btn-next, .digital .swiper-btn-prev { width: 40rem; height: 40rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(224, 224, 224, 0.64); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 0.3s, opacity 0.3s; } .digital .swiper-button-disabled { pointer-events: none; opacity: 0.7; } .digital .swiper-button-lock { opacity: 0; } .digital-button { border: none; display: inline-flex; align-items: center; justify-content: center; padding: 8rem 24rem; border-radius: 48rem; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; white-space: nowrap; background-color: rgba(224, 224, 224, 0.64); backdrop-filter: blur(12px); background-image: none; transition: background-color 0.3s; cursor: pointer; } .digital-button.disabled { opacity: 0.4; pointer-events: none; } .digital-link { white-space: nowrap; transition: opacity 0.3s; cursor: pointer; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-cube { height: 24rem; perspective: 1000rem; position: relative; display: flex; justify-content: center; align-items: center; } .digital-cube__rotator { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.3s; } .digital-cube__line { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; background-color: #fff; } .digital-cube__line--1 { transform: rotateX(0deg) translateZ(12rem); } .digital-cube__line--2 { transform: rotateX(-90deg) translateZ(12rem); } .digital-cube__line--3 { transform: rotateX(-180deg) translateZ(12rem); } .digital-cube__line--4 { transform: rotateX(90deg) translateZ(12rem); } .digital-cube__line br { display: none; } .digital-header { --grid-gap: 12rem; position: fixed; top: 0; left: 0; width: 100%; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%); z-index: 90; transition: transform 0.3s; font-size: 16rem; line-height: 1.375; } .digital-header.is-offscreen { transform: translateY(-100%); } .digital-header__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-header__wrap { padding: 16rem 0; display: flex; align-items: center; } .digital-header__logo { position: relative; display: flex; transition: opacity 0.3s; z-index: 2; margin-right: 24rem; } .digital-header__nav { margin-left: auto; } .digital-header__burger { display: none; } .digital-nav__list { display: flex; align-items: center; gap: 24rem; } .digital-nav__link { transition: opacity 0.3s, background-color 0.3s; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-intro__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-intro__wrap { padding-top: 32rem; } .digital-intro__main { position: relative; padding: 136rem 0 288rem; text-align: center; } .digital-intro__subtitle { margin-bottom: 16rem; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-intro__title { max-width: 945rem; margin: 0 auto; font-size: 60rem; line-height: 1; letter-spacing: -0.03em; } .digital-intro__images { perspective: 1000rem; position: absolute; left: 0; top: 0; height: 100%; margin: 0 -24rem; width: calc(100% + 48rem); overflow: hidden; pointer-events: none; } .digital-intro__img { position: absolute; width: 96rem; aspect-ratio: 1; top: 50%; left: 50%; margin-top: -48rem; margin-left: -48rem; transform-style: preserve-3d; transition: transform 0.6s; } .digital-intro__img:nth-child(2) { transform: translate(-34.1vw, -244rem); } .digital-intro__img:nth-child(5) { transform: translate(15vw, 116rem); } .digital-intro__img:nth-child(3) { transform: translate(37.2vw, -221rem); } .digital-intro__img:nth-child(6) { transform: translate(-18.6vw, 212rem); } .digital-intro__img:nth-child(1) { transform: translate(-49.5vw, 80rem); } .digital-intro__img:nth-child(4) { transform: translate(41vw, 245rem); } .digital-intro__list { margin-top: -48rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-intro__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-intro[data-state="1"] .digital-intro__img:nth-child(5) { transform: translate(-34.1vw, -244rem); } .digital-intro[data-state="1"] .digital-intro__img:nth-child(2) { transform: translate(15vw, 116rem); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(5) { transform: translate(-34.1vw, -244rem); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(2) { transform: translate(15vw, 116rem); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(6) { transform: translate(37.2vw, -221rem); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(3) { transform: translate(-18.6vw, 212rem); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(5) { transform: translate(-34.1vw, -244rem); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(2) { transform: translate(15vw, 116rem); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(6) { transform: translate(37.2vw, -221rem); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(3) { transform: translate(-18.6vw, 212rem); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(4) { transform: translate(-49.5vw, 80rem); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(1) { transform: translate(41vw, 245rem); } .digital-intro-card { height: 100%; padding: 24rem; background-color: #F2F2F2; } .digital-intro-card__title { margin-bottom: 160rem; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-intro-card__content { font-size: 32rem; line-height: 1.25; } .digital-intro-card__link { display: inline-block; transition: opacity 0.3s; margin-right: 5rem; } .digital-intro-card__link:not([href]), .digital-intro-card__link[href=""] { position: relative; cursor: pointer; } .digital-intro-card__link:not([href])::before, .digital-intro-card__link[href=""]::before { content: "Coming soon"; display: block; padding: 2rem 16rem; border-radius: 48rem; background: rgba(215, 215, 215, 0.95); /* background-color: rgba(224, 224, 224, 0.64); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); will-change: backdrop-filter; */ white-space: nowrap; position: absolute; top: 100%; left: 50%; margin-left: -70rem; margin-top: 4rem; animation: shaking 0.2s linear infinite 1s forwards; pointer-events: none; opacity: 0; z-index: 3; transition: opacity 0.3s; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-intro-card__link:not([href]):hover, .digital-intro-card__link[href=""]:hover { z-index: 2; } .digital-intro-card__link:not([href]):hover::before, .digital-intro-card__link[href=""]:hover::before { opacity: 1; } .digital-projects { scroll-margin-top: var(--min-height-header); } .digital-projects__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-projects__wrap { position: relative; } .digital-projects__top { margin-bottom: 24rem; padding-right: 160rem; display: flex; align-items: center; min-height: 40rem; } .digital-projects__controls { display: flex; gap: 24rem; align-items: center; transition: opacity 0.3s; margin-right: auto; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-projects__list { margin-bottom: -80rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-projects__item { margin-bottom: 80rem; } .digital-projects__item:nth-child(1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 58.3333333333%; } .digital-projects__item:nth-child(2) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-left: 8.3333333333%; } .digital-projects__item:nth-child(3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 75%; margin-left: 25%; } .digital-projects__button { position: absolute; top: 0; right: 0; } .digital-projects-card { position: relative; display: block; } .digital-projects-card__tags { position: absolute; top: 8rem; left: 8rem; right: 8rem; display: flex; gap: 4rem; z-index: 1; } .digital-projects-card__tag { padding: 2rem 12rem; border-radius: 48rem; background-color: rgba(0, 0, 0, 0.08); backdrop-filter: blur(8px); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .digital-projects-card__media { aspect-ratio: 16/9; margin-bottom: 16rem; } .digital-projects-card__note { color: rgba(0, 0, 0, 0.4); transition: color 0.3s; } .digital-services { scroll-margin-top: var(--min-height-header); } .digital-services__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-services__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-services__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-services__nav-link { font-size: 32rem; line-height: 1.25; color: rgba(0, 0, 0, 0.4); position: relative; display: inline-flex; align-items: center; justify-content: flex-start; transition: opacity 0.3s; } .digital-services__nav-link::after { content: ""; display: block; width: 6rem; height: 6rem; border-radius: 50%; background-color: currentColor; margin-left: 12rem; margin-top: 2rem; opacity: 0; transition: opacity 0.3s; } .digital-services__nav-link.is-active { color: #000; } .digital-services__nav-link.is-active::after { opacity: 1; } .digital-services__item { display: none; } .digital-services__item.is-active { display: block; } .digital-services-card { padding-left: 16rem; border-left: 1px solid currentColor; } .digital-services-card__top { display: flex; align-items: center; justify-content: space-between; gap: 5rem; display: none; } .digital-services-card__title { font-size: 32rem; line-height: 1.25; } .digital-services-card__content { display: flex; flex-direction: column; align-items: flex-start; } .digital-services-card__subtitle { font-size: 32rem; line-height: 1.25; } .digital-services-card__subtitle i { color: rgba(0, 0, 0, 0.4); } .digital-services-card__button { margin-top: 16rem; } .digital-services-card__list { margin-top: 160rem; display: flex; gap: 24rem; width: 100%; order: 1; } .digital-services-card__item { width: 30%; } .digital-services-card__item:not(:first-child) { flex-grow: 1; } .digital-services-card__label { color: rgba(0, 0, 0, 0.4); } .digital-reviews__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-reviews__title { margin-bottom: 24rem; font-size: 32rem; line-height: 1.25; } .digital-reviews__list { margin-top: -24rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-reviews__item { margin-top: 24rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-reviews-card { display: flex; padding: 24rem; height: 100%; background-color: #F2F2F2; min-height: 400rem; } .digital-reviews-card__main { width: 50%; } .digital-reviews-card__content { width: 50%; padding-left: 16rem; border-left: 1px solid currentColor; } .digital-reviews-card__photo { width: 96rem; aspect-ratio: 1; border-radius: 50%; line-height: 0; margin-bottom: 16rem; overflow: hidden; } .digital-reviews-card__position { color: rgba(0, 0, 0, 0.4); max-width: 220rem; } .digital-ratings__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-ratings__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-ratings__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-ratings__item { border-top: 1px solid currentColor; padding: 16rem 0; } .digital-ratings__item:last-child { border-bottom: 1px solid currentColor; } .digital-ratings__title { font-size: 32rem; line-height: 1.25; } .digital-ratings-card__wrap { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-ratings-card__side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 16.6666666667%; } .digital-ratings-card__main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .digital-ratings-card__note { color: rgba(0, 0, 0, 0.4); } .digital-awards__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-awards__content { margin-top: 16rem; font-size: 60rem; line-height: 1; letter-spacing: -0.03em; } .digital-awards__content i { color: rgba(0, 0, 0, 0.4); } .digital-awards__title { font-size: 16rem; line-height: 1.5; } .digital-ecosystem { position: relative; color: #fff; } .digital-ecosystem__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .digital-ecosystem__bg video, .digital-ecosystem__bg img { width: 100%; height: 100%; object-fit: cover; } .digital-ecosystem__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-ecosystem__list { display: flex; flex-flow: row wrap; padding: 40rem 0; } .digital-ecosystem__item { width: 50%; } .digital-ecosystem__item:nth-child(1) .digital-ecosystem-card { justify-content: center; align-items: center; border-color: transparent; } .digital-ecosystem__item:nth-child(1) .digital-ecosystem-card__title { display: none; } .digital-ecosystem__item:nth-child(1) .digital-ecosystem-card__text { text-align: center; max-width: 200rem; } .digital-ecosystem__item:nth-child(2) { order: -1; } .digital-ecosystem__item:nth-child(3) .d-ecosystem-card, .digital-ecosystem__item:nth-child(4) .d-ecosystem-card { margin-top: -1rem; } .digital-ecosystem__item:nth-child(4) .digital-ecosystem-card { border-left-color: transparent; } .digital-ecosystem-card { height: 100%; padding: 24rem; min-height: 384rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid currentColor; } .digital-ecosystem-card__title { margin-bottom: 24rem; font-size: 16rem; line-height: 1.5; } .digital-media { scroll-margin-top: var(--min-height-header); } .digital-media__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-media__title { margin-bottom: 24rem; padding-right: 90rem; font-size: 32rem; line-height: 1.25; } .digital-media__bottom { margin-top: 80rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-media__ad { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-left: 50%; } .digital-media__subtitle { margin-bottom: 24rem; } .digital-media__item:not(:last-child) { margin-bottom: 8rem; } .digital-media-card { padding-left: 16rem; border-left: 1px solid currentColor; height: 100%; display: flex; flex-direction: column; align-items: flex-start; } .digital-media-card__image { margin-bottom: 16rem; } .digital-media-card__note { color: rgba(0, 0, 0, 0.4); transition: color 0.3s; } .digital-media-card__title { margin-bottom: 80rem; } .digital-media-card__source { display: block; margin-top: auto; border-bottom: 1px solid transparent; transition: border-color 0.3s; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-media-ad { padding: 24rem; background-color: #F2F2F2; display: flex; align-items: center; gap: 12rem; transition: background-color 0.3s; } .digital-media-ad__main { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; gap: 12rem; } .digital-media-ad__arrow { flex-shrink: 0; opacity: 0.4; } .digital-media-ad__subtitle { /* color: rgba(0, 0, 0, .4); */ opacity: 0.4; } .digital-request { padding-top: 72rem; margin-top: -72rem; } .digital-request__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-request__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-request__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-request__title { margin-bottom: 32rem; font-size: 32rem; line-height: 1.25; } .digital-request__form { margin-top: 64rem; } .digital-footer { --grid-gap: 12rem; font-size: 16rem; line-height: 1.375; font-weight: 400; letter-spacing: 0.03em; background-color: #000; color: #fff; padding: 24rem 0; } .digital-footer__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .digital-footer__wrap { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-footer__main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-left: 50%; } .digital-footer__section:not(:last-child) { margin-bottom: 160rem; } .digital-footer__form-title { color: rgba(255, 255, 255, 0.4); margin-bottom: 40rem; } .digital-footer__row { margin-top: -80rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-footer__col { margin-top: 80rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-footer__subtitle { margin-bottom: 16rem; color: rgba(255, 255, 255, 0.4); } .digital-footer__link { transition: opacity 0.3s; } .digital-footer__copy { color: rgba(255, 255, 255, 0.4); font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .digital-project-info { font-size: 16rem; line-height: 1.375; } .digital-project-info__preview { aspect-ratio: 16/9; margin-bottom: 24rem; } .digital-project-info__preview video, .digital-project-info__preview img { width: 100%; height: 100%; object-fit: cover; } .digital-project-info__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-project-info__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .digital-project-info__col:first-child .digital-project-info-card__title { display: none; } .digital-project-info__col:first-child .digital-project-info-card__box { margin-bottom: 16rem; flex-direction: column; } .digital-project-info__col:first-child .digital-project-info-card__box:last-child { margin-bottom: 0; } .digital-project-info__col:first-child .digital-project-info-card__value { color: rgba(0, 0, 0, 0.4); } .digital-project-info__box { height: 100%; border-left: 1px solid currentColor; padding-left: 16rem; } .digital-project-info__subtitle { color: rgba(0, 0, 0, 0.4); } .digital-project-info__top { margin-bottom: 80rem; } .digital-project-info__descr--mob { display: none; } .digital-project-info__button { margin-top: 24rem; width: 100%; padding: 24rem; } .digital-project-info-card { margin-bottom: 16rem; } .digital-project-info-card:last-child { margin-bottom: 0; } .digital-project-info-card__box { display: flex; justify-content: space-between; } .digital-project-info-card__title { color: rgba(0, 0, 0, 0.4); } .digital-projects-all__list { padding-top: 80rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-projects-all__item { pointer-events: none; position: relative; transition: transform 0.3s; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .digital-projects-all__item:nth-child(1) { transform: translate(82%, -34%); z-index: 1; } .digital-projects-all__item:nth-child(2) { transform: translateX(2%); z-index: 3; } .digital-projects-all__item:nth-child(3) { transform: translate(-68%, -62%); z-index: 2; } .digital-projects-all__media { aspect-ratio: 16/9; } .digital-projects-all__media img, .digital-projects-all__media video { width: 100%; height: 100%; object-fit: cover; } .digital-projects-all__control { width: 100%; padding: 24rem; margin-top: 24rem; } @media (hover: hover) { .digital-header__logo:hover { opacity: 0.7; } .digital-button:hover, .swiper-btn-next:hover, .swiper-btn-prev:hover { opacity: 1; background-color: rgba(194, 194, 194, 0.64); } .digital-link:hover { opacity: 0.7; } .digital-intro-card__content:hover .digital-intro-card__link:not(:hover) { opacity: 0.4; } .digital-intro-card__content:hover .digital-intro-card__link:not([href]):hover::before, .digital-intro-card__content:hover .digital-intro-card__link[href=""]:hover::before { opacity: 1; } .digital-projects-card:hover .digital-projects-card__note { color: #000; } .digital-services__nav-link:hover { opacity: 0.7; } .digital-media-card:hover .digital-media-card__note { color: #000; } .digital-media-card:hover .digital-media-card__source { border-color: currentColor; } .digital-media-ad:hover { background-color: rgba(194, 194, 194, 0.64); } .digital-footer__link:hover { opacity: 0.7; } .digital-projects-all:hover .digital-projects-all__item:nth-child(n) { transform: translate(0, 0); } } @media only screen and (max-width: 1023px) { .digital { --grid-gap: 8rem; --min-height-header: 60rem; } .digital__section { margin-bottom: 140rem; } .digital-header { --grid-gap: 8rem; } .digital-header__wrap { padding: 10rem 0; } .digital-header__logo svg { width: 95rem; height: 30rem; } .digital-header__nav { background-color: #fff; height: 100%; margin: 0; min-height: 100vh; padding: 100rem calc(2 * var(--grid-gap)) 32rem; position: fixed; right: 100%; top: 0; transform: translateX(0); transition: transform 0.3s; width: 100%; z-index: 1; } .digital-header__burger { margin-left: auto; display: block; width: 40rem; height: 40rem; flex-shrink: 0; position: relative; z-index: 2; } .digital-header__burger span { position: absolute; left: 0; display: block; height: 2rem; width: 40rem; background-color: #000; transition: top 0.3s 0.3s, transform 0.3s; transform-origin: center; pointer-events: none; } .digital-header__burger span:nth-of-type(1) { top: calc(50% - 9rem); } .digital-header__burger span:nth-of-type(2) { top: calc(50% + 7rem); } .digital-nav { height: 100%; overflow-y: auto; } .digital-nav__list { flex-direction: column; gap: 0; align-items: flex-start; height: 100%; } .digital-nav__item { padding: 8rem 0; } .digital-nav__item:last-child { padding: 0; width: 100%; margin-top: auto; } .digital-nav__item:last-child .digital-button { width: 100%; padding: 24rem; } .digital-nav__item .digital-link { font-size: 32rem; } .digital-intro__wrap { padding: 0; } .digital-intro__images { margin: 0 calc(-2 * var(--grid-gap)); width: calc(100% + 4 * var(--grid-gap)); } .digital-intro__img { width: 100rem; height: 100rem; margin-left: -50rem; margin-top: -50rem; } .digital-intro-card { padding: 16rem; } .digital-intro-card__title { margin-bottom: 60rem; } .digital-intro-card__content { font-size: 16rem; line-height: 22rem; } .digital-intro-card__link span { border-bottom: 1px solid #E0E0E0; } .digital-reviews__title { margin-bottom: 32rem; } .digital-reviews .swiper-arrows { display: none; } .digital-reviews-card { padding: 16rem; flex-direction: column; } .digital-reviews-card__main { width: 100%; } .digital-reviews-card__content { width: 100%; padding-left: 0; border-left: none; margin-top: 24rem; } .digital-reviews-card__photo { margin-bottom: 24rem; } .digital-reviews-card__name { font-size: 17rem; line-height: 22rem; } .digital-request__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .digital-request__form { margin-top: 0; } .digital-footer { --grid-gap: 8rem; padding: 15rem 0 25rem; } .digital-footer__main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .digital-footer__section:not(:last-child) { margin-bottom: 80rem; } .digital-project-info__preview { margin-bottom: 16rem; } .digital-projects-all__list { position: relative; aspect-ratio: 2/1; padding-top: 0; overflow: hidden; margin: 0; } .digital-projects-all__item { position: absolute; flex-shrink: 0; padding: 0; width: 50%; } .digital-projects-all__item:nth-child(1) { top: 0; left: 0; transform: translate(28%, 40%); } .digital-projects-all__item:nth-child(2) { bottom: 0; left: 50%; transform: translate(-50%, 0); } .digital-projects-all__item:nth-child(3) { top: 0; right: 0; transform: translate(-28%, 0%); } } @media only screen and (max-width: 767px) { .digital-cube { height: 36rem; } .digital-cube__line br { display: block; } .digital-intro__main { min-height: calc(100vh - 60rem); padding: 21vh 0 270rem; } .digital-intro__subtitle { line-height: 1; min-height: 36rem; } .digital-intro__title { max-width: 343rem; margin: 0 auto; font-size: 32rem; line-height: 1.1; letter-spacing: 0; } .digital-intro__img:nth-child(2) { transform: translate(-46vw, -34vh); } .digital-intro__img:nth-child(5) { transform: translate(36.5vw, 13vh); } .digital-intro__img:nth-child(3) { transform: translate(37.2vw, -33vh); } .digital-intro__img:nth-child(6) { transform: translate(-32vw, 30vh); } .digital-intro__img:nth-child(1) { transform: translate(-55vw, 9vh); } .digital-intro__img:nth-child(4) { transform: translate(37.2vw, 37vh); } .digital-intro__list { margin-top: 0; } .digital-intro__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .digital-intro__item:last-child { margin-top: 24rem; } .digital-intro[data-state="1"] .digital-intro__img:nth-child(5) { transform: translate(-46vw, -34vh); } .digital-intro[data-state="1"] .digital-intro__img:nth-child(2) { transform: translate(36.5vw, 13vh); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(5) { transform: translate(-46vw, -34vh); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(2) { transform: translate(36.5vw, 13vh); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(6) { transform: translate(37.2vw, -33vh); } .digital-intro[data-state="2"] .digital-intro__img:nth-child(3) { transform: translate(-32vw, 30vh); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(5) { transform: translate(-46vw, -34vh); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(2) { transform: translate(36.5vw, 13vh); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(6) { transform: translate(37.2vw, -33vh); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(3) { transform: translate(-32vw, 30vh); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(4) { transform: translate(-55vw, 9vh); } .digital-intro[data-state="3"] .digital-intro__img:nth-child(1) { transform: translate(37.2vw, 37vh); } .digital-projects__top { padding-right: 0; min-height: 24rem; margin-bottom: 32rem; position: relative; } .digital-projects__top::before { content: ""; display: block; width: 22rem; height: 22rem; position: absolute; top: 50%; right: calc(-2 * var(--grid-gap)); transform: translateY(-50%); background-image: linear-gradient(270deg, #FFF 70.45%, rgba(255, 255, 255, 0) 100%); } .digital-projects__button { position: static; margin-top: 80rem; width: 100%; } .digital-projects__controls { overflow-x: auto; padding: 0 calc(2 * var(--grid-gap)); margin-left: calc(-2 * var(--grid-gap)); margin-right: calc(-2 * var(--grid-gap)); width: calc(100% + 4 * var(--grid-gap)); } .digital-projects__controls { scrollbar-width: thin; scrollbar-color: transparent transparent; } .digital-projects__controls::-webkit-scrollbar { width: 0rem; height: 0rem; border-radius: 0rem; } .digital-projects__controls::-webkit-scrollbar-track { background: transparent; } .digital-projects__controls::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0rem; } .digital-projects__item:nth-of-type(n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .digital-projects-card__tags { position: static; margin-top: 12rem; overflow-x: auto; padding: 0 calc(2 * var(--grid-gap)); margin-left: calc(-2 * var(--grid-gap)); margin-right: calc(-2 * var(--grid-gap)); width: calc(100% + 4 * var(--grid-gap)); } .digital-projects-card__tags { scrollbar-width: thin; scrollbar-color: transparent transparent; } .digital-projects-card__tags::-webkit-scrollbar { width: 0rem; height: 0rem; border-radius: 0rem; } .digital-projects-card__tags::-webkit-scrollbar-track { background: transparent; } .digital-projects-card__tags::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0rem; } .digital-projects-card__tag { text-overflow: unset; overflow: unset; background-color: #F2F2F2; color: #999; } .digital-services__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .digital-services__col--side { display: none; } .digital-services__item { display: block; } .digital-services-card { padding: 12rem 0 16rem; border-left: 0; border-bottom: 1px solid rgba(224, 224, 224, 0.64); } .digital-services-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8rem; } .digital-services-card__arrow { flex-shrink: 0; height: 21rem; width: 21rem; transition: transform 0.3s; } .digital-services-card__content { padding: 24rem 0 16rem; } .digital-services-card__subtitle { font-size: 16rem; line-height: 1.375; letter-spacing: 0.03em; } .digital-services-card__subtitle i { color: currentColor; } .digital-services-card__list { margin-top: 24rem; flex-direction: column; gap: 4rem; order: 0; } .digital-services-card__item { width: 100%; display: flex; gap: 4rem; } .digital-services-card__label { min-width: 130rem; } .digital-services-card__button { margin-top: 24rem; } .digital-services-card__drop { overflow: hidden; height: 0; opacity: 0; transition: height 0.3s, opacity 0.3s; } .digital-services-card.is-open .digital-services-card__arrow { transform: scale(1, -1); } .digital-services-card.is-open .digital-services-card__drop { opacity: 1; overflow: visible; transition: opacity 0.2s, height 0.3s, overflow 0s 0.3s; height: auto; /* TODO: удалить после подключения JS */ } .digital-reviews .swiper { padding-left: calc(2 * var(--grid-gap)); padding-right: calc(2 * var(--grid-gap)); margin-left: calc(-2 * var(--grid-gap)); margin-right: calc(-2 * var(--grid-gap)); width: calc(100% + 4 * var(--grid-gap)); } .digital-ratings__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .digital-ratings__title { font-size: 32rem; line-height: 1.1; margin-bottom: 32rem; } .digital-ratings-card__side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .digital-ratings-card__main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .digital-ratings-card__note { color: rgba(0, 0, 0, 0.4); } .digital-awards__content { font-size: 32rem; line-height: 1.1; letter-spacing: 0; } .digital-ecosystem { position: relative; } .digital-ecosystem__bg { position: sticky; top: 0; height: 100vh; } .digital-ecosystem__container { margin-top: -100vh; } .digital-ecosystem__list { padding: 100rem 0; } .digital-ecosystem__item { width: 100%; } .digital-ecosystem__item:nth-child(1) .digital-ecosystem-card__text { margin-bottom: 80rem; } .digital-ecosystem__item:nth-child(2) { order: 0; } .digital-ecosystem__item:nth-child(3) .digital-ecosystem-card, .digital-ecosystem__item:nth-child(4) .digital-ecosystem-card { margin-top: 0; border-top: none; } .digital-ecosystem__item:nth-child(4) .digital-ecosystem-card { border-left-color: currentColor; } .digital-ecosystem-card { min-height: unset; } .digital-ecosystem-card__title { margin-bottom: 80rem; } .digital-media__title { margin-bottom: 43rem; } .digital-media__slider .swiper { padding-left: calc(2 * var(--grid-gap)); padding-right: calc(2 * var(--grid-gap)); margin-left: calc(-2 * var(--grid-gap)); margin-right: calc(-2 * var(--grid-gap)); width: calc(100% + 4 * var(--grid-gap)); } .digital-media__slider .swiper-arrows { display: none; } .digital-media__ad { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .digital-media-ad { padding: 12rem calc(2 * var(--grid-gap)); } .digital-media-ad__main { gap: 0; flex-direction: column; align-items: flex-start; } .digital-project-info__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .digital-project-info__col:first-child .digital-project-info-card__title { display: block; } .digital-project-info__col:first-child .digital-project-info-card__box { margin-bottom: 4rem; } .digital-project-info__col:last-child { margin-top: 32rem; } .digital-project-info__col:last-child .digital-project-info__top { display: none; } .digital-project-info__box { padding-left: 0; border-left: none; } .digital-project-info__top { margin-bottom: 32rem; } .digital-project-info__descr { margin-top: 16rem; } .digital-project-info__descr--mob { display: block; } .digital-project-info__button { margin-top: 40rem; } .digital-project-info-card { margin-bottom: 32rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .digital-project-info-card__title { display: block; color: #000; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .digital-project-info-card__content { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .digital-project-info-card__box { flex-direction: column; } .digital-project-info-card__value { color: rgba(0, 0, 0, 0.4); } } @keyframes shaking { 0% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 100% { transform: rotate(-2deg); } } @keyframes rotateLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ecom__intro { padding-top: 120rem; } @media only screen and (max-width: 1440px) { .ecom__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .ecom__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .ecom__intro { padding-top: 40rem; } } .ecom__cases { padding: 100rem 0 160rem; margin-bottom: 160rem; } .ecom__info { margin-bottom: 160rem; } .ecom__info .infoblock__item { border-bottom: 1px solid #000; } .ecom__info .infoblock__item:first-child { border-top: 1px solid #000; } .ecom__info .infoblock__numbers { margin-top: 80rem; } .ecom__info .infoblock-card__top::before, .ecom__info .infoblock-card__top::after { display: none; } .ecom__info .infoblock-card__top .svg-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: opacity 0.3s; } .ecom__info .infoblock-card__content { max-width: 90%; padding-left: 0; } .ecom__info .infoblock-card.is-open .infoblock-card__top .svg-icon { opacity: 0; } .ecom__info .info-num__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 25%; } .ecom__info .info-num__title { font-size: 55rem; line-height: 1.36; } .ecom__info .info-num__text { font-size: 20rem; line-height: 1.25; } .ecom__media { margin-bottom: 160rem; } .ecom__media .media__wrap { padding: 0; } .ecom__form .brief__wrap { padding: 40rem 0 100rem; } .ecom__form .brief__title { margin-bottom: 90rem; } .ecom-cases__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .ecom-cases__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .ecom-cases__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .ecom-cases__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .ecom-cases__item { margin-bottom: 80rem; padding-bottom: 45rem; border-bottom: 1px solid currentColor; } .ecom-cases__item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .ecom-cases__link { font-size: 19rem; line-height: 1.3; } .ecom-cases-card { font-size: 35rem; line-height: 1.3; } .ecom-cases-card__title { margin-bottom: 25rem; } .ecom-cases-card__title span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .ecom-cases-card__subtitle { margin-bottom: 25rem; } .ecom-cases-card__info { margin-top: 45rem; } .ecom-cases-card__list { margin-top: -20rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .ecom-cases-card__item { max-width: 344rem; margin-top: 20rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-right: 16.6666666667%; } .ecom-cases-card__num { display: flex; align-items: center; justify-content: flex-start; } .ecom-cases-card__num span { font-weight: 700; line-height: 1; margin-left: 5rem; } .ecom-cases-card__text { margin-top: 5rem; font-size: 19rem; line-height: 1.3; } .ecom-cases-card__item-links { position: relative; padding-left: 40rem; margin-bottom: 5rem; font-size: 19rem; line-height: 1.3; } .ecom-cases-card__item-links:last-child { margin-bottom: 0; } .ecom-cases-card__item-links::before { content: ""; display: block; position: absolute; left: 0; top: 12rem; margin-top: -1px; height: 1px; width: 24rem; background-color: currentColor; } .ecom-cases-card__link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } @media only screen and (hover: hover) { .ecom-cases-card__main:hover .ecom-cases-card__title span { border-color: currentColor; } .ecom-cases-card__link:hover span { border-color: currentColor; } } @media only screen and (max-width: 1365px) { .ecom-cases-card__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-right: 0%; } } @media only screen and (max-width: 1023px) { .ecom__info { margin-bottom: 120rem; } .ecom__info .infoblock__numbers { margin-top: 60rem; } .ecom__info .info-num__list { margin-top: -60rem; } .ecom__info .info-num__item { margin-top: 60rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .ecom__cases { padding: 40rem 0 80rem; margin-bottom: 40rem; } .ecom__media { margin-bottom: 120rem; } .ecom-cases__col--side, .ecom-cases__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .ecom-cases__title { font-size: 35rem; } .ecom-cases__link { margin-bottom: 24rem; } } @media only screen and (max-width: 767px) { .ecom__info { margin-bottom: 80rem; } .ecom__info .infoblock__title { /* font-size: 30rem; line-height: 1.17; */ margin-bottom: 18rem; } .ecom__info .infoblock__numbers { margin-top: 40rem; } .ecom__info .infoblock-card__top .svg-icon { width: 20rem; height: 20rem; } .ecom__info .infoblock-card__content { padding-top: 0; } .ecom__info .info-num__list { margin-top: -40rem; } .ecom__info .info-num__item { margin-top: 40rem; } .ecom__info .info-num__title { font-size: 35rem; } .ecom__info .info-num__text { font-size: 17rem; } .ecom__info .infoblock-methodology__subtitle, .ecom__info .infoblock-methodology__link { font-size: 30rem; line-height: 1.17; } .ecom__info .technology__title { font-size: 30rem; line-height: 1.17; } .ecom__media { margin-bottom: 40rem; } .ecom__form .brief__title { margin-bottom: 50rem; } .ecom__form .brief__form { margin-top: 0; } .ecom-cases__title { font-size: 17rem; line-height: 1.3; } .ecom-cases__link { font-size: 25rem; } .ecom-cases-card__title { font-size: 35rem; } .ecom-cases-card__subtitle { font-size: 17rem; line-height: 1.3; } } .error { display: flex; align-items: center; justify-content: center; } .expertise__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .expertise__title { margin-bottom: 70rem; } .expertise__list { display: flex; flex-flow: row wrap; margin-top: -35rem; } .expertise__item { width: 25%; padding-left: 30rem; border-left: 1px solid rgba(255, 255, 255, 0.4); margin-top: 35rem; min-width: 300rem; } .expertise__subtitle { font-size: 90rem; line-height: 1; letter-spacing: -0.02em; } .expertise__text { font-size: 19rem; line-height: 1.2; margin-top: 6rem; } @media only screen and (max-width: 1023px) { .expertise__item { width: 50%; } } @media only screen and (max-width: 767px) { .expertise__title { margin-bottom: 30rem; } .expertise__item { width: 100%; padding-left: 20rem; } .expertise__text { font-size: 17rem; line-height: 1.3; } } .footer { overflow: hidden; background-color: var(--background-color); font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .footer { font-size: 17rem; } } .footer__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .footer__wrap { padding: 45rem 0; } .footer__main { justify-content: space-between; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .footer__form { max-width: 469rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 41.6666666667%; } .footer__form .form--subscribe { background-color: rgba(0, 0, 0, 0.071); } .footer__form .form--subscribe input:-webkit-autofill, .footer__form .form--subscribe input:-webkit-autofill:hover, .footer__form .form--subscribe input:-webkit-autofill:focus, .footer__form .form--subscribe input:-webkit-autofill:active { color: #000 !important; -webkit-text-fill-color: #000 !important; } .footer__nav { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 58.3333333333%; } .footer__subtitle { margin-bottom: 25rem; } .footer__list { margin-top: 20rem; row-gap: 105rem; justify-content: flex-end; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .footer__block { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 28.5714285714%; } .footer__block:nth-of-type(1), .footer__block:nth-of-type(4) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 35.7142857143%; margin-left: 7.1428571429%; } .footer__block:nth-of-type(1) { order: 4; } .footer__block:nth-of-type(2) { order: 3; } .footer__block:nth-of-type(3) { order: 6; } .footer__block:nth-of-type(4) { order: 1; } .footer__block:nth-of-type(5) { order: 2; } .footer__block:nth-of-type(6) { order: 5; } .footer__bottom { justify-content: space-between; color: var(--grey); margin-top: 120rem; margin-bottom: 35rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .footer__copy { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .footer__copy:first-child { order: 1; text-align: right; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .footer__copy br { display: none; } .footer__link { display: inline-flex; align-items: center; justify-content: flex-start; white-space: nowrap; } .footer__link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .footer__link .svg-icon { margin-left: 6rem; } .footer.inverse .footer__form .form--subscribe { background-color: rgba(255, 255, 255, 0.0705882353); } .footer.inverse .footer__form .form--subscribe input:-webkit-autofill, .footer.inverse .footer__form .form--subscribe input:-webkit-autofill:hover, .footer.inverse .footer__form .form--subscribe input:-webkit-autofill:focus, .footer.inverse .footer__form .form--subscribe input:-webkit-autofill:active { color: #fff !important; -webkit-text-fill-color: #fff !important; } @media only screen and (hover: hover) { .footer__link:hover span { border-color: currentColor; } } @media only screen and (max-width: 1440px) { .footer__block:nth-of-type(1), .footer__block:nth-of-type(4) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 42.8571428571%; margin-left: 0%; } .footer__copy:first-child { text-align: left; } } @media only screen and (max-width: 1199px) { .footer__main { margin: 0; } .footer__form { width: 100%; max-width: 100%; padding: 0; } .footer__nav { width: 100%; padding: 0; } .footer__list { margin: 0; justify-content: flex-start; row-gap: 0; } .footer__block { display: flex; } .footer__block:nth-of-type(n) { order: 0; padding: 0; width: 100%; } .footer__block:nth-of-type(n):not(:empty) { margin-top: 45rem; } .footer__subtitle { width: 50%; padding-right: var(--grid-gap); margin-bottom: 0; } .footer__menu { width: 50%; padding-left: var(--grid-gap); } .footer__bottom { margin-top: 45px; flex-direction: column; } .footer__copy { width: 100%; } .footer__copy:first-child { width: 100%; order: 0; } } @media only screen and (max-width: 767px) { .footer__copy br { display: none; } } .form { position: relative; height: 100%; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .form { font-size: 17rem; } } .form { line-height: 25rem; font-weight: 400; } .form::before { content: ""; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; pointer-events: none; background-color: rgba(255, 255, 255, 0.3); transition: opacity 0.3s; } .form.is-loading::before { pointer-events: auto; opacity: 1; } .form__box { display: flex; flex-direction: column; } .form__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .form__col { align-self: flex-end; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .form__field { position: relative; margin-bottom: 25rem; } .form__field--controls { margin-bottom: 0; } .form__field.is-filled .form__label { transform: translateY(0); } .form__field.is-filled .form-file__control { display: none; } .form__field.is-filled .form-file__result { display: flex; } .form__field.is-error .form__input, .form__field.is-error .form__textarea { border-color: #FF3F3F; color: #FF3F3F; } .form__field.is-error .form-message { display: block; } .form__input, .form__textarea { padding-top: 25rem; padding-bottom: 20rem; display: block; width: 100%; height: 100%; border-bottom: 1px solid #E0E0E0; transition: border-color 0.3s, color 0.3s, padding-top 0.3s; } .form__input:focus, .form__textarea:focus { border-color: #000; } .form__input:focus ~ .form__label, .form__textarea:focus ~ .form__label { transform: translateY(0); } .form__input::placeholder, .form__textarea::placeholder { opacity: 0.4; } .form__input[value=""]:not(:focus) { transform: translateY(0); background-color: #f00; } .form__textarea { padding-top: 0; margin-top: 25rem; height: 100%; max-height: 220rem; text-overflow: ellipsis; resize: none !important; } .form__label { position: absolute; top: 0; transform-origin: 0 50%; transform: translateY(100%); color: currentColor; pointer-events: none; transition: transform 0.3s; } .form__button { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 60rem; transition: opacity 0.3s; font-size: 35rem; line-height: 40rem; font-weight: 400; transition: opacity 0.3s; } .form__button .svg-icon { flex-shrink: 0; margin-left: 10rem; } .form__button[disabled] { opacity: 0.4; pointer-events: none; } .form__checkbox { margin-bottom: 20rem; } .form__checkbox:last-child { margin-bottom: 0; } .form input[type=number]::-webkit-inner-spin-button, .form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .form input[type=number] { -moz-appearance: textfield; } .form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus, .form input:-webkit-autofill:active, .form textarea:-webkit-autofill, .form select:-webkit-autofill { background-color: transparent !important; color: #000 !important; -webkit-text-fill-color: #000 !important; transition: background-color 5000s ease-in-out 0s; } .form > .form-response { display: none; } .form.is-success .form-success { opacity: 1; pointer-events: auto; } .form.is-error .form-response { display: block; color: #FF3F3F; } .form.inverse::before { background-color: rgba(0, 0, 0, 0.7); } .form.inverse .form__input:focus, .form.inverse .form__textarea:focus { border-color: #fff; } .form.inverse input:-webkit-autofill, .form.inverse input:-webkit-autofill:hover, .form.inverse input:-webkit-autofill:focus, .form.inverse input:-webkit-autofill:active, .form.inverse textarea:-webkit-autofill, .form.inverse select:-webkit-autofill { color: #fff !important; -webkit-text-fill-color: #fff !important; } .form.inverse .checkbox__input:checked ~ .checkbox__icon { box-shadow: inset 0 0 0 1px #fff; background-color: #fff; } .form.inverse .checkbox__icon { color: #000; background-color: #000; } .form.inverse .checkbox--button .checkbox__icon { color: #fff; } .form.inverse .checkbox--button .checkbox__input:checked ~ .checkbox__label .checkbox__icon { background-color: transparent; color: #000; } .form--subscribe { padding: 20px; background-color: rgba(255, 255, 255, 0.0705882353); height: auto; } .form--subscribe .form__title { margin-bottom: 25rem; } .form--subscribe .form__field { margin-bottom: 15rem; } .form--subscribe .form__field--controls { margin: 20rem 0 0; } .form--subscribe .form__field.is-filled .form__input { border-color: #E0E0E0; padding-top: 25rem; } .form--subscribe .form__field.is-filled .form__label { transform: scale(0.84); } .form--subscribe .form__input { border-color: #6C6C6C; padding-top: 0; transition: padding-top 0.3s, border-color 0.3s; } .form--subscribe .form__input:focus { border-color: #E0E0E0; padding-top: 25rem; } .form--subscribe .form__input:focus ~ .form__label { transform: scale(0.84); } .form--subscribe .form__label { color: #6C6C6C; transform: translateY(0); } .form--subscribe .form__note { color: #6C6C6C; font-size: 12rem; line-height: 1.17; font-weight: normal; } .form--subscribe .form__note a span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .form--subscribe .form__button { min-height: unset; font-size: 19rem; line-height: 25rem; } .form--subscribe .form__button .svg-icon { display: none; } .form--subscribe .form__button span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .form--subscribe .form-message { position: static; } .form--subscribe.is-success .form__title, .form--subscribe.is-success .form__box { opacity: 0; pointer-events: none; } .form--digital-request { font-size: 16rem; line-height: 24rem; font-weight: 400; } .form--digital-request::before { display: none; } .form--digital-request.is-loading .form__button { color: transparent; } .form--digital-request.is-loading .form-loader { opacity: 1; pointer-events: auto; } .form--digital-request.is-loading .form-loader__icon { animation-play-state: running; } .form--digital-request.is-success .form__button > span { color: transparent; } .form--digital-request.is-success .form__submit-success { opacity: 1; pointer-events: auto; } .form--digital-request .form__field { margin-bottom: 32rem; } .form--digital-request .form__field--controls { margin-bottom: 0; } .form--digital-request .form__input, .form--digital-request .form__textarea { font-size: 16rem; line-height: 1.5; font-weight: 400; padding: 10rem 0; } .form--digital-request .form__input::placeholder, .form--digital-request .form__textarea::placeholder { opacity: 0.4; } .form--digital-request .form__button { width: 100%; font-size: 16rem; line-height: 24rem; padding: 24rem; justify-content: center; transition: background-color 0.3s, opacity 0.3s; } .form--digital-request .form__submit-success { display: flex; gap: 4rem; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .form--digital-request .form__submit-success span:first-child:not(:only-child) { flex-shrink: 0; line-height: 0; } .form--digital-request .form-file { background-color: #f2f2f2; } .form--digital-request .form-file__control-button { padding: 24rem; border-color: transparent; justify-content: space-between; color: rgba(0, 0, 0, 0.4); transition: border-color 0.3s; } .form--digital-request .form-file__result { padding: 24rem; } .form--digital-request .checkbox { padding: 8rem 0; font-size: 16rem; line-height: 24rem; } .form--digital-request .checkbox__control { margin-top: 0; } .form--digital-request .checkbox__input:checked ~ .checkbox__icon { background-color: #F2F2F2; box-shadow: none; } .form--digital-request .checkbox__input:checked ~ .checkbox__icon::before { transform: scale(1); background-color: #fff; } .form--digital-request .checkbox__icon { width: 24rem; height: 24rem; border-radius: 0; box-shadow: none; } .form--digital-request .checkbox__icon::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin-top: -8rem; margin-left: -8rem; transform: scale(1.5); transform-origin: 50% 50%; border-radius: 50%; width: 16rem; height: 16rem; background-color: #F2F2F2; transition: background-color 0.3s, transform 0.3s; } .form--digital-request .checkbox__label { color: rgba(0, 0, 0, 0.4); padding-left: 16rem; } .form--digital-request .checkbox__label a { color: #000; border-color: transparent; } .form--digital-subscribe { font-size: 16rem; line-height: 1.375; letter-spacing: 0.5px; font-weight: 400; } .form--digital-subscribe input:-webkit-autofill, .form--digital-subscribe input:-webkit-autofill:hover, .form--digital-subscribe input:-webkit-autofill:focus, .form--digital-subscribe input:-webkit-autofill:active, .form--digital-subscribe textarea:-webkit-autofill, .form--digital-subscribe select:-webkit-autofill { color: #fff !important; -webkit-text-fill-color: #fff !important; } .form--digital-subscribe::before { display: none; } .form--digital-subscribe.is-loading .form__button { color: transparent; } .form--digital-subscribe.is-loading .form-loader { opacity: 1; pointer-events: auto; } .form--digital-subscribe.is-loading .form-loader__icon { animation-play-state: running; } .form--digital-subscribe.is-success .form__button > span { color: transparent; } .form--digital-subscribe.is-success .form__submit-success { opacity: 1; pointer-events: auto; } .form--digital-subscribe .form__title { color: rgba(255, 255, 255, 0.4); margin-bottom: 40rem; } .form--digital-subscribe .form__note { color: rgba(255, 255, 255, 0.4); } .form--digital-subscribe .form__field { margin-bottom: 40rem; } .form--digital-subscribe .form__field--controls { margin-bottom: 0; } .form--digital-subscribe .form__input { font-size: 60rem; line-height: 1; letter-spacing: -0.5px; border-color: rgba(255, 255, 255, 0.4); padding: 0 0 16rem; } .form--digital-subscribe .form__input::placeholder { color: rgba(255, 255, 255, 0.4); } .form--digital-subscribe .form__button { width: 100%; font-size: 16rem; line-height: 24rem; padding: 24rem; justify-content: center; color: #000; } .form--digital-subscribe .form__submit-success { display: flex; gap: 4rem; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .form--digital-subscribe .form__submit-success span:first-child:not(:only-child) { flex-shrink: 0; line-height: 0; } .form--tech .form-success { background-color: #000; } .form--tech .form-success__title { margin: auto 0; font-size: 90rem; line-height: 1.17; } @media only screen and (max-width: 1920px) { .form--tech .form-success__title { font-size: 75rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 1199px) { .form--tech .form-success__title { font-size: 60rem; line-height: 1.25; letter-spacing: -0.02em; } } @media only screen and (max-width: 1023px) { .form--tech .form-success__title { font-size: 50rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .form--tech .form-success__title { font-size: 30rem; line-height: 1.17; letter-spacing: 0; } } .form-file { display: block; overflow: hidden; height: 100%; } .form-file__control { position: relative; } .form-file__control-button { /* &::before { content: ''; display: block; background: url('/assets/icons/clip.png') 50% 50% no-repeat; background-size: 20rem; width: 20rem; height: 20rem; margin-right: 6rem; } */ } .form-file__control-button .svg-icon { flex-shrink: 0; margin-right: 6rem; } .form-file__control-button, .form-file__result { display: flex; align-items: flex-start; border-bottom: 1px solid #E0E0E0; padding-top: 25rem; padding-bottom: 20rem; transition: border-color 0.3s; } .form-file__result { display: none; } .form-file__result-reset { display: flex; flex-shrink: 0; margin-left: auto; } .form-file__result-value { overflow: hidden; text-overflow: ellipsis; } .form-file__control-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; z-index: 2; font-size: 200rem; text-indent: -10000rem; } .form-message { display: none; margin-top: 5rem; color: #FF3F3F; font-size: 10rem; line-height: 1.5; position: absolute; left: 0; top: 100%; } .form-response { color: #FF3F3F; } .form-success { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 3; transition: opacity 0.3s; padding: 20rem; pointer-events: none; } .form-success__title { font-size: 35rem; line-height: 1.14; font-weight: 400; } @media only screen and (max-width: 1023px) { .form-success__title { font-size: 17rem; line-height: 1.3; } } .form-success__box { display: flex; flex-direction: column; height: 100%; } .form-success__btn { margin-top: auto; } .form-success__btn span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .form-loader { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .form-loader__icon { width: 30px; height: 30px; line-height: 0; -webkit-animation: rotateLoading 2s linear infinite forwards; animation: rotateLoading 2s linear infinite forwards; -webkit-animation-play-state: paused; animation-play-state: paused; } .form-loader__icon img { width: 100%; height: 100%; object-fit: contain; } @media only screen and (hover: hover) { .form__input:hover, .form__textarea:hover { border-color: #000; } .form__button:hover { opacity: 0.7; } .form.inverse .form__input:hover, .form.inverse .form__textarea:hover { border-color: #fff; } .form--subscribe .form__input:hover { border-color: #E0E0E0; } .form--subscribe .form__note a:hover span { border-color: transparent; } .form--subscribe .form__button:hover { opacity: 1; } .form--subscribe .form__button:hover span { border-color: currentColor; } .form--digital-subscribe .form__input:hover { border-color: #ffffff; } .form-file__control-button:hover, .form-file__result:hover { border-color: #000; } } @media only screen and (max-width: 767px) { .form__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .form--digital-request .form__input { padding-top: 2rem; } .form--digital-subscribe { font-size: 16rem; } .form--digital-subscribe .form__input { font-size: 32rem; line-height: 1.1; letter-spacing: 0; } } .header { position: fixed; left: 0; top: 0; width: 100%; min-height: var(--header-min-height); color: var(--color); z-index: 99; pointer-events: none; /* &.is-show-button { .header { &__button { line-height: 25rem; position: relative; z-index: 2; } } .nav { &__item { &--services { .nav-submenu { margin: -54rem 0 0; WARN: проверить отступ плсде кнопки } } } } } */ } .header.is-active .header__wrap { transform: translate3d(0, 0%, 0); } .header__wrap { background-color: var(--background-color); transform: translate3d(0, -100%, 0); transition: transform 0.3s, background-color 0.3s; transform-style: preserve-3d; pointer-events: auto; } .header__top { background-color: #f3f3ee; position: relative; z-index: 2; } .header__main { position: relative; } .header__promo { padding: 8rem 0; text-align: center; } .header__promo-link { display: block; font-size: 16rem; line-height: 1.25; font-weight: 400; } .header__promo-link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .header__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .header__box { padding: 20rem 0; display: flex; align-items: center; gap: calc(2 * var(--grid-gap)); } .header__logo { position: relative; line-height: 0; z-index: 2; width: 80rem; flex-shrink: 0; transition: opacity 0.3s; } .header__logo .svg-icon { width: 100%; height: 100%; } .header__nav { margin-left: auto; } .header__burger { display: none; width: 40rem; height: 40rem; margin-left: auto; position: relative; z-index: 10; background-color: transparent; padding: 0; border: none; font-family: "ONYOneBeta", Roboto, Arial, Helvetica, sans-serif; } .header__burger span { position: absolute; left: 0; display: block; height: 2rem; width: 40rem; background-color: var(--color); transition: top 0.3s 0.3s, transform 0.3s; transform-origin: center; pointer-events: none; } .header__burger span:nth-of-type(1) { top: calc(50% - 9rem); } .header__burger span:nth-of-type(2) { top: calc(50% + 7rem); } .header.inverse { background-color: transparent; } .header.inverse .header__wrap { background-color: var(--background-color); } .header.inverse .header__top { background-color: #222; } @media only screen and (hover: hover) { .header__promo-link:hover span { border-color: currentColor; } .header__logo:hover { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .header { /* &.is-show-button { .header { &__button { margin-left: auto; } } .nav { &__item { &--services { .nav-submenu { margin: 0; } } } } } */ } .header__logo { width: 96rem; } .header__box { padding: 25rem 0 15rem; gap: 40rem; } .header__burger { display: block; } .header__promo { padding: 5rem 0; } .header__promo-link { font-size: 14rem; line-height: 20rem; } .header__nav { position: fixed; top: 0; right: 100%; height: 100%; width: 100%; background-color: var(--background-color); transform: translateX(0); min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); padding: var(--header-min-height) calc(2 * var(--grid-gap)) 0; z-index: 1; transition: min-height 0.3s, transform 0.3s; } } @media only screen and (max-width: 767px) { .header { /* &.is-show-button { .header { &__button { display: none; } &__nav { padding-bottom: 75rem; } } } */ } .header__logo { width: 64rem; } .header__box { padding: 20rem 0 10rem; } .header__burger { width: 30rem; height: 30rem; } .header__burger span { width: 30rem; } } .heading__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .heading__title a { display: inline-block; border-bottom: 1px solid currentColor; position: relative; bottom: 8rem; transition: border-color 0.3s; } .heading__title a.smallersin { margin-left: 40rem; font-size: 35rem; line-height: 1.14; font-weight: 400; } @media only screen and (max-width: 1023px) { .heading__title a.smallersin { font-size: 17rem; line-height: 1.3; } } .heading__link { margin-top: 32rem; } @media only screen and (hover: hover) { .heading__title a:hover { border-color: transparent; } } @media only screen and (max-width: 767px) { .heading__title { display: inline-flex; flex-direction: column; align-items: flex-start; } .heading__title a { bottom: 4rem; margin-top: 18rem; } .heading__title a.smallersin { margin-left: 0; } } .home { background-color: var(--background-color); padding-top: 120rem; /* &__hover { pointer-events: none; position: fixed; top: 50%; left: 40%; z-index: 1009; font-size: 80rem; mix-blend-mode: difference; color: #fff; > div { // color: var(--white); } } */ } @media only screen and (max-width: 1440px) { .home { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .home { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .home { padding-top: 40rem; } } .home__cases { margin-top: 205rem; } .home__heading { margin-top: 205rem; } .home__video { margin-top: 180rem; } .home__info { padding-top: 75rem; } .home__logos { padding: 140rem 0 170rem; } .home__logos:last-child { padding-bottom: 260rem; } @media only screen and (max-width: 1023px) { .home__cases { margin-top: 140rem; } .home__heading { margin-top: 120rem; } .home__video { margin-top: 80rem; } .home__info { padding-top: 10rem; } .home__logos { padding: 80rem 0 120rem; } .home__logos:last-child { padding-bottom: 180rem; } } @media only screen and (max-width: 767px) { .home__cases { margin-top: 70rem; } .home__heading { margin-top: 55rem; } .home__video { margin-top: 70rem; } .home__info { padding-top: 10rem; } .home__logos { padding: 30rem 0 40rem; } .home__logos:last-child { padding-bottom: 40rem; } } .infoblock__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .infoblock__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .infoblock__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .infoblock__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .infoblock__title { margin-bottom: 45rem; max-width: 95%; } .infoblock__text { font-size: 35rem; line-height: 1.05; /* WARN: зачем для всех ссылок h1 сделан?? */ /* a { @include mixins.h1(); } */ } .infoblock__text.body-l { font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .infoblock__text.body-l { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .infoblock__text.body-l { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .infoblock__text.body-l { font-size: 17rem; line-height: 1.47; } } .infoblock__text a { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .infoblock__links { display: inline-flex; flex-wrap: wrap; font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .infoblock__links { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .infoblock__links { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .infoblock__links { font-size: 17rem; line-height: 1.47; } } .infoblock__links a { margin-right: 10rem; font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .infoblock__links a { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .infoblock__links a { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .infoblock__links a { font-size: 30rem; line-height: 1.33; } } .infoblock__links a::after { content: ","; } .infoblock__links a:last-child { margin-right: 0; } .infoblock__links a:last-child::after { content: "."; } .infoblock__links a span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .infoblock__link { display: inline-flex; gap: 15rem; align-items: center; transition: opacity 0.3s; font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .infoblock__link { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .infoblock__link { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .infoblock__link { font-size: 17rem; line-height: 1.47; } } .infoblock__more-btn { margin-top: 45rem; } .infoblock__video { margin-top: 80rem; } .infoblock__block { margin-bottom: 120rem; } .infoblock__block:last-child { margin-bottom: 0; } .infoblock__content { font-size: 25rem; line-height: 1.25; margin-bottom: 80rem; } .infoblock__content h3 { font-size: 35rem; line-height: 1.3; margin: 0; margin-bottom: 1em; } .infoblock__content p { margin: 0 0 1em; } .infoblock__content p:last-child { margin-bottom: 0; } .infoblock__content ul { --line-height: 31rem; margin: 0 0 1em; } .infoblock__content ul li { position: relative; padding-left: 44rem; } .infoblock__content ul li::before { content: ""; width: 24rem; height: 1rem; position: absolute; top: calc(var(--line-height) / 2); transform: translateY(-50%); left: 10rem; background-color: currentColor; } .infoblock__content ul:last-child { margin-bottom: 0; } .infoblock__content:last-child { margin-bottom: 0; } .infoblock__technology { margin-bottom: 45rem; } .infoblock__technology:last-of-type { margin-bottom: 0; } .infoblock__article { border-bottom: 1px solid #d7d7d7; margin-bottom: 45px; padding-bottom: 45px; } .infoblock__article:last-child { margin-bottom: 0; } .infoblock--vacancies .infoblock__item { padding: 45rem 0; border-bottom: 1px solid currentColor; } .infoblock--vacancies .infoblock__item:first-child { border-top: 1px solid currentColor; } .infoblock--services .infoblock__item { margin-bottom: 25rem; } .infoblock--services .infoblock__item:last-child { margin-bottom: 0; } .infoblock--case .infoblock__title { margin-bottom: 15rem; } .infoblock--case .infoblock__text { font-size: 35rem; line-height: 1.14; font-weight: 400; } @media only screen and (max-width: 1023px) { .infoblock--case .infoblock__text { font-size: 17rem; line-height: 1.3; } } .infoblock--case .infoblock__text { line-height: 1.29; } .infoblock--reviews .infoblock__title { margin: 0; font-size: 55rem; line-height: 1.36; } .infoblock--reviews .infoblock__item { margin-bottom: 60rem; } .infoblock--reviews .infoblock__item:last-child { margin-bottom: 0; } .infoblock--reviews .infoblock__item .infoblock-author { margin-bottom: 20rem; } .infoblock--audio .infoblock__item { border-bottom: 1px solid #565656; } .infoblock--audio .infoblock__item:first-child .infoblock-card__top { padding-top: 10px; } .infoblock--audio .infoblock-card__top { font-size: 55rem; line-height: 1; letter-spacing: -0.01em; padding: 32px 0; } .infoblock--audio .infoblock-card__content { padding: 0 55px 50px 0; max-width: 100%; } .infoblock--audio .infoblock-card.is-open .infoblock-card__top::before { opacity: 0; } .infoblock--hover .infoblock__box { position: relative; width: 50%; } .infoblock--hover .infoblock__text { position: absolute; top: 0; left: 100%; width: 100%; padding: 0 calc(2 * var(--grid-gap)); opacity: 0; visibility: hidden; font-size: 17rem; line-height: 1.5; transition: opacity 0.3s, visibility 0.3s; } .info-tags { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; font-size: 19rem; line-height: 1.3; } .info-tags__item { position: relative; display: flex; align-items: center; justify-content: flex-start; } .info-tags__item::after { content: ""; display: block; width: 3rem; height: 3rem; border-radius: 50%; background-color: currentColor; margin: 0 10rem; } .info-tags__item:last-of-type::after { display: none; } .info-num__list { margin-top: -100rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .info-num__item { margin-top: 100rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .info-num__title { margin-bottom: 10rem; } .infoblock-card__top { padding: 39rem 0; position: relative; padding-right: 100rem; width: 100%; cursor: pointer; font-size: 35rem; line-height: 1.05; transition: opacity 0.3s; } .infoblock-card__top::before, .infoblock-card__top::after { --size-line: 80rem; content: ""; display: block; background-color: #ccc; position: absolute; top: 50%; right: 0; width: 1rem; height: var(--size-line); transform-origin: center; margin-top: calc(var(--size-line) / -2); margin-right: calc(var(--size-line) / 2); transition: transform 0.3s, opacity 0.3s; } .infoblock-card__top::before { transform: rotate(90deg); } .infoblock-card__drop { height: 0; overflow: hidden; opacity: 0; transition: height 0.3s, opacity 0.3s; } .infoblock-card__content { padding-left: 35rem; padding-bottom: 40rem; max-width: 652rem; font-size: 19rem; line-height: 1.2; } .infoblock-card__content ul { font-size: 25rem; line-height: 1.25; --line-height: 31rem; } .infoblock-card__content ul li { position: relative; padding-left: 44rem; } .infoblock-card__content ul li::before { content: ""; width: 24rem; height: 1rem; position: absolute; top: calc(var(--line-height) / 2); transform: translateY(-50%); left: 10rem; background-color: currentColor; } .infoblock-card__content--full { max-width: 100%; padding-left: 0; } .infoblock-card.is-open .infoblock-card__top::after { opacity: 0; } .infoblock-card.is-open .infoblock-card__drop { opacity: 1; transition: opacity 0.2s, height 0.3s; } .infoblock-methodology__item { padding-bottom: 25rem; margin-bottom: 25rem; border-bottom: 1px solid currentColor; } .infoblock-methodology__item:last-child { margin-bottom: 0; } .infoblock-methodology__subtitle { font-size: 55rem; line-height: 1; letter-spacing: -0.01em; margin-bottom: 25rem; } .infoblock-methodology__link { display: inline-block; font-size: 55rem; line-height: 1; letter-spacing: -0.01em; margin-bottom: 25rem; } .infoblock-methodology__link span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .infoblock-methodology__text { color: #6C6C6C; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .infoblock-methodology__text { font-size: 17rem; } } .infoblock-author { font-size: 19rem; line-height: 1.3; max-width: 242rem; } .infoblock-author__img { width: 80rem; height: 80rem; border-radius: 50%; overflow: hidden; margin-bottom: 20rem; } .infoblock-author__img img { width: 100%; height: 100%; object-fit: cover; } .infoblock-author__position { opacity: 0.5; } .infoblock-author--logo .infoblock-author__img { border-radius: unset; } .infoblock-author--logo .infoblock-author__img img { object-fit: contain; } @media only screen and (hover: hover) { .infoblock__links a:hover span { border-color: transparent; } .infoblock__text a:hover { border-color: transparent; } .infoblock--vacancies .infoblock__link:hover { opacity: 0.7; } .infoblock--hover .infoblock__box:hover .infoblock__text { opacity: 1; visibility: visible; } .infoblock-card__top:hover { opacity: 0.7; } .infoblock-methodology__link:hover span { border-color: transparent; } } @media only screen and (max-width: 1199px) { .infoblock__col--side, .infoblock__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .infoblock__more-btn { margin-top: 35rem; } .infoblock--case .infoblock__col--side, .infoblock--reviews .infoblock__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .infoblock--case .infoblock__col--main, .infoblock--reviews .infoblock__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .info-num__list { margin-top: -60rem; } .info-num__item { margin-top: 60rem; } } @media only screen and (max-width: 1023px) { .infoblock__title { margin-bottom: 30rem; max-width: 100%; } .infoblock__text { font-size: 25rem; line-height: 1.25; } .infoblock__more-btn { margin-top: 30rem; } .infoblock__video { margin-top: 40rem; } .infoblock__content h3 { font-size: 25rem; line-height: 1.25; } .infoblock__content p, .infoblock__content ul { font-size: 17rem; line-height: 1.3; --line-height: 22rem; } .infoblock__content p li, .infoblock__content ul li { padding-left: 34rem; } .infoblock__content p li::before, .infoblock__content ul li::before { left: 0; width: 16rem; } .infoblock--vacancies .infoblock__item { padding: 30rem 0; } .infoblock--vacancies .infoblock__link { gap: 10rem; } .infoblock--vacancies .infoblock__link .svg-icon { width: 30rem; height: 30rem; } .infoblock--case .infoblock__text { line-height: 1.47; } .infoblock--audio .infoblock-card__top { font-size: 45rem; letter-spacing: 0; } .infoblock--audio .infoblock-card__content { padding: 0 10rem 35rem 0; } .infoblock--reviews .infoblock__col--side, .infoblock--reviews .infoblock__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .infoblock--reviews .infoblock__title { font-size: 19rem; margin-top: 25rem; } .infoblock--hover .infoblock__item { margin-bottom: 60rem; } .infoblock--hover .infoblock__item:last-child { margin-bottom: 0; } .infoblock--hover .infoblock__box { width: 100%; } .infoblock--hover .infoblock__text { position: static; opacity: 1; visibility: visible; padding: 0; font-size: 19rem; line-height: 1.3; } .infoblock--hover .infoblock__title { font-size: 30rem; line-height: 1.17; margin-bottom: 20rem; } .info-num__list { margin-top: -45rem; } .info-num__item { margin-top: 45rem; } .info-num__title { margin-bottom: 0; font-size: 50rem; line-height: 1.2; } .infoblock-card__top { font-size: 25rem; line-height: 1.25; } .infoblock-card__content ul { font-size: 17rem; line-height: 1.3; --line-height: 22rem; } .infoblock-card__content ul li { padding-left: 34rem; } .infoblock-card__content ul li::before { left: 0; width: 16rem; } .infoblock-methodology__item { padding-bottom: 20rem; margin-bottom: 20rem; } .infoblock-methodology__subtitle { font-size: 30rem; line-height: 1.17; letter-spacing: 0; margin-bottom: 20rem; } } @media only screen and (max-width: 767px) { .infoblock__title { margin-top: 0; margin-bottom: 25rem; font-size: 19rem; line-height: 30rem; } .infoblock__text { font-size: 17rem; line-height: 1.3; } .infoblock__text.body-l { font-size: 30rem; line-height: 1.17; } .infoblock__more-btn { margin-top: 25rem; } .infoblock__content h3 { font-size: 17rem; line-height: 1.3; font-weight: 500; } .infoblock__content__content ul li { padding-left: 30rem; } .infoblock--vacancies .infoblock__title { margin-bottom: 20rem; } .infoblock--vacancies .infoblock__item { padding: 20rem 0; } .infoblock--vacancies .infoblock__link { gap: 5rem; } .infoblock--vacancies .infoblock__link .svg-icon { width: 21rem; height: 21rem; } .infoblock--case .infoblock__col--side, .infoblock--case .infoblock__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .infoblock--audio .infoblock-card__top { font-size: 30rem; line-height: 35rem; padding: 20px 0; } .info-num__list { margin-top: -40rem; } .info-num__item { margin-top: 40rem; } .info-num__title { font-size: 35rem; line-height: 1.14; } .infoblock-card__top { padding: 25rem 0; padding-right: 50rem; font-size: 17rem; line-height: 1.3; font-weight: 500; } .infoblock-card__top::before, .infoblock-card__top::after { --size-line: 40rem; } .infoblock-card__content { font-size: 17rem; line-height: 1.3; padding: 20rem 0 40rem; padding-left: 20rem; } .infoblock-card__content::before { width: 14rem; } .infoblock-methodology__item { padding-bottom: 18rem; margin-bottom: 18rem; } .infoblock-methodology__subtitle { font-size: 17rem; line-height: 1.3; margin-bottom: 18rem; } } /* WARN: API FIX STYLES ->*/ .infoblock--api .infoblock__links a { margin-right: 0; display: inline-block; } .infoblock--api .infoblock__links a::after { display: none; } .infoblock--api .infoblock__links a div { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .infoblock--api .infoblock__links .client-li { display: inline; } .infoblock--api .infoblock__links .client-li div { display: inline; margin-right: 10rem; } .infoblock__text .is-inline-text { display: inline; } .infoblock__text .is-text-link { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .info-num .data-div { margin-top: 100rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .info-num .data-div p { margin-bottom: 10rem; font-size: 90rem; line-height: 1.17; } @media only screen and (max-width: 1920px) { .info-num .data-div p { font-size: 75rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 1199px) { .info-num .data-div p { font-size: 60rem; line-height: 1.25; letter-spacing: -0.02em; } } @media only screen and (max-width: 1023px) { .info-num .data-div p { font-size: 50rem; line-height: 1.2; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .info-num .data-div p { font-size: 30rem; line-height: 1.17; letter-spacing: 0; } } @media only screen and (hover: hover) { .infoblock--api .infoblock__links a:hover div { border-color: transparent; } } @media only screen and (max-width: 1199px) { .info-num .data-div { margin-top: 60rem; } } @media only screen and (max-width: 1023px) { .info-num .data-div { margin-top: 45rem; } .info-num .data-div p { margin-bottom: 0; font-size: 50rem; line-height: 1.2; } } @media only screen and (max-width: 767px) { .infoblock--api .infoblock__links .client-li { margin-right: 15rem; } .infoblock--api .infoblock__links .client-li div { margin-right: 0; font-size: 30rem; line-height: 40rem; } } /* WARN: API FIX STYLES <-*/ .infopage__wrap { padding-bottom: 100rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .infopage__wrap { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .infopage__wrap { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .infopage__wrap { padding-top: 40rem; } } .infopage__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .infopage__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .infopage__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .infopage__col--side .infopage__content { max-width: 400rem; } .infopage__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .infopage__block { margin-top: 60rem; } .infopage__content { font-size: 20rem; line-height: 1.25; } .infopage__content b { font-weight: 700; } .infopage__content p { margin-bottom: 1.5em; } .infopage__content p:last-child { margin-bottom: 0; } .infopage__content ul { list-style-type: disc; padding-inline-start: 40px; } .infopage__content ul li { margin-bottom: 1.5em; } .infopage__content ul li:last-child { margin-bottom: 0; } .infopage__content ul + p { margin-top: 1.5em; } @media only screen and (max-width: 1023px) { .infopage__col--side, .infopage__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .infopage__col--side .infopage__content { margin-bottom: 30rem; } } @media only screen and (max-width: 767px) { .infopage__content p { margin-bottom: 1em; } .infopage__content p:last-child { margin-bottom: 0; } .infopage__content ul { list-style-type: disc; padding-inline-start: 20px; } .infopage__content ul li { margin-bottom: 1em; } .infopage__content ul li:last-child { margin-bottom: 0; } .infopage__content ul + p { margin-top: 1em; } } .intro-block { --next-height: 680rem; transition: color 0.3s, background-color 0.3s; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .intro-block { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .intro-block { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .intro-block { padding-top: 40rem; } } .intro-block__box { display: block; pointer-events: none; } .intro-block__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .intro-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 45rem; } .intro-block__more { display: none; gap: 10rem; align-items: center; margin-left: auto; margin-bottom: 8rem; /* == old v */ opacity: 0; pointer-events: none; white-space: nowrap; will-change: transform; transform: translateY(-70%) rotateX(45deg); transition: transform 0.4s ease, opacity 0.5s ease; } .intro-block__main { margin: 35rem calc(-2 * var(--grid-gap)) 0; max-height: calc(var(--next-height) * 2); overflow: hidden; transition: margin 0.3s; } .intro-block__image { width: 100%; } .intro-block__image video, .intro-block__image img { width: 100%; height: auto; } .intro-block.is-next .intro-block__box { pointer-events: auto; } .intro-block.is-next .intro-block__title { padding-right: 20%; } .intro-block.is-next .intro-block__more { display: flex; opacity: 0; pointer-events: auto; } .intro-block.is-next .intro-block__main { margin: 20rem 0 0; max-height: var(--next-height); } .intro { background-color: var(--background-color); color: var(--color); } .intro__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .intro__title { max-width: 1520rem; margin-bottom: 44rem; } .intro__title a { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .intro__head { margin-bottom: 44rem; } .intro__subtitle { margin-bottom: 25rem; } .intro__text { font-size: 25rem; line-height: 1.25; } .intro__main { margin: 0 calc(-2 * var(--grid-gap)); display: flex; overflow: hidden; } .intro__image { flex-shrink: 0; flex-grow: 1; display: flex; width: 100%; } .intro__image img, .intro__image video { width: 100%; height: 100%; object-fit: cover; } .intro__image a { display: block; width: 100%; height: 100%; } .intro__partners-logos { margin: 0 calc(-2 * var(--grid-gap)); width: calc(100% + 4 * var(--grid-gap)); overflow: hidden; } @media only screen and (hover: hover) { .intro-block.is-next .intro-block__box:hover .intro-block__more { opacity: 1; transform: translateY(0) rotateX(0); } .intro__title a:hover { border-color: transparent; } } @media only screen and (max-width: 1023px) { .intro-block__main { margin-top: 30rem; } .intro-block.is-next .intro-block { /* &__head { align-items: center; } */ } .intro-block.is-next .intro-block__more { opacity: 1; transform: none; } .intro-block.is-next .intro-block__more .svg-icon { width: 21rem; height: 21rem; } .intro__title { margin-bottom: 30rem; } .intro__head { margin-bottom: 30rem; } } @media only screen and (max-width: 767px) { .intro-block__main { margin-top: 15rem; } .intro-block__more { margin-bottom: 4rem; } .intro-block.is-next .intro-block__more span { display: none; } .intro__title { margin-bottom: 10rem; } .intro__head { margin-bottom: 24rem; } .intro__text { font-size: 17rem; line-height: 1.3; } } @keyframes line-loader { 0% { transform: translateX(-100%) scaleX(1); } /* 40% { transform: translateX(0%) scaleX(1); } 60% { transform: translateX(0%) scaleX(0.5); } */ 100% { transform: translateX(200%) scaleX(1); } } .line-loader { position: fixed; top: 0; right: 0; left: 0; z-index: 150; height: 4px; background-color: #555; transform: scaleY(0); transition: transform 0.3s; } .line-loader::before { display: block; content: ""; width: 100%; height: 100%; transform: translateX(-100%); transform-origin: left top; background-color: #333; animation: line-loader 1.8s linear infinite forwards; } .logos__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .logos__list { /* display: flex; justify-content: space-between; gap: 45rem; */ display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 80rem; column-gap: 45rem; column-gap: calc(2 * var(--grid-gap)); justify-content: center; } .logos__item { /* position: relative; width: 25%; */ display: flex; align-items: center; justify-content: center; } .logos__item:nth-of-type(4n-3) { justify-content: flex-start; } .logos__item:nth-of-type(4n) { justify-content: flex-end; } .logo-awward { position: relative; width: 100%; max-width: 200rem; } .logo-awward__num { position: absolute; left: 0; top: 0; z-index: 1; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .logo-awward__num { font-size: 17rem; } } .logo-awward__img { width: 100%; aspect-ratio: 1; } .logo-awward__img img { width: 100%; height: 100%; object-fit: contain; } @media only screen and (max-width: 1023px) { .logos__list { row-gap: 45rem; column-gap: 25rem; } .logo-awward__num { font-size: 16rem; line-height: 1.25; } } @media only screen and (max-width: 767px) { .logos__list { row-gap: 20rem; column-gap: 30rem; } .logo-awward__num { font-size: 14rem; line-height: 1.1; } } .media__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .media__wrap { padding: 45rem 0; display: flex; flex-flow: row wrap; } .media__box { width: 50%; } .media__box video, .media__box img, .media__box iframe { width: 100%; height: auto; } .media__box:only-child { width: 100%; } @media only screen and (max-width: 767px) { .media__wrap { padding: 15rem 0; } .media__box { width: 100%; } } .more-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10rem; overflow: hidden; background-color: transparent; padding: 0; border: none; font-family: "ONYOneBeta", Roboto, Arial, Helvetica, sans-serif; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .more-btn { font-size: 17rem; } } .more-btn span { border-bottom: 1px solid currentColor; transition: opacity 0.3s, border-color 0.3s; } .more-btn span:last-of-type:not(:only-of-type) { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; } .more-btn .svg-icon { flex-shrink: 0; width: 0; transform-origin: left; transition: width 0.3s; } .more-btn.is-active span { border-color: transparent; } .more-btn.is-active span:last-of-type:not(:only-of-type) { opacity: 1; position: static; } .more-btn.is-active span:first-of-type:not(:only-of-type) { opacity: 0; position: absolute; } .more-btn.is-active .svg-icon { width: 21rem; } .more-content { height: 0; overflow: hidden; transition: height 0.3s; } .more-content.is-open { height: auto; transition: height 0.3s; } .more-content__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; padding-top: 45rem; } .more-content__wrap { border-top: 1px solid currentColor; padding-top: 45rem; } .more-clients { font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .more-clients { font-size: 17rem; } } .more-clients__nav { display: inline-flex; gap: 18rem; margin-bottom: 45rem; } .more-clients__tab { display: none; } .more-clients__tab.is-active { display: block; } .more-clients__wrap { column-count: 4; column-gap: calc(2 * var(--grid-gap)); } .more-clients__block { break-inside: avoid; margin-bottom: 70rem; } .more-clients__title { margin-bottom: 25rem; } .more-clients__item { margin-bottom: 5rem; } .more-clients__item:last-child { margin-bottom: 0; } .more-clients__link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .more-awards { font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .more-awards { font-size: 17rem; } } .more-awards__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); margin-bottom: 205rem; } .more-awards__row:last-child { margin-bottom: 0; } .more-awards__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .more-awards__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .more-awards__list { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); margin-bottom: -60rem; } .more-awards__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-bottom: 60rem; } .more-awards__year { margin-bottom: 45rem; } .more-awards__subtitle { opacity: 0.5; } .more-team { font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .more-team { font-size: 17rem; } } .more-team__list { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); margin-bottom: -60rem; } .more-team__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-bottom: 60rem; } .more-team__subtitle { opacity: 0.5; } @media only screen and (hover: hover) { .more-btn:hover span { border-color: transparent; } .more-clients__link:hover span { border-color: transparent; } } @media only screen and (max-width: 1199px) { .more-content__container { padding-top: 45rem; } .more-content__wrap { padding-top: 45rem; } .more-clients__wrap { column-count: 3; } .more-clients__nav { margin-bottom: 45rem; } .more-clients__block { margin-bottom: 60rem; } .more-awards__row { margin-bottom: 160rem; } .more-awards__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } } @media only screen and (max-width: 1023px) { .more-clients__block { margin-bottom: 50rem; } .more-awards__row { margin-bottom: 120rem; } } @media only screen and (max-width: 767px) { .more-content__container { padding-top: 20rem; } .more-content__wrap { padding-top: 20rem; } .more-clients__nav { margin-bottom: 30rem; } .more-clients__wrap { column-count: 1; } .more-clients__block { margin-bottom: 60rem; } .more-clients__title { margin-bottom: 20rem; } .more-awards__row { margin-bottom: 30rem; } .more-awards__list { margin-bottom: 0; } .more-awards__item { margin-bottom: 30rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .more-awards__item:nth-child(odd) { margin-bottom: 0; } .more-awards__year { margin-bottom: 30rem; } .more-team__list { margin-bottom: 0; } .more-team__item { margin-bottom: 30rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .more-team__item:nth-child(odd) { margin-bottom: 0; } } .multibrands__intro { margin-bottom: 44rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .multibrands__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .multibrands__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .multibrands__intro { padding-top: 40rem; } } .multibrands__intro .intro__head { max-width: 1200rem; } .multibrands__intro .intro__subtitle { line-height: 1.2; } .multibrands__intro .intro__subtitle .title-line { display: flex; white-space: nowrap; gap: 10rem; } .multibrands__intro .intro__subtitle .title-animation { --line-height: 66rem; display: flex; flex-direction: column; height: var(--line-height); overflow: hidden; position: relative; width: 100%; } .multibrands__intro .intro__subtitle .title-animation span { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(100%); animation: slide 6s infinite; } .multibrands__intro .intro__subtitle .title-animation span:nth-child(1) { animation-delay: 0s; } .multibrands__intro .intro__subtitle .title-animation span:nth-child(2) { animation-delay: 2s; } .multibrands__intro .intro__subtitle .title-animation span:nth-child(3) { animation-delay: 4s; } .multibrands__info { margin-bottom: 120rem; } .multibrands__info .infoblock__text { font-size: 25rem; line-height: 1.2; } .multibrands__info .infoblock__list { margin-top: 40rem; } .multibrands__info .infoblock__item { border-bottom: 1px solid #ccc; } .multibrands__info .infoblock__item:first-child { border-top: 1px solid #ccc; } .multibrands__info .infoblock__links a span { border-color: #ccc; } .multibrands__info .infoblock-card__content { padding-left: 0; } .multibrands__info .infoblock-card__content ul { font-size: 25rem; line-height: 1.2; } .multibrands__reviews { padding: 40rem 0 80rem; } .multibrands__advantages { padding: 50rem 0 120rem; } .multibrands__block { margin-bottom: 120rem; } .multibrands__block:last-child { margin-bottom: 0; } .multibrands__form .brief__wrap { padding: 40rem 0 100rem; } .multibrands__form .brief__title { margin-bottom: 90rem; } .multibrands-cases__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .multibrands-cases__title { margin-bottom: 30rem; } .multibrands-cases__head { margin-bottom: 50rem; max-width: 1200rem; } .multibrands-cases__list { display: flex; flex-direction: column; } .multibrands-cases-card { padding: 40rem 0 45rem; display: flex; flex-direction: column; position: relative; min-height: 630rem; } .multibrands-cases-card::after { content: ""; display: block; background-image: linear-gradient(180deg, transparent, #000); position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; opacity: 0.77; } .multibrands-cases-card__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .multibrands-cases-card__bg img, .multibrands-cases-card__bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; } .multibrands-cases-card__container { position: relative; z-index: 2; display: flex; flex-direction: column; flex-grow: 1; width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .multibrands-cases-card__title { font-size: 35rem; line-height: 1.1; margin-bottom: 18rem; } .multibrands-cases-card__text { font-size: 25rem; line-height: 1.2; max-width: 646rem; } .multibrands-cases-card__button { position: relative; width: 100%; max-width: 405rem; margin-top: auto; padding: 27rem 100rem; border-radius: 40rem; justify-content: center; transition: color 0.3s, background-color 0.3s, border-color 0.3s; } .multibrands-cases-card__button span { transition: opacity 0.3s; } .multibrands-cases-card__button span:last-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .multibrands-cases-card__button.is-active span:first-child { opacity: 0; } .multibrands-cases-card__button.is-active span:last-child { opacity: 1; } .multibrands-cases-more { height: 0; overflow: hidden; opacity: 0; transition: height 0.3s, opacity 0.3s; } .multibrands-cases-more.is-open { opacity: 1; overflow: visible; transition: opacity 0.2s, height 0.3s, overflow 0s 0.3s; height: auto; } @media only screen and (hover: hover) { .multibrands-cases-card__button:hover { opacity: 1; background-color: #fff; color: #000; border-color: #fff; } .multibrands__info .infoblock__links a:hover span { border-color: transparent; } } @media only screen and (max-width: 1023px) { .multibrands__intro .intro__subtitle .title-animation { --line-height: 54rem; } .multibrands__info, .multibrands__block { margin-bottom: 120rem; } .multibrands__advantages { padding: 40rem 0 110rem; } .multibrands__form .brief__form { margin-top: 80rem; } .multibrands-cases__text { font-size: 25rem; line-height: 1.2; } .multibrands-cases-card { padding: 20rem 0 25rem; } .multibrands-cases-card__title { margin-bottom: 10rem; } .multibrands-cases-card__button { padding: 15rem 60rem; } } @media only screen and (max-width: 767px) { .multibrands__intro .intro__subtitle .title-line { flex-wrap: wrap; gap: 0; } .multibrands__intro .intro__subtitle .title-animation { --line-height: 36rem; } .multibrands__info { margin-bottom: 80rem; } .multibrands__info .infoblock__title { font-size: 30rem; line-height: 1.17; margin-bottom: 18rem; } .multibrands__info .infoblock__list { margin-top: 34rem; } .multibrands__info .infoblock-card__content ul { font-size: 17rem; line-height: 1.3; } .multibrands__advantages { padding: 20rem 0 60rem; } .multibrands__block { margin-bottom: 80rem; } .multibrands__reviews { padding: 20rem 0 60rem; } .multibrands__form .brief__title { margin-bottom: 50rem; } .multibrands__form .brief__form { margin-top: 0; } .multibrands-cases__head { margin-bottom: 25rem; } .multibrands-cases__title { margin-bottom: 18rem; } .multibrands-cases__text { font-size: 17rem; line-height: 1.3; } .multibrands-cases-card { min-height: 250rem; } .multibrands-cases-card__title, .multibrands-cases-card__text { font-size: 17rem; line-height: 1.3; } } @keyframes slide { 0% { opacity: 0; transform: translateY(100%); } 10%, 30% { opacity: 1; transform: translateY(0); } 40%, 100% { opacity: 0; transform: translateY(-100%); } } .nav { /* &__button { padding: 10px; position: fixed; left: 0; bottom: 0; right: 0; background-color: var(--background-color); display: none; >.button { width: 100%; justify-content: center; } } */ } .nav__bg { position: absolute; top: 0; right: 0; left: 0; z-index: -1; background-color: var(--background-color); pointer-events: none; height: 66px; will-change: height; transition: height 0.4s 0.1s cubic-bezier(0.4, 0, 0.6, 1); } .nav__list { display: flex; } .nav__item { position: relative; font-size: initial; padding: 0 var(--nav-item-padding); } .nav__item--services { position: static; } .nav__item--services .nav-submenu { width: 100%; margin: -20rem 0 0; } .nav__item--services .nav-submenu::before { display: none; } .nav__item--services .nav-submenu__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .nav__item--services .nav-submenu__link { white-space: normal; } .nav__item--services .nav-submenu__list { max-width: 320rem; padding-left: 0; } .nav__item--services .nav-submenu__item:last-child { margin-top: auto; } .nav__item--services .nav-submenu__item:last-child .nav-submenu__link .svg-icon { display: block; opacity: 1; color: currentColor; } .nav__item--services .nav-submenu__item:nth-last-child(2) { margin-bottom: 40rem; } .nav__item.is-hover .nav__link { opacity: 1 !important; transition: opacity 0.2s 0s; } .nav__item.is-hover .nav-submenu { opacity: 1; pointer-events: auto; transition: opacity 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .nav__link { display: inline-block; color: currentColor; white-space: nowrap; transition: opacity 0.3s 0.2s; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .nav__link { font-size: 17rem; } } .nav__link { line-height: 26rem; } .nav__link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .nav__link .svg-icon { display: none; transition: transform 0.3s; } .nav-submenu { position: absolute; left: 0; top: 100%; padding: 55rem 0 40rem; opacity: 0; pointer-events: none; transition: opacity 0.1s 0s ease; /* &::before { content: ''; display: block; background-color: var(--background-color); position: absolute; top: 0; left: 50%; transform: translate(-50%); width: 200vw; height: 100%; z-index: -1; } &::before { pointer-events: none; } */ } .nav-submenu__link { position: relative; display: inline; color: currentColor; white-space: nowrap; align-items: center; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .nav-submenu__link { font-size: 17rem; } } .nav-submenu__link { line-height: 26rem; } .nav-submenu__link span { border-bottom: 1px solid transparent; transition: border-color 0.3s; } .nav-submenu__link .svg-icon { display: none; position: absolute; bottom: 0; left: 100%; margin-left: 4rem; color: #999999; opacity: 0; transition: opacity 0.3s; } .nav-submenu__link[target=_blank] .svg-icon { display: block; } .nav-submenu__wrap { display: flex; gap: 100rem; } .nav-submenu__main { display: flex; gap: 40rem; justify-content: space-between; max-width: 740rem; flex-grow: 1; } .nav-submenu__side { width: 50%; max-width: 564rem; flex-shrink: 0; margin-left: auto; } .nav-submenu__list { padding-left: var(--nav-item-padding); width: 100%; display: flex; flex-direction: column; } .nav-submenu__list--mob { display: none; } .nav-submenu__item { margin-bottom: 10rem; } .nav-submenu__item:last-child { margin-bottom: 0; } .nav-submenu .case-card--mini { opacity: 1; } .nav-submenu .case-card--mini[target=_blank] .case-card__head .svg-icon { display: block; } .nav-submenu .case-card--mini i { color: #B2B2B2; margin-right: 4rem; } .nav-submenu .case-card--mini .case-card__preview { transform: none; margin-bottom: 12rem; } .nav-submenu .case-card--mini .case-card__preview::before { padding-bottom: 59.79%; } .nav-submenu .case-card--mini .case-card__head { top: 100%; bottom: unset; transform: translateY(-25px); mix-blend-mode: unset; } .nav-submenu .case-card--mini .case-card__head div { position: relative; display: inline; } .nav-submenu .case-card--mini .case-card__head .svg-icon { display: none; position: absolute; bottom: 0; left: 100%; margin-left: 4rem; color: #B2B2B2; opacity: 0; transition: opacity 0.3s; } @media only screen and (hover: hover) { .nav.is-hover .nav__bg { transition: height 0.4s 0s cubic-bezier(0.4, 0, 0.6, 1); } .nav.is-hover .nav__link { opacity: 0.5; transition: opacity 0.3s 0s; } .nav__link:not(.nav__link--title):hover span { border-color: currentColor; } .nav-submenu__link:hover span { border-color: currentColor; } .nav-submenu__link:hover .svg-icon { opacity: 1; } .nav-submenu .case-card:hover .case-card__head .svg-icon { opacity: 1; } } @media only screen and (max-width: 1199px) { .nav-submenu__side { max-width: 365rem; } } @media only screen and (max-width: 1023px) { .nav { height: 100%; } .nav__wrap { display: flex; flex-direction: column; height: 100%; padding: 40rem 0 50rem; /* убрала отступ из header__nav и добавила сюда, т.к. нет фиксированной кнопки */ overflow-y: auto; margin-right: -12rem; padding-right: 12rem; } .nav__wrap { scrollbar-width: thin; scrollbar-color: transparent transparent; } .nav__wrap::-webkit-scrollbar { width: 0rem; height: 0rem; border-radius: 0rem; } .nav__wrap::-webkit-scrollbar-track { background: transparent; } .nav__wrap::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0rem; } .nav__list { flex-wrap: wrap; gap: 0; } .nav__item { width: 100%; padding: 0; margin-bottom: 10rem; } .nav__item:last-child { margin-bottom: 0; } .nav__item--sub .nav-submenu { max-height: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.6, 1); } .nav__item--services .nav-submenu { margin: 0; } .nav__item--services .nav-submenu__container { padding: 40rem 0; } .nav__item--services .nav-submenu__list { max-width: 100%; padding: 0; } .nav__item--services .nav-submenu__item:nth-last-child(2) { margin-bottom: 5rem; } .nav__item--services .nav-submenu__item:last-child { margin-top: 0; } .nav__item.is-open .nav__icon::after { opacity: 0; } .nav__link { font-size: 50rem; line-height: 1.2; } .nav__link span { border-bottom: none; } .nav__link--title { display: flex; align-items: center; justify-content: space-between; gap: 16rem; width: 100%; } .nav__icon { position: relative; width: 40px; height: 40px; flex-shrink: 0; } .nav__icon::before, .nav__icon::after { --width: 36px; --height: 2px; --radius: 0; content: ""; display: block; background-color: var(--color); border-radius: var(--radius); height: var(--height); width: var(--width); transform-origin: center; position: absolute; top: 50%; left: 50%; margin-top: calc(-1 * var(--height) / 2); margin-left: calc(-1 * var(--width) / 2); transition: opacity 0.3s; } .nav__icon::after { transform: rotate(90deg); } .nav-submenu { margin: 0; padding: 0; width: 100%; position: static; opacity: 1; pointer-events: auto; overflow: hidden; max-height: 0; transition: max-height 0.3s, height 0.3s; } .nav-submenu::before { display: none; } .nav-submenu__container { padding: 40rem 0; } .nav-submenu__wrap { gap: 0; flex-wrap: wrap; } .nav-submenu__main { flex-flow: row wrap; gap: 0; justify-content: flex-start; max-width: 100%; } .nav-submenu__list { padding-left: 0; } .nav-submenu__list--mob { display: block; order: -1; } .nav-submenu__item { margin-bottom: 5rem; } .nav-submenu__item:last-child { margin-bottom: 0; } .nav-submenu__item--desk { display: none; } .nav-submenu__side { display: none; } .nav-submenu__title { font-size: 30rem; line-height: 35rem; color: #B2B2B2; margin: 20rem 0; } .nav-submenu__link { font-size: 35rem; line-height: 45rem; } .nav-submenu__link span { border-bottom: none; } } @media only screen and (max-width: 767px) { .nav { /* &__button { display: block; } */ } .nav__item--services .nav-submenu__container { padding: 20rem 0; } .nav__link { font-size: 30rem; line-height: 1.17; } .nav__icon { width: 21rem; height: 21rem; } .nav__icon::before, .nav__icon::after { --width: 13px; --height: 1px; } .nav-submenu__container { padding: 20rem 0; } .nav-submenu__link, .nav-submenu__title { font-size: 17rem; line-height: 22rem; } } .partners-logos { background-color: #000; color: #fff; padding: 25rem 0; } .partners-logos__track { display: flex; width: 100%; } .partners-logos__line { display: flex; width: auto; flex-shrink: 0; overflow: hidden; align-items: center; animation: move 30s linear infinite; } .partners-logos__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .partners-logos__list { /* display: flex; justify-content: space-between; gap: 45rem; */ /* display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 80rem; column-gap: 45rem; column-gap: calc(2 * var(--grid-gap)); justify-content: center; */ } .partners-logos__item { flex-grow: 1; min-width: 300rem; margin: 0 20rem; display: flex; justify-content: center; align-items: center; } .partners-logos__item img { max-height: 52rem; width: 100%; height: 100%; object-fit: contain; } @media only screen and (max-width: 1023px) { .partners-logos__item { min-width: 200rem; } } @media only screen and (max-width: 767px) { .partners-logos__item { min-width: 150rem; } } @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .popup { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; z-index: 90; background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } .popup.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .popup.is-open .popup__box { transform: translateX(0); } .popup__box { background-color: #fff; padding: 24rem 24rem 0 24rem; display: flex; flex-direction: column; height: 100%; width: 50%; margin-left: auto; transform: translateX(100%); transition: transform 0.3s ease-out; } .popup__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 40rem; } .popup__title { /* font-family: variable.$font0; */ font-size: 32rem; line-height: 1.25; font-weight: 400; margin-bottom: 24rem; } .popup__title i { color: rgba(0, 0, 0, 0.4); } .popup__main { overflow-y: auto; margin-right: -12rem; padding-right: 12rem; padding-bottom: 40rem; } .popup__main { scrollbar-width: thin; scrollbar-color: transparent transparent; } .popup__main::-webkit-scrollbar { width: 0rem; height: 0rem; border-radius: 0rem; } .popup__main::-webkit-scrollbar-track { background: transparent; } .popup__main::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0rem; } .popup__list { margin-top: 80rem; } .popup__item { margin-bottom: 80rem; } .popup--digital-cases .popup__top { font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } .popup--digital-cases .popup__close { transition: opacity 0.3s; font-family: "WilliamTextPro", Georgia, "Times New Roman", serif; font-size: 16rem; line-height: 1.5; letter-spacing: 0.03em; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; } @media (hover: hover) { .popup__close:hover { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .popup__box { width: 100%; padding: 16rem calc(2 * var(--grid-gap)) 0; } .popup__title { margin-bottom: 40rem; } .popup__list { margin-top: 100rem; } .popup__item { margin-bottom: 100rem; } } .product__intro { margin-bottom: 80rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .product__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .product__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .product__intro { padding-top: 40rem; } } .product__intro .intro__title { max-width: 100%; font-size: 52rem; line-height: 1.36; margin-bottom: 40rem; } .product__info { margin-bottom: 160px; } .product__heading { margin-bottom: 160rem; } .product__workflow { padding: 160rem 0 120rem; overflow: hidden; } .product__cases { padding: 80rem 0 0; } .product .infoblock__help { font-size: 28rem; line-height: 1.18; } .product .infoblock__help li { position: relative; padding-left: 20rem; margin-left: 20rem; margin-bottom: 35rem; } .product .infoblock__help li::before { content: ""; display: block; background-color: currentColor; width: 10rem; height: 10rem; border-radius: 50%; position: absolute; left: 0; top: 16rem; transform: translate(-50%, -50%); } .product .infoblock__help li:last-child { margin-bottom: 0; } .product .infoblock__methods { margin-top: 80rem; } .product .infoblock__workflow { margin-top: 80rem; display: flex; align-items: center; justify-content: center; } .product .infoblock__cases { margin-top: 80rem; } .product .infoblock__more-btn { margin-top: 25rem; display: none; } .product-methods { font-size: 16rem; line-height: 1.25; } .product-methods__list { display: flex; flex-flow: row wrap; width: 100%; border-top: 1px solid #6c6c6c; } .product-methods__item { padding: 35rem 45rem; width: 33.3333333333%; position: relative; } .product-methods__item li { margin-bottom: 10rem; } .product-methods__item li:last-child { margin-bottom: 0; } .product-methods__item:nth-of-type(2)::before, .product-methods__item:nth-of-type(2)::after { content: ""; display: block; background-color: #6c6c6c; width: 1px; height: 45%; position: absolute; top: 0; } .product-methods__item:nth-of-type(2)::before { left: 0; } .product-methods__item:nth-of-type(2)::after { right: 0; } .product-workflow { --border-color: #6c6c6c; --width-small-circle: 200rem; --width-mediun-circle: 900rem; --width-large-circle: 1100rem; font-size: 16rem; text-align: center; } .product-workflow__circle { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; width: var(--width-large-circle); margin: 0 auto; border: 1px solid var(--border-color); border-radius: 50%; } .product-workflow__circle--m { width: var(--width-mediun-circle); margin-bottom: var(--width-small-circle); padding-top: var(--width-small-circle); } .product-workflow__title { font-size: 19rem; aspect-ratio: 1; width: var(--width-small-circle); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-color); position: absolute; left: 50%; transform: translateX(-50%); top: 0; } .product-workflow__title--result { color: #000; background-color: #fff; top: unset; bottom: 0; } .product-workflow__main { max-width: 40%; margin: auto; } .product-workflow__item { margin-bottom: 80rem; } .product-workflow__item:last-child { margin-bottom: 0; } .product-table { font-size: 16rem; display: grid; } .product-table__row { display: grid; grid-template-columns: 1fr 2fr 2fr; } .product-table__row--head { color: #6c6c6c; } .product-table__cell { padding: 12rem; border-bottom: 1px solid #6c6c6c; border-right: 2px solid transparent; } .product-table__cell.note { color: #6c6c6c; } .product-table__cell a span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .product-table__cell-item { display: flex; gap: 5rem; } .product-table__cell-item span { display: block; padding: 12rem 2rem; } .product-table__cell-item span:first-child { color: #3CE900; flex-shrink: 0; } .product-table__cell-item span:nth-child(2) { min-width: 60rem; flex-shrink: 0; } @media only screen and (hover: hover) { .product-table__cell a:hover span { border-color: transparent; } } @media only screen and (max-width: 1023px) { .product .infoblock__title { font-size: 35rem; } } @media only screen and (max-width: 767px) { .product__info { margin-bottom: 80rem; } .product__heading { margin-bottom: 80rem; } .product__heading .heading__title { font-size: 19rem; } .product__heading .heading__link { font-size: 17rem; margin-top: 10rem; } .product__workflow { padding: 80rem 0 40rem; } .product .infoblock__title { font-size: 20rem; } .product .infoblock__help { font-size: 16rem; } .product .infoblock__help li { margin-left: 0; } .product .infoblock__help li::before { width: 6rem; height: 6rem; top: 8rem; transform: translate(2rem, -50%); } .product .infoblock__methods { margin-top: 25rem; } .product .infoblock__workflow { margin-top: 45rem; } .product .infoblock__cases { margin-top: 25rem; } .product-methods__list { border-top: none; border-left: 1px solid #6c6c6c; } .product-methods__item { width: 100%; } .product-methods__item:nth-child(2)::before, .product-methods__item:nth-child(2)::after { width: 45%; max-width: 95rem; height: 1rem; left: 0; right: unset; top: unset; } .product-methods__item:nth-child(2)::before { top: 0; } .product-methods__item:nth-child(2)::after { bottom: 0; } .product-workflow { --width-small-circle: 180rem; --width-mediun-circle: 760rem; --width-large-circle: 940rem; text-align: left; } .product-workflow__main { max-width: 316rem; } .product-workflow__item { margin-bottom: 60rem; } .product-table__row { display: grid; grid-template-columns: 1fr; margin-bottom: 15rem; border: 1px solid #6c6c6c; } .product-table__row--head { display: none; } .product-table__row:last-child { margin-bottom: 0; } .product-table__cell { border-right: none; } .product-table__cell:last-child { border-bottom: none; } .product-table__cell-item { display: flex; flex-flow: row wrap; gap: 0; } .product-table__cell-item span:nth-child(2) { min-width: unset; } .product-table__cell-item span:last-child { width: 100%; } } .process__item { margin-bottom: 20rem; } .process__item:last-child { margin-bottom: 0; } .process-step { display: flex; align-items: flex-start; } .process-step__num { width: 32rem; margin-right: 60rem; flex-shrink: 0; } .process-step__content { flex-grow: 1; } .process-step__text { color: #B2B2B2; } @media only screen and (max-width: 1023px) { .process__list { display: grid; grid-template-rows: repeat(var(--gridRows), auto); grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; gap: 30rem; } .process__item { margin-bottom: 0; } .process-step { font-size: 17rem; line-height: 22rem; } .process-step__num { width: 22rem; margin-right: 22rem; } } @media only screen and (max-width: 767px) { .process__list { display: block; } .process__item { margin-bottom: 15rem; } .process__item:last-child { margin-bottom: 0; } } .ratings__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .ratings__title { margin-bottom: 50rem; } .ratings__item { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 20rem; margin-bottom: 20rem; } .ratings__item:last-child { margin-bottom: 0; } .ratings-card { display: grid; grid-template-columns: 1fr 5fr 261px; grid-gap: 20px; font-size: 32rem; } .ratings-card__num, .ratings-card__source { white-space: nowrap; color: #565656; } .ratings-card__source { text-align: right; } @media only screen and (max-width: 1023px) { .ratings-card { grid-template-columns: 1fr 4fr 2fr; grid-gap: 16rem; font-size: 25rem; line-height: 1.25; } } @media only screen and (max-width: 767px) { .ratings__title { margin-bottom: 36rem; } .ratings__item { padding-bottom: 18rem; margin-bottom: 18rem; } .ratings-card { grid-template-columns: 1fr 3fr; font-size: 17rem; line-height: 1.3; grid-gap: 0rem 16rem; } .ratings-card__num { grid-row: 1/3; } .ratings-card__source { text-align: left; } } .reviews__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .reviews__title { margin-bottom: 44rem; } .reviews__item { margin-top: -1px; } .reviews-card { position: relative; } .reviews-card::after { content: ""; display: block; height: 1px; position: absolute; left: 0; bottom: 0; width: 100%; max-width: calc((100% - var(--grid-gap)) / 6 * 4); background-color: #ccc; opacity: 0; transition: opacity 0.3s; } .reviews-card__top { padding: 39rem 0; position: relative; padding-right: 100rem; width: 100%; cursor: pointer; max-width: calc((100% - var(--grid-gap)) / 6 * 4); border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 25rem; line-height: 1.25; transition: opacity 0.3s; } .reviews-card__top::before, .reviews-card__top::after { --size-line: 80rem; content: ""; display: block; background-color: #ccc; position: absolute; top: 50%; right: 0; width: 1rem; height: var(--size-line); transform-origin: center; margin-top: calc(var(--size-line) / -2); margin-right: calc(var(--size-line) / 2); transition: transform 0.3s, opacity 0.3s; } .reviews-card__top::before { transform: rotate(90deg); } .reviews-card__image { line-height: 0; width: 200rem; overflow: hidden; margin-bottom: 0; max-height: 0; transition: max-height 0.3s, opacity 0.3s, margin-bottom 0.3s; } .reviews-card__image img { aspect-ratio: 1; border-radius: 50%; width: 100%; height: 100%; object-fit: cover; } .reviews-card__position { color: #ccc; transition: color 0.3s; } .reviews-card__drop { height: 0; overflow: hidden; transition: height 0.3s; } .reviews-card__content { padding-bottom: 60rem; width: 90%; font-size: 35rem; line-height: 1.3; } .reviews-card.is-open::after { opacity: 1; } .reviews-card.is-open .reviews-card__top { border-color: transparent; } .reviews-card.is-open .reviews-card__top::before, .reviews-card.is-open .reviews-card__top::after { opacity: 0; } .reviews-card.is-open .reviews-card__image { max-height: 200rem; opacity: 1; margin-bottom: 34rem; } .reviews-card.is-open .reviews-card__drop { height: auto; /* TODO: удалить при подключении JS */ } .reviews-card--accordion::after { display: none; } .reviews-card--accordion .reviews-card__top { max-width: 100%; display: flex; align-items: center; border: none; padding: 20px 0; padding-right: 100rem; } .reviews-card--accordion .reviews-card__image { flex-shrink: 0; width: 80rem; height: 80rem; margin: 0 25rem 0 0; max-height: unset !important; } .reviews-card--accordion .reviews-card__main { font-size: 19rem; line-height: 1.35; } .reviews-card--accordion .reviews-card__position { color: #B2B2B2; } .reviews-card--accordion .reviews-card__content { line-height: 1.2; padding-top: 20rem; } .reviews-card--accordion.is-open .reviews-card__top::after { opacity: 1; transform: rotate(45deg); } .reviews-card--accordion.is-open .reviews-card__top::before { opacity: 1; transform: rotate(135deg); } .reviews-card--accordion.is-open .reviews-card__image { margin-bottom: 0; } @media only screen and (max-width: 1023px) { .reviews-card::after { max-width: 100%; } .reviews-card__top { max-width: 100%; } .reviews-card__content { max-width: 100%; } } @media only screen and (max-width: 767px) { .reviews__title { margin-bottom: 15rem; } .reviews-card__top { padding: 28rem 0; padding-right: 50rem; font-size: 17rem; line-height: 22rem; } .reviews-card__top::before, .reviews-card__top::after { --size-line: 40rem; } .reviews-card__image { width: 100rem; } .reviews-card__content { font-size: 17rem; line-height: 22rem; padding-bottom: 34rem; } .reviews-card.is-open .reviews-card__image { margin-bottom: 15rem; max-height: 100rem; } .reviews-card--accordion .reviews-card__top { padding-right: 50rem; } .reviews-card--accordion .reviews-card__image { margin-right: 15rem; } .reviews-card--accordion .reviews-card__content { padding-top: 0; } .reviews-card--accordion .reviews-card__main { font-size: 17rem; line-height: 22rem; } .reviews-card--accordion.is-open .reviews-card__image { margin-bottom: 0; } } .rotator-cube { width: 100%; position: relative; overflow: hidden; max-width: 200rem; /* &[data-rotation="0"] &__box { transform: rotateX(0deg); } &[data-rotation="1"] &__box { transform: rotateX(-90deg); } &[data-rotation="2"] &__box { transform: rotateX(-180deg); } &[data-rotation="3"] &__box { transform: rotateX(-270deg); } &[data-rotation="4"] &__box { transform: rotateX(-360deg); } */ } .rotator-cube::before { content: ""; background-image: linear-gradient(180deg, var(--background-color), transparent 30%, transparent 70%, var(--background-color)); bottom: 0; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } .rotator-cube__box { position: relative; width: 100%; height: auto; /* aspect-ratio: 1; */ aspect-ratio: auto 10/9; transform-style: preserve-3d; perspective: 2000px; transition: transform 1s ease-in-out; } .rotator-cube__face { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; perspective: none; } .rotator-cube__face--top { transform: rotateX(90deg) translateZ(100rem); } .rotator-cube__face--center { transform: rotateX(0deg) translateZ(100rem); } .rotator-cube__face--bottom { transform: rotateX(-90deg) translateZ(100rem); } .rotator-cube__face--back { transform: rotateX(180deg) translateZ(100rem); } .rotator-cube__face img { width: 100%; } @media only screen and (max-width: 1023px) { .rotator-cube__face--top { transform: rotateX(0deg) translateZ(75rem); } .rotator-cube__face--center { transform: rotateX(90deg) translateZ(75rem); } .rotator-cube__face--bottom { transform: rotateX(180deg) translateZ(75rem); } .rotator-cube__face--back { transform: rotateX(270deg) translateZ(75rem); } } @media only screen and (max-width: 767px) { .rotator-cube__face--top { transform: rotateX(0deg) translateZ(35rem); } .rotator-cube__face--center { transform: rotateX(90deg) translateZ(35rem); } .rotator-cube__face--bottom { transform: rotateX(180deg) translateZ(35rem); } .rotator-cube__face--back { transform: rotateX(270deg) translateZ(35rem); } } @keyframes rotateCube { 0% { transform: rotateX(0deg); } 25% { transform: rotateX(-90deg); } 50% { transform: rotateX(-180deg); } 75% { transform: rotateX(-270deg); } 100% { transform: rotateX(-360deg); } } .services-page .h2 { line-height: 1; letter-spacing: -0.01em; } .services-page__intro { margin-bottom: 50rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .services-page__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .services-page__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .services-page__intro { padding-top: 40rem; } } .services-page__intro .intro__head { max-width: 1200rem; } .services-page__intro .intro__image { aspect-ratio: 1395/735; } .services-page__info { margin-bottom: 120rem; } .services-page__info .infoblock__block--medium .infoblock__text { line-height: 1.2; } .services-page__info .infoblock__block:not(.services-page__info .infoblock__block--medium) .infoblock__text { font-size: 25rem; line-height: 1.2; } .services-page__info .infoblock__block:nth-child(2) .infoblock__text { line-height: 1.3; } .services-page__info .infoblock__title { margin-top: 0; } .services-page__info .infoblock__list { margin-top: 40rem; } .services-page__info .infoblock__item { border-bottom: 1px solid #B2B2B2; } .services-page__info .infoblock__item:first-child { border-top: 1px solid #B2B2B2; } .services-page__info .infoblock__links a span { border-color: #B2B2B2; } .services-page__info .infoblock .infoblock-methodology__text { color: #B2B2B2; line-height: 1.35; } .services-page__info .infoblock .infoblock-methodology__item { border-color: #B2B2B2; } .services-page__info .infoblock-card__top { line-height: 1.2; } .services-page__info .infoblock-card__content { padding-left: 0; max-width: 100%; font-size: 25rem; line-height: 1.25; padding: 20px 0 80px; } .services-page__info .infoblock-card.is-open .infoblock-card__top::after { opacity: 1; transform: rotate(45deg); } .services-page__info .infoblock-card.is-open .infoblock-card__top::before { transform: rotate(135deg); } .services-page__cases { margin-bottom: 120rem; /* .case-card-static { &__subtitle { color: #B2B2B2; margin: 0; max-width: 100%; } } */ } .services-page__cases .cases__item:nth-of-type(6n+2) { order: -1; } .services-page__cases .cases__item:nth-of-type(6n+5) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; order: 1; } .services-page__cases .cases__item:nth-of-type(6n) { order: 3; } .services-page__cases .cases__item:nth-of-type(6n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .services-page__cases .cases__item:nth-of-type(6n+3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-right: 16.6666666667%; } .services-page__cases .cases__item:nth-of-type(6n+4) { margin-left: 0%; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; order: 2; } .services-page__cases .cases__item:only-of-type { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .services-page__cases .cases__item:last-child { margin-left: 0%; margin-right: 0%; } .services-page__cases .cases__item:nth-of-type(3):last-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } .services-page__cases .case-card--mini { opacity: 1; } .services-page__cases .case-card--mini .case-card__preview { transform: none; margin-bottom: 18rem; } .services-page__cases .case-card--mini .case-card__subtitle { font-size: 19rem; line-height: 1.35; } .services-page__cases .case-card--mini .case-card__title, .services-page__cases .case-card--mini .case-card__head { color: #B2B2B2; } .services-page__cases .case-card--mini .case-card__head { top: 0; transform: none; } .services-page__block { margin-bottom: 120rem; } .services-page__block:last-child { margin-bottom: 0; } .services-page__ratings { padding: 40rem 0 80rem; margin-bottom: 50rem; } .services-page__ratings .ratings__title { margin-bottom: 64rem; } .services-page__ratings .ratings__item { padding-bottom: 21rem; margin-bottom: 22rem; } .services-page__ratings .ratings-card { font-size: 35rem; } .services-page__reviews { margin-bottom: 120rem; } .services-page__reviews .infoblock__item { border-bottom: 1px solid #B2B2B2; } .services-page__form .brief__wrap { padding: 40rem 0 100rem; } .services-page__form .brief__title { margin-bottom: 90rem; } @media only screen and (hover: hover) { .services-page__info .infoblock__links a:hover span { border-color: transparent; } } @media only screen and (max-width: 1023px) { .services-page .h2 { letter-spacing: 0; } .services-page__intro { margin-bottom: 35rem; /* .intro { &__title { margin-bottom: 30rem; } } */ } .services-page__info .infoblock__title { font-size: 45rem; line-height: 1; margin-bottom: 40rem; } .services-page__info .infoblock-card__top { font-size: 45rem; line-height: 1; } .services-page__info .infoblock-card__content { padding: 0 0 40rem; } .services-page__info .infoblock-methodology { margin-top: 24rem; } .services-page__info .infoblock-methodology__subtitle { font-size: 45rem; line-height: 1; margin-bottom: 25rem; } .services-page__info .infoblock-methodology__item { margin-bottom: 25rem; padding-bottom: 25rem; } .services-page__cases .cases__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .services-page__cases .cases__item:nth-of-type(6n) { order: 0; } .services-page__cases .cases__item:nth-of-type(6n+2), .services-page__cases .cases__item:nth-of-type(6n+5) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; order: 0; } .services-page__cases .cases__item:nth-of-type(6n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .services-page__cases .cases__item:nth-of-type(6n+3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-right: 0%; } .services-page__cases .cases__item:nth-of-type(6n+4) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; order: 0; } .services-page__cases .cases__item:only-of-type { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .services-page__cases .cases__item:nth-of-type(3):last-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .services-page__ratings .ratings-card { font-size: 25rem; line-height: 1.25; } } @media only screen and (max-width: 767px) { .services-page .h2 { line-height: 1.17; } .services-page__intro { margin-bottom: 24rem; /* .intro { &__title { margin-bottom: 16rem; } } */ } .services-page__info { margin-bottom: 80rem; } .services-page__info .infoblock { /* &__list { margin-top: 34rem; } */ } .services-page__info .infoblock__title { font-size: 30rem; line-height: 1.17; margin-bottom: 18rem; } .services-page__info .infoblock__block { margin-bottom: 60rem; /* &:nth-child(1) { .infoblock { &__text { font-size: 17rem; line-height: 1.3; } } } */ /* &:nth-child(2) { .infoblock { &__text { line-height: 1.3; } } } */ } .services-page__info .infoblock__block:last-child { margin-bottom: 0; } .services-page__info .infoblock-card__top { font-size: 30rem; line-height: 35rem; font-weight: 400; } .services-page__info .infoblock-methodology { margin-top: 6px; } .services-page__info .infoblock-methodology__subtitle { font-size: 30rem; line-height: 35rem; margin-bottom: 20rem; } .services-page__info .infoblock-methodology__item { margin-bottom: 20rem; padding-bottom: 20rem; } .services-page__block { margin-bottom: 80rem; } .services-page__reviews .infoblock__title { font-size: 30rem; line-height: 35rem; margin-bottom: 30rem; } .services-page__ratings { padding: 24rem 0 60rem; margin-bottom: 24rem; } .services-page__ratings .ratings__item { padding-bottom: 18rem; margin-bottom: 18rem; } .services-page__ratings .ratings-card { font-size: 17rem; line-height: 22rem; } .services-page__form .brief__title { margin-bottom: 50rem; } } .services__heading { padding-top: 45rem; } .services__info { padding-top: 245rem; } .services__info:last-child { padding-bottom: 300rem; } .services-card__top { display: inline; position: relative; cursor: pointer; font-size: 55rem; line-height: 1.36; letter-spacing: -0.02em; font-weight: 400; } @media only screen and (max-width: 1365px) { .services-card__top { font-size: 50rem; line-height: 1.4; letter-spacing: 0; } } @media only screen and (max-width: 1023px) { .services-card__top { font-size: 35rem; line-height: 1.29; } } @media only screen and (max-width: 767px) { .services-card__top { font-size: 30rem; line-height: 1.33; } } .services-card__top span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .services-card__top .svg-icon { position: absolute; left: 100%; bottom: 0; margin-bottom: 8rem; margin-left: 28rem; transform-origin: left; opacity: 0; pointer-events: none; transition: margin-left 0.3s, width 0.3s, opacity 0.3s; } .services-card__drop { height: 0; overflow: hidden; opacity: 0; transition: height 0.3s, opacity 0.3s; } .services-card__content { padding: 45rem 0 160rem; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .services-card__content { font-size: 17rem; } } .services-card__list { position: relative; padding-top: 55rem; margin-bottom: -70rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .services-card__list::before { content: ""; display: block; position: absolute; top: 0; right: var(--grid-gap); width: calc(100vw - 4 * var(--grid-gap)); height: 1rem; background-color: currentColor; } .services-card__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; margin-bottom: 70rem; } .services-card__title { display: inline; border-bottom: 1px solid currentColor; } .services-card__text { margin-top: 25rem; } .services-card.is-open .services-card__top span { border-color: transparent; } .services-card.is-open .services-card__top .svg-icon { opacity: 1; pointer-events: auto; } .services-card.is-open .services-card__drop { opacity: 1; overflow: visible; transition: opacity 0.2s, height 0.3s, overflow 0s 0.3s; height: auto; /* TODO: удалить после подключения JS */ } @media only screen and (hover: hover) { .services-card__top:hover span { border-color: transparent; } } @media only screen and (max-width: 1199px) { .services-card__content { padding: 35rem 0 140rem; } .services-card__list { padding-top: 45rem; } } @media only screen and (max-width: 1023px) { .services__heading { padding-top: 40rem; } .services__info { padding-top: 140rem; } .services__info:last-child { padding-bottom: 180rem; } .services-card__content { padding: 30rem 0 120rem; line-height: 1.47; } .services-card__top .svg-icon { width: 30rem; height: 30rem; margin-left: 10rem; margin-bottom: 4rem; } .services-card__list { padding-top: 30rem; margin-bottom: -45rem; } .services-card__item { margin-bottom: 45rem; } } @media only screen and (max-width: 767px) { .services__heading { padding-top: 15rem; } .services__info { padding-top: 70rem; } .services__info:last-child { padding-bottom: 70rem; } .services-card__content { padding: 30rem 0 70rem; } .services-card__list { padding-top: 30rem; margin-bottom: 0; } .services-card__item { margin-bottom: 40rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .services-card__item:last-child { margin-bottom: 0; } .services-card__top .svg-icon { margin-left: 8rem; margin-bottom: 0; } } body.is-filter-open .work__list { display: none; } body.is-filter-open .work-filters__main { display: flex; } @media only screen and (max-width: 1023px) { body.is-nav-open .header__burger span, body.is-nav-open .digital-header__burger span { top: calc(50% - 1rem); transition: top 0.3s, transform 0.3s 0.3s; } body.is-nav-open .header__burger span:nth-of-type(1), body.is-nav-open .digital-header__burger span:nth-of-type(1) { transform: rotate(45deg); } body.is-nav-open .header__burger span:nth-of-type(2), body.is-nav-open .digital-header__burger span:nth-of-type(2) { transform: rotate(-45deg); } body.is-nav-open .header__nav, body.is-nav-open .digital-header__nav { transform: translateX(100%); } } .strategy__intro { margin-bottom: 160rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .strategy__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .strategy__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .strategy__intro { padding-top: 40rem; } } .strategy__intro .intro__title { max-width: 100%; } .strategy__heading { margin-bottom: 160rem; } .strategy__info { margin-bottom: 160rem; } .strategy__info .infoblock__text.h2 { font-size: 55rem; line-height: 1.2; } .strategy__info .infoblock__links a span { border-color: transparent; } .strategy__info .advantages-card { border-color: #d7d7d7; } .strategy__info .advantages-card__text { color: #999; font-weight: 300; } .strategy__info .services-card__content { font-size: 35rem; line-height: 1.2; } .strategy__info .services-card__text { margin: 0; } .strategy__cases { margin-bottom: 160rem; } .strategy__cases .cases__list { margin-top: -65rem; } .strategy__cases .cases__item { margin-top: 65rem; } .strategy__link .intro-block.is-next .intro-block__head { align-items: flex-end; } @media only screen and (hover: hover) { .strategy__info .infoblock__links a:hover span { border-color: #ccc; } } @media only screen and (max-width: 1023px) { .strategy__intro { margin-bottom: 120rem; } .strategy__info .infoblock__title { font-size: 35rem; } .strategy__info .infoblock__text.h2 { font-size: 45rem; line-height: 1.1; } .strategy__info .infoblock__links { font-size: 45rem; } .strategy__info .services-card__top { font-size: 45rem; } } @media only screen and (max-width: 767px) { .strategy__intro { margin-bottom: 80rem; } .strategy__heading { margin-bottom: 80rem; } .strategy__info { margin-bottom: 80rem; } .strategy__info .infoblock__title { font-size: 17rem; } .strategy__info .infoblock__text.h2 { font-size: 17rem; line-height: 1.2; } .strategy__info .infoblock--services .infoblock__item { margin-bottom: 15rem; } .strategy__info .advantages__list { margin-top: -45rem; } .strategy__info .advantages__item { margin-top: 45rem; } .strategy__info .services-card__top { font-size: 17rem; } .strategy__info .services-card__top .svg-icon { width: 20rem; height: 20rem; } .strategy__info .services-card__content { font-size: 17rem; padding: 20rem 0; } } .success-page__intro { margin-bottom: 60rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .success-page__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .success-page__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .success-page__intro { padding-top: 40rem; } } .success-page__intro .intro__title { max-width: 1305rem; margin-bottom: 35rem; } .success-page__info { margin-bottom: 200rem; } .success-page__info .infoblock__text { font-size: 25rem; line-height: 1.2; } .success-page__info .infoblock__list { margin-top: 40rem; } .success-page__info .infoblock__item { border-bottom: 1px solid #ccc; } .success-page__info .infoblock__item:first-child { border-top: 1px solid #ccc; } .success-page__info .infoblock__more-btn { display: inline-block; font-size: 19rem; line-height: 1.3; margin-top: 25rem; transition: opacity 0.3s; } .success-page__info .infoblock__more-btn span { border-bottom: 1px solid currentColor; } .success-page__info .infoblock__article .infoblock__text { font-size: 35rem; line-height: 1.1; max-width: 715rem; } .success-page__info .infoblock-card__content { padding-left: 0; } .success-page__info .infoblock-card__content ul { --line-height: 32rem; font-size: 25rem; line-height: 1.3; } .success-page__info .infoblock-card__content ul li { margin-bottom: 10rem; } .success-page__info .infoblock-card__content ul li:last-child { margin-bottom: 0; } .success-page__cases { margin-bottom: 200rem; } .success-page__cases .cases__wrap { position: relative; } .success-page__cases .cases__title { position: absolute; top: 0; left: 0; } .success-page__cases .cases__list { margin-top: 0; margin-bottom: -205rem; } .success-page__cases .cases__item { margin-top: 0; margin-bottom: 205rem; } .success-page__cases .cases__item:nth-of-type(1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; margin-left: 33.3333333333%; } .success-page__cases .cases__item:nth-of-type(2) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .success-page__cases .cases__item:nth-of-type(3) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .success-page__cases .cases__item:nth-of-type(4) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; margin-left: 16.6666666667%; } @media (hover: hover) { .success-page__info .infoblock__more-btn:hover { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .success-page__intro { margin-bottom: 45rem; /* .intro { &__title { margin-bottom: 30rem; } } */ } .success-page__info { margin-bottom: 140rem; } .success-page__info .infoblock__title { font-size: 45rem; } .success-page__info .infoblock__article .infoblock__text { font-size: 25rem; } .success-page__info .infoblock__more-btn { margin-top: 10rem; } .success-page__cases { margin-bottom: 140rem; } .success-page__cases .cases__title { position: static; margin-bottom: 40rem; } .success-page__cases .cases__list { margin-bottom: -140rem; } .success-page__cases .cases__item { margin-bottom: 140rem; } .success-page__cases .cases__item:nth-of-type(2n+1) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; margin-left: 0%; } .success-page__cases .cases__item:nth-of-type(2n) { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; margin-left: 16.6666666667%; } } @media only screen and (max-width: 767px) { .success-page__intro .intro__title { line-height: 1.17; margin-bottom: 25rem; } .success-page__cases { margin-bottom: 75rem; } .success-page__cases .cases__list { margin-bottom: -70rem; } .success-page__cases .cases__item { margin-bottom: 70rem; } .success-page__info { margin-bottom: 75rem; } .success-page__info .infoblock__title { font-size: 30rem; line-height: 1.17; } .success-page__info .infoblock__text { font-size: 17rem; line-height: 1.4; } .success-page__info .infoblock__list { margin-top: 30rem; } .success-page__info .infoblock__article { margin-bottom: 25rem; padding-bottom: 25rem; } .success-page__info .infoblock__article:last-child { margin-bottom: 0; } .success-page__info .infoblock__article .infoblock__text { font-size: 17rem; line-height: 1.3; } .success-page__info .infoblock__more-btn { font-size: 17rem; line-height: 1.3; } .success-page__info .infoblock-card__content { padding-top: 0; } .success-page__info .infoblock-card__content ul { --line-height: 22rem; font-size: 17rem; line-height: 1.3; } } .team__list { margin-bottom: -40rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .team__item { margin-bottom: 40rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .team__text { color: #B2B2B2; margin-top: 5rem; } @media only screen and (max-width: 1023px) { .team { font-size: 17rem; line-height: 22rem; } .team__list { margin-bottom: -15rem; } .team__item { margin-bottom: 15rem; } } @media only screen and (max-width: 767px) { .team__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } } .tech__intro { padding-top: 120rem; } @media only screen and (max-width: 1440px) { .tech__intro { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .tech__intro { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .tech__intro { padding-top: 40rem; } } .tech__intro .intro__title { max-width: 100%; } .tech__expertise { padding-top: 100rem; } .tech__info { padding: 100rem 0; } .tech__info .infoblock__text { line-height: 1.3; } .tech__info .infoblock__list { margin-top: 0; } .tech__info .infoblock__item { padding: 0; margin-bottom: 25rem; } .tech__info .infoblock__item:last-child { margin-bottom: 0; } .tech__info .infoblock-card__top { padding: 0; line-height: 1.3; } .tech__info .infoblock-card__top::before, .tech__info .infoblock-card__top::after { display: none; } .tech__info .infoblock-card__top span { border-bottom: 1px solid currentColor; } .tech__info .infoblock-card__content { font-size: 35rem; line-height: 1.3; padding: 45rem 0; max-width: 100%; } .tech__logos { padding-bottom: 100rem; } .tech__logos .logos__icon { min-height: 160rem; display: flex; align-items: center; } .tech__direction { padding-top: 100rem; } .tech__projects { padding: 100rem 0; } .tech__technologies { margin-bottom: 100rem; } .tech__approach { padding: 100rem 0; } .tech__approach--steps .tech-approach__item:nth-of-type(1) .tech-approach-card__item .tech-approach-card__cell { grid-column: span 2; } .tech__approach--steps .tech-approach__item:nth-of-type(1) .tech-approach-card__item:first-child .tech-approach-card__cell { grid-column: span 3; } .tech__approach--steps .tech-approach__item:nth-of-type(2) .tech-approach-card__item:first-child .tech-approach-card__cell:nth-child(1) { grid-column: 3/span 2; } .tech__approach--steps .tech-approach__item:nth-of-type(2) .tech-approach-card__item:first-child .tech-approach-card__cell:nth-child(2) { grid-column: 5/span 1; } .tech__approach--steps .tech-approach__item:nth-of-type(2) .tech-approach-card__item:last-child .tech-approach-card__cell:nth-child(1) { grid-column: 3/span 1; } .tech__approach--steps .tech-approach__item:nth-of-type(2) .tech-approach-card__item:last-child .tech-approach-card__cell:nth-child(2) { grid-column: 4/span 1; } .tech__approach--steps .tech-approach__item:nth-of-type(2) .tech-approach-card__item:last-child .tech-approach-card__cell:nth-child(3) { grid-column: 5/span 1; } .tech__approach--steps .tech-approach__item:nth-of-type(3) .tech-approach-card__item .tech-approach-card__cell { grid-column: 6/span 2; } .tech__approach--steps .tech-approach__item:nth-of-type(3) .tech-approach-card__item:last-child .tech-approach-card__cell { grid-column: 6/span 3; } .tech__approach--start .tech-approach__item:nth-of-type(1) .tech-approach-card__item .tech-approach-card__cell { grid-column: span 2; } .tech__approach--start .tech-approach__item:nth-of-type(1) .tech-approach-card__item:nth-child(2) .tech-approach-card__cell, .tech__approach--start .tech-approach__item:nth-of-type(1) .tech-approach-card__item:nth-child(6) .tech-approach-card__cell { grid-column: 3/span 6; } .tech__approach--start .tech-approach__item:nth-of-type(1) .tech-approach-card__item:nth-child(3) .tech-approach-card__cell { grid-column: 3/span 2; } .tech__approach--start .tech-approach__item:nth-of-type(1) .tech-approach-card__item:nth-child(4) .tech-approach-card__cell { grid-column: 5/span 2; } .tech__approach--start .tech-approach__item:nth-of-type(1) .tech-approach-card__item:nth-child(5) .tech-approach-card__cell { grid-column: 7/span 2; } .tech__components { padding-bottom: 100rem; } .tech__support { padding: 100rem 0; } .tech__brief { padding-top: 80rem; } .tech__brief .brief__form { width: 100%; } .tech__brief .brief__title { max-width: 900rem; } .tech__brief .form__col { align-self: flex-start; } .tech__brief .form__col:first-child { max-width: 900rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 58.3333333333%; } .tech__brief .form__col:last-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 41.6666666667%; } .tech__brief .form__main { max-width: 630rem; display: flex; flex-direction: column; } .tech__brief .form__options { width: 100%; max-width: 405rem; } .tech-expertise__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-expertise__list { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-expertise__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .tech-expertise__box { display: flex; gap: 20rem; align-items: center; } .tech-expertise__place { flex-shrink: 0; aspect-ratio: 1; width: 120rem; border-radius: 50%; border: 1px solid currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tech-expertise__place span { display: block; } .tech-expertise__place span:last-child { font-size: 10rem; line-height: 2; } .tech-expertise__text { font-size: 19rem; line-height: 1.3; } .tech-direction__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-direction__list { display: flex; flex-flow: row wrap; border-top: 1px solid currentColor; } .tech-direction__item { width: 33.3333333333%; border-left: 1px solid #000; } .tech-direction__item:first-child { border-left: none; } .tech-direction__head { max-width: 630rem; } .tech-direction__title { margin-bottom: 25rem; } .tech-direction__text { font-size: 19rem; line-height: 1.3; } .tech-direction__list { margin-top: 60rem; margin-bottom: 80rem; } .tech-direction__block { padding: 15rem 15rem 60rem; font-size: 25rem; line-height: 1.1; } .tech-direction__link { font-size: 25rem; line-height: 1.1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 40rem; padding: 20rem 30% 20rem 20rem; transition: opacity 0.3s; } .tech-projects__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-projects__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-projects__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .tech-projects__text { margin-top: 25rem; font-size: 19rem; line-height: 1.3; } .tech-projects__link { margin-top: 25rem; font-size: 19rem; line-height: 1.3; } .tech-projects__item { margin-bottom: 60rem; } .tech-projects__item:last-child { margin-bottom: 0; } .tech-projects-card { display: block; } .tech-projects-card__title { margin-top: 15rem; font-size: 19rem; line-height: 1.3; transition: opacity 0.3s; } .tech-technologies__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-technologies__block { border-bottom: 1px solid #ccc; padding-bottom: 50rem; margin-bottom: 50rem; } .tech-technologies__block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .tech-technologies__block:last-child .tech-technologies__list { column-count: 1; } .tech-technologies__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-technologies__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .tech-technologies__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .tech-technologies__list { width: 100%; column-count: 2; margin-bottom: -10rem; } .tech-technologies__item { margin-bottom: 10rem; line-height: 1.3; } .tech-approach { font-size: 19rem; line-height: 1.3; } .tech-approach__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-approach__title { margin-bottom: 25rem; } .tech-approach__text { max-width: 855rem; } .tech-approach__list { margin-top: 80rem; } .tech-approach__item:not(:last-child) { padding-bottom: 25rem; margin-bottom: 25rem; border-bottom: 1px solid #666; } .tech-approach-card__wrap { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-approach-card__side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 16.6666666667%; } .tech-approach-card__main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 83.3333333333%; } .tech-approach-card__item { width: 100%; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10rem; margin-bottom: 10rem; } .tech-approach-card__item:last-child { margin-bottom: 0; } .tech-approach-card__cell { padding: 12rem 20rem; border-style: solid; border-color: currentColor; border-width: 1px 0 1px 1px; } .tech-formats { position: relative; padding: 50rem 0 100rem; } .tech-formats__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-formats__title { position: absolute; top: 0; left: calc(2 * var(--grid-gap)); max-width: 525rem; } .tech-formats__main { width: 100%; margin: 0 auto; max-width: 684rem; } .tech-triangle { position: relative; } .tech-triangle__bg { line-height: 0; width: 100%; height: 100%; } .tech-triangle__controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20rem; } .tech-triangle__button { display: inline-flex; align-items: center; gap: 10rem; position: absolute; } .tech-triangle__button span { font-size: 16rem; } .tech-triangle__button:nth-child(1) { left: 20rem; bottom: 20rem; } .tech-triangle__button:nth-child(2) { flex-direction: column; top: 20rem; left: 50%; transform: translateX(-50%); } .tech-triangle__button:nth-child(3) { flex-direction: row-reverse; right: 20rem; bottom: 20rem; } .tech-triangle__circle { border-radius: 50%; height: 60rem; width: 60rem; background-color: #fff; color: #000; position: relative; } .tech-triangle__circle::before, .tech-triangle__circle::after { --size-line: 22rem; content: ""; display: block; background-color: #000; position: absolute; top: 50%; left: 50%; width: 2rem; height: var(--size-line); transform-origin: center; margin-top: calc(var(--size-line) / -2); margin-right: calc(var(--size-line) / -2); transition: transform 0.3s, opacity 0.3s; } .tech-triangle__circle::before { transform: rotate(90deg); } .tech-triangle-popup { position: absolute; pointer-events: none; opacity: 0; width: 100%; max-width: 512rem; background-color: #fff; color: #000; transition: opacity 0.3s; } .tech-triangle-popup.is-active { opacity: 1; pointer-events: auto; } .tech-triangle-popup--left { border-radius: 0 0 0 30rem; bottom: 20rem; left: 20rem; } .tech-triangle-popup--up { border-radius: 30rem 0 0 0; top: 20rem; left: 50%; margin-left: -30rem; } .tech-triangle-popup--right { border-radius: 0 0 30rem 0; bottom: 20rem; right: 20rem; } .tech-triangle-popup__close { line-height: 0; position: absolute; top: 20rem; right: 20rem; transition: opacity 0.3s; } .tech-triangle-popup__box { padding: 20rem; } .tech-triangle-popup__title { margin-bottom: 12rem; } .tech-triangle-popup__list { font-size: 19rem; line-height: 1.3; } .tech-triangle-popup__item { margin-bottom: 20rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-triangle-popup__item:last-child { margin-bottom: 0; } .tech-triangle-popup__item span { display: block; } .tech-triangle-popup__item span:first-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .tech-triangle-popup__item span:last-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .tech-components__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-components__list { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-components__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .tech-components-card { font-size: 19rem; line-height: 1.3; } .tech-components-card__preview { margin-bottom: 15rem; } .tech-support { line-height: 1.3; } .tech-support__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .tech-support__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .tech-support__col--side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 33.3333333333%; } .tech-support__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 66.6666666667%; } .tech-support__block { display: none; } .tech-support__block.is-active { display: block; } .tech-support__tags { display: flex; flex-flow: row wrap; gap: 5rem; margin-bottom: 45rem; } .tech-support__tag { border: 1px solid #b3b3b3; border-radius: 40rem; font-size: 14rem; line-height: 20rem; padding: 6rem 12rem; } .tech-support__controls { display: flex; flex-direction: column; } .tech-support__button { font-size: 19rem; line-height: 1.3; margin-bottom: 25rem; transition: opacity 0.3s; } .tech-support__button.is-active span { border-color: currentColor; } .tech-support__button:last-child { margin-bottom: 0; } @media (hover: hover) { a.tech-projects-card:hover .tech-projects-card__title { opacity: 0.4; } .tech-direction__link:hover { opacity: 0.7; } .tech-support__button:hover { opacity: 0.7; } } @media only screen and (max-width: 1023px) { .tech__info { padding: 60rem 0; } .tech__info .infoblock__title { font-size: 30rem; line-height: 1.17; } .tech__info .infoblock-card__content { font-size: 25rem; padding: 25rem 0; } .tech__logos .logos__list { grid-template-columns: repeat(2, 1fr); } .tech__logos .logos__item { justify-content: flex-start; } .tech__logos .logos__icon { min-height: 80rem; } .tech__direction { padding-top: 60rem; } .tech__projects { padding: 60rem 0; } .tech__technologies { margin-bottom: 60rem; } .tech__approach { padding: 60rem 0; } .tech__components { padding-bottom: 60rem; } .tech__support { padding: 60rem 0; } .tech-expertise__item { margin-bottom: 45rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-expertise__item:last-child { margin-bottom: 0; } .tech-expertise__place { width: 100rem; font-size: 25rem; } .tech-expertise__place span:last-child { font-size: 10rem; line-height: 2; } .tech-expertise__text { font-size: 25rem; line-height: 1; } .tech-direction__title { font-size: 30rem; line-height: 1.17; } .tech-direction__list { border-top: none; margin-bottom: 0; } .tech-direction__item { width: 100%; border-left: none; border-top: 1px solid currentColor; } .tech-direction__item:first-child { border: none; } .tech-direction__block, .tech-direction__link { padding: 15rem 0; font-size: 19rem; line-height: 1.3; } .tech-direction__link { flex-direction: row; } .tech-projects__title { font-size: 30rem; line-height: 1.17; } .tech-projects__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-projects__list { margin-top: 45rem; } .tech-technologies__title { font-size: 30rem; line-height: 1.17; } .tech-technologies__item { font-size: 19rem; } .tech-technologies__block { padding-bottom: 40rem; margin-bottom: 40rem; } .tech-technologies__block:last-child { margin-bottom: 0; padding-bottom: 0; } .tech-technologies__block:last-child .tech-technologies__list { column-count: 2; } .tech-approach__title { font-size: 30rem; line-height: 1.17; } .tech-approach__list { margin-top: 60rem; } .tech-approach-card__side { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-approach-card__main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-approach-card__title { margin-bottom: 20rem; } .tech-approach-card__cell { font-size: 17rem; line-height: 1.3; padding: 8rem 12rem; } .tech-formats__title { position: static; font-size: 30rem; line-height: 1.17; margin-bottom: 40rem; } .tech-triangle-popup { max-width: 50vw; } .tech-triangle-popup__title { font-size: 25rem; } .tech-triangle-popup__list { font-size: 17rem; } .tech-triangle__bg svg { width: 100%; height: 100%; } .tech-components__item { margin-bottom: 45rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-components__item:last-child { margin-bottom: 0; } .tech-support__title { font-size: 30rem; line-height: 1.17; margin-bottom: 25rem; } .tech-support__col--side, .tech-support__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-support__button, .tech-support__text { font-size: 25rem; } .tech-support__main { margin-top: 40rem; } } @media only screen and (max-width: 767px) { .tech__info .infoblock-card__content { font-size: 17rem; line-height: 1.3; } .tech__brief .brief__form { margin-top: 40rem; } .tech__brief .form__col:first-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech__brief .form__col:last-child { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech__brief .form__main { max-width: 100%; margin-bottom: 60rem; } .tech__brief .form__options { max-width: 100%; margin-bottom: 40rem; } .tech-expertise__text { font-size: 17rem; line-height: 1.3; } .tech-technologies__col--side, .tech-technologies__col--main { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .tech-technologies__title { margin-bottom: 30rem; } .tech-approach-card__cell { font-size: 12rem; padding: 6rem; } .tech-formats__main { max-width: 525rem; } .tech-triangle__controls { padding: 16rem; } .tech-triangle__circle { width: 40rem; height: 40rem; } .tech-triangle__circle::before, .tech-triangle__circle::after { --size-line: 16rem; } .tech-triangle__button span { font-size: 14rem; } .tech-triangle__button:nth-child(1) { left: 16rem; bottom: 10rem; } .tech-triangle__button:nth-child(2) { top: 16rem; } .tech-triangle__button:nth-child(3) { right: 16rem; bottom: 10rem; } .tech-triangle-popup { max-width: unset; width: auto; left: 16rem; right: 16rem; } .tech-triangle-popup--left, .tech-triangle-popup--right { bottom: 10rem; } .tech-triangle-popup--left { border-radius: 0 0 0 20rem; } .tech-triangle-popup--right { border-radius: 0 0 20rem 0; } .tech-triangle-popup--up { top: 10rem; margin-left: 0; border-radius: 20rem 0 0 0; } .tech-triangle-popup__box { padding: 16rem; } .tech-support__button, .tech-support__text { font-size: 19rem; } } .technology__title { margin-bottom: 25rem; } .technology__row { margin-bottom: 30rem; display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .technology__row:last-child { margin-bottom: 0; } .technology__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .technology__list { display: flex; flex-flow: row wrap; gap: 4rem; } .technology__item { font-size: 20rem; line-height: 1.25; padding: 10rem 20rem; border-radius: 40rem; border: 1px solid currentColor; white-space: nowrap; } .technology--sm .technology__title { margin-bottom: 0; } .technology--sm .technology__list { gap: 5rem; } .technology--sm .technology__item { font-size: 19rem; line-height: 1.35; } @media only screen and (max-width: 1023px) { .technology__title { font-size: 30rem; line-height: 1.17; letter-spacing: 0; margin-bottom: 10rem; } .technology--sm .technology__title, .technology--sm .technology__item { font-size: 17rem; line-height: 22rem; } } @media only screen and (max-width: 767px) { .technology__title { font-size: 17rem; line-height: 1.3; } .technology--sm .technology__row { margin-bottom: 15rem; } .technology--sm .technology__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .technology--sm .technology__title { margin-bottom: 15rem; } } .video { font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .video { font-size: 17rem; } } .video__cover { width: 100%; margin-bottom: 10rem; position: relative; } .video__cover::before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 56.25%; } .video__cover video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .video__bg { z-index: 2; } .video__controls { display: flex; gap: 20rem; } .video__play-btn { display: flex; align-items: center; justify-content: flex-start; gap: 5rem; cursor: pointer; } .video__play-icon { width: 21rem; height: 21rem; position: relative; } .video__play-icon .svg-icon { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: opacity 0.3s; } .video__play-icon .svg-icon--pause { opacity: 0; } .video__progress { display: flex; align-items: center; min-height: 100%; flex-grow: 1; opacity: 0; transition: opacity 0.3s; } .video__progress-line { background-color: #f5f5f5; height: 1px; position: relative; width: 100%; } .video__progress-line span { display: block; background-color: currentColor; position: absolute; top: 0; left: 0; height: 100%; width: 0; } .video__time { opacity: 0; transition: opacity 0.3s; } .video.is-plays .video__play-btn .svg-icon--play { opacity: 0; } .video.is-plays .video__play-btn .svg-icon--pause { opacity: 1; } .video.is-plays .video__progress, .video.is-plays .video__time { opacity: 1; } /* for demonstration */ @keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } .work__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .work__wrap { padding-bottom: 160rem; padding-top: 120rem; } @media only screen and (max-width: 1440px) { .work__wrap { padding-top: 80rem; } } @media only screen and (max-width: 1023px) { .work__wrap { padding-top: 60rem; } } @media only screen and (max-width: 767px) { .work__wrap { padding-top: 40rem; } } .work__list { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); margin-bottom: 160rem; margin-top: -120rem; } .work__item { margin-top: 160rem; padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; /* &:nth-child(-n+2) { margin-top: 0; } */ } .work__button.is-active span { border-bottom: 1px solid currentColor; } .work__filters { margin-top: 60rem; } .work__empty { margin-top: 40rem; max-width: 900rem; } .work-filters__button-container { display: flex; align-items: center; } .work-filters__toggle, .work-filters__reset { display: inline-flex; align-items: center; justify-content: flex-start; } .work-filters__toggle .svg-icon, .work-filters__reset .svg-icon { flex-shrink: 0; margin-left: 10rem; transform: scale(0); transition: transform 0.3s; } .work-filters__toggle.is-active .svg-icon, .work-filters__reset.is-active .svg-icon { transform: scale(1); } .work-filters__reset:not(.is-active) { visibility: hidden; pointer-events: none; } .work-filters__main { display: none; flex-direction: column; transition: height 0.5s; } .work-filters__container { flex-shrink: 0; } .work-filters__block { padding-top: 70rem; } .work-filters__row { display: flex; flex-flow: row wrap; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); } .work-filters__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 50%; } .work-filters__title { margin-bottom: 25rem; } .work-filters__link { line-height: 1.29; position: relative; } .work-filters__link::before { content: ""; display: block; width: 6rem; height: 6rem; border-radius: 50%; background-color: currentColor; position: absolute; top: 50%; left: 0; margin-top: -3rem; margin-left: -25rem; transform: scale(0); transform-origin: center; transition: transform 0.3s; } .work-filters__link:hover::before { transform: scale(1); } .work-filters__link.is-active::before { transform: scale(1); } @media only screen and (max-width: 1023px) { .work__wrap { padding-bottom: 80rem; } .work__list { margin-top: 20rem; } .work__item { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .work__item:nth-child(n) { margin-top: 80rem; } .work__item:first-child { margin-top: 0; } .work-filters__button .svg-icon { width: 21rem; height: 21rem; margin-left: 5rem; } .work-filters__block { padding-top: 35rem; } .work-filters__block:last-child { padding-bottom: 40rem; } } @media only screen and (max-width: 767px) { .work__wrap { padding-bottom: 70rem; } .work__filters { margin-top: 20rem; } .work__item:nth-child(n) { margin-top: 45rem; } .work__item:first-child { margin-top: 0; } .work-filters { /* &__item { margin-bottom: 7rem; &:last-child { margin-bottom: 0; } } */ } .work-filters__main { font-size: 19rem; line-height: 30rem; } .work-filters__block { padding-top: 20rem; } .work-filters__block:last-child { padding-bottom: 70rem; } .work-filters__col { padding-right: var(--grid-gap); padding-left: var(--grid-gap); width: 100%; } .work-filters__list { margin-left: 60rem; } } .sitemap { max-width: 800px; margin: 40px auto; } .sitemap s { border: 1px dashed #000; padding: 3px 6px; margin-left: -6px; } .sitemap__container { width: 100%; margin: 0 auto; padding: 0 calc(2 * var(--grid-gap)); max-width: 100%; } .sitemap__head { padding: 20px 0; margin: 0 0 40px; } .sitemap__logo { line-height: 0; } .sitemap__list { column-count: 1; } .sitemap__item { margin-bottom: 12px; } .sitemap__item--category { margin-top: 40px; } .sitemap__link { display: inline-block; border-bottom: 1px solid transparent; transition: border-color 0.3s; font-size: 19rem; line-height: 1.3; font-weight: 400; } @media only screen and (max-width: 1023px) { .sitemap__link { font-size: 17rem; } } .sitemap__link:hover { border-bottom-color: currentColor; } @media only screen and (max-width: 767px) { .sitemap__list { column-count: 1; } } /* @use '../../node_modules/tiny-slider/dist/tiny-slider.css'; */ /** * Swiper 11.2.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 3, 2025 */ /* FONT_START */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } /* Navigation font end */ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } :root { /* --swiper-scrollbar-border-radius: 10px; --swiper-scrollbar-top: auto; --swiper-scrollbar-bottom: 4px; --swiper-scrollbar-left: auto; --swiper-scrollbar-right: 4px; --swiper-scrollbar-sides-offset: 1%; --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1); --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5); --swiper-scrollbar-size: 4px; */ } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } /* Zoom container styles start */ .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } /* Zoom container styles end */ .swiper-slide-zoomed { cursor: move; touch-action: none; } /* a11y */ .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active { pointer-events: auto; } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper.swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } /* Cube slide shadows start */ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Cube slide shadows end */ .swiper.swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Flip slide shadows start */ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Flip slide shadows end */ .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper.swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } .slider { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; position: relative; } .slider .tns-outer, .slider .tns-ovh, .slider .tns-inner { display: flex; flex-direction: column; flex-grow: 1; } .slider__list { display: flex; align-items: stretch; flex-grow: 1; } .slider__item { width: 100%; flex-shrink: 0; } .slider .tns-nav { display: flex !important; justify-content: center; align-items: center; position: relative; z-index: 2; gap: 6rem; width: 100%; max-width: 360rem; margin: 0 auto; } .slider .tns-nav button { position: relative; display: block; height: 2rem; width: 5%; background-color: #000; transition: width 0.3s, flex-grow 0.3s, background-color 0.3s; } .slider .tns-nav button::before { content: ""; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000; transform: scaleX(0); transform-origin: left; } .slider .tns-nav button.tns-nav-active { flex-grow: 1; /* &::before { transform: scaleX(1); transition: transform 5s linear; } */ } /* .loader { width: 48px; height: 48px; border-radius: 50%; position: relative; transform:rotate(45deg); background: #fff; } .loader::before { content: ""; box-sizing: border-box; position: absolute; inset: 0px; border-radius: 50%; border:24px solid #FF3D00; animation: prixClipFix 2s infinite linear; } @keyframes prixClipFix { 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} 25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} } */ /* .swiper-pagination-bullet { width: 16px !important; height: 16px !important; background-color: white; position: relative; border: 1px solid currentColor; opacity: 1 !important; .loader { --loader-fill-size: 7px; width: calc(var(--loader-fill-size) * 2); height: calc(var(--loader-fill-size) * 2); border-radius: 50%; position: relative; transform:rotate(45deg); top: 0; left: 0; background-color: #fff; } } .swiper-pagination-bullet-active { position: relative; .loader { &::before { content: ""; box-sizing: border-box; position: absolute; border-radius: 50%; border: var(--loader-fill-size) solid black; animation: prixClipFix 4s linear infinite; } } } */ .swiper-pagination { display: inline-flex; justify-content: flex-start; gap: 16px; padding: 10rem calc(2 * var(--grid-gap)); position: static !important; } .swiper-pagination-bullet { width: 16px !important; height: 16px !important; margin: 0 !important; opacity: 1 !important; position: relative; background: #fff !important; } .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .loader::before { animation: none; border-color: transparent; } .loader { --loader-fill-size: 7px; --border-width: 1px; width: calc(var(--loader-fill-size) * 2); height: calc(var(--loader-fill-size) * 2); border-radius: 50%; transform: translate(-50%, -50%) rotate(45deg); background-color: #fff; position: absolute; top: 50%; left: 50%; border-width: var(--border-width); border-style: solid; border-color: #000; } .loader::before { content: ""; position: absolute; inset: calc(-1 * var(--border-width)); border-radius: 50%; border: var(--loader-fill-size) solid #000; animation: prixClipFix 4s linear forwards; } @keyframes prixClipFix { 0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); } 25% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); } 50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } 75% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); } 100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); } } /* @use './original/styles.scss'; */