wp-theme/ascribe/assets/_src/less/ascribe/_header.less

//
// Ascribe
// -----------------
// The header
//

.header {
    overflow: hidden;
    padding-bottom: 50px;

    .chevron-divider {
        height: 175px;
    }

    .logo {
        margin-top: 30px;
        position:relative;
        z-index:10;
    }
    nav {
        position: relative;
        width: 100%;
        text-align: center;
        margin: 0;
        top: 20px;

        ul {
            &:extend(.list-unstyled all, .small);
        }
    }

    .menu-item {
        display: inline-block;
        border: 1px solid #b8b9b9;
        margin: 0 15px 0 15px;
        height: 60px;
        padding: 0 30px;
        width: 160px;
        text-align: center;
        vertical-align: top;

        a {
            color: #000;
            display: block;
            font-size: 16px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

        &:hover {
            border: 1px solid @pink;

            a {
                color: @pink;
            }
        }
    }

    @media screen and (max-width: 910px) {
        .menu-item {
            margin-right: 10px;
            width: 120px;
            padding: 0 10px;
        }
    }
    @media screen and (max-width: 750px) {
        .tour-switcher {
            display: none;
        }
        .phone-and-up {
            display: none;
        }
        .phone-only {
            display: block;
        }
        .hamburger {
            display: inline-block;
        }
        .mobile-nav {
            display:none;
            &.active {
                display:block;
            }
        }
    }


    //
    // Blog Header
    //
    .blog &,
    .archive &,
    .single-post & {
        &:extend(.blueGradient);
        padding-bottom:0;

        .menu-item {
            border: 1px solid fade(@white,30);
            transition: .2s ease-out;

            a {
                color: @white;
            }

            &:hover {
                background-color: fade(@white,30);
                border: 1px solid fade(@white,30);

                a {
                    color: @white;
                }
            }
        }

        .chevron-divider {
            position: absolute;
            top: 110px;
            z-index: 1;
        }
        h1 {
            color: @white;
            font-size: 54px;
            position: relative;
            z-index: 2;
            margin-top: 100px;
            margin-bottom: 50px;
            text-align: center;
            a {
                color: @white;

                &:hover {
                    color: @pink;
                }
            }
        }
        .app-links {
            color: @white;
            a {
                color: @white;

                &:hover {
                    color: @pink;
                }
            }
        }
    }
}



.tour-switcher {
    .phone-and-up;
}
.logo {
    float:left;

    &.phone-only {
        width: 30px;
        margin-left:10px;
    }
}
.app-links {
    float: right;
    margin-top: 35px;
    .signInUpText;
    color: @black;
    position: relative;
    z-index: 5;

    a {
        .signInUpText;
        color: @black;

        &:hover {
            color: @pink;
        }
    }
}

.mobile-nav {
    background-color: @blueDeep;
    position: absolute;
    width: 120%;
    left: -10%;
    top: 0;
    text-align: center;
    z-index: 4;

    // open/close transition, slide in from top
    transition: transform .2s ease-out;
    transform: translate3d(0,-100%,0);

    &.active {
        transform: translate3d(0,0,0);
    }

    @media (min-width: @phoneWidth) {
        display: none;
    }

    ul {
        padding: 30px 0 20px;
    }
    li {
        font-weight: @font-weight-normal;
        padding-bottom: 5px;

        a {
            color: @white;

            &:hover {
                color: @pink;
            }
        }
        &:nth-child(-n+3) {
            &:extend(.large);
        }
        &:nth-child(3) {
            border-bottom: 1px solid @white;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }
    }
}