kcc-gem-theme 1.96.1 → 2.0.0

data/assets/js/theme/nav/megaNav/toggleMenuOnWindowResize.js

@@ -0,0 +1,26 @@
+// Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices)
+const NAVBAR_COLLAPSE_ID = 'headerGlobalNavbarContent'; // ID built into the sites' HTML
+
+function collapseElement(el) {
+  $(el).collapse('hide'); // Bootstrap 4 `.collapse()` method.
+}
+
+function checkNavbarCollapseState(menuEl) {
+  if ( menuEl.classList.contains('show') ) { // 'show' is a Bootstrap 4 class that makes `.collapse` items visible. // Checking to see if the Menu is open
+    collapseElement(menuEl);
+  }
+}
+
+function windowResizeHandler() {
+  if ( window.innerWidth >= 992 ) {
+    const menuCollapseElement = document.getElementById(NAVBAR_COLLAPSE_ID);
+
+    checkNavbarCollapseState(menuCollapseElement);
+  }
+}
+
+function toggleMenuOnWindowResize() {
+  window.addEventListener('resize', windowResizeHandler);
+}
+
+export default toggleMenuOnWindowResize;

data/assets/js/theme/nav/megaNav/underlineCurrentSite.js

@@ -0,0 +1,22 @@
+const  NAV_GLOBAL_BOTTOM_NAV_ITEMS = document.getElementById('navGlobalBottom'); // ID from the HTML
+
+function underlineCurrentSite() {
+  // JS is fun!
+  if (window.location.pathname === '/') // YOU DON'T NEED TO RUN THIS ON THE HOMEPAGE!!
+    return;
+  //console.log('execution of further functions has ceased.');
+  const NAV_ITEMS = NAV_GLOBAL_BOTTOM_NAV_ITEMS.querySelectorAll('li');  // Navigation HTML structure uses <ul><li>...</li><li>...</li></ul> which is common markup for a Bootrap's nav (from their documentation)
+  const url = window.location.pathname.replace(/(^\/|\/$)/g, '');
+  //console.log(url);
+
+  for (let i = 0, len = NAV_ITEMS.length; i < len; i++) {
+    let NAV_CATEGORIES = NAV_ITEMS[i].dataset.nav; // Comes from data-set attributes built into the HTML
+
+    if ( url.search(NAV_CATEGORIES) !== -1 ) {
+      let NAV_LINK = NAV_ITEMS[i].querySelector('a'); // Again, pretty standard bootstrap navigation HTML struture to have anchors in the <li>
+
+      return NAV_LINK.classList.add('header-global__nav-bottom--underlined'); // return breaks the loop and this is the class to underline stuff with
+    }
+  }
+}
+export default underlineCurrentSite;

data/assets/js/{nav → theme/nav/nav}/nav.js

@@ -4,11 +4,10 @@ import moveSearchIcon from './moveSearchIcon.js';
 import searchToggle from './searchToggleNav.js';
 import toggleSearchDropdownOnWindowResize from './toggleNavSearchDropdownOnWindowResize.js';
 
-
-export default function nav() {
+document.addEventListener('DOMContentLoaded', function() {
   highlightNav();
   searchToggle();
   moveSearchIcon();
   closeMenuOnClick();
   toggleSearchDropdownOnWindowResize();
-}
+});

data/assets/js/theme/src/all.js

@@ -0,0 +1,51 @@
+import footerDate from './footerDate.js';
+import lazyLoad from './lazyLoad.js';
+import walkText from './walkText.js';
+import initSliders from './sliders.js';
+//import watchForMenuClicks from './translate.js';
+import wrapPowerText from './wrapPowerText.js';
+import addClassToOpenNavbar from './addClassToOpenNavbar.js';
+import watchForMenuClicks from './translate';
+//import ytEmbed from './ytEmbed.js';
+//import test from './test.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+  wrapPowerText();
+  initSliders();
+  walkText(document.body);
+  footerDate();
+  lazyLoad();
+  watchForMenuClicks();
+  addClassToOpenNavbar();
+  if (document.getElementById('google_translate_element')) {
+    import(/* webpackChunkName: 'translate' */ './translate').then(({default: watchForMenuClicks}) => {
+      watchForMenuClicks();
+    });
+  }
+  if (window.localStorage.getItem('darkModeSetting') == 'true' || window.location.pathname == '/settings/') {
+    import(/* webpackChunkName: 'darkMode' */ './darkMode').then(({ default: darkMode }) => {
+      return darkMode;
+    }).then(darkMode => {
+      import(/* webpackChunkName: 'darkModeStyling' */ '../../../scss/darkMode.scss').then(() => {
+        darkMode();
+      });
+    })
+  }
+
+  // polyfill for Element.closest() b/c IE can't handle an anchor.match() when the anchor has another element inside it (Like spans used for BS4 menu toggler)
+  if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+  }
+
+  if (!Element.prototype.closest) {
+    Element.prototype.closest = function(s) {
+      var el = this;
+
+      do {
+        if (el.matches(s)) return el;
+        el = el.parentElement || el.parentNode;
+      } while (el !== null && el.nodeType === 1);
+      return null;
+    };
+  }
+});

data/assets/js/theme/src/darkMode.js

@@ -0,0 +1,17 @@
+const htmlElement = document.querySelector('html');
+const DARK_MODE_BUTTON_ID = 'darkModeButton';
+
+function darkModeClickHandler(e) {
+  return htmlElement.classList.toggle('dark-mode');
+}
+
+function darkMode() {
+  console.log('Dark Mode (is the best)!');
+  window.localStorage.getItem('darkModeSetting') === 'true' ? htmlElement.classList.add('dark-mode') : null;
+  if (window.location.pathname !== '/settings/') return;
+  const darkModeButton = document.getElementById(DARK_MODE_BUTTON_ID);
+
+  darkModeButton.addEventListener('click', darkModeClickHandler);
+}
+
+export default darkMode;

data/assets/js/theme/src/footerDate.js

@@ -0,0 +1,7 @@
+// Sets copyright year
+function footerDate() {
+  const d = new Date();
+  const fullYear = d.getFullYear();
+  document.getElementById('currentYear').innerHTML = fullYear;
+}
+export default footerDate;

data/assets/js/theme/src/translate.js

@@ -0,0 +1,56 @@
+function styleIFrameElement(IFRAME_MENU_ELEMENT, iframeStyles) {
+  const currentStyles = IFRAME_MENU_ELEMENT.style.cssText;
+  let currentStylesString = currentStyles.toString();
+  const combinedStyles = currentStylesString += iframeStyles
+  IFRAME_MENU_ELEMENT.setAttribute('style', combinedStyles);
+}
+
+function setIframeStyles() {
+  const iframeStyles = ' height: 100%; width: 100%; top: 0px; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);';
+  return iframeStyles;
+}
+
+function createStyleConfigurationObject() {
+  const styleConfigurationObject = {  // Setting all the selectors & the styles they should get.
+    '.goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *': 'color: #544F4B; font-family: "Roboto", sans-serif; width: 100%;',  // Change font fam and color!
+    '.goog-te-menu2-item-selected': 'display: none;',       // Change menu's padding
+    '.goog-te-menu2': 'overflow-y: scroll; padding: 0px;',  // Change menu's padding
+    '.goog-te-menu2-item div': 'padding: 20px;',  // Change the padding of the languages
+    '.goog-te-menu2-item': 'width: 100%;',          // Change the width of the languages
+    'td': 'width: 100%; display: block;',           // Change the width of the languages
+    '.goog-te-menu2-colpad': 'display: none;',      // Change the width of the languages
+    '.goog-te-menu2': 'border: none;',  // Change Google's default blue border
+    '.goog-te-menu2': 'height: 100%; width: 100%;'
+  }
+  return styleConfigurationObject;
+}
+
+function setStyles(selector, styles, IFRAME_MENU_ELEMENT) {
+  const content = IFRAME_MENU_ELEMENT.contentWindow;
+  const itemsToStyle = content.document.querySelectorAll(selector);
+  for (let i = 0; i < itemsToStyle.length; i++) {
+    const items = itemsToStyle[i];
+    items.setAttribute('style', styles);
+  }
+}
+
+function watchForMenuClicks() {
+  // RESTYLE THE DROPDOWN MENU
+  if (document.getElementById('google_translate_element')) {
+    const GOOGLE_TRANSLATE_ELEMENT = document.getElementById('google_translate_element');
+    const styleConfigurationObject = createStyleConfigurationObject();
+    const iframeStyles = setIframeStyles();
+    GOOGLE_TRANSLATE_ELEMENT.addEventListener('click', function (event) {
+      const IFRAME_MENU_ELEMENT = document.querySelector('iframe[class*="goog-te-menu-frame"]');
+
+      //event.preventDefault();
+      styleIFrameElement(IFRAME_MENU_ELEMENT, iframeStyles);
+      Object.keys(styleConfigurationObject).forEach(function(selector) {
+        setStyles(selector, styleConfigurationObject[selector], IFRAME_MENU_ELEMENT);
+      });
+
+    }, false);
+  }
+}
+
+export default watchForMenuClicks;

data/assets/js/theme/src/walkText.js

@@ -0,0 +1,27 @@
+// Replace all occurences of "--" (double-hyphens,) within the page's text-nodes, with em-dashes.
+// Use a replacer function to omit any occurences of triple-hyphens which appear in our documentation.
+// For example, YAML Front - matter's opening and closing triple-hyphens
+// Without the replacer funciton, triple-hyphens get replaced with an em-dash and a hyphen.
+const emDashOrTripleHyphensRegex = /---?/g;
+const tripleHyphenRegex = /---/;
+const emDashReplacement = '—' // This is an em-dash, however, it looks like a hyphen in monospace text editor font!
+
+function replacerFunction(match) {
+  return match.search(tripleHyphenRegex) === -1 ? emDashReplacement : match;
+}
+function walkText(node) {
+  if (node.nodeType == 3) {
+    node.data = node.data.replace(emDashOrTripleHyphensRegex, replacerFunction);
+  }
+  if (node.nodeType == 1 && node.nodeName != 'SCRIPT') {
+    for (var i = 0; i < node.childNodes.length; i++) {
+      walkText(node.childNodes[i]);
+    }
+  }
+}
+//  Note on usage: You don't need to necessarily traverse the entire document.body. 
+//  Usage:
+//
+//    walkText(document.body);
+//
+export default walkText;

data/assets/js/theme/src/wrapPowerText.js

@@ -0,0 +1,21 @@
+const SLIDE_HEADING_ELEMENTS = document.querySelectorAll('.hero-slider__slider--slide-heading'); // Element from HTML
+const regEx = /\*\*(\S+)\*\*/g;
+const replacement = '<span class="typography__power-text">$1</span>';
+
+function replaceRegex(el) {
+  return el.innerHTML = el.innerHTML.replace(regEx, replacement);
+}
+
+function loopOverNodeList(nodeList) {
+  for (var i = 0; i < nodeList.length; i++) {
+    replaceRegex(nodeList[i]);
+  }
+}
+
+function wrapPowerText() {
+  if ( !document.querySelectorAll('.hero-slider__slider--slide-heading') )
+    return; // Bail out of theres no slider in the page.
+  loopOverNodeList(SLIDE_HEADING_ELEMENTS);
+}
+
+export default wrapPowerText;

data/assets/scss/0-tools/_google-translate-overrides.scss

@@ -1,15 +1,18 @@
-// Custom styling for Google Translate
-// ====================================================== //
+.goog-te-gadget-simple {
+  white-space: nowrap;
+  border-radius: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-right: 5px;
+  height: 100%;
+}
 
-// Top-most element of the Google Translate menu
 #google_translate_element {
   position: fixed;
   bottom: .25rem;
   right: .25rem!important;
   z-index: 99999;
 }
-
-// First child of translate element
 .goog-te-gadget {
   font-family: Roboto, 'Open Sans', sans-serif!important;
   text-transform: uppercase;
@@ -18,61 +21,52 @@
     color: $white;
   }
 }
-
-// Second child of translate element
 .goog-te-gadget-simple  {
   background-color: rgba(255,255,255,0.85)!important;
   border: 1px solid rgba(0,0,0,0.95) !important;
+  padding: 8px!important;
   border-radius: 4px!important;
-  cursor: pointer;
-  display: inline-block;
   font-size: 1rem!important;
-  height: 100%;
   line-height:2rem!important;
-  margin-right: 5px;
-  padding: 8px!important;
+  display: inline-block;
   transition: background-color .2s;
-  white-space: nowrap;
+  cursor: pointer;
   zoom: 1;
-  &:hover { // Adds a hover effect
+  &:hover {
     background-color: rgba(0, 123, 255, 0.85)!important;
   }
   &:focus {
     background-color: rgba(0, 123, 255, 0.85)!important;
   }
 }
-
-// Adds a hover effect
-.goog-te-gadget-simple:hover .VIpgJd-ZVi9od-xl07Ob-lTBxed {
+.goog-te-menu2 {
+  max-width: 100%;
+  width: 100%;
+}
+.goog-te-gadget-simple:hover .goog-te-menu-value {
   color: $white !important;
 }
-
-// Adds a nice icon from "Material Icons" icons
-.VIpgJd-ZVi9od-xl07Ob-lTBxed {
+.goog-te-menu-value {
   color: #000 !important;
   text-decoration: none !important;
     &:before {
-    font-family: 'Material Icons'; // <https://fonts.google.com/icons?selected=Material+Icons>
-    content: "\E927"; // G translate icon <https://fonts.google.com/icons?selected=Material+Icons&icon.query=translate>
+    font-family: 'Material Icons';
+    content: "\E927";
     margin-right: 16px;
     font-size: 2rem;
     vertical-align: -10px;
     // width:32px!important;
   }
 }
-
-// Hide span that messes up layout
-.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(5) {
+.goog-te-menu-value span:nth-child(5) {
   display:none;
 }
-
-// Use a nicer looking dropdown arrow/carrot than the default
-.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(3) {
+.goog-te-menu-value span:nth-child(3) {
   border:none!important;
   font-family: 'Material Icons';
   &:after {
     font-family: 'Material Icons';
-    content: "\E5C5"; // <https://fonts.google.com/icons?selected=Material+Icons&icon.query=arrow>
+    content: "\E5C5";
     font-size: 1.5rem;
     vertical-align: -6px;
   }
@@ -89,39 +83,32 @@
 }
 
 // ============ HIDE TOP BAR ============
-.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate {display: none!important;}
+.goog-te-banner-frame.skiptranslate {display: none!important;}
 body {top: 0px!important;}
 
 /* ================================== *\
     Mediaqueries
 \* ================================== */
 @media (max-width: 667px) {
-  #google_translate_element {
-    bottom: .25rem;
-    left: 16px!important;
-    width: 100%!important;
-    .goog-te-gadget {
-      width:100%!important;
-    }
-    .skiptranslate {
-      width:100%!important;
-    }
-    .goog-te-gadget-simple {
-      width: calc(100% - 32px)!important;
-      text-align: center;
-    }
-  }
+	#google_translate_element {
+		bottom: .25rem;
+		left: 16px!important;
+		width: 100%!important;
+		goog-te-gadget {
+			width:100%!important;
+		}
+		.skiptranslate {
+			width:100%!important;
+		}
+		.goog-te-gadget-simple {
+			width: calc(100% - 32px)!important;
+			text-align: center;
+		}
+	}
 }
-
-// Prevent underlining when hovered
-a.VIpgJd-ZVi9od-xl07Ob-lTBxed {
+a.goog-te-menu-value {
   text-decoration: none !important;
   &:hover {
     text-decoration: none !important;
   }
 }
-
-// Removes the blue border surrounding the entire translate menu (when opened)
-.VIpgJd-ZVi9od-vH1Gmf {
-  border: none !important;
-}

data/assets/scss/1-base/_svg.scss

@@ -19,9 +19,6 @@
   &--red {
     fill: $primary-red;
   }
-  &--white {
-    fill: $white;
-  }
 }
 
 .svg--max-width {

data/assets/scss/1-base/_typography.scss

@@ -185,8 +185,7 @@ body {
     font-size: 1rem;
     font-weight: 400;
   }
-
-  .nav-link:not([role=tab]) {
+  & .nav-link:not([role=tab]) {
     margin-left: 5px;
     margin-right: 5px;
   }

data/assets/scss/2-modules/_accordion.scss

@@ -17,13 +17,13 @@
     background-color: $primary-blue;
     border-radius: 50%;
     color: #fff;
-    content: '\2212';
+    content: '\002D';
     display: inline-block;
     font-family: $font-family-paragraph;
     font-size: 2rem;
     font-weight: 400;
     height: 30px;
-    line-height: 28px;
+    line-height: 30px;
     margin-right: 10px;
     position: relative; // Safari doesn't want to render this pseudo-element without `position: relative;`
     text-align: center;

data/assets/scss/2-modules/_dark-mode.scss

@@ -0,0 +1,241 @@
+$dark-mode-background: #191f25;
+$dark-mode-foreground: #7e848f;
+$dark-mode-foreground-lighter: #abaeb3;
+
+.dark-mode body {
+  background-color: $dark-mode-background;
+}
+
+.dark-mode {
+  background-color: $dark-mode-background;
+  & p,
+  & ol,
+  & ul:not(.navbar-nav),
+  & .typography__h2,
+  & .typography__h5,
+  & .typography__h6 {
+    color: $dark-mode-foreground;
+  }
+  & .typography__h4 {
+    color: #e46181;
+  }
+  & .accordion__typography--card-header .btn-link,
+  .typography__h3 {
+    color: #9bb7dd;
+  }
+  & .footer-icons,
+  & .buttons__action,
+  & .header-global,
+  & iframe[title="calendar"],
+  & .hero-slider__slider,
+  & #emergencyAlerts {
+    filter: brightness(.75);
+  }
+  & .buttons__action:hover {
+    background-color: #002348;
+    border-color: rgba(255,255,255,.4);
+  }
+  & footer {
+    background-color: #14191d;
+    border-top-color: rgba(256,256,256,.5);
+    border-top-width: 1px;
+    border-top-style: solid;
+  }
+  & .breadcrumbs {
+    border-bottom-color: rgba(256,256,256,.5)
+  }
+  & .background__color--tan {
+    background-color: #302c24;
+  }
+  & .benefits__background-color {
+    background-color: #354d53;
+  }
+  & .news__h3 {
+    color: $dark-mode-foreground-lighter;
+  }
+  & .header-global .dropdown-menu {
+    background-color: #151a1e;
+    & .dropdown-item {
+      color: #ccc;
+    }
+    & .dropdown-item:hover,
+    & .dropdown-item:focus {
+      background-color: #000;
+      color: #efefef
+    }
+  }
+  & .benefits__typography--img-cap {
+    color: $dark-mode-foreground-lighter;
+  }
+  & .news__li {
+    border-bottom-color: $dark-mode-foreground-lighter;
+  }
+  & .svg--fill-blue {
+    stroke: $dark-mode-foreground-lighter;
+  }
+  & .svg__fill--blue {
+    fill: $dark-mode-foreground-lighter;
+  }
+  & .benefits__borders--circle-img {
+    border-color: #000;
+    filter: drop-shadow(5px 5px 12px rgba(0,0,0,.5)) brightness(.75);
+  }
+  & .news__span {
+    box-shadow: inset 0 0 0 1.4px $dark-mode-foreground;
+  }
+  & .news__div--img {
+    border: solid thin #ccc;
+    filter: brightness(.75);
+  }
+  & .btn-primary {
+    background-color: #002348;
+    border-color: #8db2e5;
+    &:hover {
+      background-color: #8db2e5;
+      color: #002348 !important;
+    }
+  }
+  & .alert-warning {
+    background-color: #664d03;
+    border-color: #fff3cd;
+    & p {
+      color: #fff3cd;
+    }
+  }
+  & a:not(.nav-link),
+  & .links__darker-link {
+    color: #8db2e5;
+  }
+  & a:not(.btn):hover,
+  & .links__darker-link:hover {
+    color: #bfd7f9;
+  }
+  & iframe[title="calendar"] {
+    filter: contrast(0.5);
+  }
+  & .header-global__nav-top {
+    background-color: #002348;
+  }
+  & .header-global__nav-bottom {
+    background-color: #80132e;
+  }
+  & .buttons__action {
+    color: $white !important;
+    background-color: #80132e;
+  }
+  & img {
+    filter: brightness(.75);
+  }
+  & .card {
+    background-color: #151a1c;
+    border-color: rgba(256,256,256,.4);
+  }
+  & .card-body {
+    background-color: #192125;
+  }
+  & .accordion>.card>.card-header {
+    margin-bottom: 0;
+    border-bottom-color: rgba(256,256,256,.125);
+  }
+  & .accordion__button::before {
+    border-style: solid;
+    border-color: rgba(256,256,256,.25);
+    border-width: thin;
+  }
+  & .nav-tabs .nav-link {
+    border-left-color: rgba(256,256,256,.325);
+    border-right-color: rgba(256,256,256,.325);
+    border-top-color: rgba(256,256,256,.325);
+    border-bottom-color: rgba(256,256,256,.5);
+    background-color: #151a1c;
+  }
+  & .nav-tabs .nav-link.active {
+    border-color: rgba(256,256,256,.6) !important;
+    background-color: #192125;
+    border-bottom: thin solid #192125 !important;
+  }
+  & .nav-tabs {
+    border-bottom-color: rgba(256,256,256,.5);
+  }
+  & .nav-tabs .nav-item.show .nav-link,
+  & .nav-tabs .nav-link.active {
+    color: $dark-mode-foreground-lighter;
+  }
+  & .tab-pane {
+    background-color: #192125;
+    border-bottom: thin solid rgba(256,256,256,.5);
+    border-left: thin solid rgba(256,256,256,.5);
+    border-right: thin solid rgba(256,256,256,.5);
+    border-bottom-left-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+    padding: .5rem;
+  }
+  & td,
+  & th,
+  & thead th {
+    border-color: #454d55;
+  }
+  & .table {
+    background-color: #262a2e;
+    color: $dark-mode-foreground-lighter
+  }
+  & .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(255,255,255,.05);
+  }
+  & .table-hover tbody tr:hover {
+    background-color: rgba(0,0,0,.125);
+  }
+  & .modal-content {
+    background-color: #2a2f34;
+    border-color: rgba(255,255,255,.4);
+  }
+  & .modal-header {
+    border-bottom-color: rgba(256,256,256,.5);
+    color: $dark-mode-foreground-lighter
+  }
+  & .modal-footer {
+    border-bottom-color: rgba(256,256,256,.5)
+  }
+  & .close {
+    color: $dark-mode-foreground-lighter;
+    &:hover,
+    &:focus {
+      color: rgba(256,256,256,.6);
+    }
+  }
+  & .header-global__navbar--toggler .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+  }
+  & .header-global__navbar--toggler {
+    border-color: rgba(256,256,256,.5);
+  }
+  & #headerGlobalNavbarContent.collapse.show .navbar-nav,
+  & #headerGlobalNavbarContent.collapsing .navbar-nav {
+    background-color: #14181d;
+  }
+  & #___gcse_0 {
+    filter: invert(1);
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .dark-mode .header-global__navbar--search-toggle:before {
+    background-color: #002348;
+  }
+  .dark-mode .header-global__nav-bottom .dropdown:hover {
+      background-color: #0f1417;
+  }
+  .dark-mode .header-global .dropdown-menu {
+    border: thin solid rgba(255,255,255,.325);
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .dark-mode .header-global__core:after {
+    background-color: #272b30;
+    border-top: 1px solid #b1b1b1;
+  }
+  .dark-mode .header-global .dropdown-menu {
+    border: thin solid rgba(255,255,255,.325);
+  }
+}