_sass/env/landing.sass in slow-steps-0.1.2 vs _sass/env/landing.sass in slow-steps-0.1.3

@@ -1,62 +1,60 @@
-// Landing page with 768 breakpoint
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# Landing sass        /_sass/env/landing.sass
+ *##############################################
+ *
+ */
 
-// Using Custom Properties to scale properly inside mobile viewports
-
 // Fallback for browsers that do not support Custom Properties
 $landing-height: 100vh
 
 .landing__page
   display: flex
   flex-direction: column
   height: $landing-height
   height: calc(var(--vh, 1vh) * 100)
 
 .page__half
-  display: flex
   align-items: flex-end
+  display: flex
   height: 50vh
   width: 100vw
 
 .env__text
+  color: $white
   display: flex
   flex-direction: column
-  color: $white
 
 .landing__strap
   display: none
 
 .landing__link
-  text-decoration: none
   color: $white
+  text-decoration: none
 
 .landing__title
   font-size: $font-size
+  padding: 2rem 0
   text-align: center
   width: 100vw
-  padding: 2rem 0
 
 .hero__overlay
-  position: absolute
-  width: 100%
+  // additional css from glocal
   height: 50%
-  z-index: -1
+  position: absolute
 
-.hero__image
-  height: 100%
-  width: 100%
-  object-fit: cover
-  opacity: .7
-  filter: grayscale(.2) contrast(.2) brightness(1.6)
+.hero__filter
+  @include image-filter
 
 .env--pwp
   background-color: $opd-orange-confidence
 
 .env--clinician
   background-color: $opd-blue-confidence
 
-
 @media screen and ( min-width: 768px )
 
   .landing__page
     flex-direction: row
 
@@ -69,76 +67,76 @@
     flex-direction: column
     position: absolute
     top: 50vh
     transition: .6s ease-in-out
 
-
     &:focus-within > .landing__strap
       @include reveal-landing-strap
 
     &:hover > .landing__strap
       @include reveal-landing-strap
 
-
   .landing__strap
     display: flex
     flex-direction: column
-    justify-content: space-around
     height: 0
+    justify-content: space-around
+    max-width: 400px
     overflow: hidden
     transition: .2s ease-in-out
     width: 40vw
-    max-width: 400px
 
   .landing__cta
     display: flex
     flex-direction: row
     justify-content: space-between
 
     > a
-      transition: .3s ease-in-out
-      width: 40%
-      padding: 1rem 0
-      border-radius: 6px
-      text-decoration: none
-      text-align: center
       align-self: center
+      border-radius: 6px
       box-shadow: 0 20px 30px -15px rgba($pure-black, .6)
+      padding: 1rem 0
+      text-align: center
+      text-decoration: none
+      transition: .3s ease-in-out
+      width: 40%
 
   .primary__cta
     background-color: $opd-blue-trust
     border: solid 1px $opd-blue-trust
     color: $opd-blue-confidence
     &:hover
-      color: $opd-blue-trust
       background-color: transparent
-      box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
+      color: $opd-blue-trust
 
   .secondary__cta
-    background-color: none
+    background-color: transparent
     border: solid 1px $white
     color: $white
     &:hover
-      color: $opd-blue-confidence
       background-color: $white
+      color: $opd-blue-confidence
+
+  .primary__cta, .secondary__cta
+    &:hover
       box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
 
   .env__text.env--pwp
+    @include build-in(slide-from-left)
     border-radius: 6px 0 0 6px
     box-shadow: -12px 10px 10px -10px $grey
     right: 50%
     transform: translateX(0)
-    @include build-in(slide-from-left)
     &:hover
       box-shadow: -20px 20px 20px -10px $grey
 
   .env__text.env--clinician
+    @include build-in(slide-from-right)
     border-radius: 0 6px 6px 0
     box-shadow: 12px 10px 10px -10px $grey
     left: 50%
     transform: translateX(0)
-    @include build-in(slide-from-right)
     &:hover
       box-shadow: 20px 20px 20px -10px $grey
 
   .landing__title
     width: auto
@@ -154,9 +152,10 @@
       text-align: right
 
   .env--clinician
     .landing__title
       text-align: left
+
 
 
 @include slide-from-right
 
 @include slide-from-left