// Header with white text

header,
.Header {
  color: white;

  a,
  a:active,
  a:focus,
  a:visited {
    color: white !important;
    text-decoration: none;
  }

  .NavigationBar {
    background-color: #333;
    border-bottom: 1px solid #222;

    .NavigationBarLeft {
      .LogoContainer {
        .Logo {
          // Legacy browsers
          background-image:
            url(http://static.tonikarttunen.com/static/src/components/Header/images/Header-Logo-Dark-Text.png);
          // Modern browsers
          background-image:
            url(http://static.tonikarttunen.com/static/src/components/Header/images/Header-Logo-Dark-Text.svg),
            linear-gradient(transparent, transparent);
        }
      }
    }
  }
}
// Header with white text

header,
.Header {
  color: white;

  a,
  a:active,
  a:focus,
  a:visited {
    color: white !important;
    text-decoration: none;
  }

  a:hover {
    color: darken(white, 10%) !important;
  }

  .NavigationBar {
    background-color: #333;
    border-bottom: 1px solid #222;

    .NavigationBarLeft {
      .LogoContainer {
        .Logo {
          // Legacy browsers
          background-image:
            url(http://static.tonikarttunen.com/static/src/components/Header/images/Header-Logo-Dark-Text.png);
          // Modern browsers
          background-image:
            url(http://static.tonikarttunen.com/static/src/components/Header/images/Header-Logo-Dark-Text.svg),
            linear-gradient(transparent, transparent);
        }
      }
    }

    .NavigationBarRight .NavigationBarRightContainer .NavigationLink.MenuToggle:hover {
      color: darken(white, 10%) !important;
    }
  }
}
Make text easier to read in colorful headers
Make text easier to read in colorful headers
