slow-steps 0.1.1

data/_sass/env/pwp.sass

@@ -0,0 +1,181 @@
+
+
+.pwp__mast
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 90vh
+  height: calc( var(--vh, 1vh) * 90 )
+
+.pwp__bg
+  position: relative
+  height: 100%
+  width: 100%
+  background-image: url($baseurl + 'assets/img/landing__pwp-mobile.jpg')
+  background-size: cover
+  opacity: .7
+  filter: grayscale(1) contrast(.2) brightness(1.6)
+
+.pwp__overlay
+  position: relative
+  height: 100%
+  width: 100%
+  background-color: $env-primary
+
+.pwp--strap
+  position: absolute
+  color: $env-secondary
+  text-align: center
+  padding-top: $navbar-height
+
+
+.pwp--strap-start
+  color: $env-primary
+
+.pwp__follow
+  display: flex
+  position: absolute
+  bottom: 4.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)
+
+.pwp__device--img
+  background-size: cover
+  background-repeat: no-repeat
+  width: 100%
+  height: 0
+  padding-top: 62.5%
+  z-index: 99999
+
+.pwp__device--docked
+  background-image: url($baseurl + 'assets/img/pwp_device_group_docked.png')
+  svg
+    position: absolute
+    transform: translateY(-100%)
+
+.pwp__device--group
+  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
+  svg
+    position: absolute
+    transform: translateY(-100%)
+    //-height: 100vh
+
+.pwp__straps
+  text-align: center
+  //padding: 5rem 2rem
+  background-position: center
+  color: $env-secondary
+
+.pwp__device--strap
+  background-color: $opd-blue-trust
+  padding: 5rem 2rem
+  & > h2
+    padding: 2rem 0
+
+.pwp__grid-wrap
+  display: flex
+  flex-direction: column-reverse
+  width: 100vw
+
+.pwp__grid-col-r
+  svg
+    display: none
+    position: absolute
+
+.pwp__grid__text
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+  width: 100%
+  background-color: $env-primary
+  color: $white
+  padding: 4rem 0
+  .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
+
+.pwp__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)
+
+.pwp--guarantee
+  border-top: solid 1px $soft-white
+  width: 80%
+  margin: 3rem 0
+
+.pwp__grid_keywords
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  background-color: $opd-blue-trust
+  & > *
+    padding: 3rem 0
+    width: 50%
+
+
+.pulsating-circle
+  position: absolute
+  left: 75.5%
+  top: 52.5%
+  transform: translateX(-50%) translateY(-50%)
+  width: 8px
+  height: 8px
+
+  &::before
+    content: ''
+    position: relative
+    display: block
+    width: 300%
+    height: 300%
+    box-sizing: border-box
+    margin-left: -100%
+    margin-top: -100%
+    border-radius: 100px
+    background-color: rgb(252, 133, 133)
+    animation: pulse-ring 2s cubic-bezier(.01,.56,.2,.2) infinite
+
+  &::after
+    content: ''
+    position: absolute
+    left: 0
+    top: 0
+    display: block
+    width: 100%
+    height: 100%
+    background: radial-gradient(rgb(255, 176, 176), rgb(255, 107, 107))
+    border-radius: 100px
+
+
+@keyframes pulse-ring
+  0%
+    opacity: 1
+    transform: scale(.3)
+
+  80%
+    opacity: 0
+
+  100%
+    opacity: 0
+    transform: scale(1)

data/_sass/error-page.sass

@@ -0,0 +1,109 @@
+.error-page
+  background: #5A657A
+  min-height: 85vh
+  padding: 10vh 5vw 5vh
+
+  p,
+  h1
+    color: $white
+
+.robo
+  display: block
+  height: 50vh
+  margin: 0 auto
+  overflow: visible !important
+
+  #robot_1_,
+  #light_1_,
+  #leftEye_1_,
+  #rightEye_1_,
+  #leftArm_1_,
+  #rightArm_1_,
+  #shadow_1_
+    animation-direction: alternate
+    animation-iteration-count: infinite
+
+  #robot_1_,
+  #leftArm_1_,
+  #rightArm_1_,
+  #shadow_1_
+    animation-duration: 1s
+    animation-timing-function: ease-in-out
+
+  #robot_1_
+    animation-name: verticalAnimation
+
+  #light_1_
+    animation-duration: .5s
+    animation-name: blinkLight
+    animation-timing-function: steps(2)
+
+  #leftEye_1_,
+  #rightEye_1_
+    animation-duration: 1.8s
+    animation-name: blinkEye
+    animation-timing-function: linear
+    transform-origin: 50% 50%
+
+  #leftArm_1_
+    animation-name: moveLeftArm
+    transform-origin: 50% 10%
+
+  #rightArm_1_
+    animation-name: moveRightArm
+    transform-origin: 50% 10%
+
+  #shadow_1_
+    animation-name: shadowAnimation
+    transform-origin: 50%
+
+@keyframes wave
+  0%
+    transform: rotate(120deg)
+
+  100%
+    transform: rotate(170deg)
+
+@keyframes moveLeftArm
+  0%
+    transform: rotate(0)
+
+  100%
+    transform: rotate(4deg)
+
+@keyframes moveRightArm
+  0%
+    transform: rotate(0)
+
+  100%
+    transform: rotate(-4deg)
+
+@keyframes shadowAnimation
+  0%
+    opacity: .4
+    transform: scale(1)
+
+  100%
+    opacity: .6
+    transform: scale(1.15)
+
+@keyframes verticalAnimation
+  0%
+    transform: translateY(-10px)
+
+  100%
+    transform: translateY(10px)
+
+@keyframes blinkLight
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes blinkEye
+  0%
+    transform: scaleY(0)
+
+  4%
+    transform: scaleY(1)

data/_sass/feed.sass

@@ -0,0 +1,58 @@
+.feed__head
+  margin-top: ($navbar-height + $secondary-navbar-height)*1.5
+  width: 100vw
+
+.feed__title
+  margin: auto
+  text-align: center
+
+.post__feed
+  display: flex
+  justify-content: space-between
+  width: 80vw
+  max-width: 1200px
+  margin: 10vh auto
+
+.feed__card
+  display: flex
+  flex-direction: column
+  width: 30vw
+  max-width: 360px
+  height: 220px
+  margin-bottom: 10vh
+  overflow: hidden
+  border-radius: 12px
+  box-shadow: 0 0 6px rgba($env-primary,.8)
+  transition: .8s ease-in-out
+
+  &:hover
+    box-shadow: 2px 2px 10px rgba($env-primary,1)
+    .feed__card--image
+      transform: scale(1.1)
+    .feed__card--title
+      font-weight: 400
+      color: $pure-white
+
+.feed__card--image
+  display: block
+  object-fit: cover
+  object-position: top
+  width: 100%
+  height: 100%
+  overflow: hidden
+  transition: .8s ease-in-out
+
+.feed__card--text
+  background-color: $env-primary
+  padding: 2rem 1rem
+  color: $white
+  z-index: 1
+  font-size: $font-size * .7
+
+.feed__card--link
+  text-decoration: none
+  color: inherit
+  text-transform: uppercase
+
+.feed__card--meta
+  font-size: $font-size * .7

data/_sass/footer.sass

@@ -0,0 +1,23 @@
+.ft__wrap
+  max-width: 100vw
+  background-color: $opd-grey-neutral
+  padding: 3rem 2rem
+
+.ft__base
+  font-size: 1rem
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+
+.legal-links, .owner-links
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  a
+    text-decoration: none
+    color: $black
+  a, p
+    padding: .4rem 0
+
+.legal-links
+  text-align: right

data/_sass/footer_full.sass

@@ -0,0 +1,82 @@
+.ft-wrapper
+  background-color: $opd-blue-confidence
+  background-image: url('/assets/img/content/footer-bg.svg')
+  background-position: center
+  background-size: cover
+  color: $white
+  display: flex
+  flex-wrap: wrap
+  margin-top: 10vh
+  padding: 0
+
+.ft__head
+  display: flex
+  height: 10vh
+  min-height: 10vh
+  min-width: 100%
+  width: 100%
+
+.ft__body
+  display: flex
+  flex-wrap: wrap
+  margin: 0 2rem
+  width: 100%
+
+.ft__sitemap, .ft__contact
+  min-width: 100%
+  width: 100%
+
+.ft__base
+  min-width: 100%
+  width: 100%
+  display: flex
+  flex-wrap: nowrap
+  justify-content: space-between
+  align-items: center
+  border-top: solid 1px $opd-grey-neutral
+
+  a, p
+    padding-top: 0
+    margin: 0
+    font-size: 1.2rem
+    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%
+
+.ft__sitemap--header
+  border-bottom: 1px solid $opd-grey-neutral
+  color: $pure-white
+
+  &:not(:first-child)
+    &::before
+      content: 'GaitQ '
+
+.ft__sitemap--menu, .ft__sitemap--submenu
+  padding: 0
+  width: 100%
+
+.ft__sitemap--submenu
+  padding-bottom: 2rem
+  li
+    display: block
+    list-style: none
+    padding: .8rem 1.2rem
+    text-decoration: none
+
+.ft__sitemap--submenu li a
+  color: $white
+  text-decoration: none