slow-steps 0.1.2 → 0.1.7

data/_sass/global.sass

@@ -1,3 +1,11 @@
+/*  Last full read through 30/12/2020
+ *
+ *##############################################
+ *# Global                    /_sass/global.sass
+ *##############################################
+ *
+ */
+
 // 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
@@ -7,8 +15,36 @@
   -ms-transition: none !important
   -o-transition: none !important
 
+body
+  background-color: $white
+
 .fullwidth__wrap
-  width: 100vw
+  width: 90vw
+  max-width: 800px
+  margin: auto
+  margin-top: $navbar-height + $secondary-navbar-height + 5vh
+  & > p
+    padding: 3rem 0
+  & > ol li, ul li
+    padding: 1rem 0
+
+  .two__col
+    display: flex
+    flex-wrap: wrap
+    width: 100%
+
+  .two__col--elem
+    padding: 1rem 0
+
+  .two__col--left,
+  .two__col--right
+    width: 100%
+
+  .no--mobile
+    display: none
+
+.h-100
+  height: 100%
 
 .d-none
   display: none
@@ -16,27 +52,243 @@
 .d-block
   display: block
 
-.bg--dark
-  background-color: $opd-grey-neutral
-
 .bg--light
   background-color: $white
 
 .no-touch__wrap
   padding: 18vh 0 10vh 0
 
+// Hero div at the top of most pages
+.hero
+  align-items: center
+  display: flex
+  justify-content: center
+
+.hero-65
+  height: 65vh
+  height: calc(var(--vh, 1vh) * 65)
+
+.hero-90
+  height: 90vh
+  height: calc(var(--vh, 1vh) * 90)
+
+.hero__overlay
+  width: 100%
+  height: 100%
+  z-index: -1
+
+.hero__image
+  object-fit: cover
+  object-position: center
+  width: 100%
+
+.image__filter--mix
+  @include image-filter--mix
+
+.hero__strap
+  align-items: center
+  color: $white
+  display: flex
+  justify-content: center
+  margin: 0
+  position: absolute
+  text-align: center
+  width: 100vw
+
+  & > *
+    padding-top: 12px
+
+
+.hero__strap--center
+  //padding-top: $navbar-height
+
+  span
+    animation-duration: .1s
+    animation-fill-mode: forwards
+    animation-iteration-count: 1
+    animation-name: fadeInOpacity
+    opacity: 0
+
+.hero__strap--baseline
+  align-self: flex-end
+  flex-direction: column
+  padding-bottom: 5.5vh
+  padding-top: 2rem
+
+.hero__follow
+  align-items: center
+  border-radius: 30px
+  color: $white
+  display: flex
+  height: 11vh
+  justify-content: center
+  position: absolute
+  width: 30px
+  z-index: 2
+
+  &::after
+    content: '\2193'
+    font-size: 20px
+    transform: scaleY(2)
+
+
+// Block colors and sizes
+.strap--opd-trust
+  @include opd-blue-trust
+
+
+.strap__100
+  padding: 5rem 1rem
+  & > h2
+    padding: 1rem 0
+
+@media screen and ( min-width: 768px )
+
+  .strap__100
+    padding: 10rem 5rem
+    & > h2
+      padding-bottom: 5rem
+    & > p
+      max-width: 800px
+      margin: 0 auto
+
+
+// SVG augmenting text labels
+
+.svg__labels
+
+  & > *
+    fill: $white
+
+  & > .svg--elem
+    transition: .4s ease-in-out
+
+  & > .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)
+
+
+
+// SVG flashing LED used on env landing pages
+
+
+.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
+  animation: pulse-ring 2s $bezier-pulse infinite
+  fill: $led
+
+@keyframes pulse-ring
+  0%
+    opacity: .5
+    r: .1
+
+  50%
+    opacity: .2
+
+  100%
+    opacity: 0
+    r: 2
+
+
 // Social icons wraped in <a's
 .social
   color: $grey
   text-decoration: none
 
+.yaml--link
+  color: inherit
+  text-decoration: none
+  &:hover
+    color: $opd-blue-trust
+
+
 @media screen and ( min-width: 768px )
 
+  .fullwidth__wrap
+    .two__col--left
+      width: 30%
+
+    .two__col--right
+      width: 70%
+
+    .no--mobile
+      display: block
+
   .narrow__wrap
     width: 80vw
     max-width: 600px
     margin: 0 auto
 
+  .social--Facebook
+    &:hover
+      color: $facebook-primary
+
   .social--Twitter
     &:hover
       color: $twitter-primary
@@ -53,3 +305,51 @@
   .social--Email
     &:hover
       color: $opd-blue-trust
+
+
+// This is basically a button and should to be centralised
+.action__call
+  bottom: 0
+  font-size: $font-size * .8
+  margin: -100px auto
+  padding: 2rem
+  position: relative
+  text-decoration: none
+  transition: .2s ease
+
+  &:before
+    border-radius: 3rem
+    content: ''
+    display: block
+    height: 6rem
+    left: 0
+    position: absolute
+    top: 0
+    transition: .2s ease
+    width: 6rem
+
+  span
+    font-weight: 900
+    position: relative
+
+  svg
+    fill: none
+    margin-left: 10px
+    position: relative
+    stroke-linecap: round
+    stroke-linejoin: round
+    stroke-width: 2
+    top: 0
+    transform: translateX(-10px)
+    transition: .2s ease
+
+  &:hover
+    &::before
+      width: 100%
+
+    svg
+      stroke: $white
+      transform: translateX(0)
+
+    span
+      color: $white

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

@@ -5,7 +5,9 @@
 
 // Everything here will be included in EVERY .html
 
-@media screen and ( min-width: 768px )
+$brand-height: 55%
+
+@media screen and ( min-width: 1024px )
 
   .navbar
     height: $navbar-height
@@ -18,11 +20,12 @@
     height: 10vh
     z-index: 999
     top: 7.5vh
+    //align-items: center
 
     .site__logo
       position: absolute
-      top: 30%
-      height: 40%
+      top: (100% - $brand-height) / 2
+      height: $brand-height
 
   .nav-list
     display: flex

data/_sass/navigation/env/clinician.sass

@@ -1,16 +1,7 @@
 // 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
+  @include logo-color($env-primary)
 
 
 // on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link

data/_sass/navigation/env/landing.sass

@@ -7,13 +7,10 @@
 // Navbar site logo
 // make sure we don't style any other instance so nest with .nav-brand
 .nav-brand
-  .site__logo--curve,
-  .site__logo--legvert,
-  .site__logo--leg45,
-  .site__logo--g,
-  .site__logo--a,
-  .site__logo__i,
-  .site__logo--t,
-  .site__logo--Q
+  @include logo-color($white)
+  height: 14rem
+  transform: translateY(10vh)
 
-    fill: $white
+@media screen and ( min-width: 1024px )
+  .nav-brand
+    transform: translateY(-10vh)

data/_sass/navigation/env/pwp.sass

@@ -2,20 +2,7 @@
 // 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
-      fill: $opd-orange-confidence
-    .site__logo--legvert
-      fill: $opd-blue-confidence
-    .site__logo--leg45
-      fill: $opd-blue-trust
-    .site__logo--g,
-    .site__logo--a,
-    .site__logo__i,
-    .site__logo--t
-      fill: $opd-blue-confidence
-    .site__logo--Q
-      fill: $opd-orange-confidence
+  @include logo-primary-colors
 
 // on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link
 .clinician-group, .gaitq-group

data/_sass/navigation/global.sass

@@ -18,6 +18,15 @@
   width: 100%
   z-index: 99
 
+  .social-media-link
+    color: $white
+    transform: translateX(20px)
+    font-size: $font-size * .8
+    &:hover
+      text-shadow: 3px 3px 6px rgba($black, .2)
+      font-size: $font-size * 1.2
+
+
 .nav-brand
   width: 30vw
   padding-left: 3vw