global.sass in slow-steps-0.1.4

- old
+ new

@@ -1,5 +1,13 @@
+/*  Last full read through 30/12/2020
+ *
+ *##############################################
+ *# Global                    /_sass/global.sass
+ *##############################################
+ *
+ */
+
 // Global CSS that doesnt fall into any of the categories set out by the _sass dir structure
 
 // Stop any CSS animations on load. We remove this class from the body tag after load, using assets/js/animate_after_load.js
 .preload *
   -webkit-transition: none !important
@@ -8,19 +16,19 @@
   -o-transition: none !important
 
 .fullwidth__wrap
   width: 100vw
 
+.h-100
+  height: 100%
+
 .d-none
   display: none
 
 .d-block
   display: block
 
-.bg--dark
-  background-color: $opd-grey-neutral
-
 .bg--light
   background-color: $white
 
 .no-touch__wrap
   padding: 18vh 0 10vh 0
@@ -29,29 +37,61 @@
 .hero
   align-items: center
   display: flex
   justify-content: center
 
+.hero-65
+  height: 65vh
+  height: calc(var(--vh, 1vh) * 65)
+
+.hero-90
+  height: 90vh
+  height: calc(var(--vh, 1vh) * 90)
+
 .hero__overlay
   width: 100%
   height: 100%
   z-index: -1
 
 .hero__image
-  height: 100%
   object-fit: cover
   object-position: center
   width: 100%
 
-.hero__filter
-  @include image-filter
+.image__filter--mix
+  @include image-filter--mix
 
 .hero__strap
-  padding-top: $navbar-height
+  align-items: center
+  color: $white
+  display: flex
+  justify-content: center
+  margin: 0
   position: absolute
   text-align: center
+  width: 100vw
 
+  & > *
+    padding-top: 12px
+
+
+.hero__strap--center
+  padding-top: $navbar-height
+
+  span
+    animation-duration: .1s
+    animation-fill-mode: forwards
+    animation-iteration-count: 1
+    animation-name: fadeInOpacity
+    opacity: 0
+
+.hero__strap--baseline
+  align-self: flex-end
+  flex-direction: column
+  padding-bottom: 5.5vh
+  padding-top: 2rem
+
 .hero__follow
   align-items: center
   border-radius: 30px
   color: $white
   display: flex
@@ -187,17 +227,24 @@
     opacity: .2
 
   100%
     opacity: 0
     r: 2
-    
 
+
 // Social icons wraped in <a's
 .social
   color: $grey
   text-decoration: none
 
+.yaml--link
+  color: inherit
+  text-decoration: none
+  &:hover
+    color: $opd-blue-trust
+
+
 @media screen and ( min-width: 768px )
 
   .narrow__wrap
     width: 80vw
     max-width: 600px
@@ -217,5 +264,53 @@
 
   .social--Website,
   .social--Email
     &:hover
       color: $opd-blue-trust
+
+
+// This is basically a button and should to be centralised
+.action__call
+  bottom: 0
+  font-size: $font-size * .8
+  margin: -100px auto
+  padding: 2rem
+  position: relative
+  text-decoration: none
+  transition: .2s ease
+
+  &:before
+    border-radius: 3rem
+    content: ''
+    display: block
+    height: 6rem
+    left: 0
+    position: absolute
+    top: 0
+    transition: .2s ease
+    width: 6rem
+
+  span
+    font-weight: 900
+    position: relative
+
+  svg
+    fill: none
+    margin-left: 10px
+    position: relative
+    stroke-linecap: round
+    stroke-linejoin: round
+    stroke-width: 2
+    top: 0
+    transform: translateX(-10px)
+    transition: .2s ease
+
+  &:hover
+    &::before
+      width: 100%
+
+    svg
+      stroke: $white
+      transform: translateX(0)
+
+    span
+      color: $white