slow-steps 0.1.2 → 0.1.7

data/_sass/env/landing.sass

@@ -1,6 +1,10 @@
-// Landing page with 768 breakpoint
-
-// Using Custom Properties to scale properly inside mobile viewports
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# Landing sass        /_sass/env/landing.sass
+ *##############################################
+ *
+ */
 
 // Fallback for browsers that do not support Custom Properties
 $landing-height: 100vh
@@ -12,41 +16,36 @@ $landing-height: 100vh
   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--mix
 
 .env--pwp
   background-color: $opd-orange-confidence
@@ -54,7 +53,6 @@ $landing-height: 100vh
 .env--clinician
   background-color: $opd-blue-confidence
 
-
 @media screen and ( min-width: 768px )
 
   .landing__page
@@ -71,23 +69,21 @@ $landing-height: 100vh
     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
@@ -95,48 +91,50 @@ $landing-height: 100vh
     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
 
@@ -158,6 +156,7 @@ $landing-height: 100vh
       text-align: left
 
 
+
 @include slide-from-right
 
 @include slide-from-left

data/_sass/env/pwp.sass

@@ -1,212 +1,73 @@
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# pwp landing sass         /_sass/env/pwp.sass
+ *##############################################
+ *
+ */
 
-
-.hero-image
-  display: flex
-  justify-content: center
-  align-items: center
-
-.hero__pwp
-  height: 90vh
-  height: calc(var(--vh, 1vh) * 90)
+.image__filter--blur
+  @include image-filter--blur
 
 .hero__overlay
-  width: 100%
-  height: 100%
-  z-index: -1
-
-.hero__overlay--pwp
-  background-color: $opd-orange-confidence
+  background-color: $env-primary
 
-.hero__image
-  height: 100%
-  width: 100%
-  object-fit: cover
-  object-position: center
+.bg--env-100
+  background-color: $env-primary
 
-.hero__image--pwp
-  opacity: .7
-  filter: grayscale(.2) contrast(.2) brightness(1.6)
+.bg--env-50
+  background-color: rgba($env-primary, .5)
 
-.hero__strap
-  position: absolute
+.hero__strap--env
   color: $env-secondary
-  text-align: center
-  padding-top: $navbar-height
 
 .hero__strap--start
   color: $env-primary
 
-.pwp__follow
-  display: flex
-  position: absolute
-  bottom: 4.5vh
-  width: 30px
-  height: 11vh
+.hero__follow
   background-color: $env-primary
-  z-index: 2
-  border-radius: 30px
-  color: $white
-  align-items: center
-  justify-content: center
-  &::after
-    content: "\2193"
-    font-size: 20px
-    transform: scaleY(2)
-
-
-.augmented-image
-  position: relative
-  display: flex
-
-.svg__augment
-  position: absolute
-  top: 0
-  left: 0
-
-.svg__augment--led
-  fill: url(#augmentLED)
-
-#augmentLED
-  stop:first-child
-    stop-color: $pure-white
-    stop-opacity: 1
-
-  stop:last-child
-    stop-color: $led
-    stop-opacity: 1
-
-.svg__augment--pulse
-  fill: $led
-  animation: pulse-ring 2s cubic-bezier(.1,.74,.53,.91) infinite
-
-.strapline
-  text-align: center
-
-.pwp--strap
-  color: $env-secondary
-  background-color: $opd-blue-trust
-  padding: 5rem 1rem
-  & > h2
-    padding: 1rem 0
+  bottom: 4.5vh
 
-.segment-wrap
+.segment__wrap
   display: flex
   flex-direction: column-reverse
   width: 100vw
 
-.augment--gaurentee
-  width: 100%
-  height: 100%
-
 .segment__gaurentee
-  display: flex
+  @include logo-color($white)
   align-items: center
-  justify-content: center
-  flex-direction: column
-  width: 100%
   background-color: $env-primary
   color: $white
+  display: flex
+  flex-direction: column
+  justify-content: center
   padding: 4rem 0
+  width: 100%
+
   .site__logo
-    width: 60%
-  .site__logo--curve,
-  .site__logo--legvert,
-  .site__logo--leg45,
-  .site__logo--g,
-  .site__logo--a,
-  .site__logo__i,
-  .site__logo--t,
-  .site__logo--Q
-    fill: $white
+    margin: 0 5vw
+    text-align: center
+    width: 100px
+
+.segment__keywords
+  height: 50%
 
 .image--guarantee
-  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+  @include image-filter-rotate
 
-.pwp--guarantee
+.strap__guarantee
   border-top: solid 1px $soft-white
-  width: 80%
   margin: 3rem 0
+  width: 80%
+
+.strap--env-primary
+  background-color: $env-primary
+  color: $white
 
 .segment__keywords
   display: flex
   flex-direction: row
   flex-wrap: wrap
-  background-color: $opd-blue-trust
-  color: $env-secondary
   & > *
     padding: 3rem 0
     width: 50%
-
-.svg__labels
-
-  & > *
-    fill: $white
-
-  & > .svg--elem
-    transition: .4s ease-in-out
-
-  & > .svg--circle
-    stroke: rgba($pure-black, .2)
-    stroke-width: 1
-
-  & > .svg--line
-    stroke: $white
-    stroke-width: 1
-
-  & > .svg--text
-    font-size: $font-size * .8
-
-.svg__labels.hidden
-
-  & > .svg--circle
-    opacity: 0
-
-  & > .svg--text
-    opacity: 0
-
-.svg__labels.not-hidden
-
-  & > .svg--circle
-    opacity: 1
-
-  & > .svg--text
-    transform: translateX(0)
-    opacity: 1
-
-  & > .svg--line
-    stroke-dashoffset: 0!important
-
-
-  & > .trans-left
-    animation: trans-in-left .6s  ease-in-out
-
-  & > .trans-right
-    animation: trans-in-right .6s ease-in-out
-
-$svg-text-offset: 60px
-
-@keyframes trans-in-left
-  0%
-    transform: translateX(-$svg-text-offset)
-
-  100%
-    transform: translateX(0)
-
-@keyframes trans-in-right
-  0%
-    transform: translateX($svg-text-offset)
-
-  100%
-    transform: translateX(0)
-
-@keyframes pulse-ring
-  0%
-    opacity: 1
-    r: .1
-
-  50%
-    opacity: .1
-
-  100%
-    opacity: 0
-    r: 3

data/_sass/footer_full.sass

@@ -1,71 +1,83 @@
-.ft-wrapper
-  background-color: $opd-blue-confidence
-  background-image: url('/assets/img/content/footer-bg.svg')
-  background-position: center
-  background-size: cover
+.ft__wrapper
+  @include footer-bg($opd-blue-confidence)
+  border-top: solid 1px $white
   color: $white
   display: flex
   flex-wrap: wrap
-  margin-top: 10vh
-  padding: 0
+  padding: 5vh 5vw
 
 .ft__head
   display: flex
-  height: 10vh
-  min-height: 10vh
-  min-width: 100%
+  margin: 5vh 5vw
   width: 100%
 
 .ft__body
   display: flex
+  flex-direction: column-reverse
   flex-wrap: wrap
-  margin: 0 2rem
-  width: 100%
+  margin: 5vh 0
+  width: 90vw
 
-.ft__sitemap, .ft__contact
-  min-width: 100%
-  width: 100%
+.ft__col
+  //border-left: solid 1px rgba($opd-blue-trust, .05)
+  box-sizing: border-box
+  padding: 0 5vw
+  width: 90vw
+
+.ft__contact--list
+  display: block
+  font-size: $font-size * .8
+  list-style: none
+  padding: 0
+  text-decoration: none
+  li
+    line-height: 5rem
+  .address
+    line-height: 2.5rem
+
+.ft__contact
+  .site__logo
+    @include logo-color($opd-blue-trust)
+    width: 40vw
+
+.ft__sitemap
+  .ft__sitemap--env-header
+    font-size: $font-size * 1
+    font-weight: 600
+  .ft__sitemap--submenu
+    font-size: $font-size * .8
 
 .ft__base
-  min-width: 100%
-  width: 100%
+  align-items: center
+  border-top: solid 1px $opd-blue-trust
   display: flex
   flex-wrap: nowrap
   justify-content: space-between
-  align-items: center
-  border-top: solid 1px $opd-grey-neutral
-
-  a, p
-    padding-top: 0
+  min-width: 100%
+  width: 100%
+  a,
+  p
+    color: inherit
+    font-size: $font-size * .7
     margin: 0
-    font-size: 1.2rem
+    padding: .5rem .1rem
     text-decoration: none
-    color: inherit
 
-  div
-    a
-      &::after
-        content: " |"
-
-      &:last-child
-        &::after
-          content: ""
-
-.ft__sitemap--menu
-  position: relative
-  float: left
-  background: transparent
-  margin: 0 1% 0 1%
+.legal-links
+  display: flex
+  flex-direction: column
+  justify-content: space-between
 
 .ft__sitemap--header
-  border-bottom: 1px solid $opd-grey-neutral
+  border-bottom: 1px solid $opd-blue-trust
   color: $pure-white
+  font-size: 2rem
+  font-weight: 600
+  margin-bottom: 3rem
+  width: 100%
 
-  &:not(:first-child)
-    &::before
-      content: 'GaitQ '
-
-.ft__sitemap--menu, .ft__sitemap--submenu
+.ft__sitemap--menu,
+.ft__sitemap--submenu
   padding: 0
   width: 100%
 
@@ -73,10 +85,89 @@
   padding-bottom: 2rem
   li
     display: block
+    line-height: 3rem
     list-style: none
-    padding: .8rem 1.2rem
-    text-decoration: none
 
 .ft__sitemap--submenu li a
-  color: $white
-  text-decoration: none
+  color: $pure-white
+
+.ft__sitemap--env-wrap
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+
+.ft__sitemap--env
+  width: 100%
+
+@media screen and ( min-width: 768px )
+
+  .ft__wrapper
+    border: none
+
+  .ft__body
+    flex-direction: row
+
+  .ft__col
+    width: 30vw
+
+  .ft__col.ft__sitemap
+    width: 60vw
+
+  .ft__contact--list
+    font-size: $font-size * .7
+    li
+      line-height: 4rem
+    .address
+      line-height: 2rem
+
+  .ft__contact
+    .site__logo
+      width: 10vw
+
+  .ft__sitemap
+    .ft__sitemap--env-header
+      font-size: $font-size * .8
+    .ft__sitemap--submenu
+      font-size: $font-size * .7
+
+  .ft__base
+    a,
+    p
+      font-size: $font-size * .6
+
+  .legal-links
+    flex-direction: row
+    a
+      &::after
+        content: " |"
+
+      &:last-child
+        &::after
+          content: ""
+
+  .copyright
+    &::after
+      content: ' Limited'
+
+  .ft__sitemap--header
+    font-size: 1.8rem
+
+  .ft__sitemap--submenu li a
+    text-decoration: none
+
+  .ft__sitemap--submenu
+    li
+      transition: .2s ease-in-out
+
+    &:hover > li
+      opacity: .5
+
+    li
+      &:hover
+        opacity: 1
+
+  .ft__sitemap--env-wrap
+    flex-direction: row
+
+  .ft__sitemap--env
+    width: 50%