@import '../libs/vars'; @import '../libs/functions'; @import '../libs/mixins';

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

/* Header */

#header {
        @include color(accent1);
        @include padding(4.5em, 0);
        @include vendor('align-items', 'center');
        @include vendor('display', 'flex');
        @include vendor('justify-content', 'center');
        background-image: url('images/overlay.png'), url('images/pattern-size1.svg');
        background-position: top left, center center;
        background-attachment: fixed, fixed;
        background-size: auto, cover;
        height: 100vh;
        min-height: 35em;
        h1 {
                font-size: 3.25em;
                font-weight: _font(weight-bold);
                margin-bottom: _size(element-margin) * 0.25;
        }
        p {
                font-size: 1.5em;
                line-height: 1.35em;
                br {
                        display: inline;
                }
        }
        .content {
                @include vendor('transition', ('opacity 0.5s ease', 'transform 1s ease'));
                @include vendor('transform', 'translateX(0)');
                opacity: 1;
                text-align: right;
                margin: (_size(element-margin) * -1.75) (_size(element-margin) * 2) 0 0;
                > :last-child {
                        margin-bottom: 0;
                }
        }
        .image {
                @include vendor('transition', ('opacity 1s ease', 'transform 1s ease'));
                @include vendor('transform', 'translateY(0)');
                opacity: 1;
                img {
                        @include vendor('transition', 'opacity 0.75s ease');
                        @include vendor('transition-delay', '0.75s');
                        opacity: 1;
                }
        }
        // Large.
                @include breakpoint(large) {
                        background-image: url('images/overlay.png'), url('images/pattern-size2.svg');
                }
        // Medium.
                @include breakpoint(medium) {
                        height: auto;
                        min-height: 0;
                        .content {
                                margin: (_size(element-margin) * -1) (_size(element-margin) * 2) 0 0;
                        }
                        // Portrait.
                                @include orientation(portrait) {
                                        @include padding(6em, 3em);
                                        @include vendor('flex-direction', 'column-reverse');
                                        .content {
                                                display: block;
                                                width: 100%;
                                                text-align: center;
                                                margin: 0 0 _size(element-margin) 0;
                                        }
                                        .image {
                                                overflow: hidden;
                                        }
                                }
                }
        // Small.
                @include breakpoint(small) {
                        background-image: url('images/overlay.png'), url('images/pattern-size3.svg');
                        h1 {
                                font-size: 2em;
                        }
                        p {
                                font-size: 1em;
                                line-height: inherit;
                        }
                        // Landscape.
                                @include orientation(landscape) {
                                        @include padding(2em, 2em);
                                        .content {
                                                margin: 0 _size(element-margin) _size(element-margin) 0;
                                        }
                                        .image {
                                                font-size: 0.8em;
                                                width: 15em;
                                                max-width: 20vw;
                                                .inner, &:before, &:after {
                                                        font-size: 0.8em;
                                                }
                                        }
                                }
                        // Portrait.
                                @include orientation(portrait) {
                                        @include padding(3em, 1.5em);
                                        .image {
                                                font-size: 0.6em;
                                                max-width: 60vw;
                                        }
                                }
                }
        // XSmall.
                @include breakpoint(xsmall) {
                        // Landscape.
                                @include orientation(landscape) {
                                        @include padding(2em, 1.5em);
                                        .image {
                                                font-size: 0.7em;
                                        }
                                        .actions {
                                                font-size: 0.8em;
                                        }
                                }
                        // Portrait.
                                @include orientation(portrait) {
                                        @include padding(2em, 1em);
                                }
                }
        // Mobile.
                body.is-mobile & {
                        background-attachment: scroll, scroll;
                }
        // Loading.
                body.is-loading & {
                        .content {
                                @include vendor('transform', 'translateX(2em)');
                                opacity: 0;
                        }
                        .image {
                                @include vendor('transform', 'translateY(4em)');
                                opacity: 0;
                                img {
                                        opacity: 0;
                                }
                        }
                        // Medium.
                                @include breakpoint(medium) {
                                        // Portrait.
                                                @include orientation(portrait) {
                                                        .content {
                                                                @include vendor('transform', 'none');
                                                                opacity: 1;
                                                        }
                                                        .image {
                                                                @include vendor('transform', 'translateY(2em)');
                                                        }
                                                }
                                }
                }
}