navigation tweaks for new tab style btn

Author: bulletfactory

_sass/components/_buttons.scss

@@ -18,8 +18,9 @@
 
 .btn--primary {
   @include font-smoothing;
-  border-color: $color-blue;
-  background: $color-blue;
+  border-color: #3dbfe4;
+  //background: $color-blue;
+  background: linear-gradient(to right, #40c3e3, #3dbfe4) no-repeat;
   color: $color-white;
 
   &:hover {

_sass/layout/_page-header.scss

@@ -174,29 +174,40 @@
   @media (min-width: $bp-nav) {
     display: inline-block;
     margin-bottom: 0;
+    position: absolute;
+    right: 0;
   }
 }
 
 .site-nav__item {
   display: block;
-  padding: rem-calc(0 15);
+  padding: rem-calc(0 12); // was 0 15
 
   @media (min-width: $bp-nav) {
     display: inline-block;
   }
+
+  &:last-child {
+    margin-right: 0;
+    padding-right: 0;
+  }
 }
 
 .site-nav__button.btn--primary {
 position: relative;
-top: rem-calc(-90);
-right: rem-calc(10px);
+@media (min-width: $bp-nav) {
+  top: rem-calc(-84);
+  right: rem-calc(-10);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  }
 }
 
 .site-nav__actions > .site-nav__item {
   padding: rem-calc(0 7);
 
   &:last-child {
-    //padding-right: 0;
+    margin-right: 0;
   }
 }
 
@@ -219,7 +230,7 @@ right: rem-calc(10px);
 .smaller .site-nav__link {
   @media (min-width: $bp-nav) {
     display: block;
-    height: rem-calc(75);
+    height: rem-calc(62);
     padding-top: rem-calc(18);
     color: $color-white;
 
@@ -229,6 +240,13 @@ right: rem-calc(10px);
   }
 }
 
+.smaller .site-nav__item {
+  &:last-child {
+    padding-right: 0;
+    margin-right: 0;
+  }
+}
+
 .smaller .site-nav__button.btn--gradient {
   @include at-least(small) {
     @include font-smoothing;
@@ -247,15 +265,41 @@ right: rem-calc(10px);
   }
 }
 
+// .smaller .site-nav__button.btn--primary {
+//   position: relative;
+// top: 0;
+// right: 0;
+//   @include at-least(small) {
+//     border-color: $color-white;
+//     background: $color-white;
+//     color: $color-curious-blue;
+//     border-top-left-radius: $border-radius;
+//     border-top-right-radius: $border-radius;
+//     &:hover {
+//       @include font-smoothing;
+//       background: transparent;
+//       color: $color-white;
+//     }
+//   }
+// }
+
 .smaller .site-nav__button.btn--primary {
   position: relative;
-top: 0;
-right: 0;
+  top: 0;
+  right: 0;
+  @media (min-width: $bp-nav) {
+    top: rem-calc(-41);
+    line-height: 2.25;
+    right: 0;
+    height: rem-calc(36);
+    border: 1px solid $color-white;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   @include at-least(small) {
     border-color: $color-white;
     background: $color-white;
     color: $color-curious-blue;
-
     &:hover {
       @include font-smoothing;
       background: transparent;

_sass/utils/_variables.scss

@@ -31,7 +31,7 @@ $color-anakiwa:       #78e0ff;
 $color-aquamarine:    #6bc7e3;
 
 
-
+$border-radius: rem-calc(4);
 // Font-size scale (Based on http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/)
 // ---------------------------------------------------------------------------
 
@@ -54,4 +54,4 @@ $font-size-milli:     rem-calc(10);
 $bp-small: rem-calc(650);
 $bp-medium: rem-calc(992);
 $bp-large: rem-calc(1200);
-$bp-nav: rem-calc(960); // width used for nav menu breakpoints
+$bp-nav: rem-calc(970); // width used for nav menu breakpoints

_sass/utils/mixins/_buttons.scss

@@ -20,5 +20,5 @@
   cursor: pointer;
   vertical-align: middle;
   user-select: none;
-  border-radius: rem-calc(4);
+  border-radius: $border-radius;
 }