website

_header.scss (5146B)

---

 ///
 /// 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-preload & {
 			> * {
 				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;
 					}
 				}
 			}
 		}
 	}