pkt-cash · coconut3-dev · Dec 12, 2023 · Dec 12, 2023 · Dec 13, 2023 · Dec 13, 2023
diff --git a/app.html b/app.html
@@ -3,7 +3,6 @@
 <head {{ HEAD_ATTRS }}>
   {{ HEAD }}
   <meta name="google-site-verification" content="KkxplZrJKbimOGuYdsRlAVVimi6dj_ve7tPbibLr8oc" />
-  <link rel="preload" as="font" href="./fonts/Poppins-Bold.woff2" type="font/woff2" crossorigin="anonymous">
   <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
   </script>
   <!-- We shouldn't need a cookie policy just because of a signup form -->

diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss
@@ -2,9 +2,20 @@ html {
   scroll-behavior: smooth;
 }
 body {
-  font-size: 16px;
-  @extend %regular;
-  color: $dark_blue;
+  @extend %body-text;
+}
+.container {
+  margin: 0 auto;
+  width:100%;
+  max-width:rem(1170);
+  @include for-width(-desktop-med) {
+    max-width:100%;
+    padding:0 rem(30);
+  }
+  @include for-width(-small-lg) {
+    max-width:100%;
+    padding:0 rem(20);
+  }
 }
 img {
   display: inline-block;
@@ -18,10 +29,6 @@ img {
     padding: rem(20) rem(25) rem(50);
   }
 
-  & .container {
-    margin: 0 auto;
-  }
-
   &__section {
     padding-top: rem(30);
 
@@ -269,4 +276,44 @@ body.ru .v-utility__top_section .c-internal-header__links .btn_blue_new {
 }
 body.ru .c-join-community__link {
   width:rem(300);
+}
+/**********************************************************************/
+.orange {
+  color:$orange;
+}
+.black_blue {
+  color:$black_blue;
+}
+.white {
+  color:$white;
+}
+.blue {
+  color:$blue;
+}
+.green {
+  color:$green;
+}
+.orange_bg {
+  background-color:$orange;
+}
+.blue_bg {
+  background-color:$blue;
+}
+.green_bg {
+  background-color:$green;
+}
+.dark_blue_bg {
+  background-color:$main_blue_light;
+}
+.grey_bg {
+  background-color:$grey;
+}
+.rose_bg {
+  background-color:$pink;
+}
+.yellow_bg {
+  background-color:$yellow_bright;
+}
+.white_bg {
+  background-color:$white;
 }
diff --git a/assets/scss/base/_fonts.scss b/assets/scss/base/_fonts.scss
@@ -166,11 +166,9 @@
 // Body
 %body-text {
   @extend %regular;
-  //@include font_sizes(23, 35);
-  @include font_sizes(18, 28);
+  @include font_sizes(16, 24);
   @include for-width(-tablet-lg) {
-    //@include font_sizes(17, 27);
-    @include font_sizes(16, 25);
+    @include font_sizes(16, 24);
   }
 }
 
@@ -435,4 +433,217 @@
   &:hover {
     background-color: $light_blue_hover;
   }
+}
+/*********************************************************************************************************************************************************/
+// ================ Inter-Regular ================
+@include font_face(Inter-Regular, Inter-Regular);
+
+%inter_regular {
+  font-family: "Inter-Regular", sans-serif;
+}
+
+// ================ Inter-Medium ================
+@include font_face(Inter-Medium, Inter-Medium);
+
+%inter_medium {
+  font-family: "Inter-Medium", sans-serif;
+}
+
+// ================ Inter-SemiBold ================
+@include font_face(Inter-SemiBold, Inter-SemiBold);
+
+%inter_semibold {
+  font-family: "Inter-SemiBold", sans-serif;
+}
+
+// ================ Inter-Bold ================
+@include font_face(Inter-Bold, Inter-Bold);
+
+%inter_bold {
+  font-family: "Inter-Bold", sans-serif;
+}
+
+// ================ Inter-ExtraBold ================
+@include font_face(Inter-ExtraBold, Inter-ExtraBold);
+
+%inter_extrabold {
+  font-family: "Inter-ExtraBold", sans-serif;
+}
+
+// ================ Inter-Black ================
+@include font_face(Inter-Black, Inter-Black);
+
+%inter_black {
+  font-family: "Inter-Black", sans-serif;
+}
+
+%p-common {
+  font-size: rem(16);
+  line-height: rem(30);
+  @extend %inter_regular;
+  color:$white;
+  @include for-width(-small-lg) {
+    line-height: rem(24);
+  }
+}
+%p-common-thick {
+  font-size: rem(16);
+  line-height: rem(24);
+  @extend %inter_medium;
+  color:$white;
+}
+%p-common-bold {
+  font-size: rem(16);
+  line-height: rem(24);
+  @extend %inter_bold;
+  color:$white;
+}
+%p-big-common {
+  font-size: rem(20);
+  line-height: rem(30);
+  @extend %inter_regular;
+  color:$white;
+  @include for-width(-laptop) {
+    font-size: rem(18);
+    line-height: rem(26);
+  }
+  @include for-width(-small-lg) {
+    font-size: rem(18);
+    line-height: rem(26);
+  }
+}
+%p-big-common-thick {
+  font-size: rem(20);
+  line-height: rem(30);
+  @extend %inter_medium;
+  color:$white;
+  @include for-width(-laptop) {
+    font-size: rem(18);
+    line-height: rem(26);
+  }
+  @include for-width(-small-lg) {
+    font-size: rem(18);
+    line-height: rem(26);
+  }
+}
+%p-big-common-bold {
+  font-size: rem(20);
+  line-height: rem(30);
+  @extend %inter_bold;
+  color:$white;
+  @include for-width(-laptop) {
+    font-size: rem(18);
+    line-height: rem(26);
+  }
+  @include for-width(-small-lg) {
+    font-size: rem(18);
+    line-height: rem(26);
+  }
+}
+%h1-common {
+  font-size: rem(64);
+  line-height: rem(80);
+  @extend %inter_bold;
+  color:$white;
+  @include for-width(-small-lg) {
+    font-size: rem(38);
+    line-height: rem(42);
+  }
+}
+%h2-common {
+  font-size: rem(40);
+  line-height: rem(50);
+  @extend %inter_bold;
+  color:$white;
+  @include for-width(-small-lg) {
+    font-size: rem(38);
+    line-height: rem(42);
+  }
+}
+%h3-common {
+  font-size: rem(40);
+  line-height: rem(50);
+  @extend %inter_bold;
+  color:$white;
+}
+.c-common-button {
+  font-size: rem(16);
+  line-height: rem(30);
+  border:1px solid;
+  border-radius: rem(30);
+  width:rem(160);
+  padding:rem(9);
+  cursor: pointer;
+  @extend %t-center;
+  @extend %dib;
+  @extend %inter_semibold;
+  @include for-width(-laptop) {
+    line-height: rem(26);
+  }
+  @include for-width(-small-lg) {
+    line-height: rem(30);
+  }
+}
+.c-common-button__bordered {
+  border-color:$white_50;
+  color:$white;
+  &:hover {
+    border-color:$white;
+  }
+  &:focus {
+    border-color:$white;
+  }
+}
+.c-common-button__filled {
+  border-color:$main_blue_light;
+  background-color:$main_blue_light;
+  color:$white;
+}
+.c-common-button__dark_blue {
+  border-color:$black_blue;
+  color:$black_blue;
+  &:hover {
+    border-color:$black_blue;
+    color:$white;
+    background-color:$black_blue;
+  }
+  &:focus {
+    border-color:$black_blue;
+    color:$white;
+    background-color:$black_blue;
+  }
+}
+.c-common-button__white {
+  border-color:$white;
+  background-color:$white;
+  color:$pink;
+  &:hover {
+    border-color:$white;
+    color:$pink;
+    background-color:$white;
+  }
+  &:focus {
+    border-color:$white;
+    color:$pink;
+    background-color:$white;
+  }
+}
+.c-common-button__white_blue {
+  border-color:$white;
+  background-color:$white;
+  color:$main_blue_light;
+  &:hover {
+    border-color:$white;
+    color:$main_blue_light;
+    background-color:$white;
+  }
+  &:focus {
+    border-color:$white;
+    color:$main_blue_light;
+    background-color:$white;
+  }
+}
+.c-common-button__blue {
+  border-color:$main_blue_light;
+  color:$main_blue_light;
 }
diff --git a/assets/scss/base/_reset.scss b/assets/scss/base/_reset.scss
@@ -271,15 +271,16 @@ textarea {
   height: 0px;
 }
 ::-webkit-scrollbar-track {
-  background-color: $scroll_bar_color;
+  background-color: $black_blue_light;
+  border-radius:30px;
 }
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 0px;
-  border-radius: 0px;
-  background-color: $scroll_thumb_color;
+  border-radius:30px;
+  background-color: #495474;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background-color: $scroll_thumb_color;
+  background-color: #495474;
 }
 ::-webkit-resizer {
   background-repeat: no-repeat;

diff --git a/assets/scss/helpers/_extends.scss b/assets/scss/helpers/_extends.scss
@@ -67,6 +67,24 @@
     -o-flex-direction: row;
     flex-direction: row;
 }
+%d-grid-2 {
+    display: -ms-grid;
+	display: grid;
+    -ms-grid-columns: 1fr 1fr;
+	grid-template-columns: 1fr 1fr;
+}
+%d-grid-3 {
+    display: -ms-grid;
+	display: grid;
+    -ms-grid-columns: 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr 1fr;
+}
+%d-grid-3 {
+    display: -ms-grid;
+	display: grid;
+    -ms-grid-columns: 1fr 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+}
 %bg-reset {
     background-color: $black;
     background-position: center center;
@@ -105,4 +123,12 @@
     -ms-transform: translate(-50%,-50%);
     -o-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
+}
+%dg {
+    display: -ms-grid;
+    display: grid;
+}
+%img_object {
+    object-fit: contain;
+    object-position: center;
 }
diff --git a/assets/scss/helpers/_media-queries.scss b/assets/scss/helpers/_media-queries.scss
@@ -7,6 +7,7 @@ $mqs: (
   "tablet": 992,
   "tablet-lg": 1025,
   "laptop": 1100,
+  "laptop_small": 1170,
   "desktop-med": 1210,
   "desktop-medium": 1310,
   "desktop-medium-default": 1367,