source: main/waeup-hugo/public/sass/layout/_header.scss @ 16335

///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Header */

        #header {
                @include vendor('display', 'flex');
                @include vendor('flex-direction', 'column');
                @include vendor('align-items', 'center');
                @include vendor('transition', (
                        'transform #{_duration(article)} ease-in-out',
                        'filter #{_duration(article)} ease-in-out',
                        'opacity #{_duration(article)} ease-in-out',
                ));
                background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
                background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
                background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
                background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
                max-width: 100%;
                text-align: center;

                > * {
                        @include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
                        position: relative;
                        margin-top: 3.5rem;

                        &:before {
                                content: '';
                                display: block;
                                position: absolute;
                                top: calc(-3.5rem - 1px);
                                left: calc(50% - #{_size(border-width) * 1});
                                width: _size(border-width);
                                height: calc(3.5rem + 1px);
                                background: _palette(border);
                        }
                }

                > :first-child {
                        margin-top: 0;

                        &:before {
                                display: none;
                        }
                }

                .logo {
                        width: 5.5rem;
                        height: 5.5rem;
                        line-height: 5.5rem;
                        border: solid _size(border-width) _palette(border);
                        border-radius: 100%;

                        .icon {
                                &:before {
                                        font-size: 2rem;
                                }
                        }
                }

                .content {
                        border-style: solid;
                        border-color: _palette(border);
                        border-top-width: _size(border-width);
                        border-bottom-width: _size(border-width);
                        max-width: 100%;

                        .inner {
                                @include vendor('transition', (
                                        'max-height #{_duration(intro)} ease',
                                        'padding #{_duration(intro)} ease',
                                        'opacity #{_duration(article)} ease-in-out'
                                ));
                                @include vendor('transition-delay', '0.25s');
                                padding: 3rem 2rem;
                                max-height: 40rem;
                                overflow: hidden;

                                > :last-child {
                                        margin-bottom: 0;
                                }
                        }

                        p {
                                text-transform: uppercase;
                                letter-spacing: _font(letter-spacing);
                                font-size: 0.8rem;
                                line-height: 2;
                        }
                }

                nav {
                        ul {
                                @include vendor('display', 'flex');
                                margin-bottom: 0;
                                list-style: none;
                                padding-left: 0;
                                border: solid _size(border-width) _palette(border);
                                border-radius: _size(border-radius);

                                li {
                                        padding-left: 0;
                                        border-left: solid _size(border-width) _palette(border);

                                        &:first-child {
                                                border-left: 0;
                                        }

                                        a {
                                                display: block;
                                                min-width: 7.5rem;
                                                height: 2.75rem;
                                                line-height: 2.75rem;
                                                padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
                                                text-transform: uppercase;
                                                letter-spacing: _font(letter-spacing);
                                                font-size: 0.8rem;
                                                border-bottom: 0;

                                                &:hover {
                                                        background-color: _palette(border-bg);
                                                }

                                                &:active {
                                                        background-color: _palette(border-bg-alt);
                                                }
                                        }
                                }
                        }

                        &.use-middle {
                                &:after {
                                        content: '';
                                        display: block;
                                        position: absolute;
                                        top: 0;
                                        left: calc(50% - #{_size(border-width) * 1});
                                        width: _size(border-width);
                                        height: 100%;
                                        background: _palette(border);
                                }

                                ul {
                                        li {
                                                &.is-middle {
                                                        border-left: 0;
                                                }
                                        }
                                }
                        }
                }

                body.is-article-visible & {
                        @include vendor('transform', 'scale(0.95)');
                        @include vendor('filter', 'blur(0.1rem)');
                        opacity: 0;
                }

                body.is-loading & {
                        > * {
                                opacity: 0;
                        }

                        @include vendor('filter', 'blur(0.125rem)');

                        .content {
                                .inner {
                                        max-height: 0;
                                        padding-top: 0;
                                        padding-bottom: 0;
                                        opacity: 0;
                                }
                        }
                }

                @include breakpoint(medium) {
                        .content {
                                p {
                                        br {
                                                display: none;
                                        }
                                }
                        }
                }

                @include breakpoint(small) {
                        > * {
                                margin-top: 2rem;

                                &:before {
                                        top: calc(-2rem - 1px);
                                        height: calc(2rem + 1px);
                                }
                        }

                        .logo {
                                width: 4.75rem;
                                height: 4.75rem;
                                line-height: 4.75rem;

                                .icon {
                                        &:before {
                                                font-size: 1.75rem;
                                        }
                                }
                        }

                        .content {
                                .inner {
                                        padding: 2.5rem 1rem;
                                }

                                p {
                                        line-height: 1.875;
                                }
                        }
                }

                @include breakpoint(xsmall) {
                        padding: 1.5rem 0;

                        .content {
                                .inner {
                                        padding: 2.5rem 0;
                                }
                        }

                        nav {
                                ul {
                                        @include vendor('flex-direction', 'column');
                                        min-width: 10rem;
                                        max-width: 100%;

                                        li {
                                                border-left: 0;
                                                border-top: solid _size(border-width) _palette(border);

                                                &:first-child {
                                                        border-top: 0;
                                                }

                                                a {
                                                        height: 3rem;
                                                        line-height: 3rem;
                                                        min-width: 0;
                                                        width: 100%;
                                                }
                                        }
                                }

                                &.use-middle {
                                        &:after {
                                                display: none;
                                        }
                                }
                        }
                }
        }