mayak-common-library-payload 0.1.0

package/styles/common.scss

@@ -0,0 +1,532 @@
+// colors
+$colorTextDark: #343434;
+$colorTextLight: #fff;
+$colorTextGold: #C8BCA1;
+$colorTextGold2: #99835F;
+$colorGray: #757575;
+$colorGrayLight: #F5F5F5;
+$colorGrayLight2: #FCFCFC;
+$colorGrayMedium: #D0CED2;
+$colorGray2: #FBFBFB;
+
+$colorDark: #343434;
+
+$bgGold: #C8BCA1;
+$bgDark: #343434;
+$bgLight: #fff;
+
+$colorGold: #C8BCA1;
+$colorGold2: #99835F;
+
+$filterColorGold: invert(5%) sepia(22%) saturate(331%) hue-rotate(346deg) brightness(83%) contrast(86%);
+$filterColorGold2: invert(64%) sepia(5%) saturate(2284%) hue-rotate(358deg) brightness(81%) contrast(87%);
+$filterColorDark: invert(18%) sepia(13%) saturate(19%) hue-rotate(5deg) brightness(60%) contrast(90%);
+$filterColorGray: invert(50%) sepia(10%) saturate(17%) hue-rotate(354deg) brightness(89%) contrast(90%);
+$filterColorWhite: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+$filterColorBeige: invert(89%) sepia(12%) saturate(300%) hue-rotate(20deg) brightness(95%) contrast(90%);
+
+// fonts
+@mixin fontRock {
+  font-family: RockStar, sans-serif;
+}
+
+// font sizes
+
+@mixin f16 {
+  font-size: 16px;
+  line-height: 20px;
+  //line-height: 120%;
+  //@include md(){
+  //  line-height: 160%;
+  //}
+}
+@mixin f18 {
+  font-size: 18px;
+  line-height: 19px;
+}
+@mixin f20 {
+  font-size: 20px;
+  line-height: 22px;
+}
+
+@mixin f24 {
+  font-size: 24px;
+  line-height: 30px;
+  //line-height: 110%;
+}
+@mixin f26 {
+  font-size: 26px;
+  line-height: 31px;
+  //line-height: 120%;
+}
+@mixin f28 {
+  font-size: 28px;
+  line-height: 31px;
+  //line-height: 110%;
+}
+@mixin f30 {
+  font-size: 30px;
+  line-height: 33px;
+}
+
+
+@mixin f40 {
+  font-size: 40px;
+  line-height: 48px;
+  //line-height: 120%;
+}
+@mixin f50 {
+  font-size: 50px;
+  line-height: 55px;
+}
+
+
+// font weights
+@mixin f400 {
+  font-weight: 400;
+}
+@mixin f800 {
+  font-weight: 800;
+}
+
+// screens width
+$screen-sm: 650px;
+$screen-md: 900px;
+$screen-lg: 1200px;
+$screen-xl: 1536px;
+
+// media queries
+@mixin sm {
+  @media screen and (max-width: #{$screen-sm}) {
+    @content;
+  }
+}
+@mixin sm-md {
+  @media screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+@mixin md {
+  @media screen and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+@mixin md-lg {
+  @media screen and (min-width: #{$screen-md}) and (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+@mixin lg {
+  @media screen and (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+@mixin min-lg {
+  @media screen and (min-width: #{$screen-lg}) {
+    @content;
+  }
+}
+@mixin xl {
+  @media screen and (max-width: #{$screen-xl}) {
+    @content;
+  }
+}
+
+.button {
+  width: fit-content;
+  padding: 12px 30px;
+  text-transform: unset;
+  border-radius: 0;
+  min-width: 145px;
+  font-size: 14px;
+  line-height: 16px;
+  box-shadow: none;
+  &_dark {
+    background-color: $bgDark;
+    color: $colorTextLight;
+    &:hover {
+      background-color: $bgDark;
+    }
+  }
+}
+
+
+
+.customImage {
+  position: relative;
+  img {
+    object-position: center;
+    object-fit: cover;
+  }
+}
+
+@layer components {
+  .white-block-snack {
+    @apply bg-white px-[10px] py-[2px] w-fit text-12;
+  }
+  .white-block-snack-border {
+    @apply bg-white border-solid px-[10px] py-[2px] w-fit text-14 border border-dark;
+  }
+  .gold-block-snack-border {
+    @apply bg-gold border-solid px-[10px] py-[2px] w-fit text-14 border border-gold;
+  }
+  .black-block-snack {
+    @apply bg-dark py-[6px] px-[16px] w-fit text-white font-extrabold text-12;
+  }
+  .gray-block-snack {
+    @apply bg-gray-light px-[10px] w-fit text-12;
+  }
+  .border-block-snack {
+    @apply px-[10px] py-[2px] text-12 border border-custom-gray-medium w-fit;
+  }
+  .border-gold-block-snack {
+    @apply w-fit px-[10px] py-[2px] text-gray border border-gold font-extrabold text-12 group-hover/card:text-white group-hover/card:bg-gold;
+  }
+  .text-gold2 {
+    color: $colorGold2;
+  }
+  .text-gold {
+    color: $colorGold;
+  }
+  .text-gray {
+    color: $colorGray;
+  }
+
+  //.text-14-gray {
+  //  @include f14;
+  //  color: $colorGray;
+  //}
+  //.text-14-bold {
+  //  @include f14;
+  //  @apply font-extrabold
+  //}
+  .text-16 {
+    @include f16;
+  }
+  .text-18 {
+    @include f18;
+  }
+  .text-20 {
+    @include f20;
+  }
+  .text-24 {
+    @include f24;
+  }
+  .text-26 {
+    @include f26;
+    //@apply font-extrabold;
+  }
+  .text-28 {
+    @include f28;
+  }
+  .text-30 {
+    @include f30;
+  }
+  .text-40 {
+    @include f40;
+  }
+  .text-light {
+    color: $colorTextLight;
+  }
+  .text-dark {
+    color: $colorTextDark;
+  }
+  .text-gold {
+    color: $colorTextGold;
+  }
+  .text-gray-light {
+    color: $colorGrayLight;
+  }
+  .bg-gray-light {
+    background-color: $colorGrayLight;
+  }
+  .bg-gray-light2 {
+    background-color: $colorGrayLight2;
+  }
+  .bg-gray-medium {
+    background-color: $colorGrayMedium;
+  }
+  .bg-gray {
+    background-color: $colorGray;
+  }
+  .bg-gray2 {
+    background-color: $colorGray2;
+  }
+  .bg-dark {
+    background-color: $bgDark;
+  }
+  .bg-light {
+    background-color: $bgLight;
+  }
+  .bg-gold {
+    background-color: $bgGold;
+  }
+  .border-custom-gray {
+    border-color: $colorGray;
+  }
+
+  .border-custom-gray-medium {
+    border-color: $colorGrayMedium
+  }
+
+  .border-custom-gray-light {
+    border-color: $colorGrayLight;
+  }
+
+  .border-custom-dark {
+    border-color: $colorTextDark;
+  }
+
+  .border-dark {
+    border-color: $colorTextDark;
+  }
+
+  .border-gold {
+    border-color: $colorGold;
+  }
+
+  .border-gold2 {
+    border-color: $colorGold2;
+  }
+
+  .big-title {
+    @apply uppercase font-extrabold text-34
+  }
+
+  .wrapper-gold {
+    @apply bg-gold py-[6px] px-[16px] w-fit md:py-[2px] md:px-[6px]
+  }
+
+  .block-gold {
+    @apply bg-gold py-[30px] px-[40px] flex flex-col
+  }
+
+  .block-simple-border {
+    @apply block border py-[16px] px-[24px] text-14 w-fit border-dark border-solid
+  }
+
+  .block-white-wrapper {
+    @apply bg-white pt-[13px] pb-[8px] px-[30px] block md:pt-[10px] md:pb-[6px] md:px-[10px] rounded-[8px]
+  }
+
+  .block-white {
+    @apply bg-white py-[30px] px-[40px]
+  }
+
+  .block-center {
+    @apply block mx-auto w-fit
+  }
+
+  .filter-gold2 {
+    filter: $filterColorGold2;
+  }
+
+  .filter-gold {
+    filter: $filterColorGold;
+  }
+  //.filter-beige {
+  //  filter: $filterColorBeige;
+  //}
+  //.filter-white{
+  //  filter: $filterColorWhite;
+  //}
+  .filter-gray {
+    filter: $filterColorGray;
+  }
+  .filter-dark {
+    filter: $filterColorDark;
+  }
+
+
+
+  .trim-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+  }
+
+  .trim-4 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 4;
+  }
+
+  .container-mini {
+    width: 100%;
+    margin-left: auto;
+    box-sizing: border-box;
+    margin-right: auto;
+    display: block;
+    max-width: 790px!important;
+  }
+
+  .dot-slider {
+    border: none;
+    width: 10px;
+    height: 10px;
+    background: $colorDark;
+    border-radius: 50%;
+    cursor: pointer;
+    &_big {
+      width: 14px;
+      height: 14px;
+      @include md {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+
+  .dot:focus {
+    outline: none;
+  }
+
+  .dot-slider_active {
+    background: $colorGold;
+  }
+
+  .trim-text-1 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+  }
+
+  .simpleZoomImgHover {
+    @apply opacity-90 transform scale-110 transition duration-300 ease-out
+  }
+
+  .simpleZoomImg {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    -webkit-transition: .3s ease-out;
+    transition: .3s ease-out;
+  }
+
+  .bg-gold-gradient {
+    @apply bg-gradient-to-r from-[#{$colorGold2}] to-[#{$colorGold}]
+  }
+}
+
+.richTextBlock {
+  @include fontRock;
+  line-height: 24px;
+  p {
+    margin: 10px 0;
+    line-height: 160%;
+  }
+  ul {
+    margin: 16px 0;
+    padding-left: 20px;
+    list-style: disc;
+    @include md {
+      margin: 10px 0;
+    }
+  }
+  h2 {
+    @include f20;
+    font-weight: 800;
+    margin-top: 20px;
+    margin-bottom: 6px;
+  }
+  h3 {
+    @include f18;
+    font-weight: 800;
+    margin-top: 20px;
+    margin-bottom: 6px;
+  }
+}
+
+.input-form::placeholder {
+  color: $colorDark;
+  opacity: 1;
+}
+
+.fader {
+  height: 738px;
+  position: relative;
+  overflow: hidden;
+  @include sm {
+    height: 950px;
+  }
+}
+
+.fader__slide {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+
+
+.homeLocaleSwitcher {
+  span {
+    color: white !important;
+  }
+  svg {
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+  }
+  &:hover {
+    span {
+      color: $colorDark!important;
+    }
+    svg {
+      filter: none;
+    }
+  }
+}
+
+.placeholder-style::placeholder {
+  position: relative;
+  //top: 2px;
+  left: 2px;
+  color: $colorDark !important;
+}
+
+.white-placeholder input::placeholder {
+  color: #fff !important;
+}
+.gray-placeholder input::placeholder {
+  color: $colorDark !important;
+}
+
+.placeholder-style-2::placeholder {
+  position: relative;
+  //top: 2px;
+  left: 2px;
+  color: $colorDark !important;
+}
+
+
+.placeholder-style-phone::placeholder {
+  //position: absolute;
+  //top: 0px;
+  //right: 30px;
+
+  color: $colorDark;
+  opacity: 1;
+}
+
+
+.arrow-faq-icon {
+  padding-right: 3px;
+  transform: rotateX(0deg);
+  transition: transform 0.3s ease;
+
+  &.rotated {
+    transform: rotateX(180deg);
+  }
+
+  @media (max-width: 768px) {
+    transform: rotateX(0deg) scale(0.8);
+
+    &.rotated {
+      transform: rotateX(180deg) scale(0.8);
+    }
+  }
+}

package/styles/globals.scss

@@ -0,0 +1,147 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import 'common';
+
+@font-face {
+    font-family: RockStar;
+    src: url("../styles/fonts/RockStar/Rock_Star_Regular_Web.woff2");
+    font-weight: 400;
+}
+@font-face {
+    font-family: RockStar;
+    src: url("../styles/fonts/RockStar/Rock_Star_Extra Bold_Web.woff2");
+    font-weight: 800;
+}
+
+@layer utilities {
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+    /* Show scrollbar */
+    .scrollbar::-webkit-scrollbar {
+        display: block;
+    }
+    .scrollbar {
+        -ms-overflow-style: auto;  /* IE and Edge */
+        scrollbar-width: auto;  /* Firefox */
+    }
+}
+
+body {
+    max-width: 100vw;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    color: $colorTextDark;
+    background-color: #F5F5F5 !important;//$colorGrayLight;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    @include fontRock;
+}
+
+div {
+    box-sizing: border-box;
+}
+
+html {
+    overflow-x: hidden;
+}
+
+main {
+    flex-grow: 1;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s ease-out;
+    &:not(.noHover):hover {
+        color: $colorGold2;
+    }
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+.MuiContainer-root {
+    padding-left: 0!important;
+    padding-right: 0!important;
+    @media screen and (max-width: 1270px) {
+        padding-left: 40px!important;
+        padding-right: 40px!important;
+    }
+    @include md {
+        padding-left: 60px!important;
+        padding-right: 60px!important;
+    }
+    @include sm {
+        //padding-left: 30px!important;
+        //padding-right: 30px!important;
+        padding-left: 30px!important;
+        padding-right: 30px!important;
+    }
+}
+
+:root {
+    --map-tiles-filter: grayscale(0.5) saturate(0) ;
+}
+
+.map-tiles {
+    filter:var(--map-tiles-filter, none);
+}
+
+::-webkit-input-placeholder {
+    opacity: 1!important;
+}
+
+input, textarea, select, span, p, button { @include fontRock; }
+
+
+input,
+textarea,
+button,
+select,
+div,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+h2 {
+    margin: 0;
+}
+
+.team-worker-image {
+    @include md(){
+        object-position: 100px 0 !important;
+    }
+}
+
+.react-international-phone-flag-emoji {
+    height: 22px !important;
+    width: 26px !important;
+    object-fit: cover;
+    position: relative;
+    left: -2px;
+    top: -3px;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+input[type=number] {
+    -moz-appearance:textfield; /* Firefox */
+}