slow-steps 0.1.1

data/_sass/colors/breakpoints/768.sass

@@ -0,0 +1,20 @@
+
+// Color breakpoint function, unlikely to involve more than navbar stuff.
+
+// in assets/css/gaitq_env.sass we import this AFTER
+//  @import 'colors/env/env.sass'
+
+@media screen and ( min-width: 768px )
+
+  .navbar
+    background-color: $env-primary
+
+  .nav-group-content
+    background-color: $secondary_navbar_color
+
+    > *
+      color: $env_primary
+
+  .current--url
+    &:before, &:after
+      background-color: $env_primary

data/_sass/colors/burger.sass

@@ -0,0 +1,22 @@
+// Color function for the burger.
+
+// in assets/css/gaitq_env.sass we import this AFTER
+//  @import 'colors/env/env.sass'
+
+.burger > div
+  background-color: $burger-color
+
+.burger-active > div
+  background-color: $burger-active-color
+
+.site__logo-active
+  .site__logo--group
+    .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: $site__logo-active

data/_sass/colors/env/_clinician.sass

@@ -0,0 +1,16 @@
+
+// Colouring theme for pwp env
+
+$env-primary: $opd-blue-confidence
+
+$env-secondary: $opd-orange-confidence
+
+$burger-color: $white
+
+$burger-active-color: $env-secondary
+
+$nav-link-color: $white
+
+$nav-list-bg-color: $env-primary
+
+$site__logo-active: $env-secondary

data/_sass/colors/env/_pwp.sass

@@ -0,0 +1,16 @@
+
+// Colouring theme for pwp env
+
+$env-primary: $opd-orange-confidence
+
+$env-secondary: $opd-blue-confidence
+
+$burger-color: $white
+
+$burger-active-color: $env-secondary
+
+$nav-link-color: $white
+
+$nav-list-bg-color: $env-primary
+
+$site__logo-active: $env-secondary

data/_sass/colors/navigation.sass

@@ -0,0 +1,13 @@
+// Color function for naviagtion links.
+
+// in assets/css/gaitq_env.sass we import this AFTER
+//  @import 'colors/env/env.sass'
+
+.nav-list
+  background-color: $nav-list-bg-color
+
+.nav-group-link
+  color: $nav-link-color
+
+.nav-group-content > *
+  color: $white

data/_sass/env/breakpoints/768.sass

@@ -0,0 +1,79 @@
+
+@media screen and ( min-width: 768px )
+
+  .pwp__grid-wrap
+    display: flex
+    flex-wrap: no-wrap
+    flex-direction: row
+    width: 100vw
+    max-height: 100vh
+
+  .pwp__grid-col-l, .pwp__grid-col-r
+    height: 100vh
+    display: flex
+    flex-direction: column
+
+  .pwp__grid-col-l
+    width: 60vw
+
+  .pwp__grid-col-r
+    width: 40vw
+    svg
+      display: none
+      position: absolute
+      //transform: translateY(-100%)
+      //-height: 100vh
+
+  .pwp__grid__text
+    display: flex
+    align-items: center
+    justify-content: space-between
+    text-align: left
+    flex-direction: row
+    width: 100%
+    height: 50%
+    background-color: $env-primary
+    color: $white
+    padding: 0
+
+    .site__logo
+      display: flex
+      justify-content: center
+      align-items: center
+      text-align: center
+      width: 15vw
+      margin: 0 5vw
+      //padding: 8rem
+
+  .pwp--guarantee
+    border: none
+    border-left: solid 2px $pure-white
+    width: 35vw
+    margin: 0
+    padding: 0 3rem
+
+  .pwp__grid_img
+    width: 100%
+    min-height: 100vh
+    right: 0
+    background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
+    background-size: cover
+    background-position: center
+    background-repeat: no-repeat
+    padding: 0
+    //padding-top: 100%
+
+
+  .pwp__grid_keywords
+    width: 100%
+    height: 50%
+    flex-direction: column
+    align-items: center
+    justify-content: center
+
+    & > *
+      padding: 2rem 0
+
+  .clinician__strap
+    h1
+      display: block

data/_sass/env/clinician.sass

@@ -0,0 +1,150 @@
+
+
+.clinician__hero
+  align-items: center
+  display: flex
+  flex-direction: column
+  height: 65vh
+  height: calc(var(--vh, 1vh) * 65)
+  justify-content: center
+
+.clinician__bg
+  background-image: url($baseurl + 'assets/img/landing__clinician-mobile.jpg')
+  background-size: cover
+  filter: grayscale(1) contrast(.2) brightness(1.6)
+  height: 100%
+  opacity: .7
+  position: relative
+  width: 100%
+
+.clinician__overlay
+  background-color: $env-primary
+  height: 70%
+  position: relative
+  width: 100%
+
+.clinician__strap
+  background-color: $env-primary
+  color: $white
+  display: flex
+  flex-direction: column
+  height: 30%
+  justify-content: space-around
+  padding-bottom: 3vh
+  text-align: center
+  width: 100%
+
+  h1
+    // Hide on mobile
+    display: none
+
+.clinician__strap-start
+  color: $env-primary
+
+.clinician__follow
+  display: flex
+  position: absolute
+  top: 59.5vh
+  width: 30px
+  height: 11vh
+  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)
+
+
+.clinician__hero__2
+  display: block
+  object-fit: cover
+  height: 50vh
+  width: 100vw
+
+.clinician__device--group
+  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
+  svg
+    position: absolute
+    transform: translateY(-100%)
+    //-height: 100vh
+
+.clinician__straps
+  text-align: center
+  //padding: 5rem 2rem
+  background-position: center
+  color: $env-secondary
+  & > h2
+    //padding: 2rem 0
+
+.clinician__device--strap
+  background-color: $opd-blue-trust
+  padding: 5rem 2rem
+  & > h2
+    padding: 2rem 0
+
+.clinician__grid-wrap
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+
+  width: 100vw
+
+.clinician__grid-col-l, .clinician__grid-col-r
+  height: 100%
+  width: 50%
+
+.clinician__grid__text
+  display: flex
+  align-items: center
+  justify-content: space-between
+  flex-direction: column
+  width: 100%
+  background-color: $env-primary
+  color: $white
+  //height: 10rem
+  padding: 5rem 0
+
+.clinician__grid--keywords
+  padding: 1rem 0
+
+.action__call
+  width: 140px
+  height: 40px
+  background-color: $opd-blue-trust
+  margin: 4rem 0 0
+  border-radius: 20px
+  font-size: 12px
+  font-weight: 500
+  display: flex
+  align-items: center
+  justify-content: center
+  color: $black
+  &::after
+    content: "Get Involved"
+
+
+
+.clinician__grid_img
+  background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
+  background-size: cover
+  background-repeat: no-repeat
+  padding-top: 150%
+  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+
+.clinician--guarantee
+  border-top: solid 1px $soft-white
+  width: 80%
+  margin: 3rem 0
+
+.clinician__grid_keywords
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  background-color: $opd-blue-trust
+  & > *
+    padding: 3rem 0
+    width: 50%

data/_sass/env/landing.sass

@@ -0,0 +1,180 @@
+// Landing page with 768 breakpoint
+
+// Structurally we have one div, .landing-wrapper, wrapping 2 others, .landing__clinician and .landing__pwp
+
+@mixin reveal-landing-strap
+  height: 30vh
+  padding: 0 3rem
+
+// 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
+  height: 50vh
+  width: 100vw
+
+.env__text
+  display: flex
+  flex-direction: column
+  color: $white
+
+.landing__strap
+  display: none
+
+.landing__link
+  text-decoration: none
+  color: $white
+
+.landing__title
+  font-size: $font-size
+  text-align: center
+  width: 100vw
+  padding: 2rem 0
+
+.hero__overlay
+  position: absolute
+  width: 100%
+  height: 50%
+  z-index: -1
+
+.hero__image
+  height: 100%
+  width: 100%
+  object-fit: cover
+  opacity: .7
+  filter: grayscale(.2) contrast(.2) brightness(1.6)
+
+.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
+
+  .page__half
+    display: block
+    height: 100vh
+    width: 50vw
+
+  .env__text
+    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
+    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
+      box-shadow: 0 20px 30px -15px rgba($pure-black, .6)
+
+  .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)
+
+  .secondary__cta
+    background-color: none
+    border: solid 1px $white
+    color: $white
+    &:hover
+      color: $opd-blue-confidence
+      background-color: $white
+      box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
+
+  .env__text.env--pwp
+    border-radius: 6px 0 0 6px
+    box-shadow: -12px 10px 10px -10px $grey
+    right: 50%
+    transform: translateX(0)
+    animation: .8s cubic-bezier(.75,.86,.88,.62) 0s 1 slide-from-left
+    &:hover
+      box-shadow: -20px 20px 20px -10px $grey
+
+  .env__text.env--clinician
+    border-radius: 0 6px 6px 0
+    box-shadow: 12px 10px 10px -10px $grey
+    left: 50%
+    transform: translateX(0)
+    animation: .8s cubic-bezier(.75,.86,.88,.62) 0s 1 slide-from-right
+    &:hover
+      box-shadow: 20px 20px 20px -10px $grey
+
+  .landing__title
+    width: auto
+    padding: 3rem 2rem
+
+  .hero__overlay
+    width: 50%
+    height: 100%
+    top: 0
+
+  .env--pwp
+    .landing__title
+      text-align: right
+
+  .env--clinician
+    .landing__title
+      text-align: left
+
+@keyframes slide-from-right
+  0%
+    transform: translateX(50vw)
+    opacity: 0
+  100%
+    transform: translateX(0)
+    opacity: 1
+
+@keyframes slide-from-left
+  0%
+    transform: translateX(-50vw)
+    opacity: 0
+  100%
+    transform: translateX(0)
+    opacity: 1