pdh-design-system/dist/css/organisms/Header/Header.css

PDH Design System React Components

.pdh-header {
  background: linear-gradient(to bottom, #0d3f91 0%, #1b7bbc 100%);
  background: -webkit-linear-gradient(to bottom, #0d3f91 0%, #1b7bbc 100%);
  background: -moz-linear-gradient(to bottom, #0d3f91 0%, #1b7bbc 100%);
  background: -o-linear-gradient(to bottom, #0d3f91 0%, #1b7bbc 100%);
  background: -ms-linear-gradient(to bottom, #0d3f91 0%, #1b7bbc 100%);
}
.pdh-header.pdh-header-large {
  background: linear-gradient(to bottom, #0d3f91 0%, #02b8d0 100%);
  background: -webkit-linear-gradient(to bottom, #0d3f91 0%, #02b8d0 100%);
  background: -moz-linear-gradient(to bottom, #0d3f91 0%, #02b8d0 100%);
  background: -o-linear-gradient(to bottom, #0d3f91 0%, #02b8d0 100%);
  background: -ms-linear-gradient(to bottom, #0d3f91 0%, #02b8d0 100%);
}
.pdh-header.pdh-header-large .navbar-brand img {
  height: 2.25em;
}
.pdh-header .navbar-brand img {
  width: auto;
  height: 2em;
}
.pdh-header .navbar-toggler {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0.5rem;
  border-radius: 0.25rem;
}
.pdh-header .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}
.pdh-header .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.pdh-header:not(.pdh-header-large) .search {
  max-width: 16em;
  height: 2.5em;
  align-self: center;
}
.pdh-header .header-banner-container .search-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width: 800px;
}
.pdh-header .header-banner-container .search-box .search {
  max-width: 100%;
}

.pdh-header-background {
  background-image: url("../../images/pdh_pattern.svg");
  background-size: 35%;
  background-repeat: repeat-y;
  background-position: top 0 right 5rem;
}
.pdh-header-background .nav-item .bi {
  font-size: 1.5em;
}
@media (min-width: 1200px) {
  .pdh-header-background {
    background-size: 420px;
  }
  .pdh-header-background .navbar-nav {
    font-size: 105%;
  }
}
@media (min-width: 1400px) {
  .pdh-header-background .navbar-nav {
    font-size: 115%;
  }
  .pdh-header-background .navbar-nav > .nav-item {
    padding-left: 0.5em;
  }
}
.pdh-header-background .top-navbar {
  background-color: rgba(0, 0, 0, 0.2);
}
.pdh-header-background .top-navbar div.nav-item {
  padding: 0.25em 0.75em;
}
.pdh-header-background .header-banner-container {
  --bs-bg-opacity: 0.97;
}
.pdh-header-background .footer-container {
  --bs-bg-opacity: 0.96;
}

/* OFFCANCAS */
.pdh-offcanvas .offcanvas-header img {
  width: auto;
  max-width: 80%;
  max-height: 56px;
}
.pdh-offcanvas.text-bg-dark .btn-close {
  filter: var(--bs-btn-close-white-filter);
}
.pdh-offcanvas.show {
  /* Duplicated code to fix conflicts in Drupal - shall be removed later */
}
.pdh-offcanvas.show .search {
  max-width: 100%;
  margin-bottom: 1em;
}
.pdh-offcanvas.show .navbar-nav > .nav-item {
  padding: 0.2em 0.5em;
}
.pdh-offcanvas.show .navbar-nav > .nav-item:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.pdh-offcanvas.show .navbar-nav > .nav-item .nav-link.active {
  color: #e37b0a;
}
.pdh-offcanvas.show .navbar-nav > .nav-item .bi {
  font-size: 1em;
  margin-right: 0.5em;
}
.pdh-offcanvas.show .dropdown-menu {
  --bs-dropdown-border-width: 0;
  --bs-dropdown-bg: transparent;
  --bs-dropdown-link-color: white;
  --bs-dropdown-link-hover-color: white;
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-bg: transparent;
}

/* PDH TALL BANNER */
.header-banner-container {
  color: var(--bs-gray-100);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 992px) {
  .header-banner-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.header-banner-container .header-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-banner-container .header-banner-text {
  color: var(--bs-gray-100);
  text-align: center;
}
.header-banner-container .header-banner-title {
  font-weight: 800;
  font-size: 72px;
  text-align: center;
}
.header-banner-container .header-banner-highlight {
  color: var(--bs-yellow);
}