slow-steps 0.3.1 → 0.4.2

data/_sass/forms/mc-forms.sass

@@ -191,3 +191,12 @@ input.switch
     padding: 5rem
     background-color: $pure-white
     border-radius: 20px
+
+
+.response
+  padding: 2rem 0
+
+.mce_inline_error
+  padding: 1rem 0
+  font-size: $sm-font-size
+  color: $led

data/_sass/global.sass

@@ -87,6 +87,7 @@ body
   object-fit: cover
   object-position: center
   width: 100%
+  display: inherit
 
 .image__filter--mix
   @include image-filter--mix
@@ -101,9 +102,35 @@ body
   text-align: center
   width: 100vw
 
-  & > *
+
+  & > p
+    opacity: 0
     padding-top: 12px
+    animation: fadeInAnimation ease 1s
+    animation-delay: .8s
+    animation-iteration-count: 1
+    animation-fill-mode: forwards
+
+  & > h1, h2, h3, h4, h5
+    animation: zoomInAnimation ease .6s
+    animation-iteration-count: 1
+    animation-fill-mode: forwards
+
+@keyframes zoomInAnimation
+  0%
+    transform: scale(0)
+    opacity: 0
+
+  100%
+    transform: scale(1)
+    opacity: 1
 
+@keyframes fadeInAnimation
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
 
 .hero__strap--center
   //padding-top: $navbar-height
@@ -180,7 +207,8 @@ body
     stroke-width: 1
 
   & > .svg--text
-    font-size: $font-size * .8
+    font-size: $lg-font-size
+    font-weight: $heavy-font
 
 .svg__labels.hidden
 
@@ -208,6 +236,13 @@ body
   & > .trans-right
     animation: trans-in-right .6s ease-in-out
 
+// This is digusting! We need to tweak the actual html so we can readilly access these elements.
+.svg__labels--red
+  & > svg > * > *
+    fill: darken($opd-coral, 10)
+  & > svg > * > line
+    stroke: darken($opd-coral,10)!important
+
 
 $svg-text-offset: 60px
 
@@ -261,6 +296,7 @@ $svg-text-offset: 60px
   display: flex
   padding: 0
   margin: 0
+  line-height: 0
 
 .social-media-item
   list-style: none
@@ -314,9 +350,8 @@ $svg-text-offset: 60px
 
 // This is basically a button and should to be centralised
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
+  font-size: $font-size
+  margin: 0 auto
   padding: 2rem
   position: relative
   text-decoration: none
@@ -327,14 +362,14 @@ $svg-text-offset: 60px
     content: ''
     display: block
     height: 6rem
-    left: 0
+    left: -1rem
     position: absolute
-    top: 0
+    top: .5rem
     transition: .2s ease
     width: 6rem
 
   span
-    font-weight: 900
+    font-weight: $heavy-font
     position: relative
 
   svg
@@ -358,3 +393,49 @@ $svg-text-offset: 60px
 
     span
       color: $white
+
+
+.cc-window
+  background-color: $opd-blue
+  display: flex
+  align-items: center
+  position: fixed
+
+.cc-message
+  width: 80vw
+  padding: 3rem 2rem
+  color: $pure-white
+
+.cc-compliance
+  width: 20vw
+  border-style: none
+  height: 100%
+
+
+
+.cc-dismiss
+  display: flex
+  flex-wrap: nowrap
+  background-color: $opd-coral
+  border-style: none
+  color: $pure-white
+  border-radius: 6px
+
+  &:hover
+    background-color: lighten($opd-coral, 10)
+
+.cc-link
+  text-decoration: none
+  color: lighten($opd-coral, 10)
+
+  &:hover
+    color: $opd-coral
+
+
+.skip-link
+  margin: 0
+  position: absolute
+  padding: 0
+  width: 1px
+  height: 1px
+  overflow: hidden

data/_sass/navigation/_variables.sass

@@ -6,15 +6,15 @@
 
 $navbar-height: 5vh
 
-$mobile-navbar-height: 10vh
-
 $secondary-navbar-height: 10vh
 
 $brand-height: 55%
 
 // 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
+$mobile-navbar-height: 10vh
+
+$mobile-nav-list-height: 90vh
 
 // ************* Colours *************
 

data/_sass/navigation/base.sass

@@ -28,20 +28,23 @@
   width: 30vw
   padding-left: 3vw
   z-index: 1
+  margin-top: .7rem
+  // fudge fix for G making logo apear off-centre
 
   .site__logo *
     @include default-trans
 
+
 .nav-list
   border-bottom-left-radius: 80px
   font-size: 1.3rem
-  height: $nav-list-height
-  height: calc( var(--vh, 1vh) * 85 )
+  height: $mobile-nav-list-height
+  height: calc( var(--vh, 1vh) * #{ strip-unit($mobile-nav-list-height)} )
   list-style: none
   margin: 0
-  margin-block-start: 0
+  margin-block-start: calc( var(--vh, 1vh) * #{ strip-unit($mobile-navbar-height)} )
   padding: 0
-  padding-top: 15vh
+  padding-top: 0
   position: absolute
   right: 0
   top: 0
@@ -50,6 +53,12 @@
   width: 100vw
   box-sizing: content-box
   background-color: $env-primary
+  overflow: scroll
+
+.nav-group-content
+  //text-indent: 2rem
+  .nav-link
+    margin: 3vh 20vw
 
 .nav-link
   margin: 6vh 15vw
@@ -68,6 +77,7 @@
 .nav-active
   // we toggle this class in mobile-nav-slider.js on burger click
   transform: translateX(0%)
+  box-shadow: -.2px .2px 0 rgba($pure-black, .3)
 
 
 .site__logo-active

data/_sass/navigation/breakpoints/1024.sass

@@ -21,7 +21,8 @@
     .nav-brand
       @include default-trans
       height: 8vh
-      max-height: 100px
+      //max-height: 100px
+      // max-height breaks vertical centering
 
   .nav-scrolled
     background-color: $env-primary
@@ -31,9 +32,11 @@
     @include default-trans
     display: flex
     position: absolute
-    max-width: 160px
+    //max-height: 100px
+    // max-height breaks vertical centering
     height: 10vh
     top: 7.5vh
+    margin-top: 0
 
     .site__logo
       position: absolute
@@ -50,10 +53,21 @@
     height: 5vh
     padding: 0
     background-color: inherit
+    box-shadow: none
+    margin-block-start: 0
+    padding: 0
+    overflow: visible
 
   .nav-group
     padding: 0 2rem
 
+  .nav-group-content
+    //text-indent: 2rem
+    &:last-child
+      margin-right: 10rem
+    .nav-link
+      margin: 0
+
   .nav-link
     align-items: center
     padding: 0
@@ -63,10 +77,31 @@
     overflow: hidden
     position: relative
 
+
   .sub-link,
   .subsub-link
     color: $env-primary
+    border-bottom: solid 1px $pure-white
+    span
+      padding: 1rem 0
 
+  .nav-cta
+    @include default-trans
+    color: $pure-white
+    background-color: $env-primary
+    padding: 2rem 2rem!important
+    margin-right: 8rem!important
+    border-radius: 6px
+
+    span
+      padding: 0
+
+    &:before, &:after
+      display: none!important
+
+    &:hover
+      background-color: darken($env-primary,10)
+      border-bottom: none
 
   // Surround current link with ticks
   .current--url
@@ -76,15 +111,18 @@
       height: 2px
       position: relative
       vertical-align: middle
-      width: 6%
+      width: 6px
 
     &:before
-      right: 0.5em
-      margin-left: -10%
+      right: 3px
 
     &:after
-      left: 0.5em
-      margin-right: -10%
+      left: 3px
+
+  .current--env
+    span
+      border-bottom: solid 1px $pure-white
+
 
   .nav-group-content
     @include default-trans
@@ -139,12 +177,13 @@
 
   .nav-group-container
     .nav-link
-      font-weight: 400
+      font-weight: $heavy-font
       text-transform: uppercase
       padding: 1rem 3rem
       &:not(.current--url)
         &:hover
-          text-decoration: underline
+          span
+            border-bottom: solid 1px $env-primary
 
   .nav-group-container:hover > .nav-subsub-content
     visibility: visible

data/_sass/navigation/burger.sass

@@ -4,7 +4,7 @@
   cursor: pointer
   display: block
   padding-right: 3vw
-  z-index: 1
+  z-index: 1000
   & > div
     background-color: $burger-color
     height: 2px

data/_sass/typography/_variables.sass

@@ -20,6 +20,6 @@ $xlight-font: 100
 
 $light-font: 200
 
-$medium-font: 300
+$medium-font: 400
 
 $heavy-font: 600

data/_sass/typography/resets.sass

@@ -29,11 +29,11 @@ h3,
 h4,
 h5,
 h6
-  font-weight: 400
+  font-weight: $heavy-font
 
 p,
 a
-  font-weight: 200
+  font-weight: $medium-font
 
 
 .center-text

data/assets/css/env/gaitq_clinician.sass

@@ -47,7 +47,7 @@ $baseurl: '{{ site.baseurl }}/'
 
 @import 'collage'
 
-@import 'footer_full'
+@import 'footer_redesign'
 
 @import 'aos-overrides'
 

data/assets/css/env/gaitq_landing.sass

@@ -26,7 +26,7 @@ $baseurl: '{{ site.baseurl }}/'
 
 
 
-@import 'footer_full'
+@import 'footer_redesign'
 
 @import 'aos-overrides'
 

data/assets/css/env/gaitq_pwp.sass

@@ -49,7 +49,7 @@ $baseurl: '{{ site.baseurl }}/'
 
 // Footer
 
-@import 'footer_full'
+@import 'footer_redesign'
 
 @import 'aos-overrides'
 

data/assets/css/gaitq_errors.sass

@@ -7,8 +7,20 @@
 
 @import 'typography/_variables'
 
-@import '_colors/_variables'
+@import 'typography/resets'
+
+@import 'typography/branding'
+
+@import '_colors/collection'
 
 @import 'error-page'
 
 @import 'navigation/no-nav'
+
+// Footer
+
+@import 'footer_redesign'
+
+@import 'aos-overrides'
+
+@import 'global'

data/assets/js/mobile-nav-slider.js

@@ -6,7 +6,7 @@ const navSlide = ()=>{
   const navBar = document.querySelector('.navbar');
 
   // watch for touch clicks on the burger
-  burger.addEventListener('touchstart', () => {
+  burger.addEventListener('click', () => {
     // animate accordinaly
     navSlider.classList.toggle('nav-active');
     brand.classList.toggle('site__logo-active');