slow-steps 0.1.1

data/_sass/forms/mc-forms.sass

@@ -0,0 +1,193 @@
+.form__wrap
+  padding: 5rem 2rem
+  background-color: $pure-white
+
+.form__block
+  display: flex
+  flex-flow: wrap
+  justify-content: space-between
+
+.form--title
+  padding-bottom: 2rem
+
+.form--strap
+  padding-bottom: 5rem
+
+.form__elem
+  display: flex
+  flex-direction: column
+
+.form--elem
+  padding: 1.1rem 0
+
+.form--label
+  padding: 1rem 0
+  padding-top: 2rem
+
+.form--input
+  text-indent: 1rem
+
+  &:focus
+    background-color: rgba($env-primary , .1)
+
+.form--textarea
+  padding-left: 1rem
+
+
+/* Switch
+.checkbox-label
+  display: none
+
+.checkbox-label--mod
+  padding: 3rem 0 0
+  margin: 0
+  cursor: pointer
+  display: flex
+  flex-wrap: nowrap
+  flex-direction: row
+  justify-content: space-between
+  p
+    padding: 0
+    margin: 0
+
+.styled-checkbox__block
+  display: flex
+  flex-direction: column
+  justify-content: center
+
+  .yes
+    display: none
+    padding: .8rem 0
+    width: 100%
+    text-align: center
+
+  .icon
+    cursor: pointer
+    //width: 10%
+    //margin: 2rem
+
+input.switch
+  cursor: pointer
+
+.checkbox-label--mod .no
+  text-align: center
+  padding: .8rem 0
+  width: 100%
+
+input.switch
+  &:checked
+    + .icon
+      background: $opd-blue-trust
+
+    ~
+      .yes
+        display: block
+        transition: all .2s ease-in-out
+
+      .no
+        display: none
+        transition: all .2s ease-in-out
+
+  appearance: none
+  outline: none
+  display: none
+
+.checkbox-label--mod .icon
+  position: relative
+  width: 40px
+  height: 24px
+  border-radius: 12px
+  background-color: $env-primary
+  box-shadow: inset 0px 0px 4px -2px rgba(0, 0, 0, 0.1)
+  cursor: pointer
+  outline: none
+  transition: all .2s ease-in-out
+
+  .icon--elem
+    position: absolute
+    content: ''
+    width: 25.72px
+    height: 25.72px
+    border-radius: 50%
+    background-color: $pure-white
+    transform: scale(0.7)
+    left: 0
+    top: calc(50% - 13px)
+    transition: all .2s ease-in-out
+
+    &:before
+      content: ''
+      position: absolute
+      width: 2px
+      height: 8px
+      background: blue
+      top: calc(50% - 4px)
+      left: calc(50% - 1px)
+      background: $env-primary
+
+.styled-checkbox:checked
+  background: $opd-orange-confidence
+
+  + .icon span
+    left: calc(100% - 25.732px)
+
+    &:before
+      background: $opd-blue-trust
+
+.content__gdpr
+  display: flex
+  flex-wrap: wrap
+
+.content__gdprBlock
+  border-top: solid 2px $env-primary
+
+  fieldset
+    border: none
+    padding: 0
+    width: 100%
+
+.gdpr--title
+  padding: 4rem 0 2rem
+
+.content__gdprLegal
+  font-size: 1.8rem
+  padding: 2rem 0
+  a
+    text-decoration: none
+    color: $env-primary
+#mc-embedded-subscribe
+  border-radius: 6px
+  background-color: $pure-white
+  border: solid 1px $env-primary
+  color: $env-primary
+  padding: 1.6rem 5rem
+  text-align: center
+  text-decoration: none
+  cursor: pointer
+  //display: inline-block
+  font-size: 1.6rem
+  margin: 5rem 0 0
+  transition: .2s ease-in-out
+  &:hover
+    transform: scale(.99)
+    color: $pure-white
+    background-color: $env-primary
+
+.mc--full
+  width: 100%
+
+.mc--half
+  width: 100%
+
+.mc-asterisk
+  color: $env-primary
+
+
+@media screen and ( min-width: 768px )
+  .mc--half
+    width: 45%
+
+  .form__wrap
+    padding: 5rem
+    background-color: $pure-white
+    border-radius: 20px

data/_sass/global.sass

@@ -0,0 +1,55 @@
+// 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
+  -moz-transition: none !important
+  -ms-transition: none !important
+  -o-transition: none !important
+
+.fullwidth__wrap
+  width: 100vw
+
+.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
+
+// Social icons wraped in <a's
+.social
+  color: $grey
+  text-decoration: none
+
+@media screen and ( min-width: 768px )
+
+  .narrow__wrap
+    width: 80vw
+    max-width: 600px
+    margin: 0 auto
+
+  .social--Twitter
+    &:hover
+      color: $twitter-primary
+
+  .social--LinkedIn
+    &:hover
+      color: $linkedin-primary
+
+  .social--Instagram
+    &:hover
+      color: $instagram-primary
+
+  .social--Website,
+  .social--Email
+    &:hover
+      color: $opd-blue-trust

data/_sass/navigation/_variables.sass

@@ -0,0 +1,30 @@
+// This is where we setup the apperance of the navigation. Note, the contents is picked up from _data/menu.yml and written into _inludes/navbar.html
+
+// We have two key sass files, _sass/navbar/mobile.sass and .../desktop.sass
+
+// The mobile.sass is loaded first whilst a breakpoint controls the desktop.sass
+
+
+// ************* Dimesions *************
+
+// Applies to ALL displays
+$navbar-height: 5vh
+
+$mobile-navbar-height: 10vh
+
+$secondary-navbar-height: 10vh
+
+// change .nav-list.height manually in _sass/navbar/mobile.sass, can't figure out how to use calc --vh whith sass var
+$nav-list-height: 85vh
+
+// ************* Colours *************
+
+// see _sass/colors/_variables.sass
+
+// ************* Animations *************
+
+$nav-slider-transition: transform .4s ease-in
+
+$nav-ani-bg-hover: background-color .2s ease-in
+
+$nav-ani-color-hover: color .2s ease-in

data/_sass/navigation/breakpoints/768.sass

@@ -0,0 +1,84 @@
+// Navigation styling for breakpoint 768
+
+// Avoid declaring any styling like color etc.
+// These will be decalred in _sass/naviagtion/env/
+
+// Everything here will be included in EVERY .html
+
+@media screen and ( min-width: 768px )
+
+  .navbar
+    height: $navbar-height
+    align-items: center
+
+  .nav-brand
+    display: flex
+    position: absolute
+    max-width: 160px
+    height: 10vh
+    z-index: 999
+    top: 7.5vh
+
+    .site__logo
+      position: absolute
+      top: 30%
+      height: 40%
+
+  .nav-list
+    display: flex
+    justify-content: flex-end
+    align-items: center
+    height: inherit
+    top: 0
+    transform: none
+    border-top: none
+    height: 5vh
+    padding: 0
+    background-color: inherit
+
+  .nav-group
+    padding: 0 2rem
+
+  .nav-link
+    align-items: center
+    padding: 0
+    height: auto
+    opacity: 1
+    margin: 0
+    overflow: hidden
+
+  // Surround current link with lines
+
+  .current--url
+    &:before, &:after
+      content: ""
+      display: inline-block
+      height: 2px
+      position: relative
+      vertical-align: middle
+      width: 6%
+
+    &:before
+      right: 0.5em
+      margin-left: -10%
+
+    &:after
+      left: 0.5em
+      margin-right: -10%
+
+  .nav-group-content
+    align-items: center
+    justify-content: flex-end
+    position: absolute
+    top: 5vh
+    left: 0
+    width: 100vw
+    padding: 0
+    height: $secondary-navbar-height
+    backdrop-filter: blur(20px)
+
+  .nav-group-content .nav-link
+    margin: 0
+
+  .burger
+    display: none

data/_sass/navigation/burger.sass

@@ -0,0 +1,38 @@
+
+// Burger at the top right of small displays
+.burger
+  cursor: pointer
+  display: block
+  padding-right: 3vw
+  z-index: 999
+  & > div
+    height: 2px
+    margin: 7px
+    width: 25px
+
+.burger-line-1
+  transition: width .6s ease-in-out
+
+.burger-line-2
+  transition: width .3s ease-in-out
+
+
+.burger-active
+  .burger-line-1
+    width: 8px
+    // reduce by 17 px
+
+  .burger-line-2
+    width: 17px
+    // reduce by 8 px
+
+// For links as the slider opens
+// the timings are set in mobile-nav-slider.js
+@keyframes navLinksFade
+  from
+    opacity: 0
+    transform: translateY(20px)
+
+  to
+    opacity: 1
+    transform: translateY(0)

data/_sass/navigation/env/clinician.sass

@@ -0,0 +1,45 @@
+// Navbar site logo
+// make sure we don't style any other instance so nest with .nav-brand
+.nav-brand
+  .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: $env-primary
+
+
+// on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link
+.pwp-group, .gaitq-group
+  display: none
+
+
+@media screen and ( min-width: 768px )
+  .pwp-group-link, .clinician-group-link
+    display: flex
+
+  .nav-group-content
+    background-color: $env-primary
+    border-top: 1px solid rgb(118, 133, 164)
+
+  .clinician-group
+    display: flex
+    align-items: center
+    width: 100vw
+    height: 15vh
+    left: 0
+    flex-direction: row
+
+  .nav-group-content
+
+    .nav-link
+      font-weight: 400
+      color: $env-primary
+      text-transform: uppercase
+      padding: 0 3rem
+      &:hover
+        text-decoration: underline