Navbar: fix transparent effect with !important and negative margin

Use !important to beat Docusaurus CSS. Pull section_page_top and
hero_container behind the sticky navbar with margin-top: -navbarHeight
so the section background shows through the transparent navbar.

Author: MMesch

src/components/home/Hero/styles.module.css

@@ -11,6 +11,7 @@
 .hero_container {
   background-color: var(--ifm-bg-brand);
   padding-bottom: var(--ifm-spacing-3xl);
+  margin-top: calc(-1 * var(--ifm-navbar-height));
 }
 
 .hero_body {

src/components/layout/styles.module.css

@@ -6,7 +6,8 @@
 }
 
 .section_page_top {
-  padding-top: var(--ifm-spacing-3xl);
+  margin-top: calc(-1 * var(--ifm-navbar-height));
+  padding-top: calc(var(--ifm-spacing-3xl) + var(--ifm-navbar-height));
 }
 
 .section_white {
@@ -36,7 +37,7 @@
   }
 
   .section_page_top {
-    padding-top: var(--ifm-spacing-2xl);
+    padding-top: calc(var(--ifm-spacing-2xl) + var(--ifm-navbar-height));
   }
 }
 

src/css/custom.css

@@ -351,13 +351,13 @@ a.menu__link:active {
 }
 
 html:not([data-navbar-scrolled]) .navbar {
-  --ifm-navbar-background-color: transparent;
-  --ifm-navbar-shadow: none;
+  background-color: transparent !important;
+  box-shadow: none !important;
 }
 
 html[data-navbar-scrolled] .navbar {
-  --ifm-navbar-background-color: var(--ifm-bg-neutral);
-  --ifm-navbar-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+  background-color: var(--ifm-bg-neutral) !important;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
 }
 
 /* Home page at top: white links over dark hero */