header styles complete + subpage

website/source/assets/stylesheets/_header.scss

@@ -4,17 +4,41 @@
 // - edits should be made here
 // --------------------------------------------------
 
+body.page-sub{
+    #header{
+        background-color: $purple;
+
+        .navbar-brand {
+            .logo{
+                &:hover{
+                    color: $black;
+                }
+            }
+            .by{
+                &:hover{
+                    svg{
+                        line{
+                            stroke: $black;
+                        }
+                    }
+                }
+            }
+        }
+      }
+}
+
 #header {
     .navbar-brand {
         .logo{
-            color: $black;
-            font-size: 28px;
+            font-size: 20px;
+            text-transform: uppercase;
+            @include lato-light();
             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-size, $project-logo-size);
-            background-position: 0 center;
+            @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
+            background-position: 0 45%;
 
             &:hover{
-				color: $orange;
+				color: $purple;
 			}
         }
 
@@ -35,11 +59,11 @@
 
         ul.navbar-nav{
             li {
-                &:hover{
-                    svg path{
-                        fill: $purple;
-                    }
-                }
+                // &:hover{
+                //     svg path{
+                //         fill: $purple;
+                //     }
+                // }
 
                 svg path{
                     fill: $white;
@@ -52,7 +76,6 @@
     .external-links {
         li > a {
             @include project-a-style();
-            font-weight: 400;
         }
     }
 }

website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss

@@ -6,13 +6,18 @@
 
 #header {
     position: relative;
-    color: $white;
+    color: black;
     text-rendering: optimizeLegibility;
     margin-bottom: 0;
     transition: all 1s ease;
 
     &.white{
+      color: white;
       .navbar-brand {
+          .logo {
+            color: white;
+          }
+
           .by{
               color: white;
               font-weight: 300;
@@ -27,6 +32,27 @@
               }
           }
       }
+
+      .main-links,
+      .external-links {
+          li > a {
+              &:hover{
+                opacity: 1;
+              }
+          }
+      }
+
+      .nav > li > a:hover, .nav > li > a:focus {
+          color: white;
+      }
+
+      .navbar-header{
+          .navbar-toggle{
+              .icon-bar{
+                  border: 1px solid white;
+              }
+          }
+      }
     }
 
     .navbar-header{
@@ -54,8 +80,9 @@
             vertical-align:top;
             padding: 0;
             line-height: $header-height;
-            padding-left: $project-logo-size + $project-logo-pad-left;
+            padding-left: $project-logo-width + $project-logo-pad-left;
             background-position: 0 center;
+            @include transition(all 300ms ease-in);
 
             &:hover{
 				@include transition(all 300ms ease-in);
@@ -106,6 +133,7 @@
                 }
                 line{
                   stroke: black;
+                  @include transition(all 300ms ease-in);
 
                   &:hover{
                       @include transition(all 300ms ease-in);
@@ -120,12 +148,12 @@
             position: relative;
 
             svg path{
-                @include transition( all 0.3s ease );
+                @include transition( all 300ms ease-in );
             }
 
             &:hover{
                 svg path{
-                    @include transition( all 0.3s ease );
+                    @include transition( all 300ms ease-in );
                 }
             }
 
@@ -164,6 +192,6 @@
     .nav > li > a:hover, .nav > li > a:focus {
         background-color: transparent;
         color: $black;
-        @include transition( color 0.3s ease );
+        @include transition( all 300ms ease-in );
     }
 }

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

@@ -29,10 +29,10 @@ $nav-margin-right: 12px;
     padding: 0;
     line-height: 22px;
     @include hashi-a-style-core();
-    @include transition( color 0.3s ease );
+    @include transition( all 300ms ease-in );
 
     &:hover{
-        @include transition( color 0.3s ease );
+        @include transition( all 300ms ease-in );
         background-color: transparent;
     }
 }

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

@@ -4,14 +4,17 @@
 // --------------------------------------------------
 
 // Variables
-$project-logo-size: 40px;
+$project-logo-width: 38px;
+$project-logo-height: 40px;
 $project-logo-pad-left: 8px;
 
 // Mixins
 @mixin project-a-style{
     color: $white;
+    font-weight: 300;
+    opacity: .75;
 
     &:hover{
-        color: $purple;
+        color: $white;
     }
 }

website/source/layouts/_sidebar.erb

@@ -7,7 +7,7 @@
     <div class="sidebar-header header-cover">
         <!-- Sidebar brand image -->
         <div class="sidebar-image">
-            <img src="<%= image_path('logo-header@2x.png') %>" width="50px" height="50px">
+            <img src="<%= image_path('logo-header-black@2x.png') %>" width="50px" height="56px">
         </div>
     </div>