update header style

src/css/header.css

@@ -9,20 +9,32 @@ body {
 }
 
 .navbar {
-  background: var(--navbar-background);
-  color: var(--navbar-font-color);
+  background: var(--color-white);
+  color: var(--color-bwg-main);
   font-size: calc(16 / var(--rem-base) * 1rem);
-  height: var(--navbar-height);
   position: fixed;
   top: 0;
   width: 100%;
   z-index: var(--z-index-navbar);
+  padding: .5rem 3rem;
+  max-height: 5rem;
 }
 
 .navbar a {
   text-decoration: none;
 }
 
+.navbar-logo {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background-image: url('../img/logo_color.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 10px;
+}
+
 .navbar-brand {
   display: flex;
   flex: auto;
@@ -36,10 +48,10 @@ body {
 .navbar-brand .navbar-item:first-child {
   align-self: center;
   padding: 0;
-  font-size: calc(22 / var(--rem-base) * 1rem);
+  font-size: calc(22 / var(--rem-base) * 1.25rem);
   flex-wrap: wrap;
   line-height: 1;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .navbar-brand .navbar-item:first-child a {
@@ -134,6 +146,7 @@ body {
   display: block;
   line-height: var(--doc-line-height);
   padding: 0.5rem 1rem;
+  margin: 0 0.5rem;
 }
 
 .navbar-item.has-dropdown {
@@ -229,7 +242,7 @@ body {
 
   .navbar-menu a.navbar-item:hover,
   .navbar-menu .navbar-link:hover {
-    background: var(--navbar-menu_hover-background);
+    /* background: var(--navbar-menu_hover-background); */
   }
 }
 
@@ -260,6 +273,22 @@ body {
     display: block;
   }
 
+  .navbar-link::before {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--navbar-font-color);
+    transition: width 0.3s ease-in-out;
+  }
+
+  .navbar-link:hover::before {
+    width: 100%;
+  }
+
   .navbar-link::after {
     border-width: 0 0 1px 1px;
     border-style: solid;
@@ -277,14 +306,30 @@ body {
 
   .navbar-end > .navbar-item,
   .navbar-end .navbar-link {
-    color: var(--navbar-font-color);
+    color: var(--color-jet-80);
   }
 
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover,
   .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
     color: var(--navbar-font-color);
+    font-weight: 600;
+  }
+
+  .navbar-end > a.navbar-item::after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--navbar-font-color);
+    transition: width 0.3s ease-in-out;
+  }
+
+  .navbar-end > a.navbar-item:hover::after {
+    width: 100%;
   }
 
   .navbar-end .navbar-link::after {

src/partials/header-content.hbs

 <header class="header">
   <nav class="navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">{{site.title}}</a>
+      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">
+        <i class="navbar-logo"></i>
+        {{site.title}}
+      </a>
       {{#if env.SITE_SEARCH_PROVIDER}}
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">