Update browse header style

Apply the `very-light-blue` background colour and remove inverse styles to update the text color from #fff to #0b0c0c.

app/assets/stylesheets/views/_browse.scss

@@ -1,23 +1,13 @@
 @import "govuk_publishing_components/individual_component_support";
 
-// This dark grey is the background colour for the browse pages.
-//
-// White text on this background gives a contrast ratio of 13.35 - this meets AA
-// and AAA for body and large text.
-//
-// The focus state's yellow gives a contrast ratio of 9.91 - this meets the AA
-// requirement for active user interface components (AAA requirement is not
-// defined for this).
-//
-// Requirements source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
-$browse-header-background-colour: #263135;
+$refresh-very-light-blue: #f4f8fb;
 
 // This isn't proper BEM - but the convention is to have the view name as the
 // block part of the class name. Because we need to keep `browse` so this can
 // be run as an A/B test, we need to use a different class name for each view.
 .browse__breadcrumb-wrapper,
 .browse__header-wrapper {
-  background-color: $browse-header-background-colour;
+  background-color: $refresh-very-light-blue;
 }
 
 .browse__breadcrumb-wrapper {
@@ -30,13 +20,6 @@ $browse-header-background-colour: #263135;
 .browse__header-wrapper {
   padding-bottom: govuk-spacing(7);
 
-  // A tiny white seam sometimes appears, despite there being no gap between
-  // this element and the previous element. This shifts the element up by a
-  // pixel to prevent the seam from appearing and adds padding to reposition the
-  // content.
-  border-top: 1px solid $browse-header-background-colour;
-  margin-top: -1px;
-
   @include govuk-media-query($from: "tablet") {
     padding-bottom: govuk-spacing(8);
     padding-top: govuk-spacing(6);

app/views/browse/index.html.erb

@@ -19,14 +19,12 @@
 <%= render "shared/browse_header", { margin_bottom: 9 } do %>
   <%= render "govuk_publishing_components/components/heading", {
     text: t("browse.title"),
-    inverse: true,
     font_size: "xl",
     margin_bottom: 6,
   } %>
   <%= render "govuk_publishing_components/components/lead_paragraph", {
     text: t("browse.description"),
     margin_bottom: 2,
-    inverse: true
   } %>
 <% end %>
 

app/views/browse/show.html.erb

@@ -23,14 +23,12 @@
 <%= render "shared/browse_header", { margin_bottom: page.slug == "benefits" ? 7 : 9 } do %>
   <%= render "govuk_publishing_components/components/heading", {
     text: page.title,
-    inverse: true,
     font_size: "xl",
     margin_bottom: 6,
   } %>
   <%= render "govuk_publishing_components/components/lead_paragraph", {
     text: page.description,
     margin_bottom: 2,
-    inverse: true
   } %>
 <% end %>
 

app/views/shared/_browse_breadcrumbs.html.erb

@@ -9,9 +9,7 @@
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
       <div class="<%= column_classes.join(' ') %>">
-        <%= render "application/breadcrumbs", {
-          inverse: true
-        } %>
+        <%= render "application/breadcrumbs" %>
       </div>
     </div>
   </div>