Merge pull request #115 from katatsu12/fix/buttons

Fix/buttons

_data/healthcare_hipaa.yml

@@ -91,7 +91,3 @@ solutions:
         - item: limiting the scope of data visibility for sensitive PII/PHI data
         - item: implementing AWS as a 100% HIPAA-compliant infrastructure provider
   button: See more projects
-idea:
-      button: Let’s discuss your project idea
-      text_1: In case you don’t know where to start your project, you can get in touch with our CTO.
-      text_2: We’ll set up a quick call to discuss how to make your project work.

_data/solutions.yml

@@ -175,3 +175,7 @@ staff_augmentation:
                     are met; and are available to support any time.'
       image: staff_augmentation_3
   more_button: See our services
+idea:
+  button: Let’s discuss your project idea
+  description: In case you don’t know where to start your project, you can get in touch with
+               our CTO.<br>We’ll set up a quick call to discuss how to make your project work.

_data/taxi_and_transportation.yml

@@ -178,7 +178,3 @@ admin_panel:
         - item: Admin can process payments to refund money to passengers
         - item: Setting up country and currency from the admin panel
   button: See more projects
-idea:
-  button: Let’s discuss your project idea
-  text_1: In case you don’t know where to start your project, you can get in touch with our CTO.
-  text_2: We’ll set up a quick call to discuss how to make your project work.

_data/team.yml

@@ -44,3 +44,4 @@ expertise:
     description: We provide cross-platform mobile application development services so you can reach your customers
                  on their favorite devices.
   button: See our services
+cto_button: Get free project consultation

_includes/expertise_chart.html

@@ -10,7 +10,7 @@
   <span class="arcitect">20%</span>
   <span class="senior">30%</span>
   <span class="middle">40%</span>
-  <span class="jumior">10%</span>
+  <span class="junior">10%</span>
 </div>
 
 <div class="chart__items">

_includes/faq_bottom.html

@@ -1,6 +1,10 @@
 <section class="faq__bottom-info">
   <div class="wrapper">
     <img class="faq__gift" src="/assets/images/faq/gift-dynamic-premium-1.webp" alt="gift">
-    <a class="cto-button button" href="/contacts" data-link="transition">{{ site.data.faq.button }}</a>
+    {% if page.type == 'team' %}
+      <a class="cto-button button" href="/contacts" data-link="transition">{{ site.data.team.cto_button }}</a>
+    {% else %}
+      <a class="cto-button button" href="/contacts" data-link="transition">{{ site.data.faq.button }}</a>
+    {% endif %}
   </div>
 </section>

_includes/solutions_bottom.html

@@ -1,12 +1,11 @@
-<section class="solutions_cases__idea">
+<section class="solutions_cases__idea wrap">
   <div class="wrapper">
     <div class="solutions_cases__idea_img">
       <img src="/assets/images/hipaa/chat.webp" alt="chat">
     </div>
     <div class="solutions_cases__idea_text">
-      <a class="button white-text" href="/contacts" data-link="transition">{{ site.data.healthcare_hipaa.idea.button }}</a>
-      <p class="white-text">{{ site.data.healthcare_hipaa.idea.text_1 }}</p>
-      <p class="white-text">{{ site.data.healthcare_hipaa.idea.text_2 }}</p>
+      <a class="button white-text" href="/contacts" data-link="transition">{{ site.data.solutions.idea.button }}</a>
+      <p class="white-text">{{ site.data.solutions.idea.description }}</p>
     </div>
   </div>
 </section>

_sass/_solutions_cases.scss

@@ -1,6 +1,8 @@
 .solutions_cases {
-  .header-2 { font-size: 1.25em; }
+  .header-2 { font-size: 18px; }
+
   .text-center { text-align: center; }
+
   .button { padding: 2vh 3vw; }
 
   .list-with-images.horizontal {
@@ -90,14 +92,12 @@
     background-image: linear-gradient(135deg, $purple-heart, $sky-ua);
     display: flex;
     justify-content: space-between;
-    padding-bottom: 5vh;
-    padding-top: 3vh;
 
     .wrapper {
-      padding: 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      flex-wrap: wrap;
     }
 
     &_img {
@@ -125,11 +125,8 @@
     }
 
     .button {
-      border-color: transparent;
-      box-shadow: 2px 2px 18px 2px rgba($black, .15), inset 0px 4px 15px rgba($black, .15);
       margin-bottom: 5vh;
-      max-width: 70%;
-      padding: 2vh 3vw;
+      max-width: 500px;
     }
   }
 }
@@ -146,6 +143,8 @@
       flex-wrap: wrap;
       padding: 1vh 5vh 5vh;
 
+      &.wrap { padding-top: 3vh; }
+
       &_img {
         width: 100%;
 
@@ -154,17 +153,18 @@
 
       &_text { width: 100%; }
 
-      .button {
-        margin: 0 auto 3vh;
-        max-width: 85%;
-      }
+      .button { margin: 0 auto 3vh;}
 
-      p { font-size: .8em; }
+      p {
+        font-size: .8em;
+        max-width: 550px;
+        margin: auto;
+      }
     }
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 700px) {
   .solutions_cases {
     .button { width: 90%;}
 

_sass/about.scss

@@ -163,14 +163,19 @@
   &__testimonials {
     background: center/cover no-repeat url('/assets/images/about/about-bg.webp');
     padding: 150px 0 80px 0;
+
     &-title { margin-bottom: 5vh; }
-    .button { margin-top: 5em; }
   }
 
   &__culture {
     min-height: 100vh;
     background: center/cover no-repeat url('/assets/images/about/team.webp');
 
+    .wrapper {
+      position: relative;
+      min-height: 100vh;
+    }
+
     &-text { line-height: 1.6; }
 
     &-title {
@@ -188,8 +193,12 @@
     }
 
     &-button {
-      max-width: 25em;
-      background-color: $white !important;;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      min-width: 500px;
+      background-color: rgba($white, .85) !important;
+      transform: translate(-50%, -50%);
     }
   }
 }
@@ -253,13 +262,12 @@
  .info-container:first-child { background: left 0%/250% 100% no-repeat url('/assets/images/about/about-bg-2.webp'); }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 767px) {
   .about {
-    .button {
-      width: auto;
-      margin-top: 0;
-    }
+    .button { margin-top: 0; }
+
     h2.header-2 { font-size: 1em; }
+
     &__header,
     &__description {
       font-size: .9em;
@@ -323,9 +331,7 @@
           }
         }
 
-        &-description {
-          font-size: .9em;
-        }
+        &-description { font-size: .9em; }
       }
     }
 
@@ -348,6 +354,8 @@
         font-size: .9em;
         line-height: 1.4;
       }
+
+      &-button { min-width: 300px; }
     }
   }
 

_sass/buttons.scss

@@ -1,25 +1,30 @@
 .button {
-  display: inline-block;
+  position: relative;
+  max-width: 440px;
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 15px 25px;
-  margin-top: 3vh;
-  text-transform: uppercase;
-  color: black;
-  text-decoration: none;
-  font-family: 'Cera-Medium';
-  font-size: 1.1em;
-  letter-spacing: 0.3em;
-  border-radius: 40px;
+  margin: 55px auto 0;
   background: transparent;
+  border-radius: 56px;
+  box-sizing: border-box;
   box-shadow: $main-shadow;
+  color: $dark_black;
+  font-family: 'Cera-Medium';
+  font-size: 16px;
+  letter-spacing: 0.5em;
+  text-decoration: none;
+  text-transform: uppercase;
   transition: all .3s ease;
-  border: 1px solid rgba(black, .1);
-  position: relative;
+
   z-index: 1;
 
   &::after {
     content: "";
-    display: inline-block;
-    border-radius: 40px;
+    border-radius: 56px;
     position: absolute;
     top: 0;
     left: 0;
@@ -28,68 +33,59 @@
     box-shadow: $violet-hover-shadow;
     background: linear-gradient($white, $white) padding-box,
                 linear-gradient(to right, $main-violet, $purple-heart) border-box;
-    border: 1px solid rgba(black, .1);
     opacity: 0;
     -webkit-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
     z-index: -1;
   }
 
-  &:hover {
-    &::after { opacity: 1; }
-  }
+  &:hover::after { opacity: 1; }
 
-  &:visited { color: black; }
+  &:visited { color: $dark_black; }
 
-  &:active {
-    box-shadow: $active-shadow;
-  }
+  &:active { box-shadow: $active-shadow; }
 }
 
-.violet-button {
-  border-color: transparent;
-  box-shadow: $violet-shadow;
-}
+.violet-button { box-shadow: $violet-shadow;}
 
 .light-purple-button { box-shadow: $light-purple-shadow; }
 
-.button.white-text {
-  &:hover { color: $main-violet !important; }
-}
+.button.white-text:hover { color: $main-violet !important; }
 
 .faq__bottom-info {
-  .button.cto-button {
+  .button {
+    height: 100px;
+    max-width: 500px;
     color: $white;
-    border-radius: 50px;
-    font-size: 20px;
     font-weight: 700;
     line-height: 150%;
     letter-spacing: 10px;
     padding: 22px;
-    max-width: 500px;
-    &::after { border-radius: 50px; }
+    margin-top: 0;
+
     &:hover { color: $black_sea; }
   }
 }
 
-.button.contacts__submit-btn {
-  font-weight: 400;
-}
+.button.contacts__submit-btn { font-weight: 400; }
 
-@media (max-width: 600px) {
+@media (max-width: 700px) {
   .button {
     margin-top: 4vh;
-    font-size: .75em;
-    letter-spacing: .2em;
+    max-width: 300px;
+    height: 55px;
+    font-size: 11px;
+  }
+
+  .index-technologies__items .index-technologies__more .button,
+  .about__culture-button,
+  .faq__bottom-info .button {
+    max-width: 300px !important;
   }
-}
 
-@media (max-width: 767px) {
-  .faq__bottom-info {
-    .button.cto-button {
-      font-size: 10px;
-      letter-spacing: 5px;
-      max-width: 290px;
-    }
+  .faq__bottom-info .button {
+    height: 55px;
+    font-size: 10px;
+    letter-spacing: .5em;
   }
 }

_sass/carousel.scss

@@ -46,7 +46,8 @@
     .animate-visibility {
       animation: scaleUp 0.4s ease-in-out forwards;
       transform: scale(1.4);
-      -webkit-transform: scale(1.4);}
+      -webkit-transform: scale(1.4);
+    }
   }
 
   @keyframes scaleUp {
@@ -145,11 +146,14 @@
 
   &__button {
     .button {
+      max-width: 200px;
+      height: 50px;
+      margin-bottom: 20px;
+      padding: 10px 30px;
       background: $main-gradient;
       color: $white;
       font-size: 11px;
-      margin-bottom: 20px;
-      padding: 10px 30px;
+      scale: 0.72;
 
       &:hover {
         color: $black_sea;

_sass/contacts.scss

@@ -36,6 +36,7 @@
   &__submit-btn {
    width: 480px;
    height: 80px;
+   border: none;
   }
 
   &__form-group {
@@ -83,8 +84,7 @@
     display: inline-block;
     max-height: 30px;
     margin-top: 20px;
-    font-style: italic;
-    line-height: 2;
+    font: italic 14px/2 'Cera Regular', serif;
     text-align: center;
   }