rubygems/rubygems.org

@media (min-width: 1020px) {
  .l-wrap--header {
    position: relative;
    max-width: 1100px; } }
@media (min-width: 1020px) and (max-width: 1199px) {
  .l-wrap--header {
    margin-right: 5%;
    margin-left: 5%; } }
@media (min-width: 1200px) {
  .l-wrap--header {
    margin-right: auto;
    margin-left: auto; } }

.header {
  position: relative;
  z-index: 1;
  -webkit-transform: translateZ(0); }
  @media (max-width: 1019px) {
    .header {
      height: 48px; } }
  @media (min-width: 1020px) {
    .header {
      height: 68px; } }

.header--interior {
  border-bottom-style: solid; }
  @media (max-width: 1019px) {
    .header--interior {
      border-bottom-width: 1px;
      border-bottom-color: #dc3519; } }
  @media (min-width: 1020px) {
    .header--interior {
      border-bottom-width: 7px;
      border-bottom-color: #141c22;
      box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.3); } }

.header__logo-wrap {
  position: relative;
  float: left;
  z-index: 1; }
  .header__logo-wrap:focus {
    outline: none; }
  .header__logo-wrap:focus .header__logo:before, .header__logo-wrap:hover .header__logo:before {
    transform: rotateY(360deg); }
  @media (max-width: 1019px) {
    .header__logo-wrap {
      top: 9px;
      left: 5%;
      font-size: 26px; } }
  @media (min-width: 1020px) {
    .header__logo-wrap {
      top: 12px;
      font-size: 40px; } }

.header__logo {
  position: absolute;
  font-family: "icomoon";
  color: white;
  speak: none;
  transform: rotateY(0deg); }
  .header__logo:before {
    position: absolute;
    transition-duration: 0.75s;
    transition-property: transform; }
  @media (max-width: 1019px) {
    .header__logo {
      line-height: 32px; } }
  @media (min-width: 1020px) {
    .header__logo {
      line-height: 45px; } }

@media (max-width: 1019px) {
  .header__club-sandwich:before {
    content: '≡';
    margin-right: 5%;
    padding: 14px;
    position: relative;
    right: -14px;
    float: right;
    font-family: "icomoon";
    font-size: 20px;
    speak: none;
    color: white;
    transition-duration: 0.25s;
    transition-property: color; }
  .header__club-sandwich:hover:before, .header__club-sandwich:focus:before {
    color: rgba(255, 255, 255, 0.3); } }
@media (min-width: 1020px) {
  .header__club-sandwich {
    display: none; } }

.header__nav-links-wrap {
  position: absolute; }
  @media (max-width: 1019px) {
    .header__nav-links-wrap {
      top: 0;
      right: -270px;
      width: 270px; } }
  @media (min-width: 1020px) {
    .header__nav-links-wrap {
      width: 100%; } }

@media (min-width: 1020px) {
  .header__nav-links {
    float: right; } }

.header__nav-link {
  font-weight: 500;
  text-transform: uppercase;
  color: white;
  transition-duration: 0.25s; }
  .header__nav-link:focus {
    outline: none; }
  @media (max-width: 1019px) {
    .header__nav-link {
      padding: 18px 30px;
      display: block;
      width: 100%;
      border-bottom: 1px solid #dc3519;
      transition-property: background-color, border-top-color; }
      .header__nav-link:focus, .header__nav-link:hover {
        border-top-color: #d23a00;
        background-color: #dc3519; }
      .header__nav-link:active, .header__nav-link.is-active {
        background-color: white;
        color: #e9573f; } }
  @media (min-width: 1020px) {
    .header__popup__nav-links .header__nav-link:focus, .header__popup__nav-links .header__nav-link:hover {
      box-shadow: inset 0 5px 0 0 transparent; }
    .header__nav-link {
      display: inline-block;
      margin-right: 16px;
      margin-left: 16px;
      padding: 25px 0 26px 0;
      border-bottom: 5px solid transparent;
      transition-property: box-shadow; }
      .header__nav-link:last-child {
        margin-right: -16px; }
      .header__nav-link:focus, .header__nav-link:hover {
        box-shadow: inset 0 5px 0 0 #ffffff; }
      .header__nav-link.is-active {
        position: relative;
        border-bottom-color: #e9573f; }
        .header__nav-link.is-active:after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          left: calc(50% - 5px);
          border-width: 5px 5px 0;
          border-style: solid;
          border-color: #e9573f transparent;
          display: block; } }
  .header__nav-link span {
    display: inline-block;
    position: relative;
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap; }

@media (max-width: 1019px) {
  .mobile__header__nav-link span {
    top: 2px; } }
@media (min-width: 1020px) {
  .mobile__header__nav-link {
    display: none; } }

@media (max-width: 1019px) {
  .desktop__header__nav-link {
    display: none; } }
@media (min-width: 1020px) {
  .desktop__header__nav-link {
    position: relative;
    z-index: 1; } }

#user_gravatar {
  margin-top: -30px;
  margin-left: 16px;
  position: relative;
  top: 14px;
  height: 40px;
  width: 40px;
  box-shadow: 0 0 0 1px rgba(20, 28, 34, 0.2);
  border: 2px solid white;
  border-radius: 22px; }

@media (min-width: 1020px) {
  .header__popup__nav-links.hidden {
    display: none; }
  .header__popup__nav-links {
    margin-top: -7px;
    display: block;
    float: right;
    position: absolute;
    right: 0;
    text-align: right; }
  .header__popup__nav-links .header__nav-link {
    margin-left: 0;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 15px;
    display: block;
    width: 100%; } }

@media (min-width: 1020px) {
  .header__popup__nav-links {
    width: 180px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: 0 2px 0 0 rgba(20, 28, 34, 0.15);
    background-color: #e9573f; }
  .header__popup__nav-links .header__nav-link:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); } }

@media (min-width: 1020px) {
  .body--index .header__popup__nav-links {
    width: 150px;
    top: 0;
    padding-top: 74px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent; }
  .body--index .header__popup__nav-links .header__nav-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); } }

@media (max-width: 1019px) {
  .header__popup-link {
    display: none; } }
@media (min-width: 1020px) {
  .header__popup-link {
    margin-right: 5px;
    margin-left: 5px;
    position: relative;
    right: 11px;
    line-height: 70px;
    color: white;
    z-index: 1;
    transition-duration: 0.25s;
    transition-property: color; }
    .header__popup-link:hover {
      color: rgba(255, 255, 255, 0.3); } }