Fix style lint error in navigation CSS module, and implementation error on 'invisible' class being set in inline style in BaseLayout.astro

Author: webstackdev

src/components/Navigation/menu.module.css

@@ -85,6 +85,12 @@
   overflow: hidden;
 }
 
+:global(#header.aria-expanded-true) .mainNavMenu:global(.menu-visible) .mainNavItem {
+  opacity: 1;
+  transform: translateY(0);
+  z-index: var(--z-mobile-menu);
+}
+
 :global(#header.aria-expanded-true) .mainNavMenu:global(.menu-visible) .mainNavItem:nth-child(1) {
   transition-delay: 0.15s;
 }
@@ -125,6 +131,12 @@
   transition-delay: 0.6s;
 }
 
+:global(#header.aria-expanded-true) .mainNavItem a {
+  color: var(--color-bg) !important;
+  opacity: 1;
+  z-index: var(--z-mobile-menu-item) !important;
+}
+
 :global(#header.aria-expanded-true) .mainNavMenu:global(.menu-visible) .mainNavItem a {
   color: var(--color-bg);
   letter-spacing: 0.38rem;
@@ -164,6 +176,7 @@
   z-index: var(--z-mobile-splash);
 }
 
+/* stylelint-disable-next-line selector-max-specificity */
 :global(#header.aria-expanded-true #mobile-splash::after) {
   transform: translate(50%, -50%) scale(1);
 }
@@ -192,18 +205,6 @@
   opacity: 1;
 }
 
-:global(#header.aria-expanded-true) .mainNavMenu:global(.menu-visible) .mainNavItem {
-  opacity: 1;
-  transform: translateY(0);
-  z-index: var(--z-mobile-menu);
-}
-
-:global(#header.aria-expanded-true) .mainNavItem a {
-  color: var(--color-bg) !important;
-  opacity: 1;
-  z-index: var(--z-mobile-menu-item) !important;
-}
-
 @media (width <= 1023px) {
   :global(#header.aria-expanded-true) .mainNavMenu .mainNavItem a {
     text-decoration: none !important;

src/layouts/BaseLayout.astro

@@ -76,7 +76,7 @@ const {
     {/* Visibility set to hidden is a FOUC trick. It is set to 'visible' once */}
     {/* the current data-theme value for the <> element is checked and set */}
     {/* in components/Head/ThemeInit.astro */}
-    <body style="invisible">
+    <body class="invisible">
       {/* Cookie Consent Overlay */}
       <CookieConsent />
       {/* Skip to main content link for accessibility */}