restyled all pages

1 files changed, 267 insertions, 60 deletions

diff --git a/sass/forms.sass b/sass/forms.sass
index 505bae5..1f97534 100644
--- a/sass/forms.sass
+++ b/sass/forms.sass
@@ -1,77 +1,124 @@
-@import settings.sass
+@import settings
+
+.form,
+.application-form
+  display: flex
+  justify-content: center
+
+.form
+  +resolution(992)
+    padding: 40px 0 144px
+  +resolution(0, 991)
+    padding: 32px 0 64px
+
+input
+  
+  &.error
+    outline: 1px solid $red !important
+    border: none !important
 
 div.hbspt-form
-  background-image: url(../img/forms/bg.svg)
-  padding-top: 25px
-  padding-bottom: 70px
-  margin-top: 50px
-  margin-bottom: 70px
-  +resp(sm)
-    padding-bottom: 50px
-    padding-top: 15px
-  +resp(esm)
-    margin-top: 30px
-    margin-bottom: 50px
-
-  h1, h2, h3, h4, h5, h6
-    color: $white
-    text-align: center
-
-  h2
-    +resp(sm)
+  -webkit-box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
+  -moz-box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
+  box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
+  border-radius: 8px
+  width: 100%
+  +resolution(576)
+    padding: 40px 65px
+    max-width: 945px
+  +resolution(0, 575)
+    padding: 32px 20px
+
+  h2,
+  h3
+    letter-spacing: $em
+    color: $black !important
+    +resolution(576)
+      font-size: 24px
       margin-bottom: 12px !important
+    +resolution(0, 575)
+      font-size: 22px
+
+    span 
+      color: $black !important
 
   form
-    max-width: 800px
-    margin-left: auto
-    margin-right: auto
-    +resp(md)
+    max-width: 945px
+    +resolution(576, 991)
       max-width: 100%
-      padding-left: 50px
-      padding-right: 50px
-    +resp(esm)
-      padding-left: 30px
-      padding-right: 30px
 
     > fieldset
       max-width: 100%
       margin-bottom: 20px
-      +resp(sm)
+      +resolution(576, 991)
         margin-bottom: 15px
 
+      &:nth-child(1):has(h3)
+        margin-bottom: 10px
+
+      &.form-columns-1
+
+        > div.hs-message
+
+          label
+            margin-bottom: 15px
+
+      &.form-columns-0
+
+        p
+          color: $grey-normal
+          letter-spacing: $px
+          font-weight: 600
+          +resolution(576)
+            font-size: 18px
+          +resolution(0, 575)
+            font-size: 14px
+
       > div
 
         > label
           color: $white
           display: block
           font-size: 16px
+          margin-bottom: 4px
 
           > span
-            display: inline-block
             margin-bottom: 10px
+            color: $grey-dark
+            letter-spacing: $em
+            line-height: 1.2
+            font-weight: 600
+            font-family: $a
+            +resolution(0, 575)
+              font-size: 14px
+            +resolution(576)
+              font-size: 16px
 
             &:empty
               display: none
 
+            &.hs-form-required
+              color: $red
+
         > div.input
           margin-right: 0 !important
           display: flex
 
-          textarea, input
+          textarea,
+          input
             width: 100% !important
-            color: $form-fields
+            color: $grey-normal
             font-size: 16px
-            font-family: sans-serif
-            +resp(sm)
+            border: 1px solid $grey-light4
+            +resolution(576, 991)
               font-size: 14px
 
-            &.invalid
-              border: 2px solid red
-
           input
             height: 46px
             padding: 0 15px
-            +resp(sm)
+            border-radius: 4px
+            border: 1px solid $grey-light4
+            +resolution(576, 991)
               height: 41px
 
           textarea
@@ -79,7 +126,7 @@ div.hbspt-form
             padding: 12px 15px
             resize: none
             line-height: 140%
-            +resp(sm)
+            +resolution(576, 991)
               height: 53px
 
         > ul.hs-error-msgs
@@ -91,7 +138,7 @@ div.hbspt-form
             padding: 0 !important
             margin: 7px 0 0 !important
             font-size: 14px
-            +resp(sm)
+            +resolution(576, 991)
               margin-top: 5px !important
 
             &:before
@@ -100,34 +147,34 @@ div.hbspt-form
       &.form-columns-2
         display: flex
         justify-content: space-between
-        +resp(sm)
+        +resolution(0, 760)
           flex-direction: column
 
         > div
           float: none !important
           width: calc(50% - 10px) !important
-          +resp(sm)
+          +resolution(0, 760)
             width: 100% !important
 
           &:first-child
-            +resp(sm)
+            +resolution(0, 760)
               margin-bottom: 15px
 
       &.form-columns-3
         display: flex
         justify-content: space-between
-        +resp(sm)
+        +resolution(576, 991)
           flex-direction: column
 
         > div
           float: none !important
           width: calc(33.33% - 13px) !important
-          +resp(sm)
+          +resolution(576, 991)
             width: 100% !important
             margin-bottom: 15px
 
             &:last-child
-              +resp(sm)
+              +resolution(576, 991)
                 margin-bottom: 0
 
     > div.hs_recaptcha
@@ -137,24 +184,184 @@ div.hbspt-form
       display: none
 
     > div.hs-submit
-    
+
       > div.actions
-        text-align: center
 
         input[type=submit]
-          background-color: $orange
-          color: $black
+          border-radius: 4px
+          display: flex
+          justify-content: center
+          align-items: center
+          color: $white
+          font-family: $a
           font-weight: 700
-          font-size: 16px
-          width: 245px
-          height: 60px
-          cursor: pointer
-          border: 1px solid $orange
-          transition: 0.3s
-          +resp(sm)
-            height: 50px
-          +resp(esm)
+          letter-spacing: $em
+          border: none
+          transition: outline 250ms linear, background-color 250ms linear
+          z-index: 2
+          background-color: $secondary
+          padding: 12px 18px
+          +resolution(576)
+            font-size: 16px
+            height: 46px
+          +resolution(0, 375)
             width: 100%
+          +resolution(0, 575)
+            height: 40px
+            font-size: 14px
 
           &:hover
-            background-color: $white
\ No newline at end of file
+            background-color: $tretiary
+
+          &:active
+            background-color: $secondary
+            outline: 3px solid rgba(255, 144, 0, 0.25)
+
+.hs-error-msgs
+  display: none !important
+
+.input
+  input.error
+    border-width: 1px !important
+
+  textarea
+    font-family: $r
+    letter-spacing: $px
+    color: $grey-dark
+    +resolution(0, 575)
+      font-size: 14px
+    +resolution(576)
+      font-size: 16px
+
+.form-footer
+  border-radius: 8px
+  background-color: $grey-dark
+  +resolution(992)
+    padding: 34px 48px
+    margin-top: 80px
+    display: grid
+    grid-template-columns: 1fr 1fr
+    column-gap: 30px
+  +resolution(576, 991)
+    margin-top: 38px
+    padding: 26px 32px
+  +resolution(0, 575)
+    padding: 18px 24px 24px
+    margin-top: 48px
+    flex-direction: column
+  +resolution(0, 991)
+    display: flex
+
+  .inner
+    +resolution(576, 991)
+      max-width: 210px
+
+    h3
+      letter-spacing: $em
+      color: $white
+      +resolution(992)
+        font-size: 24px
+      +resolution(0, 991)
+        dont-size: 20px
+
+    p
+      font-size: 14px
+      font-family: $a
+      font-weight: 600
+      letter-spacing: $em
+      line-height: 1.2
+      color: $grey-light3
+      +resolution(0, 991)
+        margin-top: 4px
+
+  .form-div
+    +resolution(576, 991)
+      width: 100%
+    +resolution(0, 575)
+      margin-top: 16px
+
+    .hs_error_rollup
+      display: none
+
+    form
+      display: grid
+      +resolution(992)
+        grid-template-columns: 4fr 1fr
+        grid-column-gap: 30px
+      +resolution(576, 991)
+        grid-template-columns: 3fr 1fr
+        grid-column-gap: 10px
+
+      .hs_email
+        +resolution(992)
+          width: 95%
+        +resolution(576, 991)
+          width: 100%
+          height: 100%
+
+      .input
+        +resolution(992)
+          margin-right: 8px
+          width: 100%
+        +resolution(576, 991)
+          height: 100%
+          width: 95%
+        +resolution(0, 575)
+          width: 100%
+
+        input
+          font-family: $r
+          font-weight: 500
+          font-size: 16px
+          letter-spacing: $em
+          color: $grey-normal
+          width: inherit
+          border-radius: 4px
+          border: none
+          padding-block: 0
+          padding-inline: 0
+          +resolution(992)
+            padding: 14px 18px
+          +resolution(576, 991)
+            padding: 14px 18px
+          +resolution(0, 575)
+            padding: 10px 14px
+            box-sizing: border-box
+
+      .hs-submit
+        +resolution(0, 575)
+          margin-top: 12px
+
+        .actions
+          width: unset
+
+          input
+            height: 46px
+            background-color: $secondary
+            border-radius: 4px
+            display: flex
+            justify-content: center
+            align-items: center
+            color: $white
+            font-family: $a
+            font-weight: 700
+            letter-spacing: $em
+            border: none
+            transition: background-color 250ms linear
+            +resolution(576)
+              font-size: 16px
+            +resolution(992)
+              width: 120px
+            +resolution(576, 991)
+              width: 100px
+            +resolution(0, 575)
+              width: 100%
+              height: 40px
+              font-size: 14px
+
+            &:hover
+              background-color: $tretiary
+
+            &:active
+              background-color: $secondary
+              outline: 3px solid rgba(255, 144, 0, 0.25)