ushio-net/assets/sass/layout/_header.scss

///
/// 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;
			}

			.actions {
				@include vendor('justify-content', 'flex-end');
			}
		}

		.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;

					.actions {
						@include vendor('justify-content', 'center');
					}
				}

				// 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;
			}

		// Preload.
			body.is-preload & {
				.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)');
								}
							}

					}

			}

	}