Mobile Gnav Redesign for Adobe Home (#3151)

* fix the popup showing up for a split second when the hamburger menu is first opened

* Undid the previous commit because it didn't work

* switched out animations to transitions for fedspopup

* Made section buttons have a margin while regular navlinks occupy the whole space

* Fixed section menu spacing

* Spacing of section after navlink on adobe home

* Like the previous commit but actually works

* divider line

* changed last of kind to last of type

* fixed divider spacing

* link spacing

* we need to pad the last nav link as well

* nav link font size

* rules apply only to the links not the sections

* fixed the selector for the previous commit

* I sure hope it works this time

* Fixed the navLinks in light mode

libs/blocks/global-navigation/global-navigation.css

@@ -731,7 +731,13 @@ header.global-navigation {
   }
 }
 
-/* mobile gnav redesign */
+/*
+ *
+ *
+ * mobile gnav redesign
+ *
+ *
+ */
 
 /* new mobile gnav is not sticky when localnav */
 header.new-nav.local-nav {
@@ -765,9 +771,13 @@ header.new-nav .feds-nav-wrapper--expanded {
   z-index: 2;
 }
 
-header.new-nav .feds-nav-wrapper .feds-nav {
-  gap: 30px;
-  margin: 40px 20px 0 20px;
+header.new-nav .feds-nav-wrapper--expanded .feds-nav > section.feds-navItem:first-child {
+  padding-top: 25px;
+}
+
+header.new-nav .feds-nav-wrapper--expanded .feds-nav > .feds-navItem.feds-navItem--mobile-only:last-of-type {
+  margin-bottom: 10px;
+  border-bottom: 2px solid #fff;
 }
 
 header.new-nav .feds-nav-wrapper--expanded .feds-nav > section.feds-navItem > button.feds-navLink {
@@ -777,9 +787,10 @@ header.new-nav .feds-nav-wrapper--expanded .feds-nav > section.feds-navItem > bu
   line-height: 25px;
   border: none;
   opacity:0;
-  transfrom: 12px 0;
+  transform: 12px 0;
   animation: slideleft 0.3s ease, fadein 0.3s ease;
   animation-fill-mode: forwards;
+  margin: 3px 20px 3px 8px;
 }
 
 header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink {
@@ -795,19 +806,34 @@ header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink::after {
   border-color: white;
 }
 
+header.new-nav .feds-nav > .feds-navItem > a.feds-navLink {
+  border-bottom: 1px solid #2c2c2c;
+  padding: 20px;
+  font-size: 20px;
+  color: white;
+}
+
+/* 
+
 /* Mega Menu */
 
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
   position: fixed;
   visibility: visible;
-  opacity: 1;
   top: calc(-1 * var(--feds-height-nav));
   left: 0;
   width: 100%;
   height: calc(var(--feds-height-nav) + 100%);
   background-color: var(--feds-background-nav);
-  animation: totheleft 0.3s ease-out, fadeout 0.3s ease;
-  animation-fill-mode: forwards;
+  /*animation: totheleft 0.3s ease-out, fadeout 0.3s ease;*/
+  /* we need to use transitions instead to avoid an issue on
+   * adobe home wherein if we click on the hamburger icon
+   * right after loading in, we see some feds-popups appear on the
+   * screen and fadeaway
+   */
+  transition: translate 0.3s ease-out, opacity 0.3s ease;
+  translate: -200vw 0;
+  /* animation-fill-mode: forwards; */
   z-index: 2;
 
   display: grid;
@@ -821,8 +847,8 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
 }
 
 header.new-nav .feds-nav > section.feds-navItem.feds-dropdown--active > .feds-popup {
-  animation: fromtheleft 0.3s ease;
-  animation-fill-mode: forwards;
+  translate: 0;
+  opacity: 1;
 }
 
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar {