nimbus-site/themes/navy/source/css/_partial/header.styl

header-padding-normal = 10px
header-padding-max = 30px
logo-size = 50px

#header
  position: relative
  padding: header-padding-normal 0
  @media print
    display: none

#header-inner
  display: flex
  flex-flow: row nowrap
  align-items: center
  @media mq-mobile
    justify-content: center

#logo-wrap
  flex: 0 logo-size
  margin-top: 19px

#logo
  hide-text()
  display: block
  width: 40px;
  height: 40px;
  background-image: url(../img/status_logo.svg);
  text-decoration: none;
  margin: -20px 0 0 30px;
  background-color: rgba(0,0,0,0.1);
  border-radius: 50%;
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;

#main-nav
  display: none
  flex: 1 auto
  padding-left: 20px
  @media mq-normal
    display: block

.main-nav-link
  color: color-main-link
  text-decoration: none
  line-height: logo-size
  opacity: 1.0
  transition: 0.2s
  font-family: font-sans
  font-size: 15px
  font-weight: bold;
  display: inline-block
  padding: 0 15px
  &:hover
    opacity: 1
    color: color-link-hover

#search-input-wrap
  display: none
  height: 40px
  width: 180px
  background-color: #ff9c00
  border-radius: 22px
  padding: 0 12px
  align-items: center
  transition: 0.2s
  &.on
    display: flex
    @media mq-mobile
      width: 40px
      cursor: pointer
      &.standalone
        position: absolute
        right: 20px
  &.active
    width: 180px
    background-color: color-background-light

#search-input-icon
  color: rgba(255, 255, 255, 1)
  height: 24px
  width: 24px
  margin: 0 2px 0 0
  display: inline-block
  opacity: 1
  @media mq-mobile
    height: auto;

#search-input-wrap.active #search-input-icon
  color: color-navy

#search-input-wrap.active #search-input
  color: color-navy

#search-input
  background: none
  width: 126px
  height: 24px
  font-size: 15px
  color: color-main-link
  outline: none
  -webkit-appearance: none
  @media mq-mobile
    display: none

#search-input-wrap.active #search-input
  display: inline;
    
#search-input::-webkit-input-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input::-moz-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input:-ms-input-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input:-moz-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input-wrap .algolia-autocomplete .ds-dropdown-menu
  @media (max-width: 560px)
    min-width: 400px
  @media (max-width: 470px)
    min-width: 300px

#lang-select-wrap
  display: none
  position: relative
  @media mq-normal
    display: block

#lang-select-label
  color: color-main-link
  opacity: 0.7
  font-family: font-title
  line-height: logo-size
  span
    padding-left: 8px
  i
    opacity: 0.7

#lang-select
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  -webkit-appearance: menulist-button
  font-size: inherit