slow-steps 0.2.1 → 0.4.0

data/_sass/footer_redesign.sass

@@ -0,0 +1,349 @@
+.ft__wrapper
+  @include footer-bg($opd-blue)
+  color: $white
+  padding: 5vh 5vw
+  font-size: $sm-font-size
+
+.ft__body
+  display: flex
+  flex-direction: column-reverse
+  width: 100%
+  padding: 6rem 0
+  justify-content: space-between
+
+.ft__company
+  display: flex
+
+.ft__company__logo
+  @include logo-color($white)
+  padding-bottom: 3rem
+
+  & > .site__logo
+    height: 5rem
+  &::after
+    content: 'Limited'
+    position: absolute
+    font-size: $sm-font-size
+    transform: translate(-5rem, 4rem)
+
+.ft__company__no
+  padding-bottom: 2rem
+
+.ft__company__add > ul
+  list-style: none
+  padding: 0
+  margin: 0
+  text-decoration: none
+
+.address
+  line-height: $font-size
+  & > *
+    padding-bottom: 1rem
+
+.ft__sitemap
+
+  //width: 40vw
+
+.ft__sitemap
+  margin-top: 6rem
+
+
+  .ft__sitemap--submenu
+    font-size: inherit
+
+
+.ft__sitemap--header
+  border-bottom: 1px solid $opd-light-blue
+  margin-bottom: 3rem
+  width: 100%
+
+.ft__sitemap--env-wrap
+  display: flex
+  flex-direction: column
+
+.ft__sitemap--env
+  //margin-right: 8rem
+
+.ft__sitemap--env-header
+  margin-bottom: 2rem
+
+.ft__sitemap--submenu
+  padding: 0
+
+  li
+    //line-height: 2rem
+    list-style: none
+    &:last-child
+      @include default-trans
+      margin: auto
+      margin-top: 2rem
+      margin-bottom: 4rem
+      background-color: $opd-coral
+      text-align: center
+      padding: 1rem
+      width: 70vw
+      border-radius: 6px
+      cursor: pointer
+      text-transform: uppercase
+      a
+        text-decoration: none
+
+  .ft__sitemap--link
+    //text-decoration: none
+    color: inherit
+    line-height: 3rem
+
+.ft__contact
+  //width: 20vw
+  text-align: center
+
+  .ft__contact--header
+    padding-bottom: 3rem
+
+  ul
+    list-style: none
+    padding: 0
+    margin: 0
+
+  .ft__contact--link
+    padding: 1rem 0
+
+    i
+      padding-right: 1rem
+
+    & > a
+      color: inherit
+
+
+  .social-media
+    padding-top: 4rem
+    display: flex
+    justify-content: space-around
+    i
+      font-size: 3rem
+
+
+.ft__base
+
+  border-top: solid 1px $opd-light-blue
+  text-align: center
+
+  a,
+  p
+    color: inherit
+    font-size: $sm-font-size
+    margin: 0
+    padding: 1rem .1rem
+    text-decoration: none
+
+.legal-links
+  display: flex
+  justify-content: center
+
+  flex-direction: row
+  a
+    &::after
+      content: " |"
+
+    &:last-child
+      &::after
+        content: ""
+
+.copyright
+  &::after
+    content: ' Limited'
+
+.ft__sitemap--submenu
+  li
+    transition: .2s ease-in-out
+
+  &:hover > li
+    opacity: .5
+
+  li
+    &:hover
+      opacity: 1
+
+
+@media screen and ( min-width: 768px )
+
+  .ft__wrapper
+    @include footer-bg($opd-blue)
+    color: $white
+    padding: 5vh 5vw
+    font-size: $sm-font-size
+
+  .ft__body
+    display: flex
+    flex-direction: row
+    width: 90vw
+    padding: 10rem 0
+    justify-content: space-between
+
+  .ft__company
+    width: 20vw
+    display: flex
+
+  .ft__company__logo
+    @include logo-color($white)
+    padding-bottom: 3rem
+    & > .site__logo
+      height: 7rem
+    &::after
+      content: 'Limited'
+      position: absolute
+      font-size: $font-size
+      transform: translate(-7rem, 6rem)
+
+  .ft__company__no
+    padding-bottom: 2rem
+
+  .ft__company__add > ul
+    list-style: none
+    padding: 0
+    margin: 0
+    text-decoration: none
+
+  .address
+    line-height: $font-size + 1rem
+    & > *
+      padding-bottom: 1rem
+
+  .ft__company--link
+    padding: 2rem 0
+
+    & > a
+      text-decoration: none
+      color: inherit
+
+  .ft__sitemap
+    width: 40vw
+
+  .ft__sitemap, .ft__contact
+    margin-top: 9.5rem
+
+
+    .ft__sitemap--submenu
+      font-size: inherit
+
+
+  .ft__sitemap--header
+    border-bottom: 1px solid $opd-light-blue
+    margin-bottom: 3rem
+    width: 80%
+
+  .ft__sitemap--env-wrap
+    display: flex
+    flex-direction: row
+
+  .ft__sitemap--env
+    margin-right: 8rem
+
+  .ft__sitemap--env-header
+    margin-bottom: 2rem
+
+  .ft__sitemap--submenu
+    padding: 0
+
+    li
+      line-height: 3rem
+      list-style: none
+
+      &:last-child
+        margin-top: 5rem
+        width: auto
+        border: solid 1px $opd-coral
+        .ft__sitemap--link
+          @include default-trans
+          text-align: center
+          padding: 2rem 3rem
+          width: auto
+          border-radius: 6px
+          cursor: pointer
+          text-transform: uppercase
+        &:hover
+          background-color: rgba($opd-coral,.3)
+          border: solid 1px $pure-white
+
+    .ft__sitemap--link
+      text-decoration: none
+      color: inherit
+      line-height: 4rem
+
+  .ft__contact
+    width: 20vw
+    text-align: left
+
+    .ft__contact--header
+      padding-bottom: 3rem
+
+    ul
+      list-style: none
+      padding: 0
+      margin: 0
+
+    .ft__contact--link
+      padding: 2rem 0
+
+      i
+        padding-right: 2rem
+
+      & > a
+        @include default-trans
+        color: inherit
+        text-decoration: none
+
+      &:hover > a
+        color: $opd-coral
+
+    .social-media
+      padding-top: 6rem
+      justify-content: flex-start
+      i
+        font-size: 4rem
+        padding-right: 5rem
+
+  .ft__base
+    align-items: center
+    border-top: solid 1px $opd-light-blue
+    display: flex
+    flex-wrap: wrap
+
+    justify-content: space-between
+    min-width: 100%
+    width: 100%
+    a,
+    p
+      color: inherit
+      font-size: $sm-font-size
+      margin: 0
+      padding: .5rem .1rem
+      text-decoration: none
+
+  .legal-links
+    display: flex
+    justify-content: space-between
+
+    flex-direction: row
+    a
+      &::after
+        content: " |"
+
+      &:last-child
+        &::after
+          content: ""
+
+  .copyright
+    &::after
+      content: ' Limited'
+
+  .ft__sitemap--submenu
+    li
+      transition: .2s ease-in-out
+
+    &:hover > li
+      opacity: .5
+
+    li
+      &:hover
+        opacity: 1

data/_sass/forms/mc-forms.sass

@@ -77,7 +77,7 @@ input.switch
 input.switch
   &:checked
     + .icon
-      background: $opd-blue-trust
+      background: $opd-light-blue
 
     ~
       .yes
@@ -126,13 +126,13 @@ input.switch
       background: $env-primary
 
 .styled-checkbox:checked
-  background: $opd-orange-confidence
+  background: $opd-coral
 
   + .icon span
     left: calc(100% - 25.732px)
 
     &:before
-      background: $opd-blue-trust
+      background: $opd-light-blue
 
 .content__gdpr
   display: flex
@@ -191,3 +191,12 @@ input.switch
     padding: 5rem
     background-color: $pure-white
     border-radius: 20px
+
+
+.response
+  padding: 2rem 0
+
+.mce_inline_error
+  padding: 1rem 0
+  font-size: $sm-font-size
+  color: $led

data/_sass/global.sass

@@ -87,6 +87,7 @@ body
   object-fit: cover
   object-position: center
   width: 100%
+  display: inherit
 
 .image__filter--mix
   @include image-filter--mix
@@ -101,9 +102,35 @@ body
   text-align: center
   width: 100vw
 
-  & > *
+
+  & > p
+    opacity: 0
     padding-top: 12px
+    animation: fadeInAnimation ease 1s
+    animation-delay: .8s
+    animation-iteration-count: 1
+    animation-fill-mode: forwards
+
+  & > h1, h2, h3, h4, h5
+    animation: zoomInAnimation ease .6s
+    animation-iteration-count: 1
+    animation-fill-mode: forwards
+
+@keyframes zoomInAnimation
+  0%
+    transform: scale(0)
+    opacity: 0
+
+  100%
+    transform: scale(1)
+    opacity: 1
+
+@keyframes fadeInAnimation
+  0%
+    opacity: 0
 
+  100%
+    opacity: 1
 
 .hero__strap--center
   //padding-top: $navbar-height
@@ -146,7 +173,7 @@ body
 
 // Block colors and sizes
 .strap--opd-trust
-  @include opd-blue-trust
+  @include opd-light-blue
 
 
 .strap__100
@@ -180,7 +207,8 @@ body
     stroke-width: 1
 
   & > .svg--text
-    font-size: $font-size * .8
+    font-size: $lg-font-size
+    font-weight: $heavy-font
 
 .svg__labels.hidden
 
@@ -208,6 +236,12 @@ body
   & > .trans-right
     animation: trans-in-right .6s ease-in-out
 
+// This is digusting! We need to tweak the actual html so we can readilly access these elements.
+.svg__labels--red
+  & > svg > * > *
+    fill: $opd-coral
+    stroke: $opd-coral!important
+
 
 $svg-text-offset: 60px
 
@@ -256,15 +290,25 @@ $svg-text-offset: 60px
 
 
 // Social icons wraped in <a's
-.social
-  color: $grey
-  text-decoration: none
+
+.social-media
+  display: flex
+  padding: 0
+  margin: 0
+  line-height: 0
+
+.social-media-item
+  list-style: none
+
+.social-media-link
+  @include default-trans
+  color: $white
 
 .yaml--link
   color: inherit
   text-decoration: none
   &:hover
-    color: $opd-blue-trust
+    color: $opd-light-blue
 
 
 @media screen and ( min-width: 768px )
@@ -284,33 +328,29 @@ $svg-text-offset: 60px
     max-width: 600px
     margin: 0 auto
 
-  .social--Facebook
+  .social-media-item
     &:hover
-      color: $facebook-primary
+      .social--Facebook
+        color: $facebook-primary
 
-  .social--Twitter
-    &:hover
-      color: $twitter-primary
+      .social--Twitter
+        color: $twitter-primary
 
-  .social--LinkedIn
-    &:hover
-      color: $linkedin-primary
+      .social--LinkedIn
+        color: $linkedin-primary
 
-  .social--Instagram
-    &:hover
-      color: $instagram-primary
+      .social--Instagram
+        color: $instagram-primary
 
-  .social--Website,
-  .social--Email
-    &:hover
-      color: $opd-blue-trust
+      .social--Website,
+      .social--Email
+        color: $opd-light-blue
 
 
 // This is basically a button and should to be centralised
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
+  font-size: $font-size
+  margin: 0 auto
   padding: 2rem
   position: relative
   text-decoration: none
@@ -321,14 +361,14 @@ $svg-text-offset: 60px
     content: ''
     display: block
     height: 6rem
-    left: 0
+    left: -1rem
     position: absolute
-    top: 0
+    top: .5rem
     transition: .2s ease
     width: 6rem
 
   span
-    font-weight: 900
+    font-weight: $heavy-font
     position: relative
 
   svg