slow-steps 0.1.3 → 0.1.8

data/_sass/about.sass

@@ -1,20 +1,17 @@
+/*  Last full read through 29/12/2020
+ *
+ *##############################################
+ *# about                      /_sass/about.sass
+ *##############################################
+ *
+ */
 
-.about__head
-  align-items: center
-  backdrop-filter: blur(8px)
-  background-color: rgba($env-primary, .5)
-  color: $white
-  display: flex
-  height: $mobile-navbar-height * 4
-  justify-content: center
-  padding-top: $mobile-navbar-height
-  text-align: center
-  span
-    animation-duration: .1s
-    animation-fill-mode: forwards
-    animation-iteration-count: 1
-    animation-name: fadeInOpacity
-    opacity: 0
+
+.hero
+  overflow: hidden
+
+.hero__image--fixed
+  position: fixed
 
 @keyframes fadeInOpacity
   0%
@@ -24,20 +21,8 @@
     opacity: 1
 
 
-.about__head__bg
-  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
-  filter: contrast(3) brightness(.6)
-  background-position: center
-  background-repeat: no-repeat
-  background-size: cover
-  height: $mobile-navbar-height * 5
-  position: fixed
-  width: 100vw
-  z-index: -1
-
 .about__copy
   align-items: center
-  background-color: $env-primary
   color: $white
   display: flex
   flex-direction: column
@@ -55,7 +40,6 @@
 
 .team__head
   align-items: flex-end
-  background-color: rgba($env-primary, .5)
   border-bottom: solid 1px $opd-blue-confidence
   display: flex
   height: 10rem

data/_sass/colors/_variables.sass

@@ -8,11 +8,14 @@
 
 // Oxford Product Design
 
-$opd-blue-confidence: rgba(62, 86, 112, 1)
+// #46627d
+$opd-blue-confidence: rgba(70, 98, 125, 1)
 
-$opd-orange-confidence: rgba(210, 84, 75, 1)
+// #da5e51
+$opd-orange-confidence: rgba(218, 94, 81, 1)
 
-$opd-blue-trust: rgba(179, 201, 226, 1)
+// #9CBBD2
+$opd-blue-trust: rgba(174, 201, 229, 1)
 
 $opd-grey-neutral: rgba(178, 178, 178, 1)
 
@@ -51,7 +54,7 @@ $led: rgb(255, 70, 0)
 
 // Object colors
 
-$secondary-navbar-color: rgba(255, 255, 255, .3)
+$secondary-navbar-color: rgba(255, 255, 255, .8)
 
 
 // Color set mixins

data/_sass/colors/breakpoints/{768.sass → 1024.sass}

@@ -4,7 +4,7 @@
 // in assets/css/gaitq_env.sass we import this AFTER
 //  @import 'colors/env/env.sass'
 
-@media screen and ( min-width: 768px )
+@media screen and ( min-width: 1024px )
 
   .navbar
     background-color: $env-primary

data/_sass/colors/env/_clinician.sass

@@ -1,5 +1,5 @@
 
-// Colouring theme for pwp env
+// Colouring theme for clinician env
 
 $env-primary: $opd-blue-confidence
 

data/_sass/colors/global.sass

@@ -0,0 +1,2 @@
+.white
+  color: $white

data/_sass/contact.sass

@@ -0,0 +1,227 @@
+
+
+.contact__wrapper
+  display: flex
+  width: 100%
+  background-color: $white
+  padding: 5rem 0
+  flex-direction: column
+
+.contact--left
+  width: auto
+  padding: 0 1rem
+  padding-bottom: 5rem
+
+.contact--right
+  //width: 100%
+  padding: 0 1rem
+
+.form-instruction
+  padding-bottom: 2rem
+
+.contact-form
+  width: 100%
+  display: block
+
+  form
+    border: solid 1px rgba($env-primary, .2)
+    border-radius: 4px
+    padding: 2rem
+  label
+    font-size: $font-size * .8
+    color: $black
+
+.google-map
+  //grid-area: googleMap
+  width: 100%
+
+  //padding: 0 5rem
+  //filter: sepia(.3)
+  iframe
+    width: 100%
+    height: 40vh
+    border: solid 1px rgba($env-primary, .2)
+
+.contact-details
+  display: flex
+  flex-direction: column
+  padding: 4rem 0
+  p
+    padding-bottom: 2rem
+  .fas
+    color: $env-primary
+  a
+    color: $black
+    transition: all .2s ease-in-out
+    //text-decoration: none
+    &:hover
+      color: $env-primary
+  .social-media-link
+    font-size: $font-size * 1.4
+
+.form-element
+  width: 100%
+  height: 40px
+  border-radius: 4px
+  //font-size: 1rem
+  font-weight: 100
+  margin: 2vh 0
+  border: none
+  background-color: $pure-white
+  padding: .1rem 0 .4rem 0
+  text-indent: 1rem
+
+  &::placeholder
+    color: rgba($env-primary, .3)
+
+.btn-contact
+  background: $env-primary
+  color: #ffffff
+  cursor: pointer
+  font-size: $font-size * .8
+  padding: 1rem 2rem
+  border: 0
+  transition: all .3s
+  border-radius: 4px
+  width: auto
+  position: relative
+
+.social-media
+  display: flex
+  justify-content: center
+  padding: 0
+  margin: 0
+  z-index: 9999
+
+.social-media-item
+  list-style: none
+  padding-right: 2rem
+
+.social-media-link
+  color: $grey
+  transition: all .3s ease-in-out
+
+
+
+@media screen and ( min-width: 1024px )
+
+  .contact__wrapper
+    display: flex
+    flex-direction: row
+    width: 100%
+    background-color: $white
+    padding: 5rem 0
+
+  .contact--left
+    width: 40%
+    padding: 0 5rem
+
+  .contact--right
+    width: 60%
+    padding: 0 5rem
+
+  .form-instruction
+    padding-bottom: 2rem
+
+  .contact-form
+    width: 100%
+    display: block
+
+    form
+      border: solid 1px rgba($env-primary, .2)
+      border-radius: 4px
+      padding: 2rem
+    label
+      font-size: $font-size * .8
+      color: $black
+
+  .google-map
+    //grid-area: googleMap
+    width: 100%
+
+    //padding: 0 5rem
+    //filter: sepia(.3)
+    iframe
+      width: 100%
+      height: 40vh
+      border: solid 1px rgba($env-primary, .2)
+
+  .contact-details
+    display: flex
+    flex-direction: column
+    padding: 4rem 0
+    p
+      padding-bottom: 2rem
+    .fas
+      color: $env-primary
+    a
+      color: $black
+      transition: all .2s ease-in-out
+      text-decoration: none
+      &:hover
+        color: $env-primary
+    .social-media-link
+      font-size: $font-size * 2
+
+  .form-element
+    width: 100%
+    height: 40px
+    border-radius: 4px
+    //font-size: 1rem
+    font-weight: 100
+    margin: 2vh 0
+    border: none
+    background-color: $pure-white
+    padding: .1rem 0 .4rem 0
+    text-indent: 1rem
+
+    &::placeholder
+      color: rgba($env-primary, .3)
+
+  .btn-contact
+    background: $env-primary
+    color: #ffffff
+    cursor: pointer
+    font-size: $font-size * .8
+    padding: 1rem 2rem
+    border: 0
+    transition: all .3s
+    border-radius: 4px
+    width: auto
+    position: relative
+
+    &::after
+      content: "\f054"
+      font-family: "Font Awesome 5 Free"
+      font-weight: 900
+      position: absolute
+      //left: 85%
+      top: 28%
+      right: 5%
+      bottom: 0
+      opacity: 0
+
+    &:hover
+      background: rgba($env-primary, .9)
+      transition: all .5s
+      box-shadow: 0px 6px 15px rgba($env-primary, .3)
+      padding: 1rem 3rem 1rem 2.1rem
+
+      &::after
+        opacity: 1
+        transition: all 0.3s
+
+  .social-media
+    display: flex
+    justify-content: flex-start
+    padding: 0
+    margin: 0
+    z-index: 9999
+
+  .social-media-item
+    list-style: none
+    padding-right: 2rem
+
+  .social-media-link
+    color: $grey
+    transition: all .3s ease-in-out

data/_sass/env/clinician.sass

@@ -6,19 +6,17 @@
  *
  */
 
-.hero
-  height: 65vh
-  height: calc(var(--vh, 1vh) * 65)
+.image__filter--blur
+  @include image-filter--blur
 
 .hero__overlay
   background-color: $env-primary
 
-.hero__strap
-  align-self: flex-end
+.bg--env-100
   background-color: $env-primary
-  color: $white
-  padding-bottom: 5.5vh
-  width: 100vw
+
+.bg--env-50
+  background-color: rgba($env-primary, .5)
 
 .hero__follow
   background-color: $env-primary
@@ -35,53 +33,20 @@
     padding: 5rem 0
     width: 50%
 
-// This is basically a button and should to be centralised
+.image--guarantee
+  @include image-filter-rotate
+
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
-  padding: 2rem
-  position: relative
-  text-decoration: none
-  transition: .2s ease
 
   &:before
     background-color: rgba($env-secondary, .2)
-    border-radius: 3rem
-    content: ''
-    display: block
-    height: 6rem
-    left: 0
-    position: absolute
-    top: 0
-    transition: .2s ease
-    width: 6rem
 
   span
     color: $env-primary
-    font-weight: 900
-    position: relative
 
   svg
-    fill: none
-    margin-left: 10px
-    position: relative
     stroke: $env-primary
-    stroke-linecap: round
-    stroke-linejoin: round
-    stroke-width: 2
-    top: 0
-    transform: translateX(-10px)
-    transition: .2s ease
 
   &:hover
     &::before
       background-color: rgba($env-secondary, 1)
-      width: 100%
-
-    svg
-      stroke: $white
-      transform: translateX(0)
-
-    span
-      color: $white

data/_sass/env/landing.sass

@@ -45,7 +45,7 @@ $landing-height: 100vh
   position: absolute
 
 .hero__filter
-  @include image-filter
+  @include image-filter--mix
 
 .env--pwp
   background-color: $opd-orange-confidence

data/_sass/env/pwp.sass

@@ -6,14 +6,19 @@
  *
  */
 
-.hero
-  height: 90vh
-  height: calc(var(--vh, 1vh) * 90)
+.image__filter--blur
+  @include image-filter--blur
 
 .hero__overlay
   background-color: $env-primary
 
-.hero__strap
+.bg--env-100
+  background-color: $env-primary
+
+.bg--env-50
+  background-color: rgba($env-primary, .5)
+
+.hero__strap--env
   color: $env-secondary
 
 .hero__strap--start
@@ -48,7 +53,7 @@
   height: 50%
 
 .image--guarantee
-  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+  @include image-filter-rotate
 
 .strap__guarantee
   border-top: solid 1px $soft-white