app/assets/stylesheets/modules/header.css
@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 {
-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: 600;
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: 150px;
overflow: hidden;
text-overflow: ellipsis; }
@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, .home__header__popup__nav-links {
display: none; }
.header__popup__nav-links.is-expanded, .home__header__popup__nav-links.is-expanded {
margin-top: -7px;
display: block;
float: right;
position: absolute;
right: 0;
text-align: right; }
.header__popup__nav-links .header__nav-link, .home__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.is-expanded {
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.is-expanded {
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); } }