1024.sass in slow-steps-0.3.0

- old
+ new

@@ -1,44 +1,44 @@
-// Navigation styling for breakpoint 768
+// Navigation styling for breakpoint 1024
 
-// Avoid declaring any styling like color etc.
-// These will be decalred in _sass/naviagtion/env/
-
-// Everything here will be included in EVERY .html
-
-$brand-height: 55%
-
 @media screen and ( min-width: 1024px )
 
+  .pwp-group-link, .clinician-group-link
+    display: flex
+
   .navbar
     @include default-trans
-    height: $navbar-height
     align-items: center
+    background-color: $env-primary
+    height: $navbar-height
 
+
   .nav-scrolled
     @include default-trans
     top: -$navbar-height
     .nav-group-content
       @include default-trans
       height: 10vh
     .nav-brand
       @include default-trans
       height: 8vh
-      top: 6vh
+      max-height: 100px
 
+  .nav-scrolled
+    background-color: $env-primary
+    // overwrite mobile
+
   .nav-brand
     @include default-trans
     display: flex
     position: absolute
     max-width: 160px
     height: 10vh
-    z-index: 999
     top: 7.5vh
 
     .site__logo
       position: absolute
-      top: (100% - $brand-height) / 2
       height: $brand-height
 
   .nav-list
     display: flex
     justify-content: flex-end
@@ -61,12 +61,16 @@
     opacity: 1
     margin: 0
     overflow: hidden
     position: relative
 
-  // Surround current link with lines
+  .sub-link,
+  .subsub-link
+    color: $env-primary
 
+
+  // Surround current link with ticks
   .current--url
     &:before, &:after
       content: ""
       display: inline-block
       height: 2px
@@ -82,30 +86,34 @@
       left: 0.5em
       margin-right: -10%
 
   .nav-group-content
     @include default-trans
+    @include navbar-color
     align-items: center
     justify-content: flex-end
     position: absolute
     top: 5vh
     left: 0
     width: 100vw
     padding: 0
     height: $secondary-navbar-height
     //max-height: 100px
-    backdrop-filter: blur(20px)
 
+    .current--url
+      &:before, &:after
+        background-color: $env-primary
+
   .nav-group-content .nav-link
     margin: 0
 
   .burger
     display: none
 
   .nav-subsub-content
     background-color: $pure-white
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
+    box-shadow: 1px 1px 1px rgba($pure-black, .1)
     visibility: hidden
     opacity: 0
     border-radius: 6px
     z-index: 1
     position: absolute
@@ -126,9 +134,18 @@
       position: absolute
       bottom: 100%
       border-radius: 2px
       transform: rotate(-45deg) translateY(14px)
       z-index: -1
+
+  .nav-group-container
+    .nav-link
+      font-weight: 400
+      text-transform: uppercase
+      padding: 1rem 3rem
+      &:not(.current--url)
+        &:hover
+          text-decoration: underline
 
   .nav-group-container:hover > .nav-subsub-content
     visibility: visible
     opacity: 1
     transform: translateY(0px)