LifeFaq/inspiration/html5up/assets/sass/main.scss

@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
@import url('fontawesome-all.min.css');

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

// Breakpoints.

	@include breakpoints((
		xlarge:  ( 1281px,  1680px ),
		large:   ( 981px,   1280px ),
		medium:  ( 737px,   980px  ),
		small:   ( 481px,   736px  ),
		xsmall:  ( null,    480px  )
	));

// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)

	html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote,	q {
		quotes: none;

		&:before,
		&:after {
			content: '';
			content: none;
		}
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

	mark {
		background-color: transparent;
		color: inherit;
	}

	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

	input, select, textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
	}

/* Basic */

	// Set box model to border-box.
	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
		html {
			box-sizing: border-box;
		}

		*, *:before, *:after {
			box-sizing: inherit;
		}

	body {
		@include vendor('background-image', ('url("images/overlay.png")', 'linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65))', 'url("../../images/bg.jpg")'));
		background-position: top left, bottom left, auto;
		background-size: auto, 100% 100%, cover;
		background-attachment: fixed;
		background-repeat: repeat, no-repeat, auto;
		position: relative;
		background-color: #150C07;
		line-height: 1.75em;
		overflow-x: hidden;
		overflow-y: auto;

		// Stops initial animations until page loads.
			&.is-preload {
				*, *:before, *:after {
					@include vendor('animation', 'none !important');
					@include vendor('transition', 'none !important');
				}
			}

		@include breakpoint('<=large') {
			background-attachment: scroll;
		}

		@include breakpoint('<=small') {
			background-attachment: scroll;
			background-size: auto, 100% 100%, 250% auto;
			background-repeat: repeat, no-repeat, no-repeat;
			background-position: top left, bottom left, 50% 0%;
		}
	}

	body, input, select, textarea {
		font-family: 'Source Sans Pro';
		font-weight: 400;
		padding: 0;
		font-size: 13pt;
		color: rgba(255, 255, 255, 0.6);

		@include breakpoint('<=xlarge') {
			font-size: 11pt;
		}

		@include breakpoint('<=large') {
			font-size: 10pt;
		}

		@include breakpoint('<=medium') {
			font-size: 11pt;
		}
	}

	a {
		color: #fff;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		@include vendor('transition', 'color 0.25s ease-in-out');

		&:hover {
			color: #d64760;
		}
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
		color: #fff;
		letter-spacing: -0.05em;
	}

	strong, b {
		color: #fff;
		color: rgba(255, 255, 255, 0.85);
		font-weight: 600;
	}

/* List */

	ul {
		&.icons {
			cursor: default;
			margin: 0 0 0.5em 0;

			li {
				display: inline-block;
				font-size: 1.5em;
				margin-left: 1em;

				span {
					display: none;
				}

				a {
					opacity: 0.35;
					color: #fff;
					@include vendor('transition', 'opacity 0.25s ease-in-out');

					&:hover {
						opacity: 1.0;
					}
				}

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

			@include breakpoint('<=small') {
				margin: 0 0 2em 0;
			}
		}
	}

/* Icons */

	.icon {
		@include icon;
		position: relative;
		text-decoration: none;

		&:before {
			line-height: inherit;
		}

		> .label {
			display: none;
		}

		&.solid {
			&:before {
				font-weight: 900;
			}
		}

		&.brands {
			&:before {
				font-family: 'Font Awesome 5 Brands';
			}
		}
	}

/* Wrapper */

	#wrapper {
		min-height: 100vh;
		@include vendor('display', 'flex');
		@include vendor('flex-direction', 'column');
		@include vendor('justify-content', 'space-between');
		@include vendor('align-items', 'center');
		@include vendor('transition', 'filter 0.5s ease-in-out');

		&:before {
			content: '';
			display: block;
		}

		body.is-poptrox-visible & {
			@include vendor('filter', 'blur(0.25em)');
		}

		@include breakpoint('<=small') {
			min-height: 0;
		}
	}

/* Scroll Zone */

	.scrollZone {
		position: fixed;
		width: 6rem;
		height: 100vh;
		cursor: -moz-grab;
		cursor: -webkit-grab;
		cursor: -ms-grab;
		cursor: grab;
		z-index: _misc(z-index-base) + 1;

		&.left {
			left: 0;
		}

		&.right {
			right: 0;
		}

		@include breakpoint('<=small') {
			display: none;
		}
	}

/* Main */

	#main {
		$border: 10px;

		@include vendor('transition', 'opacity 1s ease-in-out');
		@include vendor('transition-delay', '0.5s');
		position: relative;
		z-index: 1;
		width: -moz-min-content;
		width: -webkit-min-content;
		width: -ms-min-content;
		width: min-content;
		max-width: 100vw;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: ($border * 0.5);

		.items {
			@include vendor('display', 'flex');

			> :last-child {
				border-right: solid $border #ffffff;
			}
		}

		.item {
			$width: 20em;

			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			margin: ($border * 0.5);
			height: 16em;
			box-shadow: 0 0 0 $border #ffffff;

			&.span-1 {
				width: $width;
			}

			&.span-2 {
				width: $width * 1.5;
			}

			&.span-3 {
				width: $width * 2;
			}

			&.intro {
				background-color: #d64760;
				background-image: url('images/overlay.png');
				@include vendor('display', 'flex');
				@include vendor('flex-direction', 'column');
				@include vendor('justify-content', 'center');
				padding: 1em 3em;

				h1 {
					font-size: 3em;
					line-height: 1em;
				}

				p {
					font-size: 1.25em;
					line-height: 1.5em;
					margin: 0.5em 0 0 0;
					opacity: 0.65;
				}
			}

			&.thumb {
				display: block;
				position: relative;
				background: rgba(255, 255, 255, 0.25);
				cursor: default;

				h2 {
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(18, 21, 29, 0.85);
					width: 100%;
					padding: 1em;
					font-weight: 400;
					line-height: 1em;
					z-index: 2;
				}

				img {
					display: block;
					z-index: 1;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					@include vendor('object-fit', 'cover');
					@include vendor('object-position', 'center');
					@include vendor('transition', 'opacity 0.75s ease-in-out');
					@include vendor('transition-delay', '1.25s');
				}

				@for $i from 1 through 6 {
					&.delay-#{$i} {
						img {
							@include vendor('transition-delay', '#{1.25 + ($i * 0.125)}s');
						}
					}
				}
			}
		}

		body.is-preload & {
			opacity: 0;

			.item {
				&.thumb {
					img {
						opacity: 0;
					}
				}
			}
		}

		@include breakpoint('<=xlarge') {
			.item {
				$width: 17em;

				height: 14em;

				&.span-1 {
					width: $width;
				}

				&.span-2 {
					width: $width * 1.5;
				}

				&.span-3 {
					width: $width * 2;
				}
			}
		}

		@include breakpoint('<=small') {
			$border: 5px;

			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			padding: ($border * 0.5);

			.items {
				@include vendor('flex-wrap', 'wrap');
				@include vendor('justify-content', 'center');

				> :last-child {
					border-right: 0;
				}
			}

			.item {
				@include vendor('flex-grow', '1');
				@include vendor('flex-shrink', '1');
				width: calc(50vw - #{$border * 3}) !important;
				margin: ($border * 0.5);
				box-shadow: 0 0 0 $border #ffffff;

				&.intro {
					width: calc(100vw - #{$border * 4}) !important;
					text-align: center;
					height: auto;
					padding: 3em;

					h1 {
						font-size: 2em;
					}

					p {
						font-size: 1em;
					}
				}

				&.thumb {
					h2 {
						display: none;
					}
				}
			}
		}

		@include breakpoint('<=xsmall') {
			.item {
				//width: calc(100vw - #{$border * 4}) !important;
				height: 10em;
			}
		}
	}

/* Header */

	#footer {
		width: 100%;
		padding: 1.5em;
		@include vendor('display', 'flex');
		@include vendor('justify-content', 'space-between');
		position: relative;
		z-index: _misc(z-index-base) + 2;

		> section {
			&:first-child {
				text-align: left;
				max-width: 36em;
				padding-right: 2em;
			}

			&:last-child {
				text-align: right;
				max-width: 36em;
			}
		}

		h2 {
			font-size: 2.25em;
			margin: 0 0 1em 0;
		}

		.copyright {
			li {
				display: inline-block;
				margin-left: 1em;
				padding-left: 1em;
				border-left: solid 1px rgba(255, 255, 255, 0.25);
				line-height: 1em;

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

		@include breakpoint('<=medium') {
			@include vendor('flex-direction', 'column');

			> section {
				&:first-child {
					width: 100%;
					padding-right: 0;
				}

				&:last-child {
					text-align: left;
					margin: 1.5em 0 0 0;
					width: 100%;
				}
			}
		}

		@include breakpoint('<=small') {
			text-align: center;
			padding: 3em;

			> section {
				&:first-child {
					text-align: center;
					max-width: 100%;
				}

				&:last-child {
					text-align: center;
					max-width: 100%;
				}
			}

			.copyright {
				li {
					display: block;
					margin: 0.75em 0 0 0;
					padding-left: 0;
					border-left: 0;

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

/* Popup */

	.poptrox-popup {
		background: #1a1f2c;
		background: rgba(18, 21, 29, 0.9);
		box-shadow: 0px 0px 0px 10px #fff, 0px 10px 60px 10px rgba(8, 11, 19, 0.55);
		cursor: default;

		.loader {
			display: block;
			width: 48px;
			height: 48px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -24px 0 0 -24px;
			background: url('images/loader.gif');
			opacity: 0.25;
		}

		.caption {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #1a1f2c;
			background: rgba(18, 21, 29, 0.85);
			display: block;
			width: 100%;
			line-height: 75px;
			text-align: center;
			font-size: 1.25em;
			color: #fff;
		}

		.nav-next, .nav-previous {
			text-decoration: none;
			font-weight: normal;
			font-style: normal;
			@include vendor('transition', 'opacity 0.25s ease-in-out');
			opacity: 0.35;

			&:hover {
				opacity: 1.0;
			}
		}

		.nav-next, .nav-previous {
			@include icon(false, solid);
			
			text-transform: none !important;
			width: 150px;
			height: 75px;
			position: absolute;
			bottom: 0;
			cursor: pointer;
			font-size: 3em;
			line-height: 75px;
		}

		.nav-next {
			right: 0;
			text-align: right;
			padding-right: 30px;
			&:before {
				content: '\f105';
			}
		}

		.nav-previous {
			left: 0;
			text-align: left;
			padding-left: 30px;
			&:before {
				content: '\f104';
			}
		}

		@include breakpoint('<=small') {
			background: #0a0f1c;
			box-shadow: 0px 0px 30px 10px rgba(8, 11, 19, 0.85);
			border: solid 2.5px #fff;
			@include vendor('box-sizing', 'content-box');

			.caption {
				display: none !important;
			}

			.nav-next {
				display: none !important;
			}

			.nav-previous {
				display: none !important;
			}
		}
	}