@eeacms/volto-eea-design-system 0.4.4 → 0.5.1

package/theme/themes/eea/extras/header.less

@@ -7,239 +7,299 @@
             Header
 *******************************/
 
+.sticky {
+  position: sticky;
+  top: 0;
+}
+
 .eea.header {
-  background: @white;
+  /* So child can have position sticky */
+  display: initial;
+}
 
-  /* Top header section */
-  .top.bar {
+/*----------------------------------------------------------------------------
+   HEADER TOP BAR
+----------------------------------------------------------------------------*/
+
+.top.bar {
+  display: flex;
+  align-items: center;
+  height: @mobileTopSectionHeight;
+  background: @topSectionBackground;
+
+  .ui.container {
     display: flex;
     align-items: center;
-    height: @mobileTopSectionHeight;
-    background: @topSectionBackground;
+    justify-content: space-between;
+    z-index: @topSectionZindex;
+  }
+}
 
-    .ui.container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      z-index: @topSectionZindex;
-    }
-    .item {
-      display: flex;
-      align-items: center;
-      color: @topSectionItemColor;
-      font-weight: @topSectionItemFontWeight;
-      font-size: @mobileTopSectionItemFontSize;
-    }
-    .ui.dropdown {
-      border: none !important;
-      height: auto !important;
-      border-radius: @defaultBorderRadius;
-      color: @topSectionItemColor;
+.top.bar .item {
+  display: flex;
+  align-items: center;
+  color: @topSectionItemColor;
+  font-size: @mobileTopSectionItemFontSize;
+}
 
-      font-size: @dropdownFontSize;
-      font-weight: @dropdownFontWeight;
+.top.bar .ui.dropdown {
+  border: none !important;
+  height: auto !important;
+  border-radius: @defaultBorderRadius;
+  color: @topSectionItemColor;
+}
 
-      .menu {
-        margin-top: @mobileDropdownMenuMarginTop;
-        left: @dropdownMenuLeft;
-        right: @dropdownMenuRight;
-
-        .wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: @dropdownMenuWrapperGap;
+.top.bar .divider.text {
+  color: @dropdownColor;
+  font-size: @dropdownFontSize;
+  font-weight: @dropdownFontWeight;
+}
+
+.top.bar .ui.dropdown .menu {
+  margin-top: @mobileDropdownMenuMarginTop;
+  left: @dropdownMenuLeft;
+  right: @dropdownMenuRight;
+}
+
+.top.bar .ui.dropdown .menu,
+.top.bar .ui.dropdown .menu .item {
+  font-size: @mobileDropdownMenuFontSize;
+  color: @dropdownColor;
+}
+
+.top.bar .ui.dropdown .menu .item {
+  padding: @dropdownMenuItemPadding;
+
+  &:hover {
+    background: @dropdownMenuItemBackgroundColorHover;
+    color: @dropdownMenuItemColorHover;
+    cursor: pointer;
+  }
+}
+
+.top.bar .ui.dropdown .wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: @dropdownMenuWrapperGap;
+  white-space: @dropdownMenuContentWhiteSpace;
+  margin: @dropdownMenuWrapperMargin;
+
+  &.language-list {
+    padding-inline-start: @dropdownMenuLanguageWrapperPaddingInlineStart;
+  }
+}
+
+.top.bar .ui.dropdown i.chevron.down.icon {
+  position: absolute;
+  font-size: 1.1rem;
+  top: -@rem-space-1;
+}
+
+/* Official union dropdown */
+.top.bar .official-union {
+  display: flex;
+  gap: @mobileOfficialUnionGap;
+
+  img {
+    width: @mobileOfficialUnionImageWidth;
+  }
+
+  .ui.dropdown {
+    .menu {
+      padding: @officialUnionPadding;
+      left: @mobileOfficialUnionMenuLeft;
+
+      .content {
+        max-width: @mobileOfficialUnionMaxWidth;
+
+        p {
           white-space: @dropdownMenuContentWhiteSpace;
-          margin: @dropdownMenuWrapperMargin;
-
-          .item {
-            &:hover {
-              background: @dropdownMenuItemBackgroundColorHover;
-              color: @dropdownMenuItemColorHover;
-              cursor: pointer;
-            }
-          }
+        }
+        a {
+          font-weight: @officialUnionLinkFontWeight;
+          white-space: @dropdownMenuContentWhiteSpace;
+          color: @officialUnionLinkColor;
         }
       }
     }
+  }
+}
 
-    /* Official union dropdowns */
-    .official-union {
-      display: flex;
-      gap: @officialUnionGap;
+/* Theme sites dropdown */
+#theme-sites.ui.dropdown .menu {
+  left: @themeSitesMenuLeft;
 
-      img {
-        width: @mobileOfficialUnionImageWidth;
-      }
+  .wrapper {
+    width: @mobileThemeSitesMenuWidth;
 
-      .ui.dropdown {
-        font-size: @mobileTopSectionItemFontSize;
-
-        .menu {
-          padding: @mobileOfficialUnionPadding;
-
-          .content {
-            max-width: @mobileOfficialUnionMaxWidth;
-
-            p {
-              font-size: @mobileDropdownMenuContentFontSize;
-              font-weight: @officialUnionTextFontWeight;
-              white-space: @dropdownMenuContentWhiteSpace;
-            }
-            a {
-              font-size: @mobileDropdownMenuContentFontSize;
-              font-weight: @officialUnionLinkFontWeight;
-              white-space: @dropdownMenuContentWhiteSpace;
-              color: @officialUnionLinkColor;
-            }
-
-            i.icon,
-            i.icons {
-              font-size: @mobileTopSectionItemFontSize;
-            }
-          }
+    .item {
+      &:hover {
+        a.site {
+          color: @white;
         }
       }
+
+      a.site {
+        color: @themeSitesMenuSiteLinkColor;
+        font-weight: @themeSitesMenuSiteLinkFontWeight;
+      }
     }
+  }
+}
 
-    /* Theme sites dropdown */
-    #theme-sites.ui.dropdown .menu {
-      .wrapper {
-        width: @themeSitesMenuWidth;
+/* Language dropdown */
+#language-switcher {
+  img {
+    width: @mobileOfficialUnionImageWidth;
+  }
+  .menu {
+    .wrapper {
+      .item {
+        justify-content: flex-end;
+        font-weight: @languageMenuItemFontWeight;
 
-        .item {
-          padding: @themeSitesMenuItemPadding;
-
-          &:hover {
-            a.site {
-              color: @white;
-            }
-          }
-
-          a.site {
-            color: @themeSitesMenuSiteLinkColor;
-            font-weight: @themeSitesMenuSiteLinkFontWeight;
-          }
+        span.country-code {
+          margin-left: @mobileLanguageCountryCodeMarginLeft;
+          font-weight: @mobileLanguageCountryCodeFontWeight;
         }
       }
     }
+  }
+}
+
+/*----------------------------------------------------------------------------
+   HEADER MAIN BAR
+----------------------------------------------------------------------------*/
+
+.main.bar.transparency:before {
+  background-color: @headerMainSectionTransparency;
+  display: block;
+  content: " ";
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.main.bar {
+  scrollbar-gutter: stable;
+  background: @headerMainSectionBackground;
+
+  .ui.container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @mobileMainSectionHeight;
 
-    /* Language dropdown */
-    #language-switcher {
-      font-size: @mobileLanguageFontSize;
+    .ui.grid {
+      /* All margins and paddings removed for main header */
+      width: 100%;
+      margin: 0;
 
-      img {
-        width: @mobileOfficialUnionImageWidth;
+      div:first-child {
+        padding-left: 0;
       }
-      .menu {
-        top: @mobileLanguageMenuTop;
-        color: @japaneseIndigo;
-
-        .wrapper {
-          .item {
-            justify-content: flex-end;
-            padding: @languageMenuPadding;
-            font-weight: @languageMenuItemFontWeight;
-            font-size: @mobileLanguageFontSize;
-
-            span.country-code {
-              margin-left: @mobileLanguageCountryCodeMarginLeft;
-              font-weight: @mobileLanguageCountryCodeFontWeight;
-            }
-          }
-        }
+
+      div:last-child {
+        padding-right: 0;
       }
     }
   }
+}
 
-  /* Main header section */
-  .main.bar {
-    scrollbar-gutter: stable;
+.main-menu {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  width: 100%;
 
-    .ui.container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: @mobileMainSectionHeight;
-
-      .ui.grid {
-        /* All margins and paddings removed for main header */
-        width: 100%;
-        margin-top: 0;
-        margin-bottom: 0;
-        margin-left: 0;
-        margin-right: 0;
-
-        div:first-child {
-          padding-left: 0;
-        }
+  .item {
+    a {
+      color: @mainMenuItemColor;
+      font-size: @mainMenuItemFontSize;
+      font-weight: @mainMenuItemFontWeight;
+      border-bottom: @mainMenuItemBorder;
+      align-self: @mainMenuItemAlignSelf;
+    }
+    a:hover {
+      border-bottom: @mainMenuItemActiveBorder;
+    }
+  }
 
-        div:last-child {
-          padding-right: 0;
-        }
-      }
+  .item.active a {
+    color: @mainMenuItemActiveColor;
+    border-bottom: @mainMenuItemActiveBorder;
+  }
+}
 
-      .eea-logo {
-        width: @logoWidth;
-        max-width: @mobileLogoMaxWidth;
-        margin-top: @mobileLogoMarginTop;
-      }
+#main .main-menu .item:first-child {
+    display: none; // hide home nav item
+}
 
-      .main-menu {
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-        width: 100%;
+.main-menu.inverted {
+  .item a {
+    color: @mainMenuItemInvertedColor;
+  }
 
-        .item {
-          place-self: @mainMenuItemPlaceSelf;
-          a {
-            color: @mainMenuItemColor;
-            font-size: @headerLargeFontSize; // fallback font size
-            font-size: @mainMenuItemFontSize;
-            font-weight: @mainMenuItemFontWeight;
-          }
-        }
+  .item.active a {
+    color: @mainMenuItemInvertedColor;
+    border-bottom: @mainMenuInvertedItemActiveBorder;
+  }
 
-        .item.active {
-          color: @mainMenuItemActiveColor;
-          border-bottom: @mainMenuItemActiveBorder;
-        }
-      }
-    }
+  a:hover {
+    color: @mainMenuItemInvertedColor;
+    border-bottom: @mainMenuInvertedItemActiveBorder;
+  }
+}
 
-    /* Search Box */
-    #search-box {
-      position: relative;
-      z-index: 99999;
-      overflow: auto;
-      width: 100%;
-      height: @mobilePopUpHeight;
-      background: @searchBoxBackgroundGradient;
+.eea.header .eea-logo {
+  width: @logoWidth;
+  max-width: @mobileLogoMaxWidth;
+  margin-top: @mobileLogoMarginTop;
+}
 
-      .ui.container {
-        height: 100%;
-        align-items: baseline;
-      }
-      .wrapper {
-        position: relative;
-        width: 100%;
-        margin: @mobilePopupMarginTop 0;
-        display: flex;
-        flex-direction: column;
-        gap: @searchBoxWrapperGap;
+/* Search Box */
+#search-box {
+  position: relative;
+  z-index: 99999;
+  overflow: auto;
+  width: 100%;
+  height: @mobilePopUpHeight;
+  background: @searchBoxBackgroundGradient;
 
-        .action {
-          display: flex;
-          justify-content: center;
-        }
-      }
+  .ui.container {
+    height: 100%;
+    align-items: baseline;
+  }
+  .wrapper {
+    position: relative;
+    width: 100%;
+    margin: @mobilePopupMarginTop 0;
+    display: flex;
+    flex-direction: column;
+    gap: @searchBoxWrapperGap;
+
+    .action {
+      display: flex;
+      justify-content: center;
     }
   }
 }
 
-/***************************************
-Header Actions - Burger and Search Icons
-***************************************/
+@media all and (max-width: @largestMobileScreen) {
+  .eea.header .top.bar .ui.container {
+    width: 100% !important; //override semantic auto to display content with space between them
+  }
+}
+.homepage .eea.header {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+}
+/*----------------------------------------------------------------------------
+  Header Actions - Burger and Search Icons
+----------------------------------------------------------------------------*/
 .burger-action {
   display: flex;
   align-items: center;
@@ -247,11 +307,7 @@ Header Actions - Burger and Search Icons
   cursor: pointer;
   width: @mobileActionsBoxWidth;
   height: @mobileMainSectionHeight;
-  background-color: @darkCerulean;
-}
-
-.burger-action.desktop {
-  display: none;
+  background-color: @burgerActionBackgroundColor;
 }
 
 .burger-action.mobile {
@@ -267,7 +323,7 @@ Header Actions - Burger and Search Icons
   height: @mobileMainSectionHeight;
   align-items: center;
   justify-content: center;
-  background-color: @darkCyan;
+  background-color: @secondaryColor;
 }
 
 .burger-action,
@@ -288,75 +344,8 @@ Header Actions - Burger and Search Icons
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .eea.header {
-    .top.bar {
-      height: @tabletTopSectionHeight;
-
-      .item {
-        font-size: @tabletTopSectionItemFontSize;
-      }
-
-      .ui.dropdown .menu {
-        margin-top: @tabletDropdownMenuMarginTop;
-      }
-
-      .official-union {
-        img {
-          width: @tabletOfficialUnionImageWidth;
-        }
-        .ui.dropdown {
-          font-size: @tabletTopSectionItemFontSize;
-          .menu {
-            padding: @tabletOfficialUnionPadding;
-
-            .content {
-              max-width: @tabletOfficialUnionMaxWidth;
-
-              p {
-                font-size: @officialUnionMenuFontSize;
-              }
-              a {
-                font-size: @officialUnionMenuFontSize;
-              }
-            }
-          }
-        }
-      }
-
-      /* Language dropdown */
-      #language-switcher {
-        font-size: @tabletLanguageFontSize;
-
-        img {
-          width: 19px;
-        }
-
-        .menu {
-          top: @tabletLanguageMenuTop;
-          .wrapper .item {
-            font-size: @tabletLanguageFontSize;
-          }
-        }
-      }
-    }
-    .main.bar {
-      .ui.container {
-        height: 117px;
-
-        .eea-logo {
-          max-width: @tabletLogoMaxWidth;
-          margin-top: @tabletLogoMarginTop;
-        }
-      }
-
-      /* Search box */
-      #search-box {
-        height: @tabletPopUpHeight;
-        .wrapper {
-          margin: @tabletPopupMarginTop 0;
-        }
-      }
-    }
+  .top.bar .item {
+    font-size: @tabletTopSectionItemFontSize;
   }
 
   .text.menu {
@@ -373,319 +362,298 @@ Header Actions - Burger and Search Icons
     width: @tabletActionsBoxWidth;
     height: @tabletMainSectionHeight;
   }
-}
 
-@media only screen and (min-width: @computerBreakpoint) {
-  .eea.header {
-    .top.bar {
-      height: @computerTopSectionHeight;
-    }
 
-    .main.bar {
-      .ui.container {
-        height: 160px;
+  /*----------------------------------------------------------------------------
+    HEADER TOP BAR TABLET
+  ----------------------------------------------------------------------------*/
 
-        .eea-logo {
-          max-width: @computerLogoMaxWidth;
-          margin-top: @computerLogoMarginTop;
-        }
+  .top.bar {
+    height: @tabletTopSectionHeight;
+  }
 
-        .ui.text.menu {
-          flex-wrap: wrap;
-          display: flex;
-          width: 88%;
-          max-height: 20px;
-          justify-content: space-between;
-          margin: 0;
-        }
-      }
+  .top.bar .ui.dropdown .menu {
+    margin-top: @tabletDropdownMenuMarginTop;
+  }
 
-      /* Search box */
-      #search-box {
-        height: @computerPopUpHeight;
+  .top.bar .ui.dropdown .menu,
+  .top.bar .ui.dropdown .menu .item {
+    font-size: @tabletDropdownMenuFontSize;
+  }
+
+  /* Official union dropdown */
+  .top.bar .official-union {
+    gap: @tabletOfficialUnionGap;
 
-        .wrapper {
-          margin: @computerPopupMarginTop 0;
+    img {
+      width: @tabletOfficialUnionImageWidth;
+    }
+    .ui.dropdown {
+      .menu {
+        left: @tabletOfficialUnionMenuLeft;
 
-          .action {
-            justify-content: flex-end;
-          }
+        .content {
+          max-width: @tabletOfficialUnionMaxWidth;
         }
       }
     }
   }
 
-  .burger-action.mobile {
-    display: none;
+  /* Language dropdown */
+  #language-switcher {
+    img {
+      width: 19px;
+    }
+
+    .menu {
+      top: @tabletLanguageMenuTop;
+    }
   }
 
-  .burger-action.desktop {
-    display: flex;
-    width: @computerActionsBoxWidth;
-    height: @computerMainSectionHeight;
+  /*----------------------------------------------------------------------------
+    HEADER MAIN BAR TABLET
+  ----------------------------------------------------------------------------*/
+
+  .main.bar {
+    .ui.container {
+      height: 117px;
+    }
   }
 
-  .search-action {
-    width: @computerActionsBoxWidth;
-    height: @computerMainSectionHeight;
+  .eea.header .eea-logo {
+    max-width: @tabletLogoMaxWidth;
+    margin-top: @tabletLogoMarginTop;
   }
-}
 
-@media only screen and (max-width: 960px) {
-  #theme-sites {
-    display: none;
+  /* Search box */
+  #search-box {
+    height: @tabletPopUpHeight;
+    .wrapper {
+      margin: @tabletPopupMarginTop 0;
+    }
   }
 }
 
-/************************
-      MEGA MENU
-************************/
+@media only screen and (min-width: @computerBreakpoint) {
 
-#mega-menu {
-  position: relative;
-  z-index: 9999;
-  overflow: auto;
-  width: 100%;
-  background: @megaMenuBackgroundGradient;
+  .burger-action.mobile {
+    display: none;
+  }
 
-  .ui.container {
-    height: 100%;
-    align-items: baseline;
+  .search-action {
+    width: @computerActionsBoxWidth;
+    height: @computerMainSectionHeight;
   }
 
-  .toggle,
-  [id^='drop'] {
-    display: none;
+  /*----------------------------------------------------------------------------
+      HEADER TOP BAR DESKTOP
+  ----------------------------------------------------------------------------*/
+
+  .top.bar {
+    height: @computerTopSectionHeight;
   }
-  nav {
-    margin: @tabletPopupMarginTop 0;
-    padding: 0;
-    width: 100%;
+
+  .top.bar .ui.dropdown .menu {
+    margin-top: @computerDropdownMenuMarginTop;
   }
 
-  nav:after {
-    content: '';
-    display: table;
-    clear: both;
+  #theme-sites.ui.dropdown .menu {
+    .wrapper {
+      width: @computerThemeSitesMenuWidth;
+    }
   }
+  /*----------------------------------------------------------------------------
+      HEADER MAIN BAR DESKTOP
+  ----------------------------------------------------------------------------*/
 
-  nav ul {
-    float: left;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    position: relative;
+  .main.bar {
+    .ui.container {
+      height: 160px;
 
-    > li a {
-      padding: 0;
+      .ui.text.menu {
+        flex-wrap: wrap;
+        display: flex;
+        width: 88%;
+        max-height: 20px;
+        justify-content: space-between;
+        margin: 0;
+
+        .item {
+          padding: @mainMenuItemPadding;
+        }
+      }
     }
   }
 
-  nav ul li {
-    display: inline-block;
-    font-size: @megaMenuFontSize;
+  .eea.header .eea-logo {
+    max-width: @computerLogoMaxWidth;
+    margin-top: @computerLogoMarginTop;
   }
 
-  nav a {
-    display: flex;
-    color: @mobileMegaMenuColor;
-    padding: @megaMenuLinkPadding;
-    line-height: @megaMenuLineHeight;
-    word-break: @megaMenuWordBreak;
-  }
+  /* Search box */
+  #search-box {
+    height: @computerPopUpHeight;
 
-  nav ul ul {
-    display: none;
-    position: absolute;
-    top: 0;
+    .wrapper {
+      margin: @computerPopupMarginTop 0;
+
+      .action {
+        justify-content: flex-end;
+      }
+    }
   }
+}
 
-  nav ul li:hover > ul,
-  nav ul li:active > ul {
+/************************
+        MEGA MENU
+************************/
+
+#mega-menu {
+  position: absolute;
+  right: 0;
+  overflow: auto;
+  z-index: @z-index-8;
+  width: @mobileMegaMenuWidth;
+  background: @megaMenuBackgroundColor;
+  color: @megaMenuTextColor;
+  max-height: @mobilePopUpHeight;
+  min-height: @size-11;
+  padding: @mobileMegaMenuPadding;
+
+  .ui.container {
     display: inherit;
-    display: flex;
-    flex-direction: column;
+    align-items: baseline;
+    height: 100%;
   }
 
-  nav ul ul li {
-    float: none;
-    display: list-item;
+  .title {
+    font-size: @megaMenuTitleFontSize;
+    font-weight: @megaMenuTitleFontWeight;
   }
 
-  nav ul ul ul li {
-    left: 0;
-  }
+  .sub-title {
+    font-size: @megaMenuSubTitleFontSize;
+    font-weight: @megaMenuSubTitleFontWeight;
+    color: @megaMenuTextColor;
 
-  li > a:only-child:after {
-    content: '';
-  }
+    &+ .ui.grid {
 
-  @media all and (max-width: @largestMobileScreen) {
-    height: @mobilePopUpHeight;
-    nav {
-      margin: @mobilePopupMarginTop 0;
-    }
-    .menu,
-    li {
-      width: 100%;
-    }
+      div.column:first-child {
+        padding-left: 0;
+      }
 
-    .toggle + a,
-    .menu {
-      display: none;
+      div.column:last-child {
+        padding-right: 0;
+      }
     }
+  }
+}
 
-    .toggle {
-      display: block;
-      padding: @toggleMenuFirstPadding;
-      color: @mobileMegaMenuColor;
-      line-height: @megaMenuLineHeight;
-    }
+#mega-menu .ui.list .item {
+  display: flex;
+  font-size: @megaMenuListItemFontSize;
+  font-weight: @megaMenuListItemFontWeight;
+  padding: @megaMenuListItemPadding;
+}
 
-    [id^='drop']:checked + ul {
-      display: block;
-    }
+#mega-menu  a.item {
+  color: @megaMenuTextColor;
 
-    nav ul li {
-      display: block;
-      width: 100%;
-    }
+  i.icon {
+    color: @megaMenuTextColor;
+  }
+}
 
-    nav .menu > li > .toggle,
-    nav .menu > li > a {
-      padding: @mobileToggleMenuFirstPadding;
-    }
-    nav ul ul .toggle,
-    nav ul ul a {
-      padding: @mobileToggleMenuSecondPadding;
-    }
 
-    nav ul ul ul a {
-      padding: @mobileToggleMenuThirdPadding;
-    }
+#at-a-glance {
+  background-color: @megaMenuGlanceBackgroundColor;
+  // To override the grid column paddings
+  padding: @megaMenuGlancePaddingLeft !important;
 
-    nav ul ul {
-      float: none;
-      position: static;
-      color: @mobileMegaMenuColor;
-    }
+  .ui.list .item {
+    font-size: @megaMenuGlanceListItemFontSize;
+    font-weight: @megaMenuGlanceListItemFontWeight;
+    margin: @megaMenuGlanceListItemMargin;
+  }
+}
 
-    nav ul ul li:hover > ul,
-    nav ul li:hover > ul {
-      display: none;
-    }
+#mega-menu .ui.grid {
+  div.column:first-child {
+    padding-left: 0.625rem;
+  }
 
-    nav ul ul li {
-      display: block;
-      width: 100%;
+  div.column:last-child {
+    padding-right: 0.625rem;
+  }
+}
+
+.menu-content > .ui.grid > .column {
+  padding-top: @megaMenuContentPaddingTop;
+}
+
+/*Mega Menu Accordion - Tablet & Mobile */
+#mega-menu .ui.accordion {
+  .title {
+    font-size: @megaMenuAccordionTitleFontSize;
+    color: @megaMenuTextColor;
+    padding: @megaMenuAccordionTitlePadding;
+    border-bottom: @megaMenuAccordionTitleBorderBottom;
+
+    i:before {
+      font-size: @megaMenuAccordionIconFontSize;
     }
 
-    nav ul ul ul li {
-      position: static;
+    &:hover {
+
+      i {
+        color: @megaMenuTextColor;
+      }
     }
   }
 
-  .menu {
-    display: flex;
-    flex-direction: column;
-  }
-  .sub {
-    left: 100%;
+  .active.title {
+    background-color: transparent;
+    border-bottom: @megaMenuAccordionActiveTitleBorderBottom;
   }
 
-  @media all and (min-width: @tabletBreakpoint) {
-    height: @tabletPopUpHeight;
-    nav {
-      .menu {
-        width: 33.33%;
-        font-size: @megaMenuFontSize;
-        > li {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          align-items: @megaMenuLiAlignItems;
-          margin-bottom: @tabletMegaMenuMarginBottom;
-
-          &.hasSubMenu:after {
-            content: @megaMenuAfterIcon;
-            font-family: @megaMenuIconFontFamily;
-            color: @white;
-          }
-          a {
-            display: flex;
-            justify-content: space-between;
-            align-items: @megaMenuLiAlignItems;
-            max-width: 100%;
-            padding-left: 1rem;
-          }
-        }
-      }
+  .content {
+    background: @megaMenuBackgroundColor;
+    padding: @megaMenuAccordionContentPadding;
 
-      .sub.second {
-        width: 100%;
-        left: 100%;
-        > li {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          align-items: @megaMenuLiAlignItems;
-          margin-bottom: @tabletMegaMenuMarginBottom;
-
-          &.hasSubMenu:after {
-            content: @megaMenuAfterIcon;
-            font-family: @megaMenuIconFontFamily;
-            color: @megaMenuIconAfterColor;
-          }
-          a {
-            max-width: 100%;
-            padding-left: 1rem;
-          }
-        }
+    .accordion {
+      margin: @megaMenuNestedAccordionMargin;
+
+      .title {
+        font-size: @megaMenuNestedAccordionTitleFontSize;
+        font-weight: @megaMenuNestedAccordionTitleFontWeight;
+        border-bottom: none;
       }
-      .sub.third {
-        left: 100%;
-        width: 100%;
-        min-height: 50vh;
-        li {
-          margin-bottom: @tabletMegaMenuMarginBottom;
-          > a {
-            max-width: 100%;
-          }
-        }
+
+      .content {
+        padding: @megaMenuNestedAccordionContentPadding;
       }
     }
-    ul li:hover > a span {
-      text-decoration: underline;
-    }
   }
+}
 
-  @media only screen and (min-width: @computerBreakpoint) {
-    height: @computerPopUpHeight;
-    nav {
-      margin: @computerPopupMarginTop 0;
-      .menu {
-        > li {
-          margin-bottom: @computerMegaMenuMarginBottom;
-          &.hasSubMenu:after {
-            font-size: @megaMenuFontSize;
-          }
-          a {
-            padding-left: 2rem;
-          }
-        }
-      }
-      .sub.second li {
-        margin-bottom: @computerMegaMenuMarginBottom;
-        &.hasSubMenu:after {
-          font-size: @megaMenuFontSize;
-        }
-        a {
-          padding-left: 2rem;
-        }
-      }
-      .sub.third li {
-        margin-bottom: @computerMegaMenuMarginBottom;
-      }
-    }
+#main #mega-menu .ui.accordion .title:first-child {
+  display: none; // hide home link from mobile menu
+}
+
+@media all and (min-width: @tabletBreakpoint) {
+  #mega-menu {
+    padding: @tabletMegaMenuPadding;
+    max-height: @tabletPopUpHeight;
   }
 }
+
+@media only screen and (min-width: @computerBreakpoint) {
+  #mega-menu {
+    width: 100%;
+    padding: @computerMegaMenuPadding;
+    max-height: @computerPopUpHeight;
+  }
+  #mega-menu .title > a {
+    color: @megaMenuTextColor;
+  }
+}