@import “buorg”;

$color-primary: #555 !default; $color-primary-darker: darken($color-primary, 15%) !default; $color-primary-album-bg: desaturate(darken($color-primary, 20%), 35%) !default;

// Media query screen size breakpoints (bp), width (w) and height (h) $h-bp: 794px; $h-bp2: 1024px; $w-bp: 873px;

@keyframes fade-in {

10% { opacity: 0; }
100% { opacity: 1; }

} @keyframes fade-in-2 {

10% { opacity: 0; }
100% { opacity: 1; }

} @keyframes fade-out {

0% { opacity: 1; }
100% { opacity: 0; }

} @keyframes nav-hide-on-selection {

0% { opacity: 1; display: block }
90% { opacity: 0; display: block }
100% { opacity: 0; display: none; }

} @keyframes nav-enlarge-selected {

0% { transform: scale(1) translateY(0); }
100% { transform: scale(1.5) translateY(-30px); }

} @keyframes enlarge {

0% { transform: scale(0.9); }
100% { transform: scale(1); }

}

h1, h2, h3, h4, p {

margin: 0;
padding: 0;

}

a, a:link, a:hover, a:visited {

color: #FFFFFF;
text-decoration: none;

}

html {

padding: 0;
margin: 0;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

} body {

padding: 0;
margin: 0;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

background: linear-gradient(180deg, rgba($color-primary, 0.67) -12.01%, $color-primary 104.49%);
background-repeat: no-repeat;
background-attachment: fixed;

color: #fff;

font-family: "Barlow Condensed", "PT Sans Narrow", "Arial Narrow", Helvetica, Arial, sans-serif;

} body > main {

padding: 0;
margin: 0;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

min-height: 640px;

transition: background 6s ease-in-out;

}

.footer {

position: absolute;
height: 86px;
left: calc(50% - 260px/2 + 30px);
bottom: 0;
right: 0;

opacity: 0;
animation: fade-in 1s both;
animation-delay: .5s;

body.layout-album & {
    left: 86px;
    opacity: 0;
    animation: fade-in-2 1s forwards;
    animation-delay: 2s;
}
body.out & {
    animation: fade-out .3s forwards;
}

@media screen and (max-width: $w-bp) {
    position: fixed;
}

> .social {
    position: absolute;
    left: 0%;
    right: 33.85%;
    top: 0%;
    bottom: 61.63%;

    > .ico {
        width: 33px;
        height: 33px;
        display: inline-block;

        .fa-layers {
            > .fa-circle {
                color: rgba(255, 255, 255, 0.7);
            }
            > :not(.fa-circle) {
                color: $color-primary-darker;
            }
        }
    }
}

> .legal {
    position: absolute;
    left: 0%;
    right: 0%;
    top: 56.98%;
    bottom: 0%;

    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 16px;

    color: rgba(255, 255, 255, 0.5);
}

}

/* HOME */

.home__header {

position: absolute;
height: 282px;
left: calc(50% - 199px/2 - 0.5px);
top: calc(50% - 282px/2 - 164px);
display: block;

@media screen and (max-height: $h-bp) {
    top: calc(50% - 282px/2 - 104px);
    height: 90px;
}

> .name {
    height: 90px;
    left: 0px;
    right: 0px;
    top: 0px;

    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 75px;

    color: #F2F2F2;
}

> .tagline {
    position: relative;
    left: 17px;
    top: 30px;
    width: 83px;
    height: 161px;

    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 28px;

    color: #FFFFFF;

    word-spacing: 83px; /* Wrap after every word */

    @media screen and (max-height: $h-bp) {
        word-spacing: unset;
        width: auto;
        height: auto;
        top: 10px;
        left: 0;
    }
}

// Gets hidden when transitioning to album
body.out & {
    animation: fade-out .3s forwards;
}

} img.home__shadowything {

position: absolute;
width: 187px;
height: 542px;
left: calc(50% - 187px/2 - 244.5px);
top: calc(50% - 542px/2 - 118px);

mix-blend-mode: luminosity;

body.out & {
    animation: fade-out 1s;
}

opacity: 0;
animation: fade-in-2 1s forwards;
animation-delay: .3s;

}

.home__nav {

position: absolute;
height: 255px;
left: calc(50% - 432px/2 + 116px);
top: calc(50% - 255px/2 + 139.5px);
transform-origin: top left;

display: flex;
flex-flow: row nowrap;

@media screen and (max-height: $h-bp) {
    top: calc(50% - 255px/2 + 139.5px - 81px);
}
@media screen and (max-width: $w-bp) {
    flex-flow: row wrap;
    width: 250px;
    position: relative;

    align-content: flex-start;

    // Below ensures offset from the bottom edge of the viewport.
    // margin-bottom with height: auto works for Chrome,
    // while Firefox and Safari require height set explicitly.
    // This height accounts for fixed number of two albums.
    height: auto;
    margin-bottom: 150px;
    height: 700px;
}

> a.nav-item {
    margin-right: 20px;
    position: relative;
    width: 211px;
    height: 255px;

    @media screen and (max-width: $w-bp) {
        margin-bottom: 20px;
    }

    body.out &:not(.selected) {
        animation: fade-out .2s forwards;
    }
    body.out &.selected {
        animation: nav-enlarge-selected 1s ease-in-out, fade-out .6s forwards;
    }

    > .label {
        position: absolute;
        left: 0%;
        right: 71.09%;
        top: 88.63%;
        bottom: 0%;

        font-style: normal;
        font-weight: normal;
        line-height: normal;
        font-size: 24px;

        color: #FFFFFF;
    }

    > .icon {
        mix-blend-mode: luminosity;
        transition: mix-blend-mode .3s linear;
    }

    &.full-bleed {
        > .backdrop {
            position: absolute;
            left: 0%;
            right: 0%;
            top: 0%;
            bottom: 17.25%;

            background: $color-primary-darker;
        }
        > .icon {
            position: absolute;
            left: 0%;
            right: 0%;
            top: 0%;
            bottom: 17.25%;
            width: 211px;
            height: 211px;

            mix-blend-mode: luminosity;
        }
    }

    &.inset {
        > .backdrop {
            position: absolute;
            left: 0%;
            right: 0%;
            top: 0%;
            bottom: 17.25%;

            background: $color-primary-darker;
            box-shadow: inset 0px 4px 94px rgba(0, 0, 0, 0.15);
        }
        > .icon {
            position: absolute;
            width: 163px;
            height: 161px;
            left: 26px;
            top: 27px;
        }
    }
}

> .nav-item:hover {
    > .icon {
        mix-blend-mode: normal;
    }
}

}

/* ALBUM */

body.layout-album {

overflow-y: hidden;

}

.album__artwork {

position: absolute;
left: calc(50% - 187px/2 - 244.5px + 187px);
right: 0px;
top: 0px;
bottom: 0px;

background: $color-primary-album-bg;
box-shadow: 0px 4.8px 120px rgba(0, 0, 0, 0.15);

min-width: 449px;
overflow-y: auto;

display: flex;

opacity: 0;

animation: fade-in .3s forwards, enlarge .3s forwards;
animation-delay: .4s;

@media screen and (max-width: $w-bp) {
    position: relative;
    left: 0;
    right: 0;
    top: 400px;
    align-items: center;
    width: auto;
    min-width: 0;
    padding: 20px 0;

    margin-bottom: 150px;
}

body.out & {
    animation: fade-out .3s forwards;
}

> .item {
    display: inline-block;

    opacity: 0;
    animation: fade-in .3s both, enlarge .3s forwards;
    animation-delay: .7s;
}

// Styles
&.full-bleed {
    > .item img {
        max-width: 100%;
        margin: 0;
        display: block;
    }
}
&.inset {
    padding: 139px 96px 119px 116px;
}
&.one-column {
    flex-flow: column nowrap;
    justify-content: flex-start;
}
&.multi-column {
    flex-flow: row wrap;
    justify-content: center;

    > .item {
        width: 211px;
        height: 211px;
        padding: 10px;
        margin-right: 20px;
        margin-bottom: 20px;
        display: inline-block;

        img {
            max-width: 201px;
            max-height: 201px;
            width: auto;
            height: auto;
            display: block;
        }
    }
}

}

.album__header {

> .shadowything-top {
    position: absolute;
    width: 280px;
    height: 167px;
    left: 50px;
    top: 20px;

    mix-blend-mode: luminosity;

    @media screen and (min-height: $h-bp2) {
        top: calc(50% - 167px/2 - 408.5px);
    }

    opacity: 0;
    animation: fade-in-2 .5s forwards;
    animation-delay: .2s;

    body.out & {
        animation: fade-out .4s forwards;
    }
}

> .brand {
    position: absolute;
    width: 242px;
    height: 212px;
    left: 88px;
    top: 208px;

    @media screen and (min-height: $h-bp2) {
        top: calc(50% - 212px/2 - 198px);
    }

    > .author {
        position: absolute;
        width: 61.82px;
        height: 119.91px;
        left: 13.39px;
        top: 0px;

        font-style: normal;
        font-weight: normal;
        line-height: normal;
        font-size: 20.8538px;

        color: #FFFFFF;

        z-index: 2;

        a {
            background-image: linear-gradient(to right, white 33%, rgba(255, 255, 255, 0) 0%);
            background-position: bottom;
            background-size: 3px 1px;
            background-repeat: repeat-x;
            padding-bottom: 2px;
        }
    }

    > .album-title {
        position: absolute;
        width: 240px;
        height: 68px;
        left: 1px;
        top: 10px;

        font-style: normal;
        font-weight: normal;
        line-height: normal;
        font-size: 56px;

        color: #FFFFFF;

        body.out & {
            animation: fade-out .4s forwards;
        }
    }

    > .album-desc {
        position: absolute;
        width: 236px;
        height: 47px;
        left: 13px;
        top: 110px;

        font-style: normal;
        font-weight: normal;
        line-height: normal;
        font-size: 18px;

        color: #FFFFFF;

        body.out & {
            animation: fade-out .4s forwards;
        }
    }
}

}