mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-25 14:08:30 +02:00
renamed rem() function to pxToRem() to avoid conflicting with native css rem function (#1084)
This commit is contained in:
trean
@@ -112,11 +112,11 @@ $font-family-base: 'Satoshi', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
$font-family-code: 'Source Code Pro', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Monaco', monospace;
|
||||
|
||||
$font-size-xs: rem(12);
|
||||
$font-size-s: rem(14);
|
||||
$font-size-md: rem(16);
|
||||
$font-size-l: rem(18);
|
||||
$font-size-xl: rem(20);
|
||||
$font-size-xs: pxToRem(12);
|
||||
$font-size-s: pxToRem(14);
|
||||
$font-size-md: pxToRem(16);
|
||||
$font-size-l: pxToRem(18);
|
||||
$font-size-xl: pxToRem(20);
|
||||
|
||||
$font-sizes-text: (
|
||||
'xs': $font-size-xs,
|
||||
@@ -132,30 +132,30 @@ $font-size-lg: $font-size-l;
|
||||
|
||||
$font-weight-base: $font-weight-medium;
|
||||
|
||||
$line-height-sm: rem(21);
|
||||
$line-height-lg: rem(27);
|
||||
$line-height-sm: pxToRem(21);
|
||||
$line-height-lg: pxToRem(27);
|
||||
|
||||
$h1-font-size: rem(64);
|
||||
$h2-font-size: rem(56);
|
||||
$h3-font-size: rem(48);
|
||||
$h4-font-size: rem(40);
|
||||
$h5-font-size: rem(32);
|
||||
$h6-font-size: rem(24);
|
||||
$h1-font-size: pxToRem(64);
|
||||
$h2-font-size: pxToRem(56);
|
||||
$h3-font-size: pxToRem(48);
|
||||
$h4-font-size: pxToRem(40);
|
||||
$h5-font-size: pxToRem(32);
|
||||
$h6-font-size: pxToRem(24);
|
||||
|
||||
$font-sizes: (
|
||||
1: rem(64),
|
||||
2: rem(56),
|
||||
3: rem(48),
|
||||
4: rem(40),
|
||||
5: rem(32),
|
||||
6: rem(24),
|
||||
1: pxToRem(64),
|
||||
2: pxToRem(56),
|
||||
3: pxToRem(48),
|
||||
4: pxToRem(40),
|
||||
5: pxToRem(32),
|
||||
6: pxToRem(24),
|
||||
);
|
||||
|
||||
$headings-font-weight: 700;
|
||||
$headings-line-height: 1.2;
|
||||
|
||||
$display-font-sizes: (
|
||||
1: rem(80),
|
||||
1: pxToRem(80),
|
||||
//2: 4.5rem,
|
||||
//3: 4rem,
|
||||
//4: 3.5rem,
|
||||
@@ -199,4 +199,4 @@ $spacers: (
|
||||
|
||||
$code-snippet-border-radius: $border-radius * 2;
|
||||
|
||||
$post-content-width: rem(920);
|
||||
$post-content-width: pxToRem(920);
|
||||
|
||||
@@ -5,8 +5,8 @@ aside[role='status'] {
|
||||
position: relative;
|
||||
padding: $spacer * 1.5 $spacer * 1.5 $spacer * 1.5 $spacer * 3.5;
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
&:before {
|
||||
@@ -15,7 +15,7 @@ aside[role='status'] {
|
||||
position: absolute;
|
||||
left: $spacer * 1.5;
|
||||
top: $spacer * 1.5;
|
||||
height: rem(20);
|
||||
height: pxToRem(20);
|
||||
width: $spacer;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -28,11 +28,11 @@ aside[role='alert'] {
|
||||
color: $warning-70;
|
||||
a {
|
||||
color: $warning-70;
|
||||
border-bottom: rem(1) solid $warning-70;
|
||||
border-bottom: pxToRem(1) solid $warning-70;
|
||||
}
|
||||
&:before {
|
||||
content: '\26A0';
|
||||
font-size: rem(12);
|
||||
font-size: pxToRem(12);
|
||||
}
|
||||
code {
|
||||
color: $warning-70;
|
||||
@@ -44,11 +44,11 @@ aside[role='status'] {
|
||||
color: $secondary-blue-70;
|
||||
a {
|
||||
color: $secondary-blue-70;
|
||||
border-bottom: rem(1) solid $secondary-blue-70;
|
||||
border-bottom: pxToRem(1) solid $secondary-blue-70;
|
||||
}
|
||||
&:before {
|
||||
content: '\24D8';
|
||||
font-size: rem(24);
|
||||
font-size: pxToRem(24);
|
||||
}
|
||||
code {
|
||||
color: $secondary-blue-70;
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
);
|
||||
|
||||
$padding: (
|
||||
sm: 0 rem(20),
|
||||
md: 0 rem(22),
|
||||
lg: 0 rem(28),
|
||||
sm: 0 pxToRem(20),
|
||||
md: 0 pxToRem(22),
|
||||
lg: 0 pxToRem(28),
|
||||
);
|
||||
|
||||
// STYLES
|
||||
|
||||
@@ -11,15 +11,15 @@
|
||||
);
|
||||
|
||||
$padding: (
|
||||
md: rem(7) $spacer,
|
||||
lg: rem(11) $spacer,
|
||||
md: pxToRem(7) $spacer,
|
||||
lg: pxToRem(11) $spacer,
|
||||
);
|
||||
|
||||
// STYLES
|
||||
width: 100%;
|
||||
height: map-get($height, md);
|
||||
padding: map-get($padding, md);
|
||||
border: rem(1) solid $neutral-50;
|
||||
border: pxToRem(1) solid $neutral-50;
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: transparent;
|
||||
color: $neutral-94;
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: rem(1) solid $neutral-100;
|
||||
border: pxToRem(1) solid $neutral-100;
|
||||
}
|
||||
|
||||
&:active,
|
||||
@@ -72,14 +72,14 @@
|
||||
.dropdown {
|
||||
&__button {
|
||||
position: relative;
|
||||
padding: rem(7) $spacer * 2.5 rem(7) $spacer;
|
||||
padding: pxToRem(7) $spacer * 2.5 pxToRem(7) $spacer;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
top: pxToRem(12);
|
||||
right: $spacer;
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-20;
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
&-description {
|
||||
@@ -29,15 +29,15 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $neutral-30;
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
&-about {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-50;
|
||||
|
||||
p {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use 'sass:math';
|
||||
|
||||
@function rem($value) {
|
||||
@function pxToRem($value) {
|
||||
$remValue: math.div($value, 16) + rem;
|
||||
@return $remValue;
|
||||
}
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: rem(40);
|
||||
padding: pxToRem(40);
|
||||
background: linear-gradient(#161e33, #0e1424);
|
||||
border-radius: rem(16);
|
||||
border-radius: pxToRem(16);
|
||||
|
||||
p {
|
||||
margin-bottom: rem(32);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: pxToRem(32);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
text-align: center;
|
||||
color: #f0f3fa;
|
||||
}
|
||||
@@ -35,13 +35,13 @@
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: rem(40) rem(64);
|
||||
padding: pxToRem(40) pxToRem(64);
|
||||
|
||||
p {
|
||||
max-width: $contentWidth;
|
||||
margin-bottom: 0;
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
font-size: pxToRem(24);
|
||||
line-height: pxToRem(34);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,19 +18,19 @@
|
||||
&__content {
|
||||
position: relative;
|
||||
background: $blockBackground;
|
||||
border-radius: rem(8);
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
margin-bottom: rem(40);
|
||||
margin-bottom: pxToRem(40);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(300);
|
||||
max-width: pxToRem(300);
|
||||
margin: 0 auto;
|
||||
padding: 0 rem(17.5);
|
||||
padding: 0 pxToRem(17.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,22 +42,22 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: rem(40) rem(24) 0 rem(24);
|
||||
margin-bottom: rem(24);
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
padding: pxToRem(40) pxToRem(24) 0 pxToRem(24);
|
||||
margin-bottom: pxToRem(24);
|
||||
font-size: pxToRem(24);
|
||||
line-height: pxToRem(34);
|
||||
text-align: center;
|
||||
color: #f0f3fa;
|
||||
@include bs.media-breakpoint-up(lg) {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
font-size: pxToRem(32);
|
||||
line-height: pxToRem(38);
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: -16px;
|
||||
margin-bottom: rem(16);
|
||||
padding: 0 rem(24);
|
||||
margin-bottom: pxToRem(16);
|
||||
padding: 0 pxToRem(24);
|
||||
color: #b4bacc;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -66,8 +66,8 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(220);
|
||||
width: pxToRem(220);
|
||||
height: pxToRem(220);
|
||||
background-image: url('/img/blurred/blurred-light-6.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
@@ -78,44 +78,44 @@
|
||||
padding-bottom: $paddingBottom;
|
||||
|
||||
&__content {
|
||||
min-height: rem(210);
|
||||
min-height: pxToRem(210);
|
||||
background: $blockBackgroundMobile;
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
width: rem(300);
|
||||
height: rem(210);
|
||||
width: pxToRem(300);
|
||||
height: pxToRem(210);
|
||||
}
|
||||
|
||||
a {
|
||||
height: rem(40);
|
||||
padding: 0 rem(22);
|
||||
height: pxToRem(40);
|
||||
padding: 0 pxToRem(22);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
margin-left: rem(56);
|
||||
margin-left: pxToRem(56);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(570);
|
||||
margin-left: rem(56);
|
||||
max-width: pxToRem(570);
|
||||
margin-left: pxToRem(56);
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: rem(56);
|
||||
margin-left: pxToRem(56);
|
||||
}
|
||||
|
||||
&__text {
|
||||
align-self: center;
|
||||
align-items: flex-start;
|
||||
padding-top: rem(30);
|
||||
padding-bottom: rem(30);
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
}
|
||||
|
||||
&__image {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
padding-top: $paddingTopMobile;
|
||||
|
||||
&__title {
|
||||
margin-bottom: rem(40);
|
||||
margin-bottom: pxToRem(40);
|
||||
font-size: $titleSizeMobile;
|
||||
line-height: $titleHeightMobile;
|
||||
color: #161e33;
|
||||
@@ -28,7 +28,7 @@
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(32);
|
||||
gap: pxToRem(32);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -41,13 +41,13 @@
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin-bottom: rem(24);
|
||||
margin-bottom: pxToRem(24);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: rem(24);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: pxToRem(24);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: #161e33;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -65,7 +65,7 @@
|
||||
&__title {
|
||||
max-width: $titleWidth;
|
||||
margin: auto;
|
||||
margin-bottom: rem(80);
|
||||
margin-bottom: pxToRem(80);
|
||||
font-size: $titleSize;
|
||||
line-height: $titleHeight;
|
||||
}
|
||||
@@ -73,8 +73,8 @@
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: rem(75);
|
||||
padding: rem(53) 0;
|
||||
gap: pxToRem(75);
|
||||
padding: pxToRem(53) 0;
|
||||
}
|
||||
|
||||
&__card {
|
||||
@@ -87,7 +87,7 @@
|
||||
left: 0;
|
||||
bottom: $paddingBottom;
|
||||
width: 100%;
|
||||
height: rem(400);
|
||||
height: pxToRem(400);
|
||||
background-image: url('/img/square-grid.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@@ -30,11 +30,11 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: rem(80);
|
||||
width: pxToRem(80);
|
||||
z-index: 1;
|
||||
|
||||
@include bs.media-breakpoint-up(lg) {
|
||||
width: rem(165);
|
||||
width: pxToRem(165);
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -20,7 +20,7 @@
|
||||
&__cards {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -39,8 +39,8 @@
|
||||
justify-content: space-between;
|
||||
|
||||
svg {
|
||||
max-width: rem(24);
|
||||
max-height: rem(24);
|
||||
max-width: pxToRem(24);
|
||||
max-height: pxToRem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -49,14 +49,14 @@
|
||||
color: $neutral-98;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
&__card {
|
||||
&-info {
|
||||
width: 100%;
|
||||
min-height: rem(333);
|
||||
min-height: pxToRem(333);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+3
-3
@@ -39,14 +39,14 @@
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
max-width: pxToRem(920);
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: rem(518);
|
||||
height: pxToRem(518);
|
||||
|
||||
&-link {
|
||||
flex-grow: 1;
|
||||
|
||||
+18
-18
@@ -16,14 +16,14 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
margin-top: $spacer * 5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
max-width: rem(288);
|
||||
max-width: pxToRem(288);
|
||||
height: $spacer * 7.5;
|
||||
margin-bottom: $spacer * 2;
|
||||
border-radius: $spacer * 0.5;
|
||||
@@ -60,8 +60,8 @@
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -73,12 +73,12 @@
|
||||
&__colors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(10);
|
||||
gap: pxToRem(10);
|
||||
|
||||
&-card {
|
||||
width: 100%;
|
||||
height: $spacer * 7.5;
|
||||
padding: rem(12);
|
||||
padding: pxToRem(12);
|
||||
border-radius: $spacer * 0.5;
|
||||
color: $neutral-100;
|
||||
|
||||
@@ -97,8 +97,8 @@
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
span {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__container {
|
||||
max-width: rem(920);
|
||||
max-width: pxToRem(920);
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
&-card {
|
||||
width: calc(100% / 6);
|
||||
height: rem(240);
|
||||
height: pxToRem(240);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,8 +155,8 @@
|
||||
}
|
||||
|
||||
&-specimen {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -171,12 +171,12 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
@@ -22,12 +22,12 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: $spacer;
|
||||
max-width: rem(335);
|
||||
max-width: pxToRem(335);
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
width: calc(50% - 8px);
|
||||
border: rem(1) solid $neutral-60;
|
||||
border: pxToRem(1) solid $neutral-60;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__overlay {
|
||||
height: rem(424);
|
||||
height: pxToRem(424);
|
||||
background-image: url('/img/brand-resources-hero.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.carousel {
|
||||
min-height: rem(240);
|
||||
min-height: pxToRem(240);
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
@@ -19,13 +19,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__image {
|
||||
min-width: rem(400);
|
||||
min-width: pxToRem(400);
|
||||
aspect-ratio: 5 / 3;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
&__content {
|
||||
max-width: rem(1102);
|
||||
max-width: pxToRem(1102);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
&__logo {
|
||||
align-self: flex-start;
|
||||
height: rem(64);
|
||||
height: pxToRem(64);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@@ -25,8 +25,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
b {
|
||||
@@ -38,7 +38,7 @@
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
width: calc(100% - 24px);
|
||||
max-width: rem(440);
|
||||
max-width: pxToRem(440);
|
||||
margin-left: $spacer * 1.5;
|
||||
background-image: url('/img/case-study-bg.svg');
|
||||
background-size: 100%;
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
padding: rem(28) 0 0 rem(28);
|
||||
padding: pxToRem(28) 0 0 pxToRem(28);
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
@@ -61,7 +61,7 @@
|
||||
background-image: url('/img/blurred/blurred-light-13.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
border-radius: 0 pxToRem(12) 0 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: rem(472);
|
||||
min-height: pxToRem(472);
|
||||
padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5;
|
||||
}
|
||||
|
||||
@@ -85,11 +85,11 @@
|
||||
}
|
||||
|
||||
&__tiitle {
|
||||
width: rem(520);
|
||||
width: pxToRem(520);
|
||||
}
|
||||
|
||||
&__description {
|
||||
width: rem(520);
|
||||
width: pxToRem(520);
|
||||
//margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
@@ -99,8 +99,8 @@
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
width: rem(597);
|
||||
height: rem(472);
|
||||
width: pxToRem(597);
|
||||
height: pxToRem(472);
|
||||
left: -150px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,14 +20,14 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-20;
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: $neutral-40;
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
&-link {
|
||||
@@ -42,20 +42,20 @@
|
||||
}
|
||||
|
||||
&__resources-cards {
|
||||
margin-bottom: rem(30);
|
||||
margin-bottom: pxToRem(30);
|
||||
|
||||
& > div {
|
||||
&:first-of-type,
|
||||
&:last-of-type {
|
||||
img {
|
||||
min-width: rem(635);
|
||||
min-width: pxToRem(635);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
img {
|
||||
min-width: rem(397);
|
||||
min-width: pxToRem(397);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -70,14 +70,14 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-40;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.community-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 6.5, $spacer * 4, rem(350));
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 6.5, $spacer * 4, pxToRem(350));
|
||||
}
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 3;
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
@@ -45,8 +45,8 @@
|
||||
width: 100%;
|
||||
|
||||
input[type='email'] {
|
||||
padding-top: rem(11);
|
||||
padding-bottom: rem(11);
|
||||
padding-top: pxToRem(11);
|
||||
padding-bottom: pxToRem(11);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,8 +61,8 @@
|
||||
}
|
||||
|
||||
&__about {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
color: $neutral-50;
|
||||
text-align: center;
|
||||
@@ -74,7 +74,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
height: pxToRem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -95,19 +95,19 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: rem(680);
|
||||
max-width: pxToRem(680);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(680);
|
||||
max-width: pxToRem(680);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__form {
|
||||
@@ -125,7 +125,7 @@
|
||||
|
||||
&__about {
|
||||
position: relative;
|
||||
max-width: rem(520);
|
||||
max-width: pxToRem(520);
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
gap: rem(12);
|
||||
gap: pxToRem(12);
|
||||
|
||||
&-avatar {
|
||||
height: $spacer * 3;
|
||||
@@ -55,16 +55,16 @@
|
||||
|
||||
&-nickname {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(20);
|
||||
height: rem(20);
|
||||
width: pxToRem(20);
|
||||
height: pxToRem(20);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.03687 12.6263L3.67375 18.7501H0.703125L7.64937 10.8151L9.03687 12.6263Z' fill='%23F0F3FA'/%3E%3Cpath d='M10.6562 6.8675L15.5669 1.25H18.5356L12.0312 8.68875L10.6562 6.8675Z' fill='%23F0F3FA'/%3E%3Cpath d='M19.6803 18.75H13.7059L0.320312 1.25H6.44594L19.6803 18.75ZM14.5253 16.9731H16.1703L5.55219 2.93375H3.78719L14.5253 16.9731Z' fill='%23F0F3FA'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@@ -87,14 +87,14 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
height: rem(500);
|
||||
gap: pxToRem(30);
|
||||
height: pxToRem(500);
|
||||
}
|
||||
|
||||
&__card {
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__cards {
|
||||
height: rem(452);
|
||||
height: pxToRem(452);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,13 +15,13 @@
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
form {
|
||||
$last-row-margin: rem(34);
|
||||
$last-row-margin: pxToRem(34);
|
||||
|
||||
display: flex;
|
||||
margin-top: $spacer * 2;
|
||||
@@ -79,12 +79,12 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(192);
|
||||
width: pxToRem(220);
|
||||
height: pxToRem(192);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
border-radius: 0 pxToRem(12) 0 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
&__title,
|
||||
&__sales-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
@@ -30,7 +30,7 @@
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 1.5 0;
|
||||
border-top: rem(1) solid $neutral-20;
|
||||
border-top: pxToRem(1) solid $neutral-20;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
@@ -42,14 +42,14 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -97,16 +97,16 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: rem(382);
|
||||
width: pxToRem(382);
|
||||
}
|
||||
|
||||
&__form {
|
||||
width: rem(600);
|
||||
width: pxToRem(600);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__sales-title {
|
||||
@@ -115,8 +115,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
font-size: pxToRem(40);
|
||||
line-height: pxToRem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
@@ -31,7 +31,7 @@
|
||||
color: $neutral-20;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
@@ -50,22 +50,22 @@
|
||||
padding-top: $spacer * 2;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-right: rem(122);
|
||||
padding-right: pxToRem(122);
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
font-size: pxToRem(24);
|
||||
line-height: pxToRem(34);
|
||||
margin-top: 0;
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: rem(12);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,8 +74,8 @@
|
||||
background: url('/img/qdrant-cloud.png') right bottom no-repeat;
|
||||
background-size: contain;
|
||||
max-width: 100% !important;
|
||||
width: rem(372);
|
||||
height: rem(214);
|
||||
width: pxToRem(372);
|
||||
height: pxToRem(214);
|
||||
border-radius: 0 0 calc($spacer / 2) 0;
|
||||
aspect-ratio: 1.45/1;
|
||||
align-self: end;
|
||||
@@ -99,24 +99,24 @@
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
text-align: center;
|
||||
line-height: rem(67);
|
||||
max-width: rem(920);
|
||||
line-height: pxToRem(67);
|
||||
max-width: pxToRem(920);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(920);
|
||||
line-height: pxToRem(30);
|
||||
max-width: pxToRem(920);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: rem(-15);
|
||||
margin-right: rem(-15);
|
||||
margin-left: pxToRem(-15);
|
||||
margin-right: pxToRem(-15);
|
||||
}
|
||||
|
||||
&__cards > div {
|
||||
padding: 0 rem(15);
|
||||
padding: 0 pxToRem(15);
|
||||
}
|
||||
|
||||
&__card {
|
||||
@@ -124,39 +124,39 @@
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-left: $spacer * 2.5;
|
||||
padding-right: $spacer * 2.5;
|
||||
min-height: rem(390);
|
||||
min-height: pxToRem(390);
|
||||
|
||||
svg {
|
||||
max-width: rem(48);
|
||||
max-height: rem(48);
|
||||
max-width: pxToRem(48);
|
||||
max-height: pxToRem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
padding-top: rem(75);
|
||||
padding-bottom: rem(75);
|
||||
max-width: rem(1110);
|
||||
min-height: rem(420);
|
||||
padding-top: pxToRem(75);
|
||||
padding-bottom: pxToRem(75);
|
||||
max-width: pxToRem(1110);
|
||||
min-height: pxToRem(420);
|
||||
padding-left: $spacer * 3;
|
||||
padding-right: $spacer * 3;
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: map-get($font-sizes-text, 'xxl');
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
width: rem(540);
|
||||
height: rem(372);
|
||||
width: pxToRem(540);
|
||||
height: pxToRem(372);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: rem(1110);
|
||||
max-width: pxToRem(1110);
|
||||
min-width: 100%;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
@@ -40,8 +40,8 @@
|
||||
outline: none;
|
||||
border: 1px solid $neutral-80;
|
||||
background-color: transparent;
|
||||
width: rem(64);
|
||||
height: rem(64);
|
||||
width: pxToRem(64);
|
||||
height: pxToRem(64);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -53,8 +53,8 @@
|
||||
}
|
||||
|
||||
&__button svg {
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__button:disabled {
|
||||
@@ -62,8 +62,8 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
font-size: pxToRem(32);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
@@ -84,11 +84,11 @@
|
||||
padding-bottom: $spacer * 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
min-height: rem(407);
|
||||
min-height: pxToRem(407);
|
||||
|
||||
img {
|
||||
max-width: rem(120);
|
||||
max-height: rem(64);
|
||||
max-width: pxToRem(120);
|
||||
max-height: pxToRem(64);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,14 +98,14 @@
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
height: rem(48);
|
||||
height: pxToRem(48);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
img {
|
||||
width: rem(48);
|
||||
height: rem(48);
|
||||
width: pxToRem(48);
|
||||
height: pxToRem(48);
|
||||
&:not(:first-of-type) {
|
||||
margin-left: $spacer * -1;
|
||||
z-index: 1;
|
||||
@@ -134,7 +134,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -145,7 +145,7 @@
|
||||
&__header-content {
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
height: rem(64);
|
||||
height: pxToRem(64);
|
||||
}
|
||||
|
||||
&__cards-wrapper {
|
||||
@@ -157,8 +157,8 @@
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: rem(-15);
|
||||
margin-right: rem(-15);
|
||||
margin-left: pxToRem(-15);
|
||||
margin-right: pxToRem(-15);
|
||||
}
|
||||
.splide {
|
||||
margin-left: -20px;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
&-preview {
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
border-radius: rem(4);
|
||||
border-radius: pxToRem(4);
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.customers-get-contacted {
|
||||
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, rem(350));
|
||||
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, pxToRem(350));
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
left: 0;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
height: pxToRem(240);
|
||||
background-image: url('/img/blurred/blurred-light-14.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -50,13 +50,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: rem(640);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
max-width: pxToRem(640);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
+9
-9
@@ -33,7 +33,7 @@
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
gap: rem(12);
|
||||
gap: pxToRem(12);
|
||||
|
||||
&-avatar {
|
||||
height: $spacer * 3;
|
||||
@@ -62,16 +62,16 @@
|
||||
|
||||
&-position {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-50;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(20);
|
||||
height: rem(20);
|
||||
width: pxToRem(20);
|
||||
height: pxToRem(20);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4665_8685)'%3E%3Cpath d='M19.1667 0H0.833333C0.333333 0 0 0.333333 0 0.833333V19.1667C0 19.6667 0.333333 20 0.833333 20H19.1667C19.6667 20 20 19.6667 20 19.1667V0.833333C20 0.333333 19.6667 0 19.1667 0ZM5.91667 17.0833H3V7.5H6V17.0833H5.91667ZM4.41667 6.16667C3.5 6.16667 2.66667 5.41667 2.66667 4.41667C2.66667 3.5 3.41667 2.66667 4.41667 2.66667C5.33333 2.66667 6.16667 3.41667 6.16667 4.41667C6.16667 5.41667 5.41667 6.16667 4.41667 6.16667ZM17.0833 17.0833H14.0833V12.4167C14.0833 11.3333 14.0833 9.91667 12.5833 9.91667C11 9.91667 10.8333 11.0833 10.8333 12.3333V17.0833H7.83333V7.5H10.6667V8.83333C11.0833 8.08333 12 7.33333 13.5 7.33333C16.5 7.33333 17.0833 9.33333 17.0833 11.9167V17.0833Z' fill='%23161E33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4665_8685'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@@ -91,13 +91,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
height: rem(1452);
|
||||
gap: pxToRem(30);
|
||||
height: pxToRem(1452);
|
||||
}
|
||||
|
||||
&__card {
|
||||
@@ -112,7 +112,7 @@
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__cards {
|
||||
height: rem(1264);
|
||||
height: pxToRem(1264);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
padding-left: pxToRem(20);
|
||||
padding-right: pxToRem(20);
|
||||
}
|
||||
|
||||
&__link {
|
||||
|
||||
+4
-4
@@ -11,7 +11,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
@@ -35,12 +35,12 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
font-size: pxToRem(40);
|
||||
line-height: pxToRem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
line-height: pxToRem(27);
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
@@ -42,14 +42,14 @@
|
||||
color: $neutral-20;
|
||||
margin-top: calc($spacer / 2);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
font-size: pxToRem(24);
|
||||
line-height: pxToRem(34);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
color: $neutral-30;
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
font-size: pxToRem(16);
|
||||
line-height: pxToRem(24);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@@ -67,8 +67,8 @@
|
||||
margin-top: $spacer * 2.5;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: rem(287);
|
||||
max-height: rem(197);
|
||||
max-width: pxToRem(287);
|
||||
max-height: pxToRem(197);
|
||||
aspect-ratio: 1.46;
|
||||
background-size: contain;
|
||||
background-color: $neutral-98;
|
||||
@@ -88,15 +88,15 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(445);
|
||||
line-height: pxToRem(67);
|
||||
max-width: pxToRem(445);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
max-width: rem(540);
|
||||
line-height: rem(30);
|
||||
max-width: pxToRem(540);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
max-width: rem(400);
|
||||
max-width: pxToRem(400);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -122,19 +122,19 @@
|
||||
|
||||
&__card-title {
|
||||
margin-top: 0;
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
font-size: pxToRem(32);
|
||||
line-height: pxToRem(38);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
font-size: pxToRem(16);
|
||||
line-height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
margin: 0;
|
||||
max-width: rem(560);
|
||||
max-height: rem(384);
|
||||
max-width: pxToRem(560);
|
||||
max-height: pxToRem(384);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
row-gap: rem(40);
|
||||
row-gap: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -20,8 +20,8 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
font-size: pxToRem(32);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
line-height: pxToRem(27);
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
@@ -52,22 +52,22 @@
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: rem(229);
|
||||
max-width: rem(335);
|
||||
height: pxToRem(229);
|
||||
max-width: pxToRem(335);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
padding-top: rem(54);
|
||||
padding-left: rem(50);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(50);
|
||||
padding-top: pxToRem(54);
|
||||
padding-left: pxToRem(50);
|
||||
padding-bottom: pxToRem(80);
|
||||
padding-right: pxToRem(50);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
color: $neutral-98;
|
||||
font-size: rem(9);
|
||||
line-height: rem(14);
|
||||
font-size: pxToRem(9);
|
||||
line-height: pxToRem(14);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@@ -82,13 +82,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
line-height: pxToRem(30);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -98,18 +98,18 @@
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: rem(584);
|
||||
height: rem(400);
|
||||
max-width: rem(584);
|
||||
padding-top: rem(94);
|
||||
padding-left: rem(107);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(80);
|
||||
width: pxToRem(584);
|
||||
height: pxToRem(400);
|
||||
max-width: pxToRem(584);
|
||||
padding-top: pxToRem(94);
|
||||
padding-left: pxToRem(107);
|
||||
padding-bottom: pxToRem(80);
|
||||
padding-right: pxToRem(80);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
font-size: rem(15);
|
||||
line-height: rem(24);
|
||||
font-size: pxToRem(15);
|
||||
line-height: pxToRem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: rem(15) rem(20);
|
||||
padding: pxToRem(15) pxToRem(20);
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
@@ -19,8 +19,8 @@
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-90;
|
||||
margin: 0;
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
&__content {
|
||||
display: none;
|
||||
padding: $spacer * 1.5 $spacer * 2 rem(12);
|
||||
padding: $spacer * 1.5 $spacer * 2 pxToRem(12);
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
@@ -72,8 +72,8 @@
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -84,14 +84,14 @@
|
||||
&-title {
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin: 0 0 $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-group {
|
||||
padding-bottom: rem(4);
|
||||
padding-bottom: pxToRem(4);
|
||||
|
||||
&-heading {
|
||||
display: block;
|
||||
@@ -113,11 +113,11 @@
|
||||
summary:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(10);
|
||||
height: rem(10);
|
||||
width: pxToRem(10);
|
||||
height: pxToRem(10);
|
||||
position: absolute;
|
||||
top: rem(7);
|
||||
right: rem(4);
|
||||
top: pxToRem(7);
|
||||
right: pxToRem(4);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@@ -126,15 +126,15 @@
|
||||
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
padding: rem(4) 0 rem(4) $spacer;
|
||||
border-left: rem(1) solid $primary-50;
|
||||
padding: pxToRem(4) 0 pxToRem(4) $spacer;
|
||||
border-left: pxToRem(1) solid $primary-50;
|
||||
font-weight: 600;
|
||||
background-color: $neutral-30;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
summary:after {
|
||||
top: rem(11);
|
||||
top: pxToRem(11);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,8 +158,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
@@ -17,7 +17,7 @@
|
||||
h3,
|
||||
h4 {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
@@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
padding: rem(4);
|
||||
padding: pxToRem(4);
|
||||
color: $neutral-90;
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
max-width: rem(1440);
|
||||
max-width: pxToRem(1440);
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -32,14 +32,14 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
@@ -52,7 +52,7 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
+7
-7
@@ -13,8 +13,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
&__preview-mobile {
|
||||
width: 100%;
|
||||
padding: 0 rem(12);
|
||||
padding: 0 pxToRem(12);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@@ -47,13 +47,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: pxToRem(730);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
|
||||
+11
-11
@@ -28,14 +28,14 @@
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
@@ -63,7 +63,7 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__cases {
|
||||
@@ -71,8 +71,8 @@
|
||||
|
||||
& > div:last-of-type {
|
||||
img {
|
||||
width: rem(394);
|
||||
margin-left: rem(50);
|
||||
width: pxToRem(394);
|
||||
margin-left: pxToRem(50);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -87,7 +87,7 @@
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: rem(445);
|
||||
width: pxToRem(445);
|
||||
}
|
||||
|
||||
&-link {
|
||||
@@ -96,16 +96,16 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
width: rem(540);
|
||||
width: pxToRem(540);
|
||||
text-align: left;
|
||||
order: initial;
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: rem(30);
|
||||
margin-bottom: pxToRem(30);
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
@@ -23,8 +23,8 @@
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
|
||||
&__card-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
}
|
||||
@@ -58,19 +58,19 @@
|
||||
&__header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@@ -80,7 +80,7 @@
|
||||
'C C D D E E'
|
||||
'F F F F G G'
|
||||
'H H I I J J';
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
}
|
||||
|
||||
&__card:nth-of-type(1) {
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.feedback {
|
||||
margin-top: rem(12);
|
||||
margin-top: pxToRem(12);
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
margin-bottom: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
line-height: pxToRem(24);
|
||||
}
|
||||
&__question {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
line-height: pxToRem(24);
|
||||
color: $neutral-70;
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
&__answer {
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
padding: rem(4) $spacer;
|
||||
line-height: pxToRem(24);
|
||||
padding: pxToRem(4) $spacer;
|
||||
&_yes {
|
||||
color: $success-90;
|
||||
background-color: $success-10;
|
||||
margin-right: rem(12);
|
||||
margin-right: pxToRem(12);
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background-color: $success-30;
|
||||
|
||||
@@ -25,12 +25,12 @@
|
||||
}
|
||||
|
||||
&__logo {
|
||||
max-width: rem(118);
|
||||
max-width: pxToRem(118);
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__social {
|
||||
max-width: rem(350);
|
||||
max-width: pxToRem(350);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
@@ -65,12 +65,12 @@
|
||||
&__menu-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: rem(120);
|
||||
min-width: pxToRem(120);
|
||||
}
|
||||
|
||||
&__menu-section-title {
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
line-height: rem(24);
|
||||
line-height: pxToRem(24);
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -88,7 +88,7 @@
|
||||
&__menu-item a {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
&__middle-title {
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-98;
|
||||
}
|
||||
@@ -127,13 +127,13 @@
|
||||
&__middle-subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 100%;
|
||||
padding-top: rem(30);
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: 0;
|
||||
|
||||
display: flex;
|
||||
@@ -156,7 +156,7 @@
|
||||
color: $neutral-70;
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
&__bottom-content a {
|
||||
@@ -172,8 +172,8 @@
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
&__menu {
|
||||
min-width: rem(540);
|
||||
gap: rem(54);
|
||||
min-width: pxToRem(540);
|
||||
gap: pxToRem(54);
|
||||
}
|
||||
|
||||
&__menu-section {
|
||||
@@ -191,7 +191,7 @@
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
padding-bottom: rem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
|
||||
+1
-1
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.get-contacted-with-question {
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, 0, rem(350));
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, 0, pxToRem(350));
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
justify-content: center;
|
||||
|
||||
min-width: 100%;
|
||||
min-height: rem(615);
|
||||
min-height: pxToRem(615);
|
||||
|
||||
border-radius: 16px;
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
line-height: pxToRem(27);
|
||||
text-align: center;
|
||||
color: $neutral-90;
|
||||
margin-top: $spacer * 1.5;
|
||||
@@ -54,8 +54,8 @@
|
||||
position: absolute;
|
||||
top: $spacer * 1.5;
|
||||
left: $spacer * 2.5;
|
||||
width: rem(94);
|
||||
height: rem(83);
|
||||
width: pxToRem(94);
|
||||
height: pxToRem(83);
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -65,8 +65,8 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: rem(281);
|
||||
height: rem(151);
|
||||
width: pxToRem(281);
|
||||
height: pxToRem(151);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@@ -74,8 +74,8 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: rem(250);
|
||||
height: rem(250);
|
||||
width: pxToRem(250);
|
||||
height: pxToRem(250);
|
||||
background-image: url('/img/blurred/blurred-light-2.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
@@ -101,7 +101,7 @@
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
min-height: rem(165);
|
||||
min-height: pxToRem(165);
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@@ -109,12 +109,12 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: rem(640);
|
||||
max-width: pxToRem(640);
|
||||
}
|
||||
|
||||
&__overlay-middle {
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: rem(480);
|
||||
margin: rem(-142) auto 0;
|
||||
min-height: pxToRem(480);
|
||||
margin: pxToRem(-142) auto 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@@ -43,14 +43,14 @@
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
max-width: 100%;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
}
|
||||
@@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: rem(200);
|
||||
min-width: pxToRem(200);
|
||||
}
|
||||
|
||||
&__stars {
|
||||
@@ -83,16 +83,16 @@
|
||||
|
||||
padding-top: calc($spacer / 2);
|
||||
padding-bottom: calc($spacer / 2);
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
padding-left: pxToRem(20);
|
||||
padding-right: pxToRem(20);
|
||||
|
||||
background-color: $neutral-10;
|
||||
transition: bottom 1s ease-in-out;
|
||||
}
|
||||
|
||||
&__stars svg {
|
||||
max-width: rem(24);
|
||||
max-height: rem(24);
|
||||
max-width: pxToRem(24);
|
||||
max-height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__stars-text {
|
||||
@@ -100,7 +100,7 @@
|
||||
margin-right: calc($spacer / 2);
|
||||
margin-left: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -116,10 +116,10 @@
|
||||
justify-content: center;
|
||||
gap: calc($spacer / 4);
|
||||
|
||||
height: rem(25);
|
||||
height: pxToRem(25);
|
||||
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
@@ -127,18 +127,18 @@
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
max-width: rem(920);
|
||||
max-width: pxToRem(920);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 1);
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(640);
|
||||
line-height: pxToRem(30);
|
||||
max-width: pxToRem(640);
|
||||
margin: 0 auto $spacer * 2;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,16 +5,16 @@ form.hs-form {
|
||||
|
||||
& > fieldset {
|
||||
min-width: 100%;
|
||||
margin-bottom: rem(20);
|
||||
margin-bottom: pxToRem(20);
|
||||
|
||||
label {
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: pxToRem(6);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: rem(14);
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ form.hs-form {
|
||||
&.form-columns-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(20);
|
||||
gap: pxToRem(20);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
justify-content: space-between;
|
||||
@@ -53,7 +53,7 @@ form.hs-form {
|
||||
float: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
$remValue: rem(10);
|
||||
$remValue: pxToRem(10);
|
||||
max-width: calc(50% - #{$remValue});
|
||||
}
|
||||
}
|
||||
@@ -117,7 +117,7 @@ form.hs-form {
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
height: rem(77);
|
||||
height: pxToRem(77);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
@@ -132,7 +132,7 @@ form.hs-form {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
top: pxToRem(12);
|
||||
right: $spacer;
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
@@ -147,8 +147,8 @@ form.hs-form {
|
||||
|
||||
.legal-consent-container {
|
||||
p {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-60;
|
||||
|
||||
a {
|
||||
@@ -188,11 +188,11 @@ form.hs-form {
|
||||
|
||||
.hs_submit {
|
||||
input[type='submit'] {
|
||||
padding-left: rem(22);
|
||||
padding-right: rem(22);
|
||||
padding-left: pxToRem(22);
|
||||
padding-right: pxToRem(22);
|
||||
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
line-height: pxToRem(24);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,6 +207,6 @@ form.hs-form {
|
||||
.submitted-message {
|
||||
color: $success-90;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
line-height: pxToRem(24);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(2) {
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
@@ -41,8 +41,8 @@
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
@@ -50,7 +50,7 @@
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
@@ -67,17 +67,17 @@
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: rem(22);
|
||||
width: rem(166);
|
||||
height: rem(1);
|
||||
top: pxToRem(22);
|
||||
width: pxToRem(166);
|
||||
height: pxToRem(1);
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.hybrid-cloud-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, $spacer * 4, rem(350));
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, $spacer * 4, pxToRem(350));
|
||||
}
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
|
||||
& > div {
|
||||
gap: $spacer * 0.5;
|
||||
padding: rem(4) $spacer;
|
||||
border-radius: rem(100);
|
||||
padding: pxToRem(4) $spacer;
|
||||
border-radius: pxToRem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
@@ -33,8 +33,8 @@
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-90;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -74,12 +74,12 @@
|
||||
text-align: left;
|
||||
|
||||
&__content {
|
||||
width: rem(480);
|
||||
width: pxToRem(480);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__features {
|
||||
@@ -89,8 +89,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
@@ -103,17 +103,17 @@
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: rem(480);
|
||||
width: pxToRem(480);
|
||||
margin-top: -$spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__content {
|
||||
width: rem(500);
|
||||
width: pxToRem(500);
|
||||
}
|
||||
&__preview {
|
||||
width: rem(550);
|
||||
width: pxToRem(550);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+10
-10
@@ -28,9 +28,9 @@
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: rem(15);
|
||||
left: pxToRem(15);
|
||||
bottom: -4px;
|
||||
width: rem(2);
|
||||
width: pxToRem(2);
|
||||
height: calc(100% - 52px);
|
||||
background-color: $neutral-40;
|
||||
}
|
||||
@@ -43,7 +43,7 @@
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4.5px;
|
||||
height: rem(45);
|
||||
height: pxToRem(45);
|
||||
width: $spacer * 2.4;
|
||||
background-image: url('/img/hybrid-cloud-steps-cube/cube.png');
|
||||
background-repeat: no-repeat;
|
||||
@@ -58,7 +58,7 @@
|
||||
left: -32px;
|
||||
top: -30px;
|
||||
width: $spacer * 6.5;
|
||||
height: rem(108.5);
|
||||
height: pxToRem(108.5);
|
||||
background-image: url('/img/hybrid-cloud-steps-cube/cube-blur.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@@ -67,8 +67,8 @@
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-98;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -101,7 +101,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__steps {
|
||||
@@ -113,14 +113,14 @@
|
||||
&:not(:last-of-type) {
|
||||
&:before {
|
||||
bottom: -28px;
|
||||
width: rem(2);
|
||||
width: pxToRem(2);
|
||||
height: calc(100% - 28px);
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+8
-8
@@ -7,18 +7,18 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-20;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(27);
|
||||
margin-bottom: pxToRem(27);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@@ -41,15 +41,15 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(30);
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
&__title {
|
||||
margin: 0 auto $spacer * 2.5;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -20,7 +20,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: rem(92) 0;
|
||||
padding: pxToRem(92) 0;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@@ -35,7 +35,7 @@
|
||||
gap: $spacer;
|
||||
padding: $spacer 0 $spacer $spacer;
|
||||
background-color: $neutral-98;
|
||||
border-radius: rem(12);
|
||||
border-radius: pxToRem(12);
|
||||
|
||||
img {
|
||||
width: $spacer * 4;
|
||||
@@ -55,7 +55,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(400);
|
||||
height: pxToRem(400);
|
||||
background-image: url('/img/square-grid.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
@@ -67,9 +67,9 @@
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
width: rem(920);
|
||||
width: pxToRem(920);
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
@@ -24,7 +24,7 @@
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -41,7 +41,7 @@
|
||||
&__preview {
|
||||
margin-top: $spacer * 3;
|
||||
width: 100%;
|
||||
height: rem(440);
|
||||
height: pxToRem(440);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -58,29 +58,29 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(726);
|
||||
line-height: pxToRem(67);
|
||||
max-width: pxToRem(726);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 5;
|
||||
width: rem(920);
|
||||
height: rem(440);
|
||||
width: pxToRem(920);
|
||||
height: pxToRem(440);
|
||||
background-image: url('/img/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
height: pxToRem(240);
|
||||
|
||||
position: absolute;
|
||||
bottom: rem(-255);
|
||||
bottom: pxToRem(-255);
|
||||
left: 0;
|
||||
filter: blur(60px);
|
||||
background: linear-gradient(90deg, #dc244c 7%, #2567eb 30%, #f54c71 50%, #7335f0 70%, #bb3987 100%);
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
&__logo {
|
||||
width: 100%;
|
||||
min-height: rem(40);
|
||||
min-height: pxToRem(40);
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -37,13 +37,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
align-items: center;
|
||||
min-height: rem(240);
|
||||
min-height: pxToRem(240);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
@@ -51,7 +51,7 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
height: pxToRem(240);
|
||||
bottom: $spacer * 7.5;
|
||||
background-image: url('../../img/grid.png');
|
||||
background-size: cover;
|
||||
|
||||
@@ -6,16 +6,16 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
row-gap: rem(7);
|
||||
row-gap: pxToRem(7);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: rem(10);
|
||||
padding: pxToRem(10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -28,7 +28,7 @@
|
||||
aspect-ratio: 0.96;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border-radius: rem(6);
|
||||
border-radius: pxToRem(6);
|
||||
}
|
||||
|
||||
&__card-name {
|
||||
@@ -36,7 +36,7 @@
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin-bottom: rem(4);
|
||||
margin-bottom: pxToRem(4);
|
||||
font-size: map-get($font-sizes-text, md);
|
||||
}
|
||||
|
||||
@@ -54,12 +54,12 @@
|
||||
&__title {
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
row-gap: rem(30);
|
||||
row-gap: pxToRem(30);
|
||||
}
|
||||
|
||||
&__card {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.link {
|
||||
$icon-width: rem(20);
|
||||
$icon-width: pxToRem(20);
|
||||
$icon-height: calc(1em * 0.62);
|
||||
$link-color: $primary-50;
|
||||
$link-font-size: $font-size-l;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
padding-top: rem(52);
|
||||
padding-top: pxToRem(52);
|
||||
background-color: $neutral-94;
|
||||
display: none;
|
||||
gap: $spacer * 3;
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 0 rem(20);
|
||||
padding: 0 pxToRem(20);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -29,10 +29,10 @@
|
||||
&__close {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: rem(5);
|
||||
padding-top: rem(7);
|
||||
width: rem(40);
|
||||
height: rem(40);
|
||||
padding: pxToRem(5);
|
||||
padding-top: pxToRem(7);
|
||||
width: pxToRem(40);
|
||||
height: pxToRem(40);
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -40,8 +40,8 @@
|
||||
}
|
||||
|
||||
&__close svg {
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__controls {
|
||||
@@ -49,9 +49,9 @@
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
padding-bottom: rem(60);
|
||||
padding-left: pxToRem(20);
|
||||
padding-right: pxToRem(20);
|
||||
padding-bottom: pxToRem(60);
|
||||
}
|
||||
|
||||
&__login {
|
||||
@@ -71,8 +71,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
|
||||
color: $neutral-20;
|
||||
|
||||
@@ -85,8 +85,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: rem(64);
|
||||
padding: 0 rem(20);
|
||||
min-height: pxToRem(64);
|
||||
padding: 0 pxToRem(20);
|
||||
}
|
||||
|
||||
&__subitems {
|
||||
@@ -95,7 +95,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $neutral-90;
|
||||
padding: $spacer rem(20);
|
||||
padding: $spacer pxToRem(20);
|
||||
}
|
||||
|
||||
&__subitems a {
|
||||
@@ -106,25 +106,25 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
min-height: rem(40);
|
||||
min-height: pxToRem(40);
|
||||
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
font-size: pxToRem(16);
|
||||
line-height: pxToRem(24);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__subitem span {
|
||||
width: rem(16);
|
||||
height: rem(16);
|
||||
width: pxToRem(16);
|
||||
height: pxToRem(16);
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
&__expand {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: rem(5);
|
||||
width: rem(34);
|
||||
height: rem(34);
|
||||
padding: pxToRem(5);
|
||||
width: pxToRem(34);
|
||||
height: pxToRem(34);
|
||||
background-color: transparent;
|
||||
|
||||
display: flex;
|
||||
@@ -133,14 +133,14 @@
|
||||
}
|
||||
|
||||
&__expand svg {
|
||||
height: rem(16);
|
||||
width: rem(16);
|
||||
height: pxToRem(16);
|
||||
width: pxToRem(16);
|
||||
}
|
||||
|
||||
&__section-link {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: rem(4);
|
||||
margin-bottom: pxToRem(4);
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
line-height: $font-size-s;
|
||||
|
||||
@@ -18,18 +18,18 @@
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding-top: rem(12);
|
||||
padding-bottom: rem(12);
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
padding-top: pxToRem(12);
|
||||
padding-bottom: pxToRem(12);
|
||||
padding-left: pxToRem(20);
|
||||
padding-right: pxToRem(20);
|
||||
background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0));
|
||||
z-index: 1;
|
||||
|
||||
&__trigger {
|
||||
outline: none;
|
||||
border: none;
|
||||
width: rem(40);
|
||||
height: rem(40);
|
||||
width: pxToRem(40);
|
||||
height: pxToRem(40);
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
@@ -68,7 +68,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: rem(24);
|
||||
padding: pxToRem(24);
|
||||
position: absolute;
|
||||
|
||||
border-radius: 12px;
|
||||
@@ -107,7 +107,7 @@
|
||||
&__submenu-item {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin-bottom: rem(4);
|
||||
margin-bottom: pxToRem(4);
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -116,7 +116,7 @@
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
border-radius: rem(4);
|
||||
border-radius: pxToRem(4);
|
||||
color: $neutral-20;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@@ -127,7 +127,7 @@
|
||||
color: $primary-50;
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-right: rem(12);
|
||||
margin-right: pxToRem(12);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -140,7 +140,7 @@
|
||||
|
||||
&__section-link {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: rem(4);
|
||||
margin-bottom: pxToRem(4);
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
line-height: $font-size-s;
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
|
||||
&__link {
|
||||
color: $neutral-94;
|
||||
padding: rem(4) $spacer;
|
||||
padding: pxToRem(4) $spacer;
|
||||
font-size: $font-size-s;
|
||||
line-height: rem(21);
|
||||
line-height: pxToRem(21);
|
||||
border-radius: 100px;
|
||||
background: linear-gradient($neutral-20, $neutral-10);
|
||||
display: flex;
|
||||
@@ -31,16 +31,16 @@
|
||||
|
||||
&__logo {
|
||||
content: url('../../icons/logo.svg');
|
||||
min-width: rem(14);
|
||||
height: rem(16);
|
||||
padding-right: rem(8);
|
||||
min-width: pxToRem(14);
|
||||
height: pxToRem(16);
|
||||
padding-right: pxToRem(8);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
line-height: pxToRem(48);
|
||||
margin: $spacer * 1.5 0 0;
|
||||
}
|
||||
|
||||
@@ -58,17 +58,17 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: rem(160) 0;
|
||||
padding: pxToRem(160) 0;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
max-width: pxToRem(920);
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
height: rem(400);
|
||||
top: rem(87);
|
||||
height: pxToRem(400);
|
||||
top: pxToRem(87);
|
||||
background-image: url('../../img/mission-background.png');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,14 +16,14 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -59,18 +59,18 @@
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: rem(381);
|
||||
width: pxToRem(381);
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
flex-direction: row;
|
||||
width: rem(476);
|
||||
width: pxToRem(476);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: rem(118);
|
||||
width: pxToRem(118);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.not-found {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 104px);
|
||||
padding-top: rem(130);
|
||||
padding-top: pxToRem(130);
|
||||
padding-bottom: $spacer * 5;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
@@ -19,8 +19,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-94;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
@@ -33,7 +33,7 @@
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
width: rem(200);
|
||||
width: pxToRem(200);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,15 +43,15 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
height: pxToRem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: rem(120);
|
||||
padding-bottom: rem(130);
|
||||
padding-top: pxToRem(120);
|
||||
padding-bottom: pxToRem(130);
|
||||
min-height: calc(100vh - 140px);
|
||||
|
||||
&__image {
|
||||
|
||||
@@ -42,8 +42,8 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(250);
|
||||
height: rem(250);
|
||||
width: pxToRem(250);
|
||||
height: pxToRem(250);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 5);
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
line-height: rem(24);
|
||||
line-height: pxToRem(24);
|
||||
text-align: center;
|
||||
color: $neutral-80;
|
||||
margin-top: $spacer;
|
||||
@@ -70,7 +70,7 @@
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: rem(240);
|
||||
min-height: pxToRem(240);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -83,14 +83,14 @@
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
|
||||
padding-top: rem(30);
|
||||
padding-bottom: rem(30);
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
padding-left: $spacer * 4;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
min-width: rem(640);
|
||||
min-width: pxToRem(640);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@@ -99,11 +99,11 @@
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: rem(640);
|
||||
max-width: pxToRem(640);
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: rem(300);
|
||||
max-width: pxToRem(300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
@@ -19,14 +19,14 @@
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes, 6);
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__extra-title {
|
||||
font-size: map-get($font-sizes, 6);
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
&__image {
|
||||
height: 100%;
|
||||
min-height: rem(332);
|
||||
min-height: pxToRem(332);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
@@ -74,23 +74,23 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(80);
|
||||
line-height: rem(96);
|
||||
font-size: pxToRem(80);
|
||||
line-height: pxToRem(96);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
max-width: rem(475);
|
||||
font-size: pxToRem(40);
|
||||
line-height: pxToRem(48);
|
||||
max-width: pxToRem(475);
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: rem(475);
|
||||
max-width: pxToRem(475);
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
|
||||
&__image {
|
||||
min-height: rem(524);
|
||||
min-height: pxToRem(524);
|
||||
}
|
||||
|
||||
&__date {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: rem(4);
|
||||
gap: pxToRem(4);
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
&.active {
|
||||
background-color: $primary-50;
|
||||
border-radius: rem(10);
|
||||
border-radius: pxToRem(10);
|
||||
|
||||
a {
|
||||
color: $neutral-100;
|
||||
|
||||
+2
-2
@@ -10,8 +10,8 @@
|
||||
100%,
|
||||
$spacer * 3,
|
||||
$spacer * 2,
|
||||
rem(57),
|
||||
rem(38)
|
||||
pxToRem(57),
|
||||
pxToRem(38)
|
||||
);
|
||||
|
||||
&__title {
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@@ -24,12 +24,12 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
max-width: rem(560);
|
||||
max-width: pxToRem(560);
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.partners-get-contacted {
|
||||
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, rem(350));
|
||||
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, pxToRem(350));
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-70;
|
||||
margin: 0 auto $spacer * 3;
|
||||
}
|
||||
@@ -40,7 +40,7 @@
|
||||
left: 0;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
height: pxToRem(240);
|
||||
background-image: url('/img/blurred/blurred-light-14.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -52,19 +52,19 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: rem(730);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
max-width: pxToRem(730);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(1302);
|
||||
max-width: pxToRem(1302);
|
||||
padding: 0 $spacer * 1.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -32,15 +32,15 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -56,13 +56,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -38,10 +38,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacer * 0.5 rem(60);
|
||||
padding: $spacer * 0.5 pxToRem(60);
|
||||
background-color: $neutral-98;
|
||||
border-radius: rem(12);
|
||||
border: rem(1) solid $neutral-90;
|
||||
border-radius: pxToRem(12);
|
||||
border: pxToRem(1) solid $neutral-90;
|
||||
|
||||
img {
|
||||
width: $spacer * 7.5;
|
||||
@@ -56,7 +56,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
height: pxToRem(240);
|
||||
background-image: url('/img/square-grid-small.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
@@ -69,11 +69,11 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
max-width: pxToRem(730);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
|
||||
@@ -4,20 +4,20 @@
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: rem(47) $spacer * 2 $spacer * 3 $spacer * 2;
|
||||
border-radius: rem(12);
|
||||
border-top: rem(1) solid $neutral-40;
|
||||
padding: pxToRem(47) $spacer * 2 $spacer * 3 $spacer * 2;
|
||||
border-radius: pxToRem(12);
|
||||
border-top: pxToRem(1) solid $neutral-40;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
color: $neutral-80;
|
||||
z-index: 1;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
padding: rem(47) rem(31);
|
||||
border: rem(1) solid $primary-40;
|
||||
padding: pxToRem(47) pxToRem(31);
|
||||
border: pxToRem(1) solid $primary-40;
|
||||
|
||||
.pricing-door__popular {
|
||||
left: rem(31);
|
||||
left: pxToRem(31);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,11 +25,11 @@
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: $spacer * 2;
|
||||
padding: rem(2) rem(12);
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
padding: pxToRem(2) pxToRem(12);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
text-transform: uppercase;
|
||||
border-radius: rem(6);
|
||||
border-radius: pxToRem(6);
|
||||
background-color: $primary-50;
|
||||
color: $neutral-98;
|
||||
}
|
||||
@@ -38,12 +38,12 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(192);
|
||||
width: pxToRem(220);
|
||||
height: pxToRem(192);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
border-radius: 0 pxToRem(12) 0 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@@ -57,8 +57,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@@ -69,14 +69,14 @@
|
||||
|
||||
&__feature {
|
||||
padding-top: $spacer;
|
||||
border-top: rem(1) solid $neutral-40;
|
||||
border-top: pxToRem(1) solid $neutral-40;
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
a {
|
||||
color: $neutral-80;
|
||||
border-bottom: rem(1) solid $neutral-80;
|
||||
border-bottom: pxToRem(1) solid $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,14 +90,14 @@
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: $spacer * 1.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
|
||||
&:before {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(4);
|
||||
top: pxToRem(4);
|
||||
left: 0;
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
@@ -113,14 +113,14 @@
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
text-align: center;
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: rem(1);
|
||||
width: rem(920);
|
||||
height: pxToRem(1);
|
||||
width: pxToRem(920);
|
||||
margin: 0 auto;
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
@@ -43,21 +43,21 @@
|
||||
&__title {
|
||||
position: absolute;
|
||||
top: $spacer * 4;
|
||||
left: rem(12);
|
||||
width: rem(400);
|
||||
left: pxToRem(12);
|
||||
width: pxToRem(400);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: rem(553);
|
||||
width: pxToRem(553);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: absolute;
|
||||
bottom: $spacer * 4;
|
||||
right: rem(12);
|
||||
width: rem(361);
|
||||
right: pxToRem(12);
|
||||
width: pxToRem(361);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.private-cloud-get-contacted {
|
||||
@include get-contacted.base($spacer * 3.5, $spacer * 4, $spacer * 7.5, $spacer * 4, rem(400));
|
||||
@include get-contacted.base($spacer * 3.5, $spacer * 4, $spacer * 7.5, $spacer * 4, pxToRem(400));
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
@@ -26,19 +26,19 @@
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
width: rem(540);
|
||||
width: pxToRem(540);
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: rem(465);
|
||||
width: pxToRem(465);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-98;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(176);
|
||||
height: pxToRem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -42,12 +42,12 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
top: pxToRem(12);
|
||||
right: $spacer;
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
h5 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
@@ -71,12 +71,12 @@
|
||||
|
||||
&-secondary {
|
||||
.post {
|
||||
padding: rem(18) 0 rem(20);
|
||||
border-bottom: rem(1) solid $neutral-90;
|
||||
padding: pxToRem(18) 0 pxToRem(20);
|
||||
border-bottom: pxToRem(1) solid $neutral-90;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: rem(20);
|
||||
border-top: rem(1) solid $neutral-90;
|
||||
padding-top: pxToRem(20);
|
||||
border-top: pxToRem(1) solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -97,14 +97,14 @@
|
||||
|
||||
&__articles {
|
||||
flex-direction: row;
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
|
||||
&-main {
|
||||
width: calc(100% - 476px);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
width: rem(446);
|
||||
width: pxToRem(446);
|
||||
|
||||
.post {
|
||||
&:first-of-type {
|
||||
@@ -119,13 +119,13 @@
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
&-search-block {
|
||||
width: rem(534);
|
||||
width: pxToRem(534);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
@@ -41,7 +41,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(176);
|
||||
height: pxToRem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__form {
|
||||
|
||||
+5
-5
@@ -10,7 +10,7 @@
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
img {
|
||||
max-width: rem(255);
|
||||
max-width: pxToRem(255);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,8 +20,8 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: rem(12);
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: pxToRem(12);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: rem(12);
|
||||
margin-top: pxToRem(12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: rem(12);
|
||||
margin-top: pxToRem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -18,8 +18,8 @@
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(25);
|
||||
height: rem(1);
|
||||
top: pxToRem(25);
|
||||
height: pxToRem(1);
|
||||
width: calc((100% - 820px) / 2);
|
||||
background-color: $neutral-90;
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -41,8 +41,8 @@
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
padding: rem(4) $spacer;
|
||||
border-radius: rem(100);
|
||||
padding: pxToRem(4) $spacer;
|
||||
border-radius: pxToRem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
@@ -52,8 +52,8 @@
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-90;
|
||||
}
|
||||
}
|
||||
@@ -64,7 +64,7 @@
|
||||
left: 0;
|
||||
bottom: -9px;
|
||||
width: 100%;
|
||||
height: rem(114);
|
||||
height: pxToRem(114);
|
||||
background-image: url('/img/blurred/blurred-light-10.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -75,13 +75,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(71);
|
||||
line-height: pxToRem(71);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: pxToRem(730);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -7,10 +7,10 @@
|
||||
$spacer * 4,
|
||||
$spacer * 7.5,
|
||||
$spacer * 4,
|
||||
rem(728),
|
||||
pxToRem(728),
|
||||
$spacer * 3.5,
|
||||
$spacer * 2.5,
|
||||
rem(67),
|
||||
pxToRem(67),
|
||||
$spacer * 3
|
||||
);
|
||||
}
|
||||
|
||||
+20
-20
@@ -24,16 +24,16 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-40;
|
||||
|
||||
strong, b {
|
||||
@@ -45,7 +45,7 @@
|
||||
&-image {
|
||||
align-self: flex-end;
|
||||
width: 100%;
|
||||
max-width: rem(540);
|
||||
max-width: pxToRem(540);
|
||||
margin-right: -24px;
|
||||
}
|
||||
}
|
||||
@@ -58,10 +58,10 @@
|
||||
overflow: hidden;
|
||||
|
||||
&-title {
|
||||
margin-bottom: rem(12);
|
||||
margin-bottom: pxToRem(12);
|
||||
padding: 0 $spacer * 1.5;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
}
|
||||
|
||||
&-description {
|
||||
@@ -83,10 +83,10 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
max-width: pxToRem(730);
|
||||
margin: $spacer * 5 auto $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -97,18 +97,18 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__main-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: rem(400);
|
||||
height: pxToRem(400);
|
||||
padding-top: 0;
|
||||
|
||||
&-block {
|
||||
width: rem(440);
|
||||
width: pxToRem(440);
|
||||
padding: 0 0 0 $spacer * 3;
|
||||
}
|
||||
|
||||
@@ -124,20 +124,20 @@
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: rem(400);
|
||||
height: pxToRem(400);
|
||||
padding-top: $spacer * 3;
|
||||
|
||||
&-title {
|
||||
padding: 0 $spacer * 4 0 $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
padding: 0 $spacer * 4 0 $spacer * 3;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
|
||||
&-image {
|
||||
@@ -154,9 +154,9 @@
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(102);
|
||||
top: pxToRem(102);
|
||||
width: calc((100% - 778px) / 2);
|
||||
height: rem(1);
|
||||
height: pxToRem(1);
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__card {
|
||||
height: rem(360);
|
||||
height: pxToRem(360);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,18 +14,18 @@
|
||||
}
|
||||
|
||||
.accordion {
|
||||
max-width: rem(800);
|
||||
max-width: pxToRem(800);
|
||||
margin: 0 auto;
|
||||
border-top: rem(1) solid $neutral-80;
|
||||
border-top: pxToRem(1) solid $neutral-80;
|
||||
|
||||
&__item {
|
||||
border-bottom: rem(1) solid $neutral-80;
|
||||
border-bottom: pxToRem(1) solid $neutral-80;
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: rem(98);
|
||||
height: pxToRem(98);
|
||||
margin-bottom: 0;
|
||||
padding: 0 $spacer * 3 0 0;
|
||||
color: $neutral-20;
|
||||
@@ -36,7 +36,7 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: rem(37);
|
||||
top: pxToRem(37);
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.78711V22.7871' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 12.7871H2' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
@@ -48,8 +48,8 @@
|
||||
|
||||
&-body {
|
||||
padding-right: $spacer * 1.5;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-40;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@@ -75,7 +75,7 @@
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
.accordion {
|
||||
|
||||
+13
-13
@@ -14,27 +14,27 @@
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
max-width: rem(720);
|
||||
max-width: pxToRem(720);
|
||||
margin: 0 auto;
|
||||
|
||||
&__inputs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: rem(20);
|
||||
gap: pxToRem(20);
|
||||
margin: $spacer * 2 0;
|
||||
|
||||
&-block {
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: pxToRem(6);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: rem(77);
|
||||
height: pxToRem(77);
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
@@ -43,8 +43,8 @@
|
||||
&__footer {
|
||||
p {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-60;
|
||||
|
||||
a {
|
||||
@@ -62,12 +62,12 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(210);
|
||||
height: rem(210);
|
||||
width: pxToRem(210);
|
||||
height: pxToRem(210);
|
||||
background-image: url('/img/blurred/blurred-light-15.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
border-radius: 0 pxToRem(12) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
@@ -95,7 +95,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
width: rem(360);
|
||||
width: pxToRem(360);
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
+8
-8
@@ -24,7 +24,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
width: rem(200);
|
||||
width: pxToRem(200);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
&__image-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(730);
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
height: pxToRem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -57,14 +57,14 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: relative;
|
||||
max-width: rem(730);
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
max-width: pxToRem(730);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(1288);
|
||||
max-width: pxToRem(1288);
|
||||
margin: -114px auto 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
@@ -19,9 +19,9 @@
|
||||
&__about {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
gap: pxToRem(6);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-50;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
@@ -62,25 +62,25 @@
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(37);
|
||||
line-height: pxToRem(37);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: rem(32) rem(40) 1px;
|
||||
padding: pxToRem(32) pxToRem(40) 1px;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient(180deg, #161e33 0%, #0e1424 100%);
|
||||
color: $neutral-98;
|
||||
@@ -105,7 +105,7 @@
|
||||
|
||||
details {
|
||||
summary {
|
||||
font-size: rem(18);
|
||||
font-size: pxToRem(18);
|
||||
cursor: pointer;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
@@ -135,7 +135,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__body {
|
||||
@@ -150,8 +150,8 @@
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
|
||||
h1:not(:first-child) {
|
||||
@@ -174,7 +174,7 @@
|
||||
}
|
||||
h3 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
}
|
||||
|
||||
h4:not(:first-child) {
|
||||
@@ -183,7 +183,7 @@
|
||||
h4 {
|
||||
padding-top: $spacer * 2;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
}
|
||||
|
||||
iframe {
|
||||
|
||||
+4
-4
@@ -7,8 +7,8 @@
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(29.5);
|
||||
height: rem(1);
|
||||
top: pxToRem(29.5);
|
||||
height: pxToRem(1);
|
||||
width: calc((100% - 453px) / 2);
|
||||
background-color: $neutral-30;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: rem(400);
|
||||
height: rem(896);
|
||||
width: pxToRem(400);
|
||||
height: pxToRem(896);
|
||||
|
||||
.pricing-door__feature-description a {
|
||||
color: $primary-50;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(30);
|
||||
gap: pxToRem(30);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
width: calc((100% / 3) - 20px);
|
||||
|
||||
.pricing-door__description {
|
||||
height: rem(42);
|
||||
height: pxToRem(42);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.qdrant-pricing-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, rem(350));
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, pxToRem(350));
|
||||
}
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
@@ -28,19 +28,19 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -10,7 +10,7 @@
|
||||
100%,
|
||||
$spacer * 3,
|
||||
$spacer * 2,
|
||||
rem(57),
|
||||
rem(38)
|
||||
pxToRem(57),
|
||||
pxToRem(38)
|
||||
);
|
||||
}
|
||||
|
||||
+6
-6
@@ -13,8 +13,8 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -45,13 +45,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: pxToRem(730);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
|
||||
+7
-7
@@ -14,14 +14,14 @@
|
||||
|
||||
&__case {
|
||||
&-text .link {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
@@ -75,16 +75,16 @@
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
height: rem(360);
|
||||
height: pxToRem(360);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,14 +14,14 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -45,16 +45,16 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
height: rem(360);
|
||||
height: pxToRem(360);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+6
-6
@@ -7,7 +7,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
@@ -55,13 +55,13 @@
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
line-height: pxToRem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
max-width: rem(445);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
max-width: pxToRem(445);
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
@@ -76,7 +76,7 @@
|
||||
margin-top: $spacer * 7.5;
|
||||
|
||||
&-title {
|
||||
max-width: rem(445);
|
||||
max-width: pxToRem(445);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+6
-6
@@ -10,7 +10,7 @@
|
||||
&__title {
|
||||
position: relative;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 5;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
@@ -29,15 +29,15 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
width: rem(730);
|
||||
width: pxToRem(730);
|
||||
margin: 0 auto $spacer * 6.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user