/*** 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 *, g, path, 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; } :root { --scale: 1px; --grid-gap: 24rem; --header-min-height: 80rem; --heading-min-height: 128rem; --infinity-100: #EEFAFF; --infinity-30: #EEFAFF4D; --infinity-10: #EEFAFF1A; --stone-100: #C0D2DB; --stone-80: #9FB2BC; --space-100: #100F14; --space-60: #1A1E26; --light-100: #2149FF; --night-100: #324250; --night-30: #3242504D; --night-10: #3242501A; --scarlet: #FD2A32; } @media only screen and (min-width: 1920px) { :root { --header-min-height: 106rem; --grid-gap: 32rem; --heading-min-height: 170rem; } } @media only screen and (max-width: 1024px) { :root { --grid-gap: 32rem; --header-min-height: 112rem; --heading-min-height: 168rem; } } @media only screen and (max-width: 767px) { :root { --grid-gap: 16rem; --header-min-height: 72rem; --heading-min-height: 100rem; } } @font-face { font-family: "ONY One Beta"; src: url("../fonts/ONYOneBeta/ONYOneBeta-Light.eot"); src: url("../fonts/ONYOneBeta/ONYOneBeta-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/ONYOneBeta/ONYOneBeta-Light.woff") format("woff"), url("../fonts/ONYOneBeta/ONYOneBeta-Light.ttf") format("truetype"), url("../fonts/ONYOneBeta/ONYOneBeta-Light.svg") format("svg"); font-weight: 300; font-style: normal; font-display: block; } html { font-size: var(--scale); scroll-behavior: smooth; } body { font-family: "ONY One Beta", Arial, Helvetica, sans-serif; color: var(--infinity-100); background-color: var(--space-100); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { body { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { body { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { body { font-size: 14rem; line-height: 18rem; } } body::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 8px; } body::-webkit-scrollbar-track { background: transparent; border-radius: 8px; margin: 0px 0; } body::-webkit-scrollbar-thumb { background-color: #EEFAFF; border-radius: 8px; } svg { fill: currentColor; } a { text-decoration: none; color: currentColor; cursor: pointer; } button { font-family: "ONY One Beta", Arial, Helvetica, sans-serif; cursor: pointer; } img, video { display: block; max-width: 100%; } ul, ol { margin: 0; padding: 0; } h1, h2, h3 { margin: 0; } p { margin-bottom: 1em; } p:last-of-type { margin-bottom: 0; } .wrapper { display: flex; flex-flow: column nowrap; width: 100%; min-height: 100%; position: relative; z-index: 2; padding-right: var(--scrollOffset, 0px); } .main { display: flex; flex-flow: column nowrap; flex-grow: 1; } .is-hidden { display: none !important; } .is-overflow { overflow: hidden; } .h0 { font-size: 120rem; line-height: 110rem; font-weight: 400; letter-spacing: -0.03em; } @media only screen and (max-width: 1199px) { .h0 { font-size: 88rem; line-height: 86rem; } } @media only screen and (max-width: 1024px) { .h0 { font-size: 140rem; line-height: 120rem; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .h0 { font-size: 64rem; line-height: 60rem; } } .h1 { font-size: 72rem; line-height: 68rem; font-weight: 400; letter-spacing: -0.01em; } @media only screen and (min-width: 1920px) { .h1 { font-size: 96rem; line-height: 90rem; } } @media only screen and (max-width: 1024px) { .h1 { font-size: 80rem; line-height: 82rem; } } @media only screen and (max-width: 767px) { .h1 { font-size: 48rem; line-height: 50rem; /* font-size: 28rem; line-height: 32rem; letter-spacing: 0; */ } } .h1-line { font-size: 72rem; line-height: 68rem; font-weight: 400; letter-spacing: -0.01em; } @media only screen and (max-width: 1024px) { .h1-line { font-size: 56rem; line-height: 62rem; } } @media only screen and (max-width: 767px) { .h1-line { font-size: 28rem; line-height: 32rem; } } .h2 { font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } @media only screen and (min-width: 1920px) { .h2 { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) { .h2 { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 767px) { .h2 { font-size: 28rem; line-height: 32rem; } } .h3 { font-size: 28rem; line-height: 30rem; font-weight: 400; } @media only screen and (min-width: 1920px) { .h3 { font-size: 38rem; line-height: 40rem; } } @media only screen and (max-width: 1024px) { .h3 { font-size: 40rem; line-height: 44rem; } } @media only screen and (max-width: 767px) { .h3 { font-size: 20rem; line-height: 24rem; } } .h4 { font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } @media only screen and (min-width: 1920px) { .h4 { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) { .h4 { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) { .h4 { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } .section { margin-bottom: 120rem; } .section--hero, .section--projects, .section--about-hero, .section--history, .section--contacts-hero, .section--services-hero { margin-bottom: 0; } .section--404 { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 36vw; line-height: 1; } .tag { display: inline-flex; padding: 6rem 12rem; border-radius: 6rem; background-color: var(--night-30); /* -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); */ transition: background-color 0.3s; } .link span { border-bottom: 1rem transparent; transition: border-color 0.3s; } .tns-controls, .tns-nav, .tns-outer > button { display: none !important; } @media only screen and (hover: hover) { .link:hover span { border-color: currentColor; } } @media only screen and (min-width: 1920px) { .section { margin-bottom: 160rem; } .section--projects, .section--about-hero { margin-bottom: 0; } .tag { padding: 10rem 16rem; } } @media only screen and (max-width: 1024px) { .section--about-hero, .section--services-hero { margin-bottom: 120rem; } .section--history { margin-bottom: 160rem; } /* .section[id]:not([id=""]) { scroll-margin-top: var(--header-min-height); } */ .tag { padding: 8rem 16rem; border-radius: 8rem; } } @media only screen and (max-width: 767px) { .section--hero { margin-bottom: 40rem; } .section--about-hero, .section--services-hero { margin-bottom: 80rem; } .section--history { margin-bottom: 120rem; } .tag { padding: 4rem 10rem; border-radius: 5rem; } } .about { /* &__bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: calc(var(--vh, 1vh)* 100); img { width: 100%; height: 100%; object-fit: cover; } } */ /* &--career { .about { &__heading { padding: 0; } &__wrap { min-height: calc(var(--vh, 1vh)* 100 - var(--heading-min-height)); } &__side { position: static; @include mixins.grid-col(2, 4); } &__main { background-color: var(--space-100); -webkit-backdrop-filter: none; backdrop-filter: none; @include mixins.grid-col(2, 4); @include mixins.grid-offset-left(0, 4); } } } */ } .about__container { width: 100%; margin: 0 auto; max-width: 100%; } .about__heading { padding: 40rem var(--grid-gap) 50rem; } .about__title { text-indent: 25%; } .about__wrap { position: relative; align-items: flex-start; min-height: calc(var(--vh, 1vh) * 100); box-shadow: 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .about__side { position: sticky; top: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .about__main { background-color: rgba(var(--space-100), 0.1); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; margin-left: -50%; } .about__image { line-height: 0; min-height: 50vh; } .about__image img, .about__image video { width: 100%; height: 100%; object-fit: cover; height: calc(var(--vh, 1vh) * 100); } .about__infobox { min-height: calc(var(--vh, 1vh) * 100); display: flex; flex-direction: column; } .about__info { box-shadow: inset 0 -1px 0 0 var(--infinity-30); flex-grow: 1; display: flex; } .about__info .about-info-card { height: auto; } .about__numbers { box-shadow: inset 0 -1px 0 0 var(--infinity-30); position: relative; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .about__numbers::before { content: ""; display: block; width: 1px; height: 100%; box-shadow: inset 1px 0 0 0 var(--infinity-30); position: absolute; left: 50%; transform: translateX(-1px); } .about__numbers .about-info-card { min-height: 240rem; } .about__num-card { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .about__team .about-info-card { min-height: 290rem; } .about--about-page .about__tag { margin-bottom: 32rem; } .about--about-page .about__info { box-shadow: none; } .about-info-card { padding: var(--grid-gap); height: 100%; display: flex; flex-direction: column; } .about-info-card__tag { padding: 12rem 0; margin-bottom: 24rem; --width: 8rem; --margin-left: 20rem; position: relative; margin-left: var(--margin-left); } .about-info-card__tag::before { content: ""; display: block; width: var(--width); height: var(--width); border-radius: 50%; background-color: var(--light-100); position: absolute; top: 50%; left: 0; transform: translate(calc(-1 * var(--margin-left)), calc(-0.5 * var(--width))); } @media only screen and (min-width: 1920px) { .about-info-card__tag { --width: 12rem; --margin-left: 28rem; } } @media only screen and (max-width: 1024px) { .about-info-card__tag { --width: 10rem; --margin-left: 21rem; } } @media only screen and (max-width: 767px) { .about-info-card__tag { --width: 8rem; --margin-left: 20rem; } } .about-info-card__content { padding-left: var(--grid-gap); margin-left: auto; width: 50%; } .about-info-card__controls { margin-top: auto; } .about-info-card__title { margin-top: auto; } .about-info-card__title sub { font-size: 28rem; line-height: 30rem; font-weight: 400; } @media only screen and (min-width: 1920px) { .about-info-card__title sub { font-size: 38rem; line-height: 40rem; } } @media only screen and (max-width: 1024px) { .about-info-card__title sub { font-size: 40rem; line-height: 44rem; } } @media only screen and (max-width: 767px) { .about-info-card__title sub { font-size: 20rem; line-height: 24rem; } } .about-info-card__title-number { margin-top: auto; display: inline-flex; flex-direction: column; } .about-info-card__title-number span:first-child { font-size: 120rem; line-height: 110rem; font-weight: 400; letter-spacing: -0.03em; } @media only screen and (max-width: 1199px) { .about-info-card__title-number span:first-child { font-size: 88rem; line-height: 86rem; } } @media only screen and (max-width: 1024px) { .about-info-card__title-number span:first-child { font-size: 140rem; line-height: 120rem; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .about-info-card__title-number span:first-child { font-size: 64rem; line-height: 60rem; } } .about-info-card__title-number span:last-child { margin-top: 8rem; max-width: 210rem; } .about-info-card__title-number span:last-child br { display: none; } @media only screen and (min-width: 1920px) { .about__numbers .about-info-card { min-height: 320rem; } .about__team .about-info-card { min-height: 390rem; } .about-info-card__tag { padding: 0; margin-bottom: 32rem; } } @media only screen and (max-width: 1024px) { .about { /* &__side { position: static; min-height: unset; height: 600rem; } */ } .about__main { margin-left: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .about__info .about-info-card { padding: 48rem var(--grid-gap); min-height: 720rem; } .about__numbers .about-info-card { min-height: 340rem; } .about__team .about-info-card { min-height: 420rem; } .about--about-page { /* .about { &__infobox { min-height: 934rem; } &__image { img { max-height: 934rem; } } } */ } .about-info-card { padding: var(--grid-gap); } .about-info-card__tag { margin-bottom: 48rem; padding: 0; } .about-info-card__descr { margin-bottom: 48rem; } .about-info-card__content { padding-left: 0; margin-left: 0; } .about-info-card__text { margin-bottom: 32rem; } } @media only screen and (max-width: 767px) { .about__title { text-indent: 0; } .about__image img { object-position: 30%; } .about__info .about-info-card { padding: 40rem var(--grid-gap) 24rem; min-height: 480rem; } .about__numbers .about-info-card { min-height: 200rem; } .about__team .about-info-card { min-height: 280rem; } .about--about-page .about__image { min-height: 650rem; } .about-info-card { padding: 20rem var(--grid-gap); } .about-info-card__tag { margin-bottom: 24rem; } .about-info-card__descr { margin-bottom: 24rem; } .about-info-card__content { width: 100%; } .about-info-card__subtitle { font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .about-info-card__subtitle { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .about-info-card__subtitle { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .about-info-card__subtitle { font-size: 14rem; line-height: 18rem; } } @media only screen and (max-width: 767px) { .about-info-card__title-number { flex-direction: row; align-items: flex-end; } .about-info-card__title-number span { width: 50%; } .about-info-card__title-number span:last-child { margin: 0; padding-left: var(--grid-gap); } .about-info-card__title-number span:last-child br { display: block; } } .benefits__container { width: 100%; margin: 0 auto; max-width: 100%; } .benefits__wrap { position: relative; align-items: flex-start; min-height: calc(var(--vh, 1vh) * 100); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .benefits__side { position: sticky; top: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .benefits__main { display: flex; flex-direction: column; background-color: rgba(var(--space-100), 0.1); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); min-height: calc(var(--vh, 1vh) * 100); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; margin-left: -50%; } .benefits__slider { display: flex; flex-flow: column nowrap; flex-grow: 1; } .benefits__image { line-height: 0; } .benefits__image img, .benefits__image video { width: 100%; height: 100%; object-fit: cover; height: calc(var(--vh, 1vh) * 100); } .benefits__top { padding: var(--grid-gap) var(--grid-gap) 0; } .benefits-card { padding: var(--grid-gap); display: flex; flex-direction: column; align-items: flex-start; gap: 24rem; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .benefits-card { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { .benefits-card { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { .benefits-card { font-size: 14rem; line-height: 18rem; } } .benefits-card__text { margin-left: auto; max-width: 50%; padding-left: var(--grid-gap); } @media only screen and (max-width: 1024px) { .benefits__main { margin-left: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .benefits-card { gap: 36rem; } } @media only screen and (max-width: 767px) { .benefits__top { padding-top: 20rem; } .benefits__image img { object-position: 10%; height: 600px; } .benefits-card { gap: 16rem; } .benefits-card__text { max-width: 100%; margin: 0; padding-left: 0; } } .breadcrumbs__list { position: relative; width: 100%; white-space: nowrap; max-width: 343rem; text-overflow: ellipsis; overflow: hidden; } .breadcrumbs__item { display: inline; } .breadcrumbs__item:first-child a::before { display: none; } .breadcrumbs__item a, .breadcrumbs__item span { transition: color 0.3s; } .breadcrumbs__item a::before, .breadcrumbs__item span::before { content: "/"; display: inline-block; margin: 0 8rem; color: currentColor; } .breadcrumbs__item a { color: var(--infinity-30); } @media screen and (hover: hover) { .breadcrumbs__item a:hover { color: var(--infinity-100); } } @media only screen and (max-width: 767px) { .breadcrumbs__item a::before, .breadcrumbs__item span::before { margin: 0 4rem; } } .button { display: inline-flex; align-items: center; justify-content: center; padding: 6rem 12rem; border-radius: 6rem; background-color: var(--night-30); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); min-height: 32rem; min-width: 32rem; white-space: nowrap; transition: background-color 0.3s; } .button.is-active { background-color: var(--light-100); } .button-link { display: block; width: 100%; border-top: 1px solid currentColor; padding: 13rem 0 14rem; transition: color 0.3s, border-color 0.3s; position: relative; z-index: 1; } .button-link::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--infinity-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .button-link:hover::before { transform: scaleY(1); } } .button-link__box { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; gap: 16rem; transition: padding 0.3s; } .button-link__box span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .button-link__icon { display: block; position: relative; width: 16rem; height: 16rem; flex-shrink: 0; } .button-link__icon img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s; } .button-link__icon img:first-child { opacity: 1; } .button-link .svg-icon { flex-shrink: 0; } .button-filled { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 28rem var(--grid-gap); background-color: var(--light-100); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); transition: background-color 0.3s, color 0.3s; position: relative; z-index: 1; } .button-filled::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--infinity-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .button-filled:hover::before { transform: scaleY(1); } } .button-filled__icon { flex-shrink: 0; position: relative; display: block; width: 24rem; height: 24rem; } .button-filled__icon .svg-icon { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; } .button-filled__icon .svg-icon:first-child { opacity: 1; } .button-filled__icon .svg-icon:only-child { opacity: 1; } .button-incident { display: flex; flex-direction: column; width: 100%; transition: background-color 0.3s; position: relative; z-index: 1; } .button-incident::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--light-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .button-incident:hover::before { transform: scaleY(1); } } .button-incident__top { padding: var(--grid-gap); display: flex; justify-content: space-between; align-items: flex-start; } .button-incident__top .svg-icon { flex-shrink: 0; } .button-incident__icon { line-height: 0; margin: 13rem auto 69rem; opacity: 0.3; width: 80rem; height: 80rem; transition: opacity 0.3s; } .button-incident__icon img { width: 100%; height: 100%; object-fit: cover; } .button-incident--habr .button-incident__icon { width: 110rem; height: 110rem; margin-top: 0; } .button-tab { display: inline-flex; align-items: center; justify-content: center; padding: 65rem var(--grid-gap); transition: box-shadow 0.3s; position: relative; z-index: 1; } .button-tab::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--space-60); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .button-tab:hover::before { transform: scaleY(1); } } .button-tab.is-active { box-shadow: inset 4px 4px var(--light-100), inset -4px -4px var(--light-100); } .button-stroke { display: inline-flex; align-items: center; justify-content: space-between; padding: 11rem 23rem; gap: 12rem; border-radius: 48rem; border: 1rem solid var(--infinity-100); overflow: hidden; transition: color 0.3s, background-color 0.3s, border-color 0.3s; position: relative; z-index: 1; } .button-stroke::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--infinity-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .button-stroke:hover::before { transform: scaleY(1); } } @media only screen and (hover: hover) { .button:hover { background-color: var(--light-100); } .button-link:hover { color: var(--space-100); border-color: var(--infinity-100); } .button-link:hover .button-link__box { padding: 0 12px; } .button-link:hover .button-link__icon img:first-child { opacity: 0; } .button-link:hover .button-link__icon img:last-child { opacity: 1; } .button-filled:hover { color: var(--light-100); } .button-filled:hover .button-filled__icon .svg-icon:first-child { opacity: 0; } .button-filled:hover .button-filled__icon .svg-icon:last-child, .button-filled:hover .button-filled__icon .svg-icon:only-child { opacity: 1; } .button-incident:hover { background-color: var(--light-100); } .button-incident:hover .button-incident__icon { opacity: 1; } .button-tab.is-active:hover::before { display: none; } .button-stroke:hover { color: var(--space-100); } } @media only screen and (min-width: 1920px) { .button { padding: 10rem 16rem; } .button-incident__top .svg-icon { width: 20rem; height: 20rem; } .button-incident__icon { margin: 40rem auto 90rem; width: 94rem; height: 94rem; } .button-incident--habr .button-incident__icon { width: 130rem; height: 130rem; } .button-filled { padding: 40rem var(--grid-gap); } .button-filled__icon { width: 32rem; height: 32rem; } .button-link { padding: 18rem 0 19rem; } .button-link__icon { width: 20rem; height: 20rem; } .button-stroke { padding: 15rem 32rem; } .button-stroke .svg-icon { width: 20rem; height: 20rem; } } @media only screen and (max-width: 1024px) { .button-incident__icon { width: 110rem; height: 110rem; margin: 80rem auto 120rem; } .button-incident__top .svg-icon { width: 24rem; height: 24rem; } .button-incident--habr .button-incident__icon { width: 130rem; height: 130rem; } .button-link { padding: 20rem 0 21rem; } .button-link__icon { width: 24rem; height: 24rem; } .button-tab { display: inline-flex; padding: 6rem 10rem; border-radius: 6rem; background-color: var(--night-30); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); transition: background-color 0.3s; } .button-tab.is-active { background-color: var(--light-100); } .button-filled { padding: 38rem var(--grid-gap); } .button-filled__icon { width: 36rem; height: 36rem; } } @media only screen and (max-width: 767px) { .button-link { padding: 14rem 0 15rem; } .button-link__icon { width: 16rem; height: 16rem; } .button-incident__icon { width: 56rem; height: 56rem; } .button-incident__top .svg-icon { width: 16rem; height: 16rem; } .button-incident--habr .button-incident__icon { width: 70rem; height: 70rem; } .button-filled { padding: 26rem var(--grid-gap); font-size: 16rem; line-height: 20rem; } .button-filled__icon { width: 20rem; height: 20rem; } } .career-about__container { width: 100%; margin: 0 auto; max-width: 100%; } .career-about__row { min-height: 700rem; box-shadow: 0 1px 0 0 var(--space-60), 0 -1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ position: relative; } .career-about__row::before { content: ""; display: block; width: 1px; height: 100%; box-shadow: inset 1px 0 0 0 var(--space-60); position: absolute; left: 50%; transform: translateX(-1px); } .career-about__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .career-about__col:last-child { display: flex; flex-direction: column; } .career-about__card { padding: 24px var(--grid-gap); } .career-about__list { flex-grow: 1; margin-top: 20rem; /* box-shadow: inset 1px 0px 0 0 var(--space-60); */ display: flex; flex-direction: column; } .career-about__item { display: flex; padding: 16rem var(--grid-gap); gap: 16rem; align-items: flex-start; } .career-about__icon { line-height: 0; } .career-about__numbers { box-shadow: inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; position: relative; } .career-about__numbers::before { content: ""; display: block; width: 1px; height: 100%; box-shadow: inset 1px 0 0 0 var(--space-60); position: absolute; left: 50%; transform: translateX(-1px); } .career-about__numbers .about-info-card { min-height: 240rem; } .career-about__num-card { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } @media only screen and (min-width: 1920px) { .career-about__icon .svg-icon { width: 32rem; height: 32rem; } } @media only screen and (max-width: 1024px) { .career-about__heading .heading { padding: 48rem var(--grid-gap); min-height: unset; } .career-about__row { box-shadow: 0 1px 0 0 var(--space-60); } .career-about__row::before { display: none; } .career-about__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .career-about__card { padding: 0 var(--grid-gap); } .career-about__list { margin-top: 80rem; } .career-about__item { gap: 20rem; padding: 20rem var(--grid-gap); } .career-about__icon .svg-icon { width: 32rem; height: 32rem; } .career-about__numbers { margin-top: 48rem; } .career-about__numbers .about-info-card { min-height: 340rem; } } @media only screen and (max-width: 767px) { .career-about__heading .heading { padding: 40rem var(--grid-gap) 24rem; } .career-about__list { margin-top: 84rem; } .career-about__item { gap: 16rem; padding: 12rem var(--grid-gap); } .career-about__icon .svg-icon { width: 20rem; height: 20rem; } .career-about__text { font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .career-about__text { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .career-about__text { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .career-about__text { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } @media only screen and (max-width: 767px) { .career-about__numbers { margin-top: 20rem; } .career-about__numbers .about-info-card { min-height: 200rem; } .career-about__num-card .about-info-card__subtitle { font-size: 72rem; line-height: 68rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .career-about__num-card .about-info-card__subtitle { font-size: 96rem; line-height: 90rem; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .career-about__num-card .about-info-card__subtitle { font-size: 80rem; line-height: 82rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .career-about__num-card .about-info-card__subtitle { font-size: 48rem; line-height: 50rem; /* font-size: 28rem; line-height: 32rem; letter-spacing: 0; */ } } @media only screen and (max-width: 767px) { .career-about__num-card .about-info-card__title { font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .career-about__num-card .about-info-card__title { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .career-about__num-card .about-info-card__title { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .career-about__num-card .about-info-card__title { font-size: 14rem; line-height: 18rem; } } .checkbox__control { display: inline-flex; align-items: center; justify-content: flex-start; white-space: nowrap; position: relative; padding: 14rem var(--grid-gap); } .checkbox__control input:checked ~ .checkbox__label { color: var(--infinity-100); } .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 var(--infinity-100); background-color: var(--infinity-100); } .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: 20rem; height: 20rem; box-shadow: inset 0 0 0 2px var(--infinity-30); background-color: transparent; color: var(--space-100); 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: 8rem; cursor: pointer; white-space: normal; color: var(--infinity-30); transition: color 0.3s; position: relative; z-index: 2; } .checkbox__label a { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } .checkbox__label br { display: none; } @media only screen and (hover: hover) { .checkbox__label a:hover { border-color: transparent; } } @media only screen and (max-width: 1024px) { .checkbox__control { padding-top: 16rem; padding-bottom: 16rem; } .checkbox__icon { width: 32rem; height: 32rem; } .checkbox__icon .svg-icon { width: 100%; height: 100%; } } @media only screen and (max-width: 767px) { .checkbox__control { padding-top: 12rem; padding-bottom: 12rem; align-items: flex-start; } .checkbox__icon { width: 20rem; height: 20rem; } .checkbox__icon .svg-icon { width: 100%; height: 100%; } .checkbox__label br { display: block; } } .select { opacity: 0; } .choices { position: relative; margin: 0; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .choices { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { .choices { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { .choices { font-size: 14rem; line-height: 18rem; } } .choices:focus { background-color: transparent; } .choices__inner { border: none; background-color: transparent; border-bottom: 1px solid var(--space-60) !important; padding: 34rem calc(var(--grid-gap) + 20rem) 26rem var(--grid-gap) !important; color: var(--infinity-30); font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .choices__inner { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { .choices__inner { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { .choices__inner { font-size: 14rem; line-height: 18rem; } } .choices__list--single { padding: 0; } .choices__list--dropdown { background-color: var(--space-100) !important; border-color: var(--space-60) !important; } .choices__list--dropdown .choices__list::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 8px; } .choices__list--dropdown .choices__list::-webkit-scrollbar-track { background: transparent; border-radius: 8px; margin: 0px 0; } .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb { background-color: #EEFAFF; border-radius: 8px; } .choices__list--dropdown .choices__item { padding: var(--grid-gap) !important; transition: background-color 0.3s; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .choices__list--dropdown .choices__item { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { .choices__list--dropdown .choices__item { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { .choices__list--dropdown .choices__item { font-size: 14rem; line-height: 18rem; } } .choices__list--dropdown .choices__item.is-highlighted { background-color: var(--light-100) !important; } .choices__list--dropdown.is-active { z-index: 3; } .choices::after { width: 20rem !important; height: 20rem !important; border-color: transparent !important; border-width: 0 !important; margin-top: -6rem !important; right: var(--grid-gap) !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7266 6.8749L11.0523 13.5492C10.818 13.7835 10.4381 13.7835 10.2038 13.5492L3.52951 6.8749L4.37803 6.02637L10.628 12.2764L16.878 6.02637L17.7266 6.8749Z' fill='%23EEFAFF'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; opacity: 0.4; transition: transform 0.3s ease, opacity 0.3s; } .choices.is-open::after { transform: scale(1, -1); } .choices__placeholder { opacity: 1; } .form__field.is-error .choices::after { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7266 6.8749L11.0523 13.5492C10.818 13.7835 10.4381 13.7835 10.2038 13.5492L3.52951 6.8749L4.37803 6.02637L10.628 12.2764L16.878 6.02637L17.7266 6.8749Z' fill='%23FD2A32'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; opacity: 1; } .form__field.is-error .choices__inner { border-color: var(--scarlet) !important; } .form__field.is-error .choices__inner .choices__item { color: var(--scarlet); } .form__field.is-filled .choices::after { opacity: 1; } .form__field.is-filled .choices__item { color: var(--infinity-100); } @media only screen and (min-width: 1920px) { .choices__inner { padding: 45rem calc(var(--grid-gap) + 32rem) 35rem var(--grid-gap) !important; } .choices__list--dropdown .choices__item { font-size: 22rem !important; } .choices::after { width: 32rem !important; height: 32rem !important; margin-top: -10rem !important; } } @media only screen and (max-width: 1024px) { .choices__inner { padding: 48rem calc(var(--grid-gap) + 32rem) 38rem var(--grid-gap) !important; } .choices::after { width: 32rem !important; height: 32rem !important; margin-top: -10rem !important; } } @media only screen and (max-width: 767px) { .choices__inner { padding: 35rem calc(var(--grid-gap) + 20rem) 27rem var(--grid-gap) !important; } .choices::after { width: 20rem !important; height: 20rem !important; margin-top: -6rem !important; } } .clock { height: 100%; padding: var(--grid-gap); display: flex; flex-direction: column; overflow: hidden; } .clock.is-ready .clock__hand { opacity: 1; transition: transform 0.3s, opacity 0.3s; } .clock__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12rem; margin-bottom: 20rem; } .clock__title { color: var(--infinity-30); } .clock__time { display: inline-flex; flex-direction: column; align-items: flex-start; } .clock__main { position: relative; aspect-ratio: 1; border-radius: 50%; background-color: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); width: 100%; margin: auto; } .clock__mark { position: absolute; top: 50%; left: 50%; width: 50%; height: 1px; display: flex; justify-content: flex-end; transform-origin: 0 0; padding-right: 3.5%; font-size: 0; } .clock__mark::before { content: ""; display: block; width: 9px; height: 100%; background-color: var(--infinity-30); } .clock__mark:nth-of-type(3n + 1)::before { background-color: var(--infinity-100); } .clock__mark:nth-of-type(1) { transform: rotate(0deg); } .clock__mark:nth-of-type(2) { transform: rotate(30deg); } .clock__mark:nth-of-type(3) { transform: rotate(60deg); } .clock__mark:nth-of-type(4) { transform: rotate(90deg); } .clock__mark:nth-of-type(5) { transform: rotate(120deg); } .clock__mark:nth-of-type(6) { transform: rotate(150deg); } .clock__mark:nth-of-type(7) { transform: rotate(180deg); } .clock__mark:nth-of-type(8) { transform: rotate(210deg); } .clock__mark:nth-of-type(9) { transform: rotate(240deg); } .clock__mark:nth-of-type(10) { transform: rotate(270deg); } .clock__mark:nth-of-type(11) { transform: rotate(300deg); } .clock__mark:nth-of-type(12) { transform: rotate(330deg); } .clock__hand { opacity: 0; position: absolute; top: 50%; left: 50%; width: 50%; transform-origin: 0 0; height: 2px; display: flex; padding-left: 4%; transition: opacity 0.3s; } .clock__hand::before { content: ""; display: block; width: 85%; height: 100%; background-color: var(--infinity-100); } .clock__hand--hr { justify-content: flex-start; transform: rotate(180deg); } .clock__hand--hr::before { width: 35%; } .clock__hand--min { transform: rotate(-55deg); } .clock__info { display: flex; align-items: center; justify-content: center; position: absolute; width: 20rem; height: 20rem; transform-origin: 0 0; color: var(--infinity-30); font-size: 10rem; line-height: 1; } .clock__info span { display: block; } .clock__info--day { left: 50%; top: 20%; transform: translate(-50%, -50%); } .clock__info--sec { border-radius: 50%; border: 1px solid var(--infinity-10); top: 50%; transform: translate(50%, -50%); right: 20%; } .clock__info--month { left: 50%; bottom: 20%; transform: translate(-50%, 50%); } @media only screen and (max-width: 1024px) { .clock__info { font-size: 14rem; width: 30rem; height: 30rem; } } @media only screen and (max-width: 767px) { .clock__info { font-size: 10rem; width: 20rem; height: 20rem; } } .contacts { /* &__content { padding: 60rem var(--grid-gap) 40rem; padding-bottom: 40rem; display: flex; flex-direction: column; height: 100%; } &__info { margin-bottom: auto; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); @include mixins.grid-row(); } */ } .contacts__container { width: 100%; margin: 0 auto; max-width: 100%; } .contacts__wrap { min-height: calc(var(--vh, 1vh) * 100); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .contacts__main { padding-top: var(--header-min-height); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 75%; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .contacts__side { border-left: 1rem solid var(--space-60); display: flex; flex-direction: column; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .contacts__info { padding: 60rem 0 var(--grid-gap); width: 100%; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .contacts__info-box { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 33.3333333333%; } .contacts__tab-container { margin-top: auto; padding: var(--grid-gap); } .contacts__info-item { margin-bottom: 20rem; } .contacts__info-item:last-child { margin-bottom: 0; } .contacts__info-btn { margin-top: 13rem; } .contacts__breadcrumbs--mob { display: none; } .contacts__block { display: none; } .contacts__block.is-active { display: block; } .contacts__box { flex-grow: 1; width: 100%; } .contacts__controls { height: 100%; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .contacts__control { box-shadow: inset 1px 1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; /* &:first-child { @include mixins.grid-col(2,2); } */ } .contacts__control:nth-of-type(2n+1) { box-shadow: inset 0 1px 0 0 var(--space-60); } .contacts__control.is-active { box-shadow: inset 4px 4px var(--light-100), inset -4px -4px var(--light-100); } .contacts__control.button-tab { padding: 54rem 16rem; } .contacts__clock { position: relative; flex-grow: 1; } .contacts__clock-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .contacts__clock-bg video, .contacts__clock-bg img { position: absolute; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover; } .contacts__clock-bg::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.01); -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); z-index: 1; pointer-events: none; } .contacts__link { padding-right: 52rem; } .contacts__link span { display: inline; background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-repeat: no-repeat; background-position: 0 85%; background-size: 100% 0%; transition: background-size 0.3s; } .contacts-info__title { color: var(--infinity-30); margin-bottom: 4rem; } .contacts-info__link span { border-bottom: 1rem solid transparent; transition: border-color 0.3s; } @media only screen and (hover: hover) { .contacts-info__link:hover span { border-color: currentColor; } .contacts__link:hover span { background-size: 100% 3rem; } } @media only screen and (max-width: 1024px) { .contacts { /* &__content { padding: 20rem var(--grid-gap) 80rem; } */ } .contacts__wrap { padding-top: var(--header-min-height); align-items: flex-start; } .contacts__main, .contacts__side { display: contents; } .contacts__side { display: contents; /* order: -1; @include mixins.grid-col(4, 4); */ } .contacts__box { padding: 48rem 0 32rem; display: flex; align-items: center; order: -2; } .contacts__controls { height: auto; width: 50%; padding-right: var(--grid-gap); gap: 8rem; flex-wrap: nowrap; overflow-x: auto; /* & { scrollbar-width: thin; scrollbar-color: transparent transparent; } */ } .contacts__controls::-webkit-scrollbar { width: 0px; height: 0px; border-radius: 0px; } .contacts__controls::-webkit-scrollbar-track { background: transparent; } .contacts__controls::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0px; } .contacts__control { width: auto; white-space: nowrap; } .contacts__control.button-tab { padding: 8rem 16rem; border-radius: 8rem; } .contacts__button { position: sticky; bottom: 0; z-index: 10; order: 2; } .contacts__info { display: flex; flex-direction: column; gap: 28rem; padding: 40rem var(--grid-gap) 24rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .contacts__info-box { padding: 0; justify-content: flex-start; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; /* &:nth-child(2) { padding-top: 40rem; } &:nth-child(3) { margin-left: -50%; margin-top: -196rem; } */ } .contacts__info-box:first-child { display: none; } .contacts__tab-container { margin-top: 0; padding: 40rem var(--grid-gap) 136rem; } .contacts__breadcrumbs { width: 50%; padding: 0 var(--grid-gap); } .contacts__breadcrumbs--mob { display: block; } .contacts__link span { background-position: 0 95%; background-size: 100% 2rem; } .contacts__clock { order: -1; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .contacts-info__title { margin-bottom: 6rem; } .contacts-info__info-item { margin-bottom: 24rem; } } @media only screen and (max-width: 767px) { .contacts__breadcrumbs, .contacts__info, .contacts__clock, .contacts__controls { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .contacts__info { padding: 20rem var(--grid-gap) 40rem; order: 1; margin-bottom: 40rem; } .contacts__box { flex-wrap: wrap; padding: 40rem 0 20rem; } .contacts__controls { margin-top: 20rem; padding-left: var(--grid-gap); } .contacts__control.button-tab { border-radius: 5rem; padding: 4rem 10rem; } .contacts__tab-container { padding: 20rem var(--grid-gap) 40rem; } .contacts__link { padding-right: 0; } .contacts-info__title { margin-bottom: 4rem; } .contacts-info__info-item { margin-bottom: 20rem; } } .cookies { position: fixed; bottom: 0; left: 0; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; z-index: 100; } .cookies.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s, bottom 0.3s; } .cookies__container { width: 100%; padding: 12rem var(--grid-gap); display: flex; gap: 20rem; align-items: center; justify-content: space-between; background-color: var(--infinity-100); color: var(--space-100); font-size: 14rem; line-height: 18rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .cookies__container { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 1024px) { .cookies__container { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 767px) { .cookies__container { font-size: 12rem; line-height: 16rem; } } .cookies__text a { text-decoration: underline; transition: opacity 0.3s; } .cookies__btn { color: var(--light-100); text-decoration: underline; transition: opacity 0.3s; background-color: transparent; padding: 0; border: none; font-family: "ONY One Beta", Arial, Helvetica, sans-serif; } @media only screen and (hover: hover) { .cookies__btn:hover, .cookies a:hover { opacity: 0.7; } } @media only screen and (min-width: 1920px) { .cookies__container { padding-top: 16rem; padding-bottom: 16rem; gap: 28rem; } } @media only screen and (max-width: 1024px) { .cookies { width: 100%; bottom: 112rem; } .cookies__container { padding-top: 34rem; padding-bottom: 34rem; } } @media only screen and (max-width: 767px) { .cookies { bottom: 72rem; } .cookies__container { padding-top: 16rem; padding-bottom: 16rem; } } .directions { padding: 80rem 0 160rem; } .directions__container { width: 100%; margin: 0 auto; max-width: 100%; } .directions__heading .heading__col { margin-left: auto; } .directions__heading .heading__title { display: none; } .directions__list { padding: 0 var(--grid-gap); } .directions__item { width: 100%; border-top: 1px solid currentColor; } .directions__controls { padding: 40rem var(--grid-gap); display: none; } .directions-card { width: 100%; padding: 20rem 0; transition: color 0.3s; cursor: pointer; overflow: hidden; position: relative; z-index: 1; } .directions-card::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--infinity-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .directions-card:hover::before { transform: scaleY(1); } } .directions-card__main { width: 100%; position: relative; display: flex; flex-flow: row nowrap; transition: padding 0.3s; } .directions-card__title { padding-right: var(--grid-gap); flex-grow: 1; transition: max-width 0.3s; } .directions-card__icon { position: absolute; top: 14rem; right: 0; width: 24rem; height: 24rem; transition: transform 0.3s, right 0.3s; } .directions-card__icon .svg-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s; } .directions-card__icon .svg-icon:last-child { opacity: 0; } .directions-card__drop { max-width: 0; height: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s, height 0.3s; } .directions-card__content { padding: 4rem var(--grid-gap) 0; max-width: 516rem; } .directions-card.is-open .directions-card__title { max-width: 50%; } .directions-card.is-open .directions-card__drop { opacity: 1; height: auto; overflow: visible; max-width: 50%; } .directions-card.is-open .directions-card__icon { transform: rotate(45deg); } @media only screen and (hover: hover) { .directions-card:hover { color: var(--space-100); } .directions-card:hover .directions-card__main { padding: 0 var(--grid-gap); } .directions-card:hover .directions-card__icon { right: var(--grid-gap); } .directions-card.is-open:hover { color: var(--infinity-100); } .directions-card.is-open:hover::before { display: none; } .directions-card.is-open:hover .directions-card__main { padding: 0; } .directions-card.is-open:hover .directions-card__icon { right: 0; } } @media only screen and (max-width: 1024px) { .directions { padding: 0; } .directions__heading .heading__title { display: block; padding: 0; } .directions__heading .heading__col:last-child { display: none; } .directions__controls { display: block; } .directions-card { padding: 12rem 0; } .directions-card__title { padding-right: 40rem; } .directions-card__main { flex-wrap: wrap; } .directions-card__icon .svg-icon:first-child { opacity: 0; } .directions-card__icon .svg-icon:last-child { opacity: 1; } .directions-card__content { padding: var(--grid-gap) var(--grid-gap) var(--grid-gap) 0; max-width: 90%; } .directions-card.is-open .directions-card__title { max-width: 100%; } .directions-card.is-open .directions-card__icon .svg-icon:first-child { opacity: 1; } .directions-card.is-open .directions-card__icon .svg-icon:last-child { opacity: 0; } .directions-card.is-open .directions-card__drop { max-width: 100%; } } @media only screen and (max-width: 767px) { .directions-card__icon { top: 7rem; width: 16rem; height: 16rem; } } .docs__continer { width: 100%; margin: 0 auto; max-width: 100%; } .docs__list { box-shadow: inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .docs__item { box-shadow: inset -1px -1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 33.3333333333%; } .docs__item:nth-child(3n) { box-shadow: inset 0 -1px 0 0 var(--space-60); } .docs--about .docs__item:last-child { box-shadow: inset 0 -1px 0 0 var(--space-60); } .docs-card { padding: var(--grid-gap); height: 100%; display: flex; flex-flow: column; min-height: 180rem; position: relative; z-index: 1; } .docs-card::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--space-60); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .docs-card:hover::before { transform: scaleY(1); } } .docs-card { cursor: auto; } .docs-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16rem; margin-bottom: 48rem; } .docs-card__num { width: 100%; margin-top: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-card__title { color: var(--infinity-30); max-width: 90%; } .docs-card__icon { display: none; line-height: 0; } @media only screen and (min-width: 1920px) { .docs-card { min-height: 240rem; } .docs-card__title { max-width: 85%; } .docs-card__icon .svg-icon { width: 32rem; height: 32rem; } } @media only screen and (max-width: 1024px) { .docs-card { min-height: 200rem; } .docs-card__top { align-items: flex-start; margin-bottom: 54rem; } .docs-card__icon .svg-icon { width: 28rem; height: 28rem; } .docs-card__num { font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .docs-card__num { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .docs-card__num { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .docs-card__num { font-size: 14rem; line-height: 18rem; } } @media only screen and (max-width: 767px) { .docs__list { margin-top: 16rem; } .docs__item { box-shadow: inset 0 -1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .docs-card { min-height: 140rem; padding: 20rem var(--grid-gap); } .docs-card__top { margin-bottom: 28rem; } } .infoblock__container { width: 100%; margin: 0 auto; max-width: 100%; } .infoblock__container { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); } .infoblock__heading { flex-shrink: 0; } .infoblock__row { flex-grow: 1; box-shadow: inset 0 1px 0 0 var(--space-60), inset 0 -1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .infoblock__col { position: relative; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .infoblock__col:first-child { position: sticky; top: 0; } .infoblock__box { padding: 24px var(--grid-gap); } .infoblock__list { height: 100%; box-shadow: inset 1px 0px 0 0 var(--space-60); display: flex; flex-direction: column; } .infoblock__item { flex: 1 1 0; box-shadow: inset 0 1px 0 0 var(--space-60); } .infoblock-card { width: 100%; height: 100%; padding: var(--grid-gap); transition: color 0.3s; cursor: pointer; overflow: hidden; } .infoblock-card__main { width: 100%; height: 100%; position: relative; display: flex; flex-flow: row nowrap; transition: padding 0.3s; } .infoblock-card__title { padding-right: var(--grid-gap); flex-grow: 1; transition: max-width 0.3s; } .infoblock-card__icon { position: absolute; top: 14rem; right: 0; width: 24rem; height: 24rem; transition: transform 0.3s, right 0.3s; } .infoblock-card__icon .svg-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s; } .infoblock-card__icon .svg-icon:last-child { opacity: 0; } .infoblock-card__drop { max-width: 0; height: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s, height 0.3s; } .infoblock-card__content { padding: 4rem var(--grid-gap) 0; max-width: 516rem; } .infoblock-card.is-open .infoblock-card__title { max-width: 50%; } .infoblock-card.is-open .infoblock-card__drop { opacity: 1; height: auto; overflow: visible; max-width: 50%; } .infoblock-card.is-open .infoblock-card__icon { transform: rotate(45deg); } .footer__container { width: 100%; margin: 0 auto; max-width: 100%; } .footer__row { box-shadow: inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .footer__row--main { min-height: 400rem; } .footer__row--main .footer__col { box-shadow: inset -1px 0 0 0 var(--space-60); } .footer__row--main .footer__col:last-child { box-shadow: inset 0 0 0 0 var(--space-60); } .footer__row--main .footer__box { padding: 40rem var(--grid-gap) 24rem; } .footer__row--bottom { min-height: 228rem; position: relative; } .footer__row--bottom::before { content: ""; display: block; width: 1px; height: 100%; box-shadow: inset 1px 0 0 0 var(--space-60); position: absolute; left: 50%; transform: translateX(-1px); } .footer__row--bottom .footer__box { padding: 24rem var(--grid-gap) 40rem; margin-top: auto; width: 100%; } .footer__row--bottom .footer__col { display: flex; } .footer__row--bottom .footer__col:last-child .footer__copy { text-align: right; } .footer__row--bottom .footer__col:last-child .footer__copy a { color: var(--infinity-100); } .footer__row--bottom .footer__col:first-child { margin-left: 25%; } .footer__row--bottom .footer__col:nth-child(2) { order: -1; } .footer__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .footer__title { color: var(--infinity-30); margin-bottom: 8rem; } .footer__box--nav .footer__item:not(:last-child) { margin-bottom: 12rem; } .footer__box--socials .footer__title { margin-bottom: 12rem; } .footer__link { transition: color 0.3s; } .footer__item:not(:last-child) { margin-bottom: 8rem; } .footer__box-item:not(:first-child) { margin-top: 40rem; } .footer__copy { color: var(--infinity-30); } .footer__copy a span { border-bottom: 1px solid currentColor; transition: border-color 0.3s; } @media screen and (hover: hover) { .footer__link:hover { color: var(--light-100); } .footer__copy a:hover span { border-color: transparent; } } @media only screen and (min-width: 1920px) { .footer__row--main { min-height: 534rem; } .footer__row--main .footer__box { padding: 54rem var(--grid-gap) 32rem; } .footer__row--bottom { min-height: 304rem; } .footer__row--bottom .footer__box { padding: 32rem var(--grid-gap) 54rem; } .footer__title { margin-bottom: 12rem; } .footer__box--socials .footer__title { margin-bottom: 16rem; } .footer__box--nav .footer__item:not(:last-child) { margin-bottom: 14rem; } .footer__box--nav .footer__item:last-child { margin-bottom: 0; } .footer__item:not(:last-child) { margin-bottom: 12rem; } } @media only screen and (max-width: 1024px) { .footer__row--main .footer__col:not(:last-child) { box-shadow: inset 0 -1px 0 0 var(--space-60); } .footer__row--bottom { min-height: unset; } .footer__row--bottom::before { display: none; } .footer__row--bottom .footer__col { box-shadow: inset 0 1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .footer__row--bottom .footer__col:first-child { margin-left: 0%; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .footer__row--bottom .footer__col:nth-child(2) { order: 0; } .footer__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .footer__box:nth-child(n) { padding: var(--grid-gap); } .footer__box--socials .footer__title { margin-bottom: 20rem; } .footer__box--nav .footer__list { column-count: 2; column-gap: calc(2 * var(--grid-gap)); } .footer__box--nav .footer__item { margin-bottom: 12rem; } .footer__box--nav .footer__item:last-child { margin-bottom: 0; } .footer__box--services .footer__list { column-count: 2; column-gap: calc(2 * var(--grid-gap)); } .footer__box--contacts { column-count: 2; column-gap: calc(2 * var(--grid-gap)); /* width: calc(100% + 2 * var(--grid-gap)); margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); @include mixins.grid-row(); */ } .footer__box--mob { display: none; } .footer__box-item { break-inside: avoid; /* padding-left: var(--grid-gap); padding-right: var(--grid-gap); @include mixins.grid-col(2,4); */ } .footer__box-item:not(:first-child) { margin-top: 0; } } @media only screen and (max-width: 767px) { .footer__box:nth-child(n) { padding: 20rem var(--grid-gap); } .footer__box--socials .footer__title { margin-bottom: 12rem; } .footer__box--nav .footer__list { column-count: 1; } .footer__box--nav .footer__item:not(:last-child) { margin-bottom: 6rem; } .footer__box--contacts { column-count: 1; } .footer__box--contacts .footer__link { font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .footer__box--contacts .footer__link { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .footer__box--contacts .footer__link { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .footer__box--contacts .footer__link { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } @media only screen and (max-width: 767px) { .footer__box-item:not(:first-child) { margin-top: 20rem; } } .form { position: relative; height: 100%; box-shadow: inset 0 1px 0 0 var(--space-60); } .form::before { content: ""; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.3); /* -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); */ pointer-events: none; transition: opacity 0.3s; } .form.is-loading::before { pointer-events: auto; opacity: 1; } .form__box { display: flex; flex-direction: column; height: 100%; } .form__box > .form-response { padding: 34rem var(--grid-gap) 26rem; } .form__field { position: relative; } .form__field.is-filled .form__label { transform: scale(1) 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-message { display: block; } */ } .form__field.is-error .form__input, .form__field.is-error .form__textarea, .form__field.is-error .form-file, .form__field.is-error .form-file__control-button, .form__field.is-error .form-file__result-value { border-color: var(--scarlet); color: var(--scarlet); } .form__field.is-error .form__label { color: var(--scarlet); } .form__field.is-error .checkbox__icon { box-shadow: inset 0 0 0 2px var(--scarlet); } .form__field--checkbox { margin-top: auto; } .form__input, .form__textarea { display: block; width: 100%; padding: 34rem var(--grid-gap) 26rem; border-bottom: 1px solid var(--space-60); transition: border-color 0.3s, color 0.3s; } .form__input:focus, .form__textarea:focus { border-color: var(--light-100); } .form__input:focus ~ .form__label, .form__textarea:focus ~ .form__label { transform: scale(1) translateY(0); } .form__input__textarea, .form__textarea__textarea { height: 100%; max-height: 180rem; text-overflow: ellipsis; } .form__label { position: absolute; left: var(--grid-gap); top: 0; margin-top: 12rem; transform-origin: 0 50%; color: var(--infinity-30); transform: scale(1.6) translateY(100%); pointer-events: none; transition: transform 0.3s, margin 0.3s; font-size: 10rem; line-height: 12rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (max-width: 1024px) { .form__label { font-size: 14rem; line-height: 16rem; } } @media only screen and (max-width: 767px) { .form__label { font-size: 10rem; line-height: 12rem; } } .form__textarea { resize: none !important; } .form__textarea::placeholder { color: var(--infinity-30); } .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; appearance: textfield; } .form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus, .form input:-webkit-autofill:active textarea:-webkit-autofill, .form select:-webkit-autofill { background-color: transparent !important; color: var(--infinity-100) !important; -webkit-text-fill-color: var(--infinity-100) !important; transition: background-color 5000s ease-in-out 0s; } .form.is-success .form-success { opacity: 1; pointer-events: auto; } .form.is-success .form__box { display: none; } .form.is-error .form-response { display: block; color: var(--scarlet); } .form-file { display: block; overflow: hidden; height: 100%; } .form-file__control-button, .form-file__result { padding: 34rem var(--grid-gap) 26rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--space-60); } .form-file__control-button { color: var(--infinity-30); } .form-file__result { display: none; } .form-file__result-reset { display: flex; flex-shrink: 0; } .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: 6rem; margin-left: var(--grid-gap); color: var(--scarlet); font-size: 10rem; line-height: 12rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (max-width: 1024px) { .form-message { font-size: 14rem; line-height: 16rem; } } @media only screen and (max-width: 767px) { .form-message { font-size: 10rem; line-height: 12rem; } } .form-success { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 3; transition: opacity 0.3s; pointer-events: none; background-color: var(--space-100); } .form-success__box { max-width: 312rem; margin-top: -112rem; text-align: center; } .form-success__image { width: 80rem; margin: 0 auto; aspect-ratio: 1; } .form-success__image img { width: 100%; height: 100%; } .form-success__text { margin-top: 12rem; font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } @media only screen and (min-width: 1920px) { .form-success__text { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) { .form-success__text { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) { .form-success__text { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } .form-response { display: none; } @media only screen and (min-width: 1920px) { .form__box > .form-response { padding: 45rem var(--grid-gap) 35rem; } .form__input, .form__textarea { padding: 45rem var(--grid-gap) 35rem; } .form__textarea { max-height: 236rem; } .form__label { margin-top: 20rem; transform: scale(2.2) translateY(100%); } .form-file__control-button, .form-file__result { padding: 45rem var(--grid-gap) 35rem; } .form-success__box { max-width: 402rem; margin-top: -148rem; } .form-success__text { margin-top: 16rem; } .form-success__image { width: 136rem; } } @media only screen and (max-width: 1024px) { .form__box > .form-response { padding: 48rem var(--grid-gap) 38rem; } .form__input, .form__textarea { padding: 48rem var(--grid-gap) 38rem; } .form__textarea { max-height: 242rem; } .form__label { margin-top: 20rem; } .form-file__control-button, .form-file__result { padding: 48rem var(--grid-gap) 38rem; } .form-success__box { max-width: 402rem; margin-top: -112rem; } .form-success__text { margin-top: 16rem; } .form-success__image { width: 136rem; } } @media only screen and (max-width: 767px) { .form__box > .form-response { padding: 35rem var(--grid-gap) 27rem; } .form__input, .form__textarea { padding: 35rem var(--grid-gap) 27rem; } .form__textarea { max-height: 182rem; } .form__label { margin-top: 12rem; transform: scale(1.4) translateY(135%); } .form-file__control-button, .form-file__result { padding: 35rem var(--grid-gap) 27rem; } .form-success__box { max-width: 100%; padding: 0 24rem; margin-top: -80rem; } .form-success__text { font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .form-success__text { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .form-success__text { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .form-success__text { font-size: 14rem; line-height: 18rem; } } @media only screen and (max-width: 767px) { .form-success__image { width: 80rem; } } .gallery__container { width: 100%; margin: 0 auto; max-width: 100%; } .gallery__container { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); } .gallery__heading { flex-shrink: 0; } .gallery__row { flex-grow: 1; box-shadow: inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .gallery__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .gallery__col:first-child { order: 1; } .gallery__box { padding: 24px var(--grid-gap); } .gallery-card { position: relative; } .gallery-card__image { width: 100%; aspect-ratio: 720/672; } .gallery-card__image img { width: 100%; height: 100%; object-fit: cover; } .gallery-card__tag { position: absolute; top: var(--grid-gap); right: var(--grid-gap); } @media only screen and (max-width: 1024px) { .gallery__container { min-height: 100%; } .gallery__row { box-shadow: none; } .gallery__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .gallery__col:first-child { order: 0; } .gallery__box { padding-top: 0; padding-bottom: 40rem; } .gallery-card__image { aspect-ratio: 1024/1100; } } @media only screen and (max-width: 767px) { .gallery__box { padding-bottom: 20rem; } .gallery-card__image { aspect-ratio: 360/380; } } .header { position: fixed; top: 0; left: 0; right: var(--scrollOffset, 0px); z-index: 90; pointer-events: none; transition: background-color 0.3s, box-shadow 0.3s; /* background-color: rgba($color: #000, $alpha: .3); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); */ } .header::before { content: ""; display: block; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s; z-index: -1; } .header__container { width: 100%; margin: 0 auto; max-width: 100%; } .header__wrap { padding: var(--grid-gap) 0; align-items: center; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .header__logo { pointer-events: auto; display: flex; padding: 0 var(--grid-gap); transition: opacity 0.3s; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .header__nav { padding: 0 var(--grid-gap); pointer-events: none; transition: opacity 0.3s; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .header__controls { margin: calc(-1 * var(--grid-gap)) 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .header__burger { display: none; align-items: center; justify-content: center; width: 58rem; height: 58rem; position: relative; } .header__burger .svg-icon { width: 100%; height: 100%; flex-shrink: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; } .header__burger .svg-icon:first-child { opacity: 1; } .header__button { opacity: 0; pointer-events: none; transition: opacity 0.3s; } .header-logo { display: inline-flex; align-items: center; justify-content: flex-start; transition: opacity 0.3s; } .header-logo .svg-icon { transform-origin: left; transition: transform 0.3s; } .header-logo .svg-icon--text { margin-left: 11rem; } .header-nav { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: 100%; padding-top: var(--header-min-height); background-color: var(--space-100); transform: translateX(-100%); z-index: 89; transition: transform 0.3s; } .header-nav__container { padding: 20rem var(--grid-gap) 32rem; display: flex; flex-direction: column; height: 100%; overflow: hidden; } .header-nav__bottom { margin-top: auto; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .header-nav__box { margin-top: 24rem; padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .header-nav__box .socials { margin-top: 24rem; } .header-nav__item { margin-bottom: 16rem; } .header-nav__item:last-child { margin-bottom: 0; } .header-nav__title { color: var(--infinity-30); margin-bottom: 16rem; } .header-nav__link { font-size: 28rem; line-height: 32rem; letter-spacing: 0.01em; } @media only screen and (hover: hover) { .header-logo:hover { opacity: 0.7; } } @media only screen and (min-width: 1920px) { .header__wrap { padding: 30rem 0; } .header-logo .svg-icon:last-child { margin-left: 14rem; } .header-logo .svg-icon--logo { width: 57rem; height: 39rem; } .header-logo .svg-icon--text { width: 162rem; height: 30rem; } } @media only screen and (max-width: 1024px) { .header::before { display: none; } .header__wrap { padding-top: 25rem; padding-bottom: 25rem; transition: box-shadow 0.3s; } .header__logo, .header__controls { width: auto; } .header__controls { margin-left: auto; } .header__nav { display: none; } .header__controls { padding: 0 var(--grid-gap); margin: 0 0 0 auto; pointer-events: auto; } .header__burger { display: flex; } .header__button { display: none; } .header-logo .svg-icon--logo { width: 43rem; height: 29rem; } .header-logo .svg-icon--text { width: 122rem; height: 23rem; } .header-nav { display: block; } } @media only screen and (max-width: 767px) { .header__wrap { padding-top: 16rem; padding-bottom: 16rem; } .header__burger { width: 40rem; height: 40rem; } .header-logo .svg-icon--logo { width: 32rem; height: 22rem; } .header-logo .svg-icon--text { transform-origin: left; width: 90rem; height: 17rem; margin-left: 8rem; } .header-nav__container { padding-bottom: 28rem; } .header-nav__box { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .header-nav__box .socials { margin-top: 0; } .header-nav__title { margin-bottom: 12rem; } .header-nav__item { margin-bottom: 8rem; } .header-nav__link { font-size: 14rem; line-height: 18rem; } } .heading { padding: 52rem var(--grid-gap); min-height: 128rem; } .heading__row { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .heading__col { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .heading__title { --width: 8rem; --margin-left: 20rem; position: relative; margin-left: var(--margin-left); } .heading__title::before { content: ""; display: block; width: var(--width); height: var(--width); border-radius: 50%; background-color: var(--light-100); position: absolute; top: 50%; left: 0; transform: translate(calc(-1 * var(--margin-left)), calc(-0.5 * var(--width))); } @media only screen and (min-width: 1920px) { .heading__title { --width: 12rem; --margin-left: 28rem; } } @media only screen and (max-width: 1024px) { .heading__title { --width: 10rem; --margin-left: 21rem; } } @media only screen and (max-width: 767px) { .heading__title { --width: 8rem; --margin-left: 20rem; } } @media only screen and (min-width: 1920px) { .heading { padding: 69rem var(--grid-gap); min-height: 170rem; } } @media only screen and (max-width: 1024px) { .heading { padding: 68rem var(--grid-gap); min-height: 168rem; } .heading__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } } @media only screen and (max-width: 767px) { .heading { padding: 40rem var(--grid-gap); min-height: 100rem; } .heading__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .heading__title { font-size: 16rem; line-height: 20rem; } .heading__description { margin-top: 16rem; } } .hero { position: relative; z-index: 2; /* &__info-title { margin-bottom: 12rem; @include mixins.indicator(); } &__info-text { padding-top: 13rem; border-top: 1rem solid currentColor; } */ } .hero__container { width: 100%; margin: 0 auto; max-width: 100%; } .hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero__bg video, .hero__bg img { height: 100%; width: 100%; object-fit: cover; } .hero__wrap { min-height: 100vh; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .hero__main { padding-top: var(--header-min-height); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 75%; } .hero__content { padding: 60rem var(--grid-gap) 24rem; display: flex; flex-direction: column; height: 100%; } .hero__info { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .hero__info-box { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 33.3333333333%; } .hero__title { margin: auto 0; } .hero__side { background-color: rgba(255, 255, 255, 0.01); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); display: flex; flex-direction: column; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .hero__widget { flex-grow: 1; } .hero__controls { display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .hero__control { box-shadow: inset 1px 1px 0 0 var(--night-30); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .hero__control--full { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .hero__breadcrumbs { margin-bottom: var(--grid-gap); } .hero--main .hero__main { padding-bottom: var(--header-min-height); } .hero--main .hero__content { padding: 24rem var(--grid-gap); } .hero--about .hero__bg::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(33, 73, 255, 0.15); } .hero--about .hero__control { box-shadow: inset 0 1px 0 0 var(--night-30); } .hero--about .hero__control:nth-of-type(2) { box-shadow: inset 1px 1px 0 0 var(--night-30); } .hero--about .button-incident__icon { margin-top: 33rem; } .hero--services .hero__control--incident, .hero--career .hero__control--incident, .hero--resource .hero__control--incident { flex-grow: 1; } .hero--services .hero__control--incident .button-incident, .hero--career .hero__control--incident .button-incident, .hero--resource .hero__control--incident .button-incident { height: 100%; } .hero--services .hero__control--incident .button-incident__icon, .hero--career .hero__control--incident .button-incident__icon, .hero--resource .hero__control--incident .button-incident__icon { margin: 50rem auto 80rem; } .hero--services .widget-service-card, .hero--career .widget-service-card, .hero--resource .widget-service-card { padding: var(--grid-gap); --line-height: 20rem; } .hero--services .widget-service-card__top, .hero--career .widget-service-card__top, .hero--resource .widget-service-card__top { min-height: calc(2 * var(--line-height)); transform: translateY(calc(var(--line-height) / -2)); margin-bottom: 12rem; } .hero--services .widget-service-card__image, .hero--career .widget-service-card__image, .hero--resource .widget-service-card__image { transform: translateY(calc(var(--line-height) / 2)); } @media only screen and (min-width: 1920px) { .hero--services .widget-service-card { --line-height: 26rem; } .hero--services .hero__control--incident .button-incident__icon, .hero--career .hero__control--incident .button-incident__icon, .hero--resource .hero__control--incident .button-incident__icon { margin: auto; } .hero--about .hero__control--incident { flex-grow: 1; } .hero--about .hero__control--incident .button-incident { height: 100%; } .hero--about .hero__control--incident .button-incident__icon { margin: auto; } } @media only screen and (max-width: 1024px) { .hero__bg video { object-position: left; } .hero__wrap { flex-direction: column; } .hero__main { flex-grow: 1; display: flex; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .hero__main { overflow: hidden; min-height: calc(100vh - 512px); padding-bottom: 0; } .hero__side { /* position: sticky; bottom: 0; */ align-self: flex-end; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .hero__content { height: auto; flex-grow: 1; padding-top: 73rem; padding-bottom: 48rem; } .hero__info-box { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .hero__widget { display: none; } .hero__title { margin: auto 0 var(--grid-gap); } .hero__title br { display: none; } .hero__control--button { position: sticky; bottom: 0; z-index: 2; } .hero--main .hero__title { margin-top: 0; } .hero--main .hero__content { padding-top: 90px; } .hero--services .hero__side { flex-flow: row wrap; } .hero--services .hero__controls { display: contents; } .hero--services .hero__control--incident { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .hero--services .hero__control--incident .button-incident { height: 100%; min-height: 400rem; } .hero--services .hero__control--incident .button-incident__icon { margin: auto var(--grid-gap) var(--grid-gap); } .hero--services .widget-service-card__top { min-height: unset; transform: translateY(0); } .hero--services .widget-service-card__image { transform: translateY(0); } .hero--career .hero__side, .hero--resource .hero__side { flex-flow: row wrap; } .hero--career .hero__control--incident, .hero--resource .hero__control--incident { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .hero--career .hero__controls, .hero--resource .hero__controls { order: -1; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .hero--resource .hero__control--incident .button-incident { height: 100%; min-height: 400rem; } .hero--resource .hero__control--incident .button-incident__icon { margin: auto var(--grid-gap) var(--grid-gap); } } @media only screen and (max-width: 767px) { .hero__content { padding: 40rem var(--grid-gap) 24rem; } .hero__title { margin-bottom: 24rem; font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .hero__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .hero__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .hero__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 767px) { .hero__info-box { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .hero__main { min-height: calc(100vh - 232px); } .hero--main .hero__content { padding-top: 20rem; padding-bottom: 10rem; } .hero--services .hero__control--incident .button-incident, .hero--resource .hero__control--incident .button-incident { min-height: 160rem; } } .history { /* &__row { box-shadow: inset 0 1px 0 0 var(--space-60); align-items: flex-start; @include mixins.grid-row(); } &__col { @include mixins.grid-col(2,4); &:last-child { position: sticky; top: 0; box-shadow: inset 0 -1px 0 0 var(--space-60); } } &__list { @include mixins.grid-row(); } &__item { box-shadow: inset -1px -1px var(--space-60); @include mixins.grid-col(2,4); } */ } .history__container { width: 100%; margin: 0 auto; max-width: 100%; } .history__wrap { min-height: calc(100vh - var(--heading-min-height)); display: flex; flex-direction: column; } .history__top { box-shadow: inset 0 1px 0 0 var(--space-60); flex-shrink: 0; } .history__main { flex-grow: 1; display: flex; flex-direction: column; } .history__slider { flex-grow: 1; display: flex; flex-direction: column; } .history__block { padding: 80rem var(--grid-gap) var(--grid-gap); } .history__row { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .history__col { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .history__col:first-child { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .history__title { max-width: 560rem; } .history__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .history__text { padding-top: 13rem; border-top: 1px solid currentColor; } .history-timeline__list { display: flex; flex-flow: row nowrap; padding: 0 var(--grid-gap); overflow-x: auto; /* & { scrollbar-width: thin; scrollbar-color: transparent transparent; } */ } .history-timeline__list::-webkit-scrollbar { width: 0px; height: 0px; border-radius: 0px; } .history-timeline__list::-webkit-scrollbar-track { background: transparent; } .history-timeline__list::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0px; } .history-timeline__item { flex: 1 0 223rem; border-bottom: 1rem solid var(--infinity-30); } .history-timeline__item.is-active .history-timeline__btn { color: var(--infinity-100); box-shadow: inset 0 -3px 0 0 var(--light-100); } .history-timeline__btn { margin-bottom: -1rem; padding: 18rem var(--grid-gap); width: 100%; min-width: 223rem; color: var(--infinity-30); transition: color 0.3s, box-shadow 0.3s; font-size: 28rem; line-height: 30rem; font-weight: 400; } @media only screen and (min-width: 1920px) { .history-timeline__btn { font-size: 38rem; line-height: 40rem; } } @media only screen and (max-width: 1024px) { .history-timeline__btn { font-size: 40rem; line-height: 44rem; } } @media only screen and (max-width: 767px) { .history-timeline__btn { font-size: 20rem; line-height: 24rem; } } .history-btn { display: flex; flex-direction: column; aspect-ratio: 1; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; padding: var(--grid-gap); transition: box-shadow 0.3s; position: relative; z-index: 1; /* &__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; img { width: 100%; height: 100%; object-fit: contain; } } */ } .history-btn::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--space-60); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .history-btn:hover::before { transform: scaleY(1); } } .history-btn__title { color: var(--infinity-30); transition: color 0.3s; } .history-btn__icon { display: none; } .history-btn.is-active { box-shadow: inset 4px 4px var(--light-100), inset -4px -4px var(--light-100); } .history-btn.is-active .history-btn__title { color: var(--infinity-100); } .history-info { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); } .history-info__main { padding: var(--grid-gap); display: flex; flex-flow: column nowrap; flex-grow: 1; } .history-info__content { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .history-info__box { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .history-info__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .history-info__text { padding-top: 13rem; border-top: 1px solid currentColor; } .history-info__bottom { margin-top: auto; } .history-info__close { line-height: 0; display: none; } @media only screen and (hover: hover) { .history-btn:hover .history-btn__tag { background-color: var(--light-100); } .history-btn:hover .history-btn__title { color: var(--infinity-100); } .history-btn.is-active:hover::before { display: none; } .history-btn.is-active:hover .history-btn__tag { background-color: var(--night-30); } .history-timeline__btn:hover { color: var(--infinity-100); } } @media only screen and (min-width: 1920px) { .history__title { max-width: 800rem; } .history__subtitle { margin-bottom: 18rem; } .history__text { padding-top: 18rem; } } @media only screen and (max-width: 1024px) { .history { /* &__row { box-shadow: none; } &__col { @include mixins.grid-col(4, 4); &:last-child { box-shadow: none; position: static; } } &__list { padding: 0 var(--grid-gap); } &__item { box-shadow: none; @include mixins.grid-col (4, 4); } */ } .history__wrap { min-height: unset; } .history__top { box-shadow: inset 0 -1px 0 0 var(--space-60); } .history__title { margin-bottom: 64rem; font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .history__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .history__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .history__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 1024px) { .history__subtitle { margin-bottom: 21rem; } .history__text { padding-top: 21rem; } .history__block { padding: var(--grid-gap); /* position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 90; background-color: var(--space-100); transition: transform .3s; transform: translateX(-100%); */ } .history__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .history__col:first-child { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .history-btn { padding: 20rem 0; border-top: 1px solid currentColor; flex-direction: row; justify-content: space-between; align-items: center; aspect-ratio: auto; } .history-btn__tag { display: none; } .history-btn__title { color: var(--infinity-100); font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .history-btn__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .history-btn__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .history-btn__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 1024px) { .history-btn__icon { display: block; line-height: 0; } .history-btn__icon .svg-icon { width: 24rem; height: 24rem; } .history-btn.is-active { box-shadow: none; } .history-info { height: 100%; overflow-y: auto; /* & { scrollbar-width: thin; scrollbar-color: transparent transparent; } */ } .history-info::-webkit-scrollbar { width: 0px; height: 0px; border-radius: 0px; } .history-info::-webkit-scrollbar-track { background: transparent; } .history-info::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0px; } .history-info__main { padding-top: 0; } .history-info__content { margin-top: 20px; padding-top: 20px; } .history-info__bottom { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 12rem; margin-top: 20rem; } .history-info__close { display: block; } .history-timeline__list { padding-top: 40rem; padding-bottom: 40rem; gap: 8rem; } .history-timeline__item { flex: 0 0 0; border: none; } .history-timeline__item.is-active .history-timeline__btn { box-shadow: none; background-color: var(--light-100); } .history-timeline__btn { min-width: auto; margin-bottom: 0; display: inline-flex; padding: 8rem 16rem; border-radius: 8rem; background-color: var(--night-30); /* -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); */ transition: background-color 0.3s; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .history-timeline__btn { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .history-timeline__btn { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .history-timeline__btn { font-size: 14rem; line-height: 18rem; } } @media only screen and (max-width: 767px) { .history { /* &__item { @include mixins.grid-col(4, 4); } */ } .history__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .history__col:last-child { margin-top: 24rem; } .history__title { margin-bottom: 40rem; } .history__subtitle { margin-bottom: 12rem; } .history__text { padding-top: 13rem; } .history__block { padding-top: 20rem; padding-bottom: 20rem; } .history-btn { padding: 12rem 0; } .history-btn__tag { padding: 0; } .history-btn__icon .svg-icon { width: 16rem; height: 16rem; } .history-info__main { padding: var(--grid-gap); } .history-info__bottom { order: -1; margin: 0 0 20rem; } .history-info__box { margin-top: 20rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .history-info__box:first-child { margin-top: 0; } .history-timeline__list { gap: 4rem; padding-top: 32rem; padding-bottom: 32rem; } .history-timeline__btn { padding: 4rem 10rem; border-radius: 5rem; } } .holding { position: relative; } .holding__container { width: 100%; margin: 0 auto; max-width: 100%; } .holding__heading { display: none; } .holding__bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .holding__bg-img { position: absolute; top: 0%; left: 0; height: auto; width: 60%; transform: translate(-5%, 10%); } .holding__bg-img img { width: 100%; height: 100%; object-fit: cover; } .holding__row { box-shadow: inset 0 -1px 0 0 var(--space-60); align-items: flex-start; background-color: rgba(16, 15, 20, 0.3); -webkit-backdrop-filter: blur(150px); backdrop-filter: blur(150px); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .holding__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .holding__col:first-child { position: sticky; top: 0; } .holding__list { display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .holding__item { box-shadow: inset 1px -1px var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .holding__item:nth-child(5n) { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .holding__item:nth-child(5n) .holding-btn { aspect-ratio: 2/1; } .holding__card { display: flex; align-items: center; justify-content: center; min-height: 50vw; height: 100%; /* background-color: rgba($color: var(--space-100), $alpha: .3); -webkit-backdrop-filter: blur(150px); backdrop-filter: blur(150px); */ } .holding__btn-image { position: relative; } .holding__btn-image img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.3s; } .holding__btn-image img:last-child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .holding-btn { display: flex; flex-direction: column; aspect-ratio: 1; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; padding: var(--grid-gap); transition: box-shadow 0.3s; position: relative; /* &.is-active { @include mixins.border(); } */ } .holding-btn__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .holding-btn__image img { width: 100%; height: 100%; object-fit: contain; } .holding-btn__note { color: var(--infinity-30); } .holding-info { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); } .holding-info__main { padding: var(--grid-gap); display: flex; flex-flow: column nowrap; flex-grow: 1; } .holding-info__content { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .holding-info__box { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .holding-info__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .holding-info__text { padding-top: 13rem; border-top: 1px solid currentColor; } .holding-info__text li { margin-bottom: 13rem; } .holding-info__text li:last-child { margin-bottom: 0; } .holding-info__title { margin-top: auto; } @media only screen and (hover: hover) { .holding__btn-image:hover img:first-child { opacity: 0; } .holding__btn-image:hover img:last-child { opacity: 1; } .holding-btn { /* &.is-active { &:hover { &::before { display: none; } } } */ } .holding-btn:hover { box-shadow: inset 4px 4px var(--light-100), inset -4px -4px var(--light-100); } } @media only screen and (min-width: 1920px) { .holding-info__subtitle { margin-bottom: 18rem; } .holding-info__text { padding-top: 18rem; } .holding-info__text li { margin-bottom: 18rem; } } @media only screen and (max-width: 1024px) { .holding__heading { display: block; } .holding__heading .heading { padding-top: 52rem; padding-bottom: 52rem; min-height: 136rem; } .holding__bg { display: none; } .holding__col { box-shadow: inset 0 1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .holding__col:first-child { position: static; } .holding__item { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .holding__item--lg { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .holding__card { min-height: 100vw; height: 100%; } .holding-info__title { order: -1; margin: 0 0 120rem; } .holding-info__subtitle { margin-bottom: 21rem; } .holding-info__text { padding-top: 20px; } } @media only screen and (max-width: 767px) { .holding__btn-image { width: 58%; } .holding-btn { padding: 20rem var(--grid-gap); } .holding-info__title { position: absolute; top: 24rem; left: var(--grid-gap); } .holding-info__main { padding-top: 40rem; } .holding-info__box { margin-top: 20rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .holding-info__box:first-child { margin-top: 0; } .holding-info__subtitle { margin-bottom: 12rem; } .holding-info__text { padding-top: 12px; } .holding-info__text li { margin-bottom: 8rem; } } .nav { display: flex; flex-flow: row wrap; gap: 4rem; position: relative; } .nav__list { display: flex; gap: 4rem; transition: max-width 0.3s, opacity 0.3s, overflow 0.3s; pointer-events: auto; } .nav__list--hidden { max-width: 0; overflow: hidden; opacity: 0; } .nav__more { --close-line-width: 12rem; --close-line-thickness: 1rem; position: relative; color: currentColor; } .nav__more::before, .nav__more::after { content: ""; display: block; position: absolute; top: calc(50% - var(--close-line-thickness) * 0.5); left: calc(50% - var(--close-line-width) * 0.5); width: var(--close-line-width); height: var(--close-line-thickness); border-radius: 0; background-color: currentColor; transition: opacity 0.3s; } .nav__more::after { transform: rotate(-90deg); } .nav.is-open .nav__list--hidden { max-width: 100%; opacity: 1; overflow: visible; } .nav.is-open .nav__more::after { opacity: 0; } .nav-submenu { position: absolute; top: 100%; left: 0; width: 100%; max-width: 486rem; padding: 22rem var(--grid-gap); border-radius: 6rem; background-color: var(--night-30); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); margin-top: 12rem; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } @media only screen and (min-width: 1920px) { .nav__list { gap: 6rem; } .nav-submenu { margin-top: 14rem; padding: 30rem var(--grid-gap); max-width: 648rem; } } @media only screen and (max-width: 1024px) { .nav__list { flex-direction: column; gap: 0; width: 100%; } .nav__item--sub { position: relative; } .nav__link--serv .button-link__box span { position: relative; left: 0; transition: transform 0.3s, left 0.3s; } .nav__link--serv .svg-icon { position: absolute; top: 50%; transform: translateY(-50%); transition: opacity 0.3s, width 0.3s; } .nav__link--serv .svg-icon--angle { left: 0; width: 24rem; height: 24rem; opacity: 0; pointer-events: none; } .nav__link--serv .svg-icon--arrow { right: 0; } .nav-submenu { --padding: 48rem; --height-btn: 48rem; margin: 0; padding: 0; background-color: var(--space-100); max-width: 100%; border-radius: 0; opacity: 1; visibility: visible; transform: translateX(calc(-100% - var(--grid-gap))); transition: transform 0.3s; z-index: 2; /* max-height: calc((var(--vh, 1vh)* 100) - var(--header-min-height) - var(--padding) - var(--height-btn)); overflow-y: auto; @include mixins.scrollbarClear(); */ } .nav-submenu::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background-color: var(--space-100); z-index: -1; pointer-events: none; } } .news { /* &__row { @include mixins.grid-row(); } &__col { @include mixins.grid-col(2,4); } &__list { @include mixins.grid-row(); } &__item { box-shadow: inset 0 1px 0 0 var(--space-60); @include mixins.grid-col(2,4); &--full { @include mixins.grid-col(4,4); } } */ } .news__container { width: 100%; margin: 0 auto; max-width: 100%; } .news__list { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; box-shadow: inset 0 -1px 0 0 var(--space-60); } .news__item { grid-column: span 1; grid-row: span 1; box-shadow: inset 1px 1px 0 0 var(--space-60); /* &:nth-of-type(1) { grid-column: span 2; grid-row: span 2; .news-card { min-height: 50vw; &__content, &__image { height: 50%; } &__title { @include mixins.clamp-text(3); @include mixins.h2(); } &__author { display: none; } } } &:nth-of-type(2) { grid-column: span 2; grid-row: span 1; .news-card { min-height: 25vw; &__title { @include mixins.clamp-text(3); @include mixins.h3(); } &__image { display: none; } } } &:nth-of-type(3) { .news-card { &__location { display: none; } } } &:nth-of-type(4) { .news-card { &__location, &__image { display: none; } } } */ } .news__item:nth-of-type(2), .news__item:nth-of-type(3) { order: -1; } .news__item:nth-of-type(1), .news__item:nth-of-type(4) { grid-column: span 2; } .news__item:nth-of-type(1) .news-card, .news__item:nth-of-type(4) .news-card { display: grid; grid-template-rows: 1fr 1fr; } .news__item:nth-of-type(1) .news-card__title, .news__item:nth-of-type(4) .news-card__title { font-size: 28rem; line-height: 30rem; font-weight: 400; } @media only screen and (min-width: 1920px) { .news__item:nth-of-type(1) .news-card__title, .news__item:nth-of-type(4) .news-card__title { font-size: 38rem; line-height: 40rem; } } @media only screen and (max-width: 1024px) { .news__item:nth-of-type(1) .news-card__title, .news__item:nth-of-type(4) .news-card__title { font-size: 40rem; line-height: 44rem; } } @media only screen and (max-width: 767px) { .news__item:nth-of-type(1) .news-card__title, .news__item:nth-of-type(4) .news-card__title { font-size: 20rem; line-height: 24rem; } } .news__box { display: flex; flex-direction: column; padding: var(--grid-gap); height: 100%; } .news__button { margin-top: auto; } .news-card { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; /* background-color: var(--space-100); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); */ } .news-card::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--space-60); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .news-card:hover::before { transform: scaleY(1); } } .news-card__content { flex-grow: 1; padding: var(--grid-gap); display: flex; flex-direction: column; } .news-card__tags { display: flex; align-items: center; gap: 12rem; margin-bottom: var(--grid-gap); } .news-card__date { margin-left: auto; color: var(--infinity-30); } .news-card__author { margin: 0 var(--grid-gap); } .news-card__info { margin-top: auto; color: var(--infinity-30); } .news-card__image img { width: 100%; height: 100%; object-fit: cover; } .news-author { display: flex; align-items: center; justify-content: flex-start; gap: 16rem; } .news-author__photo { flex-shrink: 0; width: 52rem; height: 52rem; border-radius: 8rem; overflow: hidden; } .news-author__photo img { width: 100%; height: 100%; object-fit: cover; } .news-author__position { color: var(--infinity-30); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-size: 14rem; line-height: 18rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .news-author__position { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 1024px) { .news-author__position { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 767px) { .news-author__position { font-size: 12rem; line-height: 16rem; } } @media only screen and (hover: hover) { .news-card:hover .news-card__type { background-color: var(--light-100); } } @media only screen and (max-width: 1024px) { .news { /* &__heading { .heading { &__description { display: none; } } } */ } .news__list { /* @include mixins.grid-row(); */ grid-template-columns: repeat(2, 1fr); } .news__item { /* @include mixins.grid-col(2,4); &:nth-of-type(-n+2) { @include mixins.grid-col(4,4); } */ } .news__item:nth-of-type(2), .news__item:nth-of-type(3) { order: 0; } .news__item:nth-of-type(1) .news-card, .news__item:nth-of-type(4) .news-card { min-height: unset; display: flex; } .news-card { min-height: 50vw; } .news-card__type { margin-left: 0; } .news-card__type::before { display: none; } .news-author__photo { width: 72rem; height: 72rem; } .news-author__position { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 767px) { .news__list { box-shadow: 0 1px 0 0 var(--space-60); } .news__item { box-shadow: 0 -1px 0 0 var(--space-60); grid-column: span 2; /* &:nth-of-type(n) { @include mixins.grid-col(4,4); } */ } .news-card__content { padding: 20rem var(--grid-gap); min-height: 300rem; } .news-card__title { font-size: 20rem; line-height: 24rem; } .news-card__image { aspect-ratio: 360/158; } .news-author__photo { width: 48rem; height: 48rem; } .news-author__position { font-size: 14rem; line-height: 18rem; font-weight: 400; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .news-author__position { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .news-author__position { font-size: 18rem; line-height: 22rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .news-author__position { font-size: 12rem; line-height: 16rem; } } .partners__continer { width: 100%; margin: 0 auto; max-width: 100%; } .partners__list { box-shadow: inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .partners__item { box-shadow: inset -1px -1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .partners__item:nth-child(4n) { box-shadow: inset 0 -1px 0 0 var(--space-60); } .partners-card { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--grid-gap); min-height: 240rem; transition: box-shadow 0.3s; } .partners-card__image { width: 100%; max-width: 75%; } .partners-card__image img { width: 100%; } /* .partners-card { display: block; position: relative; padding: var(--grid-gap); min-height: 240rem; transition: box-shadow .3s; &__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; img { width: 100%; height: 100%; object-fit: cover; } } &__note { color: var(--infinity-30); } } */ @media only screen and (hover: hover) { .partners-card:hover { box-shadow: inset 4px 4px var(--light-100), inset -4px -4px var(--light-100); } } @media only screen and (min-width: 1920px) { .partners-card { min-height: 320rem; } } @media only screen and (max-width: 767px) { .partners__item { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .partners__item:nth-child(2n) { box-shadow: inset 0 -1px 0 0 var(--space-60); } .partners-card { min-height: 50vw; } } .popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(75px); /* will-change: backdrop-filter; */ opacity: 0; visibility: hidden; z-index: 100; transition: visibility 0.3s, opacity 0.3s; } .popup.is-static { position: static; padding-bottom: 200px; } .popup.is-open { opacity: 1; visibility: visible; } .popup--holding-card { border-left: 1px solid var(--space-60); background-color: rgba(16, 15, 20, 0.4); /* background-color: var(--night-10); -webkin-backdrop-filter: blur(45px); backdrop-filter: blur(45px); */ } .popup--holding-card.is-open .popup__box { transform: translateX(0%); } .popup--holding-card .popup__box { transition: transform 0.5s; transform: translateX(100%); will-change: transform; } .popup--holding-card .popup__main .holding-info { min-height: 100%; } .popup__box { height: 100%; width: 50%; margin-left: auto; display: flex; flex-direction: column; background-color: var(--space-100); transition: transform 0.3s; } .popup__header { display: flex; align-items: center; justify-content: space-between; padding: 40rem var(--grid-gap); min-height: 150rem; } .popup__logo { flex-shrink: 0; } .popup__close { margin-left: auto; flex-shrink: 0; line-height: 0; transition: opacity 0.3s; } .popup__main { flex-grow: 1; overflow-y: auto; } .popup__main::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 8px; } .popup__main::-webkit-scrollbar-track { background: transparent; border-radius: 8px; margin: 0px 0; } .popup__main::-webkit-scrollbar-thumb { background-color: #EEFAFF; border-radius: 8px; } @media only screen and (hover: hover) { .popup__close:hover { opacity: 0.7; } } @media only screen and (min-width: 1920px) { .popup__header { padding-top: 54rem; padding-bottom: 54rem; } .popup__close .svg-icon { width: 32rem; height: 32rem; } } @media only screen and (max-width: 1024px) { .popup--holding-card { width: 100%; } .popup__box { width: 100%; } .popup__title { font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .popup__title { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .popup__title { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .popup__title { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } @media only screen and (max-width: 767px) { .popup__header { min-height: 80rem; padding-top: 28rem; padding-bottom: 28rem; } .popup--holding-card .header-logo { display: none; } .popup--holding-card .popup__header { box-shadow: inset 0 -1px 0 0 var(--space-60); } } .problems { /* &__blocks { @include mixins.grid-row(); } &__box { box-shadow: inset 0 -1px 0 0 var(--space-60); padding: var(--grid-gap); display: flex; flex-direction: column; min-height: 400rem; @include mixins.grid-col(4,4); &:nth-of-type(2), &:nth-of-type(3) { @include mixins.grid-col(2,4); } &:nth-of-type(3) { box-shadow: inset 1px -1px 0 0 var(--space-60); } &:nth-of-type(4) { .problems { &__box-wrap { max-width: calc(50% - var(--grid-gap)); } } } &:last-child { box-shadow: none; } } &__box-wrap { @include mixins.verticalStretch(); } &__title { margin-top: auto; } &__num { margin-bottom: auto; } &__text { &:not(:empty) { margin-top: 13rem; } } &__subtitle { color: var(--infinity-30); &:not(:empty) { padding-bottom: 13rem; border-bottom: 1px solid var(--infinity-100); } } */ /* &__content { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); @include mixins.grid-row(); } &__content-block { padding-left: var(--grid-gap); padding-right: var(--grid-gap); @include mixins.grid-col(1,2); } */ } .problems__container { width: 100%; margin: 0 auto; max-width: 100%; } .problems__container { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); } .problems__heading { flex-shrink: 0; } .problems__row { flex-grow: 1; box-shadow: inset 0 1px 0 0 var(--space-60), inset 0 -1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .problems__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .problems__col:first-child { position: sticky; top: 0; } .problems__col:first-child .problems__box { /* min-height: calc(var(--vh, 1vh)* 100); box-shadow: none; */ padding: 24px var(--grid-gap); } .problems__list { height: 100%; box-shadow: inset 1px 0px 0 0 var(--space-60); display: flex; flex-direction: column; } .problems__item { flex: 1 1 0; box-shadow: inset 0 1px 0 0 var(--space-60); padding: var(--grid-gap) 0; align-items: center; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .problems__content { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .problems__text { color: var(--infinity-30); } @media only screen and (max-width: 1024px) { .problems__container { min-height: 100%; } .problems__row { align-items: flex-start; } .problems__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .problems__col:first-child { position: static; } .problems__col:first-child .problems__box { padding: 0 var(--grid-gap); /* min-height: unset; height: auto; */ } .problems__list { margin-top: 80rem; } .problems__item { padding: 48rem 0; } } @media only screen and (max-width: 767px) { .problems__list { margin-top: 32rem; } .problems__item { padding-top: 20rem; padding-bottom: 20rem; gap: 12rem; } .problems__content { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } } .projects { height: 100%; min-height: 100vh; display: flex; } .projects__container { flex-grow: 1; display: flex; flex-direction: column; width: 100%; margin: 0 auto; max-width: 100%; } .projects__heading { position: sticky; top: 0; /* background-color: var(--space-100); z-index: 1; */ } .projects__progress { display: none; background-color: var(--space-60); height: 1rem; position: relative; position: sticky; top: calc(var(--heading-min-height) - 2rem); } .projects__progress-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 2rem; background-color: var(--light-100); } .projects__card { display: flex; height: 100%; flex-direction: column; } .projects .tns-outer, .projects .tns-inner { height: 100%; } .projects-card { width: 100%; flex-shrink: 0; flex-grow: 1; display: flex; flex-direction: column; min-height: calc(100vh - var(--heading-min-height)); background-color: var(--space-100); position: sticky; top: var(--heading-min-height); box-shadow: inset 0 1px 0 0 var(--space-60); } .projects-card:last-child { min-height: var(--card-min-height, 0); } .projects-card__main { padding: 40rem var(--grid-gap); } .projects-card__content { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .projects-card__box { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .projects-card__box:first-child { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .projects-card__tags { margin-top: 20rem; display: flex; flex-flow: row wrap; gap: 8rem; } .projects-card__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .projects-card__text { padding-top: 13rem; border-top: 1rem solid currentColor; } .projects-card__text p { margin-bottom: 13rem; } .projects-card__text p:last-child { margin-bottom: 0; } .projects-card__bottom { position: relative; flex-grow: 1; } .projects-card__image { width: 100%; height: 100%; /* flex-grow: 1; max-height: 360rem; overflow: hidden; */ } .projects-card__image img { width: 100%; height: 100%; object-fit: cover; /* object-position: top; min-height: calc(var(--vh, 1vh) * 50); */ } .projects-card__link { display: flex; align-items: center; justify-content: center; width: 64rem; height: 64rem; border-radius: 50%; border: 1px solid currentColor; position: absolute; top: 82rem; right: 52rem; opacity: 0; transition: opacity 0.3s; } .projects-card__link span { display: none; } .projects-card__link .svg-icon { flex-shrink: 0; } .projects-card.tns-item { display: inline-flex !important; flex-direction: column; } @media only screen and (hover: hover) { .projects-card:hover .projects-card__link { opacity: 1; } } @media only screen and (min-width: 1920px) { .projects-card__main { padding-top: 54rem; } .projects-card__tags { margin-top: 26rem; } .projects-card__subtitle { margin-bottom: 18rem; } .projects-card__text p { margin-bottom: 18rem; } } @media only screen and (max-width: 1024px) { .projects { min-height: unset; } .projects__heading { position: static; } .projects__heading .heading__col:last-child { margin-left: 0; } .projects__progress { display: none; } .projects-card { position: static; margin-bottom: 40rem; height: auto !important; } .projects-card:last-child { margin-bottom: 0; } .projects-card__main { padding: var(--grid-gap); flex-grow: 0; } .projects-card__box { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .projects-card__box:first-child { margin-bottom: 64rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .projects-card__tags { margin-top: 32rem; } .projects-card__subtitle { margin-bottom: 21rem; } .projects-card__text { padding-top: 21rem; } .projects-card__link { display: none; } .projects-card__image { aspect-ratio: 1024/336; } } @media only screen and (max-width: 767px) { .projects-card__main { padding: 20rem var(--grid-gap); } .projects-card__tags { margin-top: 16rem; } .projects-card__subtitle { margin-bottom: 8rem; } .projects-card__text { padding-top: 13rem; } .projects-card__box { margin-bottom: 24rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .projects-card__box:first-child { margin-bottom: 40rem; } .projects-card__box:last-child { margin-bottom: 0; } .projects-card__image { aspect-ratio: 360/160; } } .resource__container { width: 100%; margin: 0 auto; max-width: 100%; } .resource__row { box-shadow: inset 0 1px 0 0 var(--space-60), inset 0 -1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .resource__row:last-child { box-shadow: inset 0 1px 0 0 var(--space-60), inset 0 -1px 0 0 var(--space-60); } .resource__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .resource__col:last-child { box-shadow: inset 1px 0 0 0 var(--space-60); } .resource__box { padding: 40rem var(--grid-gap); } .resource__content { padding: 40rem var(--grid-gap); } .resource__block { margin-top: 40rem; } .resource__block:first-child { margin-top: 0; } .resource__content { font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } @media only screen and (min-width: 1920px) { .resource__content { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) { .resource__content { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) { .resource__content { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } .resource__content p, .resource__content ol, .resource__content li { margin-bottom: 20rem; } .resource__content p:last-child, .resource__content ol:last-child, .resource__content li:last-child { margin-bottom: 0; } .resource__content li { margin-bottom: 12rem; } .resource__content li:last-child { margin-bottom: 0; } .resource__content ol li { position: relative; counter-increment: item; padding-left: 28rem; } .resource__content ol li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; color: currentColor; } .resource__content ul li { --width: 8rem; --margin-left: 20rem; position: relative; margin-left: var(--margin-left); } .resource__content ul li::before { content: ""; display: block; width: var(--width); height: var(--width); border-radius: 50%; background-color: var(--light-100); position: absolute; top: 50%; left: 0; transform: translate(calc(-1 * var(--margin-left)), calc(-0.5 * var(--width))); } @media only screen and (min-width: 1920px) { .resource__content ul li { --width: 12rem; --margin-left: 28rem; } } @media only screen and (max-width: 1024px) { .resource__content ul li { --width: 10rem; --margin-left: 21rem; } } @media only screen and (max-width: 767px) { .resource__content ul li { --width: 8rem; --margin-left: 20rem; } } .resource__content ul li::before { top: 9rem; } .resource__content i { font-style: italic; } .resource__content b, .resource__content strong { font-weight: 600; } @media only screen and (min-width: 1920px) { .resource__box { padding-top: 60rem; padding-bottom: 60rem; } .resource__block { margin-top: 32rem; } .resource__content { padding-top: 60rem; padding-bottom: 60rem; } .resource__content p, .resource__content ol, .resource__content li { margin-bottom: 34rem; } .resource__content li { margin-bottom: 16rem; } .resource__content ol li { padding-left: 28rem; } .resource__content ul li::before { top: 13rem; } } @media only screen and (max-width: 1024px) { .resource__col { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .resource__col::last-child { box-shadow: none; } .resource__box { padding-top: 60rem; padding-bottom: 0; } .resource__content { padding-top: 60rem; padding-bottom: 60rem; } .resource__content p, .resource__content ol, .resource__content li { margin-bottom: 34rem; } .resource__content li { margin-bottom: 16rem; } .resource__content ol li { padding-left: 28rem; } .resource__content ul li::before { top: 11rem; } } @media only screen and (max-width: 767px) { .resource__box { padding-top: 20rem; padding-bottom: 20rem; } .resource__content { padding-top: 20rem; padding-bottom: 20rem; } .resource__content p, .resource__content ol, .resource__content li { margin-bottom: 20rem; } .resource__content li { margin-bottom: 12rem; } .resource__content ol li { padding-left: 28rem; } .resource__content ul li::before { top: 8rem; } } .services__container { width: 100%; margin: 0 auto; max-width: 100%; } .services__container { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); } .services__heading { flex-shrink: 0; } .services__row { flex-grow: 1; border-top: 1px solid var(--space-60); border-bottom: 1px solid var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .services__col { position: relative; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .services__col:first-child { position: sticky; top: 0; } .services__box { padding: 24px var(--grid-gap); } .services__list { height: 100%; box-shadow: inset 1px 0px 0 0 var(--space-60); display: flex; flex-direction: column; } .services__list.is-selected .services-btn:not(.is-active) { color: var(--infinity-10); /* .services-btn { &__note { color: var(--infinity-10); } } */ } .services__item { flex: 1 1 0; box-shadow: inset 0 1px 0 0 var(--space-60); /* &:nth-child(2n + 1) { box-shadow: inset -1px -1px 0 0 var(--space-60); } */ } .services__item:first-child { box-shadow: none; } .services__block { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 90; background-color: var(--space-100); overflow-y: auto; z-index: 100; transition: transform 0.3s; transform: translateX(-100%); } .services__block::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 8px; } .services__block::-webkit-scrollbar-track { background: transparent; border-radius: 8px; margin: 0px 0; } .services__block::-webkit-scrollbar-thumb { background-color: #EEFAFF; border-radius: 8px; } .services__block.is-active { transform: translateX(0%); } .services--services-detail .heading { min-height: 400rem; padding: var(--grid-gap); display: flex; height: 100%; } .services--services-detail .heading__row { align-items: flex-end; } .services--services-detail .heading__col { margin-left: auto; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .services--services-detail .services-info__box { margin-left: auto; } .services--services-detail .services-info__main { box-shadow: inset 0 -1px 0 0 var(--space-60); } .services--vacancies .services__col:first-child { display: flex; flex-direction: column; justify-content: space-between; } .services--vacancies .services__image { height: 100%; width: 100%; max-height: 50vh; } .services--vacancies .services__image img { width: 100%; height: 100%; object-fit: cover; } .services--vacancies .services__item:last-child { flex: 0; } .services--vacancies .services__block { transform: translateX(0); opacity: 0; visibility: hidden; transition: opacity 0s 0.3s, visibility 0.3s; } .services--vacancies .services__block.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s; } .services--vacancies .button-link__box span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .services--info .services-btn__name { width: auto; } .services-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: var(--grid-gap) calc(var(--grid-gap) + 8rem); transition: padding 0.3s; position: relative; z-index: 1; /* &__image { align-self: center; opacity: .1; transition: opacity .3s; img { width: 100%; height: 100%; object-fit: contain; } } */ } .services-btn::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--infinity-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .services-btn:hover::before { transform: scaleY(1); } } .services-btn__name { width: 50%; transform: translateX(-8rem); padding-right: var(--grid-gap); transition: color 0.3s, transform 0.3s; } .services-btn__wrap { display: flex; justify-content: space-between; align-items: center; width: 50%; padding-left: var(--grid-gap); } .services-btn__note { color: var(--infinity-30); transition: color 0.3s; } .services-btn__icon { transform: translateX(8rem); line-height: 0; transform-origin: center; transition: transform 0.3s, color 0.3s; } .services-btn__icon .svg-icon--mob { display: none; } .services-btn.is-active::before { transform: scaleY(0); } .services-btn.is-active .services-btn__note, .services-btn.is-active .services-btn__name { color: var(--infinity-100); transform: translateX(0); } .services-btn.is-active .services-btn__icon { color: var(--infinity-30); transform: translateX(8rem) rotate(45deg); } .services-btn.is-active .services-btn__name { transform: translateX(-8rem); } .services-info { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; } .services-info__main { padding: var(--grid-gap); display: flex; flex-flow: column nowrap; flex-grow: 1; } .services-info__content { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .services-info__box { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .services-info__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .services-info__text { padding-top: 13rem; border-top: 1px solid currentColor; } .services-info__title { margin-top: auto; } .services-info__header { display: none; } .services-info__descr p, .services-info__descr li { margin-bottom: 13rem; } .services-info__descr p:last-child, .services-info__descr li:last-child { margin-bottom: 0; } .services-info__descr ol li { position: relative; counter-increment: item; padding-left: 40rem; } .services-info__descr ol li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; color: currentColor; } .services-info__descr ul li { --width: 8rem; --margin-left: 20rem; position: relative; margin-left: var(--margin-left); } .services-info__descr ul li::before { content: ""; display: block; width: var(--width); height: var(--width); border-radius: 50%; background-color: var(--light-100); position: absolute; top: 50%; left: 0; transform: translate(calc(-1 * var(--margin-left)), calc(-0.5 * var(--width))); } @media only screen and (min-width: 1920px) { .services-info__descr ul li { --width: 12rem; --margin-left: 28rem; } } @media only screen and (max-width: 1024px) { .services-info__descr ul li { --width: 10rem; --margin-left: 21rem; } } @media only screen and (max-width: 767px) { .services-info__descr ul li { --width: 8rem; --margin-left: 20rem; } } .services-info__descr ul li::before { top: 13rem; } .services-info-header { padding: 25rem var(--grid-gap); display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 -1px 0 0 var(--space-60); } .services-info-header__close { width: 58rem; height: 58rem; display: flex; align-items: center; justify-content: center; } .services-info-header__close .svg-icon { width: 100%; height: 100%; } .services-info-header .header-logo .svg-icon--logo { width: 59rem; height: 40rem; } @media only screen and (hover: hover) { .services-btn:hover .services-btn__note, .services-btn:hover .services-btn__name, .services-btn:hover .services-btn__icon { color: var(--space-100); } .services-btn:hover .services-btn__name, .services-btn:hover .services-btn__icon { transform: translateX(0); } .services-btn.is-active:hover::before { transform: scaleY(0); } .services-btn.is-active:hover .services-btn__name, .services-btn.is-active:hover .services-btn__note { color: var(--infinity-100); } .services-btn.is-active:hover .services-btn__name { transform: translateX(-8rem); } .services-btn.is-active:hover .services-btn__icon { color: var(--infinity-30); transform: translateX(8rem) rotate(45deg); } } @media only screen and (min-width: 1920px) { .services-btn__icon .svg-icon { width: 32rem; height: 32rem; } .services-info__subtitle { margin-bottom: 18rem; } .services-info__text { padding-top: 18rem; } .services-info__descr ul li::before { top: 16rem; } } @media only screen and (max-width: 1024px) { .services__container { min-height: 100%; } .services__row { box-shadow: none; border-top: none; } .services__col { height: 100%; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services__col:first-child { position: static; } .services__box { padding: 0 var(--grid-gap); } .services__block { position: fixed; padding-right: var(--scrollOffset, 0px); } .services__list { margin-top: 32rem; min-height: unset; box-shadow: inset 0 -1px 0 0 var(--space-60), inset 0 1px 0 0 var(--space-60); } .services--services-detail .heading { min-height: unset; padding: 40rem var(--grid-gap); display: flex; height: 100%; } .services--services-detail .heading__col { margin-left: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services--vacancies .services__image { display: none; } .services--vacancies .services__block { opacity: 1; visibility: visible; transition: transform 0.3s; transform: translateX(-100%); } .services--vacancies .services__block.is-active { transform: translateX(0%); transition: transform 0.3s; } .services-info__header { display: block; } .services-info__subtitle { margin-bottom: 21rem; } .services-info__title { order: -1; margin: 0 0 120rem; font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } /* .services-btn { &__image { width: 110rem; height: 110rem; } } */ } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .services-info__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .services-info__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .services-info__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 1024px) { .services-info__text { padding-top: 20rem; } .services-info__controls { position: sticky; bottom: 0; left: 0; right: 0; z-index: 90; } .services-info__descr ul li::before { top: 17rem; } .services-btn { padding: 42rem var(--grid-gap); flex-direction: row; justify-content: space-between; align-items: center; aspect-ratio: auto; gap: 24rem; /* &__tag { background-color: transparent; @include mixins.h2(); } */ } .services-btn__name { width: 40%; } .services-btn__wrap { width: 60%; } .services-btn__name, .services-btn__icon { transform: translateX(0); } .services-btn__icon .svg-icon { width: 36rem; height: 36rem; } .services-btn__icon .svg-icon--desk { display: none; } .services-btn__icon .svg-icon--mob { display: block; } .services-btn.is-active { box-shadow: none; } .services-btn.is-active .services-btn__tag { background-color: transparent; } } @media only screen and (max-width: 767px) { .services__list { margin-top: 40rem; } .services__main { padding-top: 20rem; padding-bottom: 20rem; } .services-btn { padding: 24rem var(--grid-gap); } .services-btn__name { width: auto; } .services-btn__wrap { padding-left: 0; width: auto; } .services-btn__note { display: none; } .services-btn__icon .svg-icon { width: 16rem; height: 16rem; } /* .services-btn { padding: 20rem var(--grid-gap); aspect-ratio: unset; &__image { position: absolute; top: 50%; right: var(--grid-gap); width: 56rem; height: 56rem; transform: translate(0, -50%); } } */ .services-info__box { margin-top: 20rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services-info__box:first-child { margin-top: 0; } .services-info__box:last-child .services-info__subtitle { margin-bottom: 8rem; } .services-info__title { margin-bottom: 40px; font-size: 72rem; line-height: 68rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .services-info__title { font-size: 96rem; line-height: 90rem; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .services-info__title { font-size: 80rem; line-height: 82rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .services-info__title { font-size: 48rem; line-height: 50rem; /* font-size: 28rem; line-height: 32rem; letter-spacing: 0; */ } } @media only screen and (max-width: 767px) { .services-info__subtitle { margin-bottom: 12rem; } .services-info__text { padding-top: 12rem; } .services-info__descr ul li::before { top: 12rem; } .services-info-header { padding: var(--grid-gap); } .services-info-header__close { width: 40rem; height: 40rem; } .services-info-header .header-logo .svg-icon--logo { width: 33rem; height: 23rem; } } .services-page__container { width: 100%; margin: 0 auto; max-width: 100%; /* & { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh)* 100); } */ } .services-page__heading { position: sticky; top: 0; /* background-color: var(--space-100); z-index: 1; */ } .services-page__item { position: sticky; top: var(--heading-min-height); scroll-margin-top: var(--heading-min-height); } .services-page__item:last-child .services-page-card { box-shadow: inset 0 1px 0 0 var(--space-60), inset 0 -1px 0 0 var(--space-60); min-height: var(--card-min-height, 0); } .services-page-card { display: block; background-color: var(--space-100); height: 100%; padding: var(--grid-gap) 0 calc(var(--grid-gap) + 12rem); cursor: pointer; box-shadow: inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .services-page-card__side { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .services-page-card__control { text-align: right; padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .services-page-card__content { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .services-page-card__box { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .services-page-card__title { margin-top: 40rem; align-self: flex-end; padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services-page-card__image { width: 60%; max-width: 170rem; } .services-page-card__image picture { display: block; height: 100%; } .services-page-card__image img { width: 100%; height: 100%; object-fit: cover; } .services-page-card__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .services-page-card__text { padding-top: 13rem; border-top: 1rem solid currentColor; } .services-page-card__text p, .services-page-card__text li { margin-bottom: 13rem; } .services-page-card__text p:last-child, .services-page-card__text li:last-child { margin-bottom: 0; } .services-page-card__text ul li { --width: 8rem; --margin-left: 20rem; position: relative; margin-left: var(--margin-left); } .services-page-card__text ul li::before { content: ""; display: block; width: var(--width); height: var(--width); border-radius: 50%; background-color: var(--light-100); position: absolute; top: 50%; left: 0; transform: translate(calc(-1 * var(--margin-left)), calc(-0.5 * var(--width))); } @media only screen and (min-width: 1920px) { .services-page-card__text ul li { --width: 12rem; --margin-left: 28rem; } } @media only screen and (max-width: 1024px) { .services-page-card__text ul li { --width: 10rem; --margin-left: 21rem; } } @media only screen and (max-width: 767px) { .services-page-card__text ul li { --width: 8rem; --margin-left: 20rem; } } .services-page-card__text ul li::before { top: 9rem; } .services-page-card__button { display: inline-flex; align-items: center; justify-content: space-between; padding: 11rem 23rem; border-radius: 48rem; border: 1rem solid var(--infinity-100); overflow: hidden; transition: color 0.3s, background-color 0.3s, border-color 0.3s; z-index: 2; position: relative; z-index: 1; } .services-page-card__button::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--infinity-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .services-page-card__button:hover::before { transform: scaleY(1); } } .services-page-card__button span { display: block; max-width: 0px; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.5s, opacity 0.5s, margin-right 0.3s; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .services-page-card__button span { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { .services-page-card__button span { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { .services-page-card__button span { font-size: 14rem; line-height: 18rem; } } .services-page-card__button .svg-icon { flex-shrink: 0; } @media only screen and (hover: hover) { .services-page-card:hover .services-page-card__button span { max-width: 200rem; opacity: 1; margin-right: 12rem; } .services-page-card__button:hover { color: var(--space-100); } } @media only screen and (min-width: 1920px) { .services-page-card__subtitle { margin-bottom: 18rem; } .services-page-card__text { padding-top: 18rem; } .services-page-card__text ul li::before { top: 13rem; } .services-page-card__button .svg-icon { width: 32rem; height: 32rem; } } @media only screen and (max-width: 1024px) { .services-page__heading { position: static; } .services-page__item { position: static; margin-bottom: 40rem; } .services-page__item:last-child { margin-bottom: 0; } .services-page__item:last-child .services-page-card { box-shadow: none; } .services-page-card { padding: 0; box-shadow: none; } .services-page-card__side { display: flex; padding: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services-page-card__content { padding: var(--grid-gap) 0; order: -1; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services-page-card__control { padding: 0; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services-page-card__title { order: -1; margin: 0 0 64rem; font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .services-page-card__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .services-page-card__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .services-page-card__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 1024px) { .services-page-card__subtitle { margin-bottom: 21rem; } .services-page-card__text { padding-top: 20rem; } .services-page-card__text ul li::before { top: 11rem; } .services-page-card__image { width: 100%; max-width: 100%; height: 100%; aspect-ratio: 1024/283; } .services-page-card__button { padding: 28rem var(--grid-gap); background-color: var(--light-100); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); border-radius: 0; border: none; width: 100%; } .services-page-card__button span { opacity: 1; max-width: 100%; } .services-page-card__button .svg-icon { width: 36rem; height: 36rem; } } @media only screen and (max-width: 767px) { .services-page-card__content { padding-top: 20rem; } .services-page-card__box { margin-top: 24rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .services-page-card__box:first-child { margin-top: 0; } .services-page-card__title { margin-bottom: 40rem; } .services-page-card__subtitle { margin-bottom: 12rem; } .services-page-card__text { padding-top: 12rem; } .services-page-card__text p, .services-page-card__text li { margin-bottom: 8rem; } .services-page-card__text ul li::before { top: 8rem; } .services-page-card__image { aspect-ratio: 360/160; } .services-page-card__button { padding-top: 22rem; padding-bottom: 22rem; } .services-page-card__button .svg-icon { width: 20rem; height: 20rem; } } .risks { /* &__row { box-shadow: inset 0 -1px 0 0 var(--space-60); align-items: flex-start; @include mixins.grid-row(); @include mixins.divider-center(); } &__col { @include mixins.grid-col(2,4); &:first-child { position: sticky; top: 0; } } &__card { padding: var(--grid-gap); display: flex; align-items: flex-end; min-height: calc(var(--vh, 1vh)* 100); } */ } .risks__container { width: 100%; margin: 0 auto; max-width: 100%; } .risks__list { box-shadow: inset 0 -1px 0 0 var(--space-60), inset 0 1px 0 0 var(--space-60); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .risks__item { box-shadow: inset 1px -1px 0 0 var(--space-60); flex-grow: 1; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .risks__item:nth-child(4n+1) { box-shadow: inset 0 -1px 0 0 var(--space-60); } .risks-card { height: 100%; padding: var(--grid-gap); min-height: 400rem; display: flex; flex-direction: column; overflow: hidden; /* &__top { display: flex; align-items: flex-start; justify-content: space-between; } &__icon { line-height: 0; flex-shrink: 0; width: 80rem; height: 80rem; opacity: .1; img { width: 100%; height: 100%; object-fit: contain; } } &__main { margin-top: auto; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); @include mixins.grid-row(); } &__box { display: flex; align-items: flex-end; padding-left: var(--grid-gap); padding-right: var(--grid-gap); @include mixins.grid-col(1,2); } */ } .risks-card__num { color: var(--infinity-30); } .risks-card__subtitle { margin-top: 20rem; margin-bottom: 100rem; } .risks-card__text { margin-top: auto; color: var(--infinity-30); } @media only screen and (max-width: 1024px) { .risks { /* &__row { &::before { display: none; } } &__col { @include mixins.grid-col(4,4); &:first-child { position: static; .risks { &__card { min-height: unset; height: auto; padding: 40rem var(--grid-gap); } } } } &__card { box-shadow: inset 0 -1px 0 0 var(--space-60); } */ } .risks__item { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .risks__item:nth-child(n) { box-shadow: inset -1px -1px 0 0 var(--space-60); } .risks__item:nth-child(2n) { box-shadow: inset 0 -1px 0 0 var(--space-60); } .risks-card { min-height: 50vw; } .risks-card__subtitle { margin-top: 24rem; } } @media only screen and (max-width: 767px) { .risks__item { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .risks-card { position: relative; min-height: 200rem; padding: 24rem var(--grid-gap); /* &__top { margin-bottom: 60rem; } &__tag { padding: 6rem 10rem 4rem; } &__icon { display: none; } &__box { @include mixins.grid-col(2,2); } */ } .risks-card__num { position: absolute; top: 24rem; right: var(--grid-gap); } .risks-card__subtitle { margin: 0 44rem 40rem 0; } } .slider { --min-height-controls: 80rem; position: relative; display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; padding-bottom: var(--min-height-controls); } .slider__list { display: flex; align-items: stretch; flex-grow: 1; } .slider__item { width: 100%; flex-shrink: 0; } .slider__controls { padding: var(--grid-gap); display: flex; gap: var(--grid-gap); justify-content: space-between; align-items: center; position: absolute; left: 0; bottom: 0; width: 100%; } .slider__progress { display: flex; gap: 6rem; width: 100%; max-width: 360rem; } .slider__progress span { display: block; height: 2rem; width: 13%; background-color: var(--infinity-30); transition: width 0.3s, flex-grow 0.3s; } .slider__progress span.is-active { flex-grow: 1; background-color: var(--infinity-100); } .slider__arrow { width: 32rem; height: 32rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; } .slider__arrow--prev { margin-left: -6rem; } .slider__arrow--next { margin-right: -6rem; } .slider__arrow--border { width: auto; height: auto; padding: 13rem 23rem; } .slider__arrow--border.slider__arrow--prev { margin: 0; } .slider__arrow--border.slider__arrow--prev .svg-icon { transform: scale(-1, 1); } .slider__arrow--border.slider__arrow--next { margin: 0; } .slider__arrow.swiper-button-disabled { border-color: var(--infinity-30); color: var(--infinity-30); pointer-events: none; } .slider .tns-nav { --line-height: 2rem; display: flex !important; justify-content: center; align-items: center; position: absolute; left: 50%; bottom: calc(var(--min-height-controls) / 2); transform: translate(-50%, 50%); z-index: 2; gap: 6rem; width: 100%; max-width: 360rem; margin: 0 auto; } .slider .tns-nav button { position: relative; display: block; height: var(--line-height); width: 13%; background-color: var(--infinity-30); 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: var(--infinity-100); transform: scaleX(0); transform-origin: left; } .slider .tns-nav button.tns-nav-active { flex-grow: 1; /* &::before { transform: scaleX(1); transition: transform 5s linear; } */ } .slider--benefits .tns-outer, .slider--benefits .tns-ovh, .slider--benefits .tns-inner { display: flex; flex-direction: column; flex-grow: 1; } .slider--widget { height: 100%; padding-bottom: 0; } .slider--widget .slider__list { height: 100%; } .slider--widget .slider__item { height: 100%; } .slider--widget .tns-outer, .slider--widget .tns-ovh, .slider--widget .tns-inner { height: 100%; } .slider--widget .tns-outer { position: relative; } .slider--widget .tns-nav { bottom: 0; transform: translate(-50%, 0); padding: var(--grid-gap); } .slider--history .slider__controls { gap: 12rem; display: inline-flex; width: auto; justify-content: flex-start; } .slider--history .slider__item { background-color: var(--space-100); } .slider--gallery { position: relative; height: 100%; padding: 0; } .slider--gallery .slider { /* &__list { height: 100%; } &__item { height: 100%; } */ } .slider--gallery .slider__controls { background-color: var(--infinity-30); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); position: absolute; left: 0; bottom: 0; width: 100%; } .slider--gallery .tns-outer, .slider--gallery .tns-ovh, .slider--gallery .tns-inner { height: 100%; } .slider--gallery.is-single-slide .slider__controls { display: none; } .slider.is-init .tns-nav button.tns-nav-active::before { transform: scaleX(1); transition: transform 5s linear; } @media only screen and (hover: hover) { .slider__arrow:hover { opacity: 0.7; } .slider__arrow--border:hover { opacity: 1; } } @media only screen and (max-width: 1024px) { .slider { --min-height-controls: 112rem; } .slider__arrow { width: 48rem; height: 48rem; } .slider__arrow .svg-icon { width: 28rem; height: 28rem; } .slider--history .slider__controls { display: none; } } @media only screen and (max-width: 767px) { .slider { --min-height-controls: 80rem; } .slider__controls { padding-top: 24rem; padding-bottom: 24rem; } .slider__arrow { width: 32rem; height: 32rem; } .slider__arrow .svg-icon { width: 20rem; height: 20rem; } .slider .tns-nav { max-width: 224rem; } .slider .tns-nav button { width: auto; flex-grow: 1; } } .soulutions__head { padding: var(--grid-gap); display: flex; min-height: 400rem; } .soulutions__title { max-width: 50%; margin: auto 0 0 auto; padding-left: var(--grid-gap); } .socials__list { display: inline-flex; gap: 14rem; } .socials__item { flex-shrink: 0; } .socials__link { display: flex; align-items: center; justify-content: center; width: 42rem; aspect-ratio: 1; border-radius: 50%; background-color: var(--infinity-10); transition: background-color 0.3s; } @media screen and (hover: hover) { .socials__link:hover { background-color: var(--light-100); } } @media only screen and (min-width: 1920px) { .socials__list { gap: 18rem; } .socials__link { width: 56px; } .socials__link .svg-icon { width: 32rem; height: 32rem; } } @media only screen and (max-width: 1024px) { .socials__link { width: 54rem; } .socials__link .svg-icon { width: 31rem; height: 31rem; } } @media only screen and (max-width: 767px) { .socials__link { width: 36rem; } .socials__link .svg-icon { width: 21rem; height: 21rem; } } body.is-services-open .header::before { opacity: 1; pointer-events: auto; } body.is-services-open .nav__item--sub .nav__link { background-color: var(--light-100); } body.is-services-open .nav-submenu { opacity: 1; visibility: visible; } body[data-header-state=is-scroll-up] .header { background-color: var(--space-100); box-shadow: inset 0 -1px 0 0 var(--space-60); } body[data-header-state=is-scroll-up] .header__button { opacity: 1; pointer-events: auto; } body[data-header-state=is-scroll-down] { /* .header-logo { .svg-icon { &--logo { transform: scale(1.2); } &--text { transform-origin: left; transform: scale(0); } } } */ } body[data-header-state=is-scroll-down] .header__nav { opacity: 0; pointer-events: none; } body[data-header-state=is-scroll-down] .header__logo { opacity: 0; pointer-events: none; } body[data-header-state=is-scroll-down] .nav__list { pointer-events: none; } body[data-header-state=is-scroll-down] .nav-submenu { opacity: 0; visibility: hidden; } @media only screen and (max-width: 1024px) { body.is-nav-open .header__burger .svg-icon:first-child { opacity: 0; } body.is-nav-open .header__burger .svg-icon:last-child { opacity: 1; } body.is-nav-open .header__wrap { box-shadow: inset 0 -1px 0 0 var(--space-60); } body.is-nav-open .header-logo .svg-icon--logo { transform: scale(1.37); } body.is-nav-open .header-logo .svg-icon--text { transform: scale(0); } body.is-nav-open .header-nav { transform: translateX(0); } body.is-services-open .nav__item--sub .nav__link { background-color: transparent; } body.is-services-open .nav__link--serv { border-color: transparent; } body.is-services-open .nav__link--serv .button-link__box span { left: 50%; transform: translateX(-50%); } body.is-services-open .nav__link--serv .svg-icon--arrow { opacity: 0; } body.is-services-open .nav__link--serv .svg-icon--angle { opacity: 1; } body.is-services-open .nav-submenu { transform: translateX(0); } body.is-hero-overscroll .cookies { bottom: 0; } body[data-header-state=is-scroll-down] .header__nav { pointer-events: auto; } body[data-header-state=is-scroll-down] .header__burger { opacity: 0; pointer-events: none; } body[data-header-state=is-scroll-down] .nav__list { pointer-events: auto; } } @media only screen and (max-width: 767px) { body.is-nav-open .header-logo .svg-icon--logo { transform: none; } } .steps { /* &__row { box-shadow: inset 0 1px 0 0 var(--space-60); align-items: flex-start; @include mixins.grid-row(); @include mixins.divider-center(); } &__col { @include mixins.grid-col(2,4); &:first-child { position: sticky; top: 0; } } &__card { padding: var(--grid-gap); display: flex; flex-direction: column; align-items: flex-start; min-height: calc(var(--vh, 1vh)* 100); } &__title { margin-top: auto; } &__tag { &:empty { display: none; } } */ } .steps__container { width: 100%; margin: 0 auto; max-width: 100%; } .steps__container { display: flex; flex-direction: column; } .steps__heading { position: sticky; top: 0; /* background-color: var(--space-100); z-index: 1; */ } .steps__progress { display: none; background-color: var(--space-60); height: 1rem; position: relative; position: sticky; top: calc(var(--heading-min-height) - 2rem); } .steps__progress-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 2rem; background-color: var(--light-100); } .steps__item { /* --line-height: 30rem; --height-row: calc(var(--grid-gap) * 2 + var(--line-height)); --height-filters: 0rem; --steps-offset: calc(var(--heading-min-height) + var(--height-filters, 0rem) + var(--height-row) * var(--index)); */ position: sticky; top: calc(var(--stackOffset, 0rem) + var(--heading-min-height)); box-shadow: inset 0 1px 0 0 var(--space-60); padding-bottom: var(--offsetHeight); margin-top: var(--marginTop); } .steps__item:last-child .steps-card { box-shadow: inset 0 1px 0 0 var(--space-60); min-height: var(--card-min-height, 0); } .steps__item.is-not-active .steps-card__note { color: var(--infinity-30); } .steps__item.is-not-active .steps-card__icon { opacity: 1; } .steps__filters { order: 1; position: sticky; bottom: 0; display: none; } .steps-card { position: relative; background-color: var(--space-100); box-shadow: inset 0 -1px 0 0 var(--space-60), inset 0 1px 0 0 var(--space-60); display: flex; flex-direction: column; height: 100%; /* &__top { display: flex; align-items: flex-start; justify-content: space-between; } &__main { margin-top: auto; margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); @include mixins.grid-row(); } */ } .steps-card__head { position: relative; padding: var(--grid-gap) 0; align-items: center; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .steps-card__side { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 25%; } .steps-card__side--right { text-align: right; } .steps-card__main { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .steps-card__content { padding: 8rem 0 44rem; margin: 0 auto; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .steps-card__box { padding: 0 var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .steps-card__icon { opacity: 0; line-height: 0; color: var(--infinity-30); transition: opacity 0.3s; } .steps-card__note { transition: color 0.3s; } .steps-card__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .steps-card__subtitle--hidden { opacity: 0; pointer-events: none; } .steps-card__text { padding-top: 13rem; border-top: 1rem solid currentColor; } .steps-card__text p { margin-bottom: 13rem; } .steps-card__text p:last-child { margin-bottom: 0; } .steps-card li { padding-left: 24rem; position: relative; margin-top: 8rem; } .steps-card li::before { content: ""; display: block; width: 5rem; height: 5rem; border-radius: 50%; background-color: currentColor; position: absolute; top: 0.6em; left: 9rem; transform: translateY(-50%); } .steps-filter { background-color: var(--space-100); padding: var(--grid-gap) 0; width: 100%; } .steps-filter__list { padding: 0 var(--grid-gap); display: flex; justify-content: center; gap: 6rem; overflow-x: auto; /* & { scrollbar-width: thin; scrollbar-color: transparent transparent; } */ } .steps-filter__list::-webkit-scrollbar { width: 0px; height: 0px; border-radius: 0px; } .steps-filter__list::-webkit-scrollbar-track { background: transparent; } .steps-filter__list::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 0px; } .steps-filter__btn { white-space: nowrap; } .steps-filter__btn.is-active { background-color: var(--light-100); } @media only screen and (hover: hover) { .steps-filter__btn:hover { background-color: var(--light-100); } } @media only screen and (min-width: 1920px) { .steps__subtitle { margin-bottom: 18rem; } .steps__text p { margin-bottom: 18rem; } .steps__item { --line-height: 40rem; } .steps-card__icon { top: 40rem; } .steps-card__icon .svg-icon { width: 28rem; height: 28rem; } } @media only screen and (max-width: 1024px) { .steps { /* &__row { box-shadow: none; &::before { display: none; } } &__col { @include mixins.grid-col(4, 4); &:first-child { position: static; .steps { &__card { min-height: unset; height: auto; padding: 40rem var(--grid-gap); } } } } &__card { box-shadow: inset 0 -1px 0 0 var(--space-60); } */ } .steps__heading { position: static; } .steps__item { position: static; margin-top: 40rem; padding-bottom: 0; /* --height-row: 112rem; --height-filters: 122rem; --heading-min-height: 44rem; */ } .steps__item:first-child { margin-top: 0; } .steps__item:first-child .steps-card { box-shadow: inset 0 -1px 0 0 var(--space-60), inset 0 1px 0 0 var(--space-60); } .steps__filters { --heading-min-height: 44rem; order: 0; top: var(--heading-min-height); } .steps__progress { display: none; } .steps-card { height: 100% !important; } .steps-card__side { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .steps-card__main { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .steps-card__icon { position: absolute; right: var(--grid-gap); top: 50%; margin-top: -14rem; } .steps-card__icon .svg-icon { width: 28rem; height: 28rem; } .steps-card__title { padding-right: 40rem; } .steps-card__subtitle { margin-bottom: 21rem; } .steps-card__text { padding-top: 21rem; } .steps-card__content { padding: var(--grid-gap) 0 64rem; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .steps-filter { padding-top: 48rem; padding-bottom: 32rem; } .steps-filter__list { justify-content: flex-start; } } @media only screen and (max-width: 767px) { .steps__heading .heading { padding: 24rem var(--grid-gap); min-height: 68rem; } .steps__item { --heading-min-height: 68rem; /* --line-height: 32rem; --height-filters: 106rem; */ } .steps-card__head { padding-top: 20rem; padding-bottom: 20rem; } .steps-card__side { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .steps-card__main { order: 1; /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .steps-card__box { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .steps-card__title { margin-top: var(--grid-gap); font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 767px) and (min-width: 1920px) { .steps-card__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 767px) and (max-width: 1024px) { .steps-card__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .steps-card__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 767px) { .steps-card__content { padding: 20rem 0; } .steps-card__note { padding: 3rem 0; } .steps-card__icon { position: static; margin: 0; } .steps-card__icon .svg-icon { width: 24rem; height: 24rem; } .steps-card__subtitle { margin-bottom: 8rem; } .steps-card__text { padding-top: 13rem; } .steps-card__text li { margin-top: 4rem; } .steps-filter { padding-top: 40rem; padding-bottom: 40rem; } } .widget { position: absolute; top: 0; right: 0; min-height: calc(var(--vh, 1vh) * 100); width: 25%; display: flex; background-color: rgba(255, 255, 255, 0.01); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); z-index: 100; } .widget__container { display: flex; flex-direction: column; } .widget__slider { flex-grow: 1; } .widget__controls { display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .widget__control { box-shadow: inset 0 1px 0 0 var(--space-60); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .widget__control:nth-of-type(2) { box-shadow: inset 1px 1px 0 0 var(--space-60); } .widget__control--full { /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 100%; } .widget-news-card { padding: var(--grid-gap); display: flex; flex-direction: column; height: 100%; position: relative; min-height: 240rem; font-size: 16rem; line-height: 20rem; font-weight: 400; letter-spacing: 0.02em; } @media only screen and (min-width: 1920px) { .widget-news-card { font-size: 22rem; line-height: 26rem; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) { .widget-news-card { font-size: 22rem; line-height: 26rem; } } @media only screen and (max-width: 767px) { .widget-news-card { font-size: 14rem; line-height: 18rem; } } .widget-news-card::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--light-100); transform: scaleY(0); transform-origin: top; transition: transform 0.3s; z-index: -1; } .widget-news-card__content { display: flex; flex-flow: column nowrap; flex-grow: 1; } .widget-news-card__tags { display: flex; align-items: center; gap: 12rem; margin-bottom: 24rem; } .widget-news-card__type { display: inline-flex; padding: 6rem 12rem; border-radius: 6rem; background-color: var(--night-30); } .widget-news-card__date { margin-left: auto; color: var(--infinity-30); } .widget-news-card__title { margin-bottom: 20rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .widget-news-card__text { margin-top: 12rem; } .widget-news-card__person { margin-bottom: 20rem; } .widget-news-card__info { color: var(--infinity-30); } .widget-news-card__progress { margin-top: auto; display: flex; gap: 6rem; } .widget-news-card__progress span { display: block; height: 2rem; width: 13%; background-color: var(--infinity-30); transition: width 0.3s, flex-grow 0.3s; } .widget-news-card__progress span.is-active { flex-grow: 1; background-color: var(--infinity-100); } .widget-news-card--services .widget-news-card__top { display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; gap: 12rem; } .widget-news-card--services .widget-news-card__main { flex-grow: 1; display: flex; flex-direction: column; } .widget-news-card--services .widget-news-card__title { margin: auto 0 0; } .widget-service-card { display: flex; flex-direction: column; padding: 24rem var(--grid-gap) 16rem; /* -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); */ transition: background-color 0.3s; min-height: 150rem; justify-content: space-between; position: relative; z-index: 1; } .widget-service-card::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background-color: var(--light-100); transition: transform 0.3s; z-index: -1; } @media only screen and (hover: hover) { .widget-service-card:hover::before { transform: scaleY(1); } } .widget-service-card__image { margin-top: auto; width: 56rem; aspect-ratio: 1; opacity: 0.3; transition: opacity 0.3s; } .widget-service-card__image img { width: 100%; height: 100%; object-fit: cover; } .widget-service-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rem; gap: 6rem; } .widget-service-card__top span { text-overflow: ellipsis; overflow: hidden; } .widget-service-card__top .svg-icon { flex-shrink: 0; } @media only screen and (hover: hover) { .widget-news-card:hover::before { transform: scaleY(1); } .widget-service-card:hover .widget-service-card__image { opacity: 1; } div.widget-service-card:hover::before { transform: scaleY(0); } } @media only screen and (min-width: 1920px) { .widget-news-card { min-height: 320rem; } .widget-news-card__type { padding: 10rem 16rem; } .widget-news-card__title { margin-bottom: 26rem; } .widget-service-card { padding-top: 30rem; padding-bottom: 20rem; min-height: 206rem; } .widget-service-card__top .svg-icon { width: 20rem; height: 20rem; } .widget-service-card__image { width: 80rem; } } @media only screen and (max-width: 1199px) { .widget-service-card__title { font-size: 36rem; } } @media only screen and (max-width: 1024px) { .widget { width: 100%; top: unset; bottom: 0; } .widget__slider { display: none; } .widget-service-card { padding: 32rem var(--grid-gap) 24rem; min-height: 400rem; } .widget-service-card__top .svg-icon { width: 24rem; height: 24rem; } .widget-service-card__bottom { margin-top: 44rem; } .widget-service-card__title { font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } } @media only screen and (max-width: 1024px) and (min-width: 1920px) { .widget-service-card__title { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) and (max-width: 1024px) { .widget-service-card__title { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 1024px) and (max-width: 767px) { .widget-service-card__title { font-size: 28rem; line-height: 32rem; } } @media only screen and (max-width: 1024px) { .widget-service-card__image { width: 110rem; } } @media only screen and (max-width: 767px) { .widget__control--incident { display: none; } .widget-service-card { padding: 16rem var(--grid-gap) 15rem; min-height: 160rem; } .widget-service-card__top .svg-icon { width: 16rem; height: 16rem; } .widget-service-card__image { width: 56rem; } } .sitemap { text-align: center; } .sitemap__container { width: 100%; margin: 0 auto; max-width: 100%; } .sitemap__head { padding: 40rem 0; margin-bottom: 40rem; } .sitemap__logo { justify-content: center; } .sitemap__item { margin-bottom: 12rem; } .sitemap__item:last-child { margin-bottom: 0; } .sitemap__link { display: inline; border-bottom: 1rem solid transparent; transition: border-color 0.3s; font-size: 48rem; line-height: 52rem; font-weight: 400; letter-spacing: -0.01em; } @media only screen and (min-width: 1920px) { .sitemap__link { font-size: 64rem; line-height: 70rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) { .sitemap__link { font-size: 64rem; line-height: 68rem; } } @media only screen and (max-width: 767px) { .sitemap__link { font-size: 28rem; line-height: 32rem; } } .sitemap__link.h4 { font-size: 20rem; line-height: 24rem; font-weight: 400; letter-spacing: 0.01em; } @media only screen and (min-width: 1920px) { .sitemap__link.h4 { font-size: 26rem; line-height: 32rem; letter-spacing: 0; } } @media only screen and (max-width: 1024px) { .sitemap__link.h4 { font-size: 28rem; line-height: 32rem; letter-spacing: 0.02em; } } @media only screen and (max-width: 767px) { .sitemap__link.h4 { font-size: 18rem; line-height: 22rem; letter-spacing: 0.01em; } } @media only screen and (hover: hover) { .sitemap__link:hover { border-color: currentColor; } } .info-card__wrap { margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); display: flex; flex-flow: row wrap; /* margin-left: calc(-1 * var(--grid-gap)); margin-right: calc(-1 * var(--grid-gap)); */ } .info-card__box { padding-left: var(--grid-gap); padding-right: var(--grid-gap); /* padding-right: var(--grid-gap); padding-left: var(--grid-gap); */ width: 50%; } .info-card__subtitle { color: var(--infinity-30); margin-bottom: 13rem; } .info-card__text { padding-top: 13rem; border-top: 1px solid currentColor; } .tns-outer { padding: 0 !important; } .tns-outer [hidden] { display: none !important; } .tns-outer [aria-controls], .tns-outer [data-action] { cursor: pointer; } .tns-slider { -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; } .tns-slider > .tns-item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tns-horizontal.tns-subpixel { white-space: nowrap; } .tns-horizontal.tns-subpixel > .tns-item { display: inline-block; vertical-align: top; white-space: normal; } .tns-horizontal.tns-no-subpixel:after { content: ""; display: table; clear: both; } .tns-horizontal.tns-no-subpixel > .tns-item { float: left; } .tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item { margin-right: -100%; } .tns-no-calc { position: relative; left: 0; } .tns-gallery { position: relative; left: 0; min-height: 1px; } .tns-gallery > .tns-item { position: absolute; left: -100%; -webkit-transition: transform 0s, opacity 0s; -moz-transition: transform 0s, opacity 0s; transition: transform 0s, opacity 0s; } .tns-gallery > .tns-slide-active { position: relative; left: auto !important; } .tns-gallery > .tns-moving { -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; } .tns-autowidth { display: inline-block; } .tns-lazy-img { -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; transition: opacity 0.6s; opacity: 0.6; } .tns-lazy-img.tns-complete { opacity: 1; } .tns-ah { -webkit-transition: height 0s; -moz-transition: height 0s; transition: height 0s; } .tns-ovh { overflow: hidden; } .tns-visually-hidden { position: absolute; left: -10000em; } .tns-transparent { opacity: 0; visibility: hidden; } .tns-fadeIn { opacity: 1; filter: alpha(opacity=100); z-index: 0; } .tns-normal, .tns-fadeOut { opacity: 0; filter: alpha(opacity=0); z-index: -1; } .tns-vpfix { white-space: nowrap; } .tns-vpfix > div, .tns-vpfix > li { display: inline-block; } .tns-t-subp2 { margin: 0 auto; width: 310px; position: relative; height: 10px; overflow: hidden; } .tns-t-ct { width: 2333.3333333%; width: -webkit-calc(100% * 70 / 3); width: -moz-calc(100% * 70 / 3); width: 2333.3333333333%; position: absolute; right: 0; } .tns-t-ct:after { content: ""; display: table; clear: both; } .tns-t-ct > div { width: 1.4285714%; width: -webkit-calc(100% / 70); width: -moz-calc(100% / 70); width: 1.4285714286%; height: 10px; float: left; }