header styles update

website/source/assets/stylesheets/_header.scss

@@ -0,0 +1,82 @@
+//
+// Header
+// - Project Specific
+// - edits should be made here
+// --------------------------------------------------
+
+#header {
+  flex-direction: row;
+  background-color: $black;
+  .navbar-brand {
+    .logo{
+      color: $green;
+      padding-left: 36px;
+      font-size: 22px;
+      line-height: 77px;
+      background: image-url('../images/logo-header.png') 0 0 no-repeat;
+      @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
+      background-position: 0 center;
+
+      &:hover{
+        opacity: .6;
+      }
+    }
+
+    .by-hashicorp{
+      &:hover{
+        svg{
+          line{
+            opacity: .4;
+          }
+        }
+      }
+    }
+  }
+
+  .buttons{
+    margin-top: 2px; //baseline everything
+
+    .navigation-links{
+        float: right;
+    }
+  }
+
+  .main-links,
+  .external-links {
+    li > a {
+      @include project-a-style();
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  #header {
+    .navbar-brand {
+
+    }
+  }
+}
+
+@media (max-width: 414px) {
+  #header {
+    .navbar-brand {
+      .logo{
+        padding-left: 37px;
+        font-size: 18px;
+        @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75);
+        //background-position: 0 45%;
+      }
+    }
+  }
+}
+
+
+@media (max-width: 320px) {
+  #header {
+    .navbar-brand {
+      .logo{
+        font-size: 0 !important; //hide terraform text
+      }
+    }
+  }
+}

website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss

@@ -10,19 +10,18 @@ $project-logo-pad-left: 8px;
 
 // Mixins
 @mixin project-a-style{
-  color: $white;
-  font-weight: 400;
-  opacity: .75;
+  color: $green;
+  font-weight: 600;
+  letter-spacing: 0;
 
   &:hover{
     color: $white;
-    opacity: 1;
   }
 }
 
 @mixin project-footer-a-style{
   color: $black;
-  font-weight: 400;
+  font-weight: 600;
 
   &:hover{
     color: $green;
@@ -52,7 +51,7 @@ $project-logo-pad-left: 8px;
 
 @mixin project-svg-external-links-style{
   svg path{
-    fill: $black;
+    fill: $green;
   }
 
   &:hover{