desktop.scss

// Desktop

html {
	scroll-behavior: smooth;
}

body {
	color: #fff;
	font-family: 'BrandonText', sans-serif;
	background: #f5f5f7;
	margin: 0;
	padding: 0;
}

a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
}

blockquote {
	font-size: 32px;
	color: #888;
	text-transform: uppercase;
	font-style: italic;
	span {
		display: block;
		width: auto;
		font-size: 18px;
		line-height: 20px;
		text-align: left;
		color: #ababab;
	}
	a {
		border-bottom: 0 !important;
		a:hover {
			text-decoration: underline !important;
		}
	}
}

h1 {
	font-size: 32px;
	font-weight: 500;
	text-transform: uppercase;
	font-style: italic;
	margin: 0;
	padding: 0;
	margin-top: 32px;
	margin-bottom: 24px;
}

h1.title {
	font-size: 48px;
	margin-bottom: 32px;
}

h2 {
	font-size: 20px;
	line-height: 26px;
	margin: 0;
	font-weight: 500;
}

small {
	font-size: 13px;
}

pre {
	display: inline-block;
	background: #eee;
	padding: 2px 4px;
	border-radius: 2px;
	border: 1px solid #ccc;
	position: relative;
	top: -1px;
	margin-bottom: -8px;
	margin-top: -8px;
}

.mobile {
	display: none !important;
}

.page-top {
	height: 100vh;
	max-height: 768px;
	overflow: hidden;
	position: relative;
	&.white {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		color: #437ea3;
	}
	nav {
		height: 172px;
		position: relative;
		z-index: 1000;
		#logo {
			background-image: url('images/logo.png');
			background-size: 74px;
			background-repeat: no-repeat;
			background-position: center center;
			width: 172px;
			height: 172px;
			display: inline-block;
		}
		.menu {
			text-align: right;
			position: absolute;
			bottom: 32px;
			right: 32px;
			a {
				margin-left: 2px;
				padding: 2px 8px;
				text-transform: uppercase;
				border-radius: 4px;
				border: 1px solid rgba(255,255,255,0);
				&.selected, &:hover {
					border: 1px solid rgba(255,255,255,.3);
				}
			}
			span {
				padding: 2px 8px;
				background: rgba(255,255,0,.2);
				border-radius: 4px;
				display: inline-block;
				margin-right: 4px;
				border: 1px solid rgba(255,255,0,.2);
				font-style: italic;
				margin-bottom: 8px;
				fas {
					font-size: 13px;
					position: relative;
					top: -1px;
					margin-right: 6px;
					display: inline-block;
				}
			}
			.social {
				margin: 8px;
				padding: 0;
				border: 0;
				font-size: 21px;
				&:hover {
					border: 0;
					color: rgba(255,255,255,.8);
				}
				&:last-of-type {
					margin-right: 8px;
				}
			}
		}
	}
	.splash-bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		.site-logo {
			position: relative;
			background-position: center center;
			background-repeat: no-repeat;
			width: 100vw;
			max-width: 980px;
			margin: 0 auto;
			flex-grow: 1;
			margin-top: 140px;
		}
		.segmented-control {
			width: auto;
			max-width: 600px;
			height: auto;
			width: auto;
			margin: 32px auto 64px auto;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 24px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			align-self: center;
			text-align: center;
			a {
				color: #000;
				display: block;
				border-left: 1px solid rgba(0,0,0,.1);
				align-items: center;
				align-content: center;
				text-align: center;
				padding: 16px 4px;
				font-size: 14px;
				white-space: nowrap;
				flex-grow: 1;
				width: 100vw;
				&:first-of-type {
					border-left: none !important;
				}
			}
			img, i {
				font-size: 26px;
				width: 36px;
				height: 36px;
				display: block;
			}
			img {
				width: 36px;
				height: 36px;
				margin-top: -4px;
			}
		}
		.chevron {
			animation: 7s ease-in-out 3s 10 pulseBounce;
		}
		&.collx {
			background-color: #fafeff;
			background-image: url(images/collx-bg.svg),
				url(images/collx-bg-2.svg);
			background-size: 70%, 55%;
			background-repeat: no-repeat;
			background-position: top left, bottom right;
			margin-top: 0;
			.site-logo {
				background-image: url(images/collx-logo.png);
				background-size: 60%;
				//animation: 2.7s ease-in-out 0s 1 slideDown;
			}
		}
		&.crossbeam {
			background-color: #fff;
			background-image: url(images/crossbeam-city.svg);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center 30vh;
			.site-logo {
				background-image: url(images/crossbeam-logo.png);
				background-size: 55% !important;
				background-position: center 20%;
				//animation: 2.7s ease-in-out 0s 1 slideDown;
			}
			a {
				color: #fff;
			}
			.chevron {
				opacity: .75;
			}
		}
		&.squareknot {
			display: flex;
			flex-direction: column;
			background-image: url(images/squareknot-illustration.png);
			background-size: 100vw;
			background-repeat: no-repeat;
			background-position: bottom center;
			background-color: #fff;
			.site-logo {
				background-image: url(images/squareknot-logo-green.png);
				background-size: 60% !important;
				background-position: center bottom;
			}
			.slogan {
				color: #000;
				text-align: center;
				margin-bottom: 5%;
				font-size: 24px;
				margin-top: 4px;
			}
		}
		&.goodsemester {
			background-image: url(images/goodsemester-rays.png),
				linear-gradient(rgba(162, 196, 146, 1), rgba(162, 196, 146, 0) 25%),
				url(images/goodsemester-bg.jpg);
			background-size: max(160vh,160vw), auto, contain;
			background-repeat: no-repeat, repeat, repeat;
			background-position: center bottom 46%;
			.site-logo {
				background-image: url(images/goodsemester-logo.png);
				background-size: 80%;
			}
		}
		&.zelda-universe {
			.site-logo {
				background-image: url(images/zu-logo-vertical.png);
				background-size: 60%;
			}
		}
		&.zelda-maps {
			background-image:
				linear-gradient(rgba(0,0,0, .8), rgba(0,0,0, 0) 30%),
				radial-gradient(circle, rgba(0,0,0, .8) 20%, rgba(0,0,0, 0) 50%),
				url(images/zm-bg-full.jpg);
			background-size: auto, auto, cover;
			background-position: top, center center, top right;
			.site-logo {
				background-image: url(images/zelda-maps-logo.png);
				background-size: 60%;
			}
		}
		&.zelda-wiki {
			background-image: linear-gradient(rgba(68, 126, 163, .8), rgba(68, 126, 163, 0) 30%),
				url(images/zw-bg-full.png);
			background-size: auto, cover;
			.site-logo {
				background-image: url(images/zelda-wiki-logo.png);
				background-size: 60%;
			}
		}
		&.master-sword {
			background-image: linear-gradient(rgba(0,0,0, .8), rgba(0,0,0, 0) 30%),
				url(images/master-sword-full.png);
			background-size: cover;
		}
		&.venti {
			background-image: url(images/venti-logo.png),
				linear-gradient(rgba(120, 212, 235, 1), rgba(120, 212, 235, 0) 50%),
				url(images/venti-bg-full-boring.jpg);
			background-size: 50%, auto, cover;
			background-position: center center, top, center bottom;
			background-repeat: no-repeat, repeat, repeat-x;
		}
		.chevron {
		}
	}
	.chevron {
		background-image: url(images/chevron.png);
		background-size: 55px;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 32px;
		opacity: 0.4;
	}
	&.index,
	&.goldenchaos-btt,
	&.faceports,
	&.collx,
	&.crossbeam,
	&.squareknot {
		nav {
			color: #437ea3;
			#logo {
				background-image: url(images/logo-blue.png);
			}
			.menu a, .social {
				color: #437ea3;
			}
			.menu a:hover {
				border-color: rgba(67, 125, 162, 0.3)
			}
		}
	}
	&.collx {
		nav {
			#logo {
				color: #fff;
				background-image: url(images/logo.png);
			}
		}
	}
	&.squareknot {
		nav {
			#logo {
				//color: #70c289;
				//background-image: url(images/logo-green.png);
			}
			.menu a {
				//color: #70c289;
			}
		}
	}
	&.zelda-maps .chevron {
		opacity: 0.6;
	}
	&.index {
		position: relative;
		min-height: 0;
		height: auto;
		.splash-bg {
			position: relative;
			overflow: visible;
			width: 100vw;
			align-items: center;
			.about {
				margin: 44px 32px 56px 32px;
				text-align: left;
				background: linear-gradient(#d507fe,#36bcfd);
				display: flex;
				align-items: center;
				align-self: center;
				border-radius: 24px;
				padding: 32px;
				color: #fff !important;
				max-width: 1000px;
				//animation: 2.7s ease-in-out 0s 1 slideDown;
				.desc {
					flex-shrink: 1;
					h1 {
						color: #fff;
						margin-top: 0;
						font-weight: 500;
						div {
							font-size: 32px;
						}
					}
					p {
						margin: 10px 32px 0 0;
						padding: 0;
						max-width: 820px;
					}
				}
				.me {
					margin-right: 32px;
					margin-bottom: -3px;
					min-width: 190px;
					max-width: 210px;
					flex-grow: 1;
					img {
						width: 100%;
						height: auto;
						border-radius: 1000px !important;
						box-shadow: rgba(255,255,255,.25) 0 3px 0,
									rgba(0,0,0,.2) 0 -3px 0;
					}
				}
			}
		}
		.segmented-control {
			display: none;
		}
		.chevron {
			display: none;
		}
	}
}

.splash-bg.zelda-universe,
.splash-bg.zelda-maps,
.splash-bg.zelda-wiki,
.splash-bg.master-sword,
.splash-bg.goodsemester,
.splash-bg.crossbeam,
.splash-bg.collx {
	background-image:
		linear-gradient(rgba(68, 126, 163, .8), rgba(68, 126, 163, 0) 30%),
		url(images/zu-bg-full.jpg);
	background-size: auto, auto 170%;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.content {
	width: 100%;
	color: #000;
	overflow: hidden;
	.item-wrapper {
		position: relative;
		margin: 32px 24px 0 0;
		flex-grow: 1;
		width: 33vw;
		height: 30vw;
		&:nth-of-type(2n) {
			margin-right: 32px;
		}
		&:nth-of-type(2n+1) {
			margin-left: 32px;
		}
		&:last-of-type {
			margin-bottom: 32px;
		}
	}
	.item {
		opacity: 0;
		transform: scale(1.2);
		position: absolute;
		top: 20px;
		bottom: 0;
		left: 0;
		right: 0;
	}
	@media (prefers-reduced-motion: no-preference) {
	  .item {
		transition: .5s ease;
		top: 0;
	  }
	}
	.item-transition {
		opacity: 1;
		transform: none;
	}
	.item-content {
		background-color: rgba(0,0,0,.2);
		background-size: cover;
		background-position: center center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 16px;
		// box-shadow: inset rgba(0,0,0,.1) 0 0 0 .5px, rgba(0,0,0,.4) 0 16px 48px;
		box-shadow: inset rgba(0,0,0,.03) 0 0 0 1px;
		transition: .1s;
		overflow: hidden;
		transform: none;
		&:hover {
			transition: .1s;
			box-shadow: inset rgba(0,0,0,.03) 0 0 0 1px, rgba(0,0,0,.2) 0 16px 48px;
			transform: scale(1.01);
		}
		span {
			display: block;
			width: 100%;
			position: absolute;
			bottom: 24px;
			text-align: center;
			font-size: 1.4vw;
			text-shadow: rgba(0,0,0,1) 0 0 24px;
			color: rgba(255,255,255,.8);
		}
		&.goldenchaos-btt {
			background-size: 106%;
			background-image: url(images/goldenchaos-btt-preview.png);
			background-position: center bottom;
		}
		&.faceports {
			background-color: #e4e4e4;
			background-image: url(images/faceports-preview.png);
			background-repeat: no-repeat;
			background-size: 110%;
			background-position: top center;
		}
		&.crossbeam {
			background-image: url(images/crossbeam-preview.png);
			background-repeat: no-repeat;
			background-position: top left;
			box-shadow: inset rgba(0,0,0,.05) 0 0 0 1px;&:hover {
				box-shadow: inset rgba(0,0,0,.05) 0 0 0 1px, rgba(0,0,0,.2) 0 16px 48px;
			}
		}
		&.collx {
			background-image: url(images/collx-preview.png);
			background-repeat: no-repeat;
		}
		&.squareknot {
			background: #fff;
			background-size: 80%, 100%, 100%, 100%, 100%;
			background-repeat: no-repeat;
			background-position: center top 45%, center, center bottom, center;
			background-image:
				url(images/squareknot-logo.png),
				linear-gradient(rgba(142,247,176,.5), rgba(53,174,93,.8)),
				url(images/squareknot-illustration-preview.png),
				linear-gradient(rgba(142,247,176,1), rgba(53,174,93,1));
		}
		&.goodsemester {
			background-image:
				url(images/goodsemester-logo.png),
				url(images/goodsemester-rays.png),
				url(images/goodsemester-bg.jpg);
			background-size: 80%, 140%, contain;
			background-position: center top 48%, center center;
			background-repeat: no-repeat, no-repeat, repeat;
			span {
				text-shadow: rgba(0,0,0,.8) 0 0 32px;
			}
		}
		&.zelda-universe {
			background-size: 80%, 400%;
			background-repeat: no-repeat;
			background-position: center top 45%, center 30%;
			background-image:
				url(images/zu-logo.png),
				url(images/zu-bg-full.jpg);
		}
		&.zelda-maps {
			background-size: 80%, cover;
			background-repeat: no-repeat;
			background-position: center top 45%, center center;
			background-image:
				url(images/zelda-maps-logo.png),
				url(images/zm-bg-preview.png);
		}
		&.zelda-wiki {
			background-size: 70%, cover;
			background-repeat: no-repeat;
			background-position: center top 45%, center center;
			background-image:
				url(images/zelda-wiki-logo.png),
				url(images/zw-bg-preview.png);
		}
		&.master-sword {
			background-color: none;
			background-image: url(images/master-sword-preview.png);
			span {
				text-transform: uppercase;
				font-weight: bold;
				font-size: 2vw;
				text-shadow: rgba(0,0,0,1) 0 0 32px;
				color: rgba(255,255,255,.9);
				bottom: 16px;
				b {
					font-size: 1.4vw;
				}
			}
		}
		&.the-jason-effect {
			background-image:
				url(images/tje-logo.png),
				url(images/tje-bg-preview-2.png);
			background-size: 60%, cover;
			background-repeat: no-repeat;
			background-position: center top -40%, center center;
			span {
				color: #000;
				text-shadow: none;
			}
		}
		&.app-icons {
			background-image: url(images/app-icons-preview.png);
			background-color: transparent;
		}
		&.zodttd-icons {
			background-image: url(images/zodttd-icons-preview.png);
			background-color: transparent;
		}
		&.app-icons span,
		&.zodttd-icons span {
			color: #000;
			font-weight: bold;
			font-size: 28px;
			padding: 40% 0 22px 0;
			background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
			bottom: 0 !important;
			text-shadow: rgba(255,255,255,1) 0 0 24px;
			border-radius: 0 0 16px 16px;
			display: none;
		}
		&.venti {
			background:
				url(images/venti-logo.png),
				linear-gradient(rgba(120, 212, 235, 1), rgba(120, 212, 235, 0) 50%),
				url(images/venti-bg-preview.jpg);
			background-size: 65%, auto, cover;
			background-repeat: no-repeat;
			background-position: center top 45%, center top, center bottom;
		}
	}
}

.content.index {
	display: flex;
	flex-wrap: wrap;
}

.content.page {
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 100;
	.full-width {
		padding: 0 32px;
		margin: 0 auto;
		max-width: 1440px;
		align-self: center;
		img {
			width: 100%;
			height: auto;
			border-radius: 16px;
			box-shadow: rgba(0,0,0,.3) 0 32px 64px;
		}
	}
	.page-padding {
		max-width: 980px;
		margin: 0 auto;
		position: relative;
		&:first-of-type {
			padding-top: 32px;
		}
		&:last-of-type {
			padding-bottom: 32px;
		}
		a {
			color: #437ea3;
			border-bottom: 1px solid rgba(68, 126, 162, .2);
			display: inline;
			&:hover {
				border-bottom: 1px solid rgba(68, 126, 162, .8);
			}
		}
		img {
			width: auto;
			max-width: 100%;
		}
	}
}

.content.index.page#section-1.animate {
	//animation: 3.5s ease-in-out 0s 1 slideUp;
}

.content.index.page#section-2.animate {
	//animation: 4s ease-in-out 0s 1 slideUp;
}

.content.index.page#section-3.animate {
	//animation: 5s ease-in-out 0s 1 slideUp;
}

.content.index.page#section-4.animate {
	//animation: 5.3s ease-in-out 0s 1 slideUp;
}

.content.index.page#section-5.animate {
	//animation: 6.4s ease-in-out 0s 1 slideUp;
}

.content.index.page#section-6.animate {
	//animation: 6.8s ease-in-out 0s 1 slideUp;
}

.content.app-icons {
	img {
		width: 128px !important;
		height: auto;
		margin: 0 24px 24px 0;
	}
	img.large-icon {
		width: 256px !important;
	}
	img.medium-icon {
		width: 128px !important;
	}
	img.small-icon {
		width: 59px !important;
	}
}

.meta {
	color: #000;
	width: 60vw;
	max-width: 980px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 12px;
	margin-bottom: 40px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	box-shadow: rgba(0,0,0,.2) 0 32px 64px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background-color: rgba(255,255,255,.7);
	border-radius: 12px;
	display: flex;
	.info {
		display: flex;
		flex-direction: column;
		width: 100%;
		.info-bit {
			width: 100%;
			flex-grow: 1;
			span {
				display: block;
				margin-bottom: 8px;
				font-size: 14px;
			}
			a {
				color: #000;
				border-bottom: 1px solid rgba(0,0,0,.3);
				&:hover {
					border-bottom: 1px solid rgba(0,0,0,.6);
				}
			}
			&:last-of-type span {
				margin-bottom: 0;
			}
		}
	}
	.links-wrapper {
		align-self: center;
		width: auto;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
		.links {
			display: flex;
			width: 100%;
			gap: 0;
			padding: 0;
			justify-content: space-between;
			text-align: center;
			a {
				border: 0 !important;
			}
			.button {
				width: 100%;
				display: block;
				border-radius: 6px;
				background: #5bb0e1;
				border: 0 !important;
				color: #fff;
				padding: 12px;
				font-size: 18px;
				text-align: center;
				vertical-align: middle;
				&:hover {
					opacity: 0.8;
				}
			}
			.round-link {
				display: flex;
				flex-direction: column;
				align-content: center;
				align-items: center;
				background: none;
				padding: 0 8px !important;
				//background: #ff0000;
				flex-grow: 0;
				width: auto;
				.fa-stack {
					display: block;
					margin: 0;
					margin-bottom: 4px;
					.fa-circle {
						color: #0285fe;
					}
				}
				.desc {
					font-size: 12px;
					color: #000;
				}
			}
		}
	}
	label {
		font-weight: 500;
		display: block;
		text-transform: uppercase;
		font-size: 13px;
		opacity: 0.5;
		letter-spacing: .5px;
	}
}

.crossbeam .meta {
	//animation: 4s ease-in-out 0s 1 bounce3;
	.links {
		.button {
			background: #f53150;
		}
		.fa-circle {
			color: #f53150 !important;
		}
	} 
}

.collx .meta {
	//animation: 4s ease-in-out 0s 1 bounce3;
	.links { 
	}
}

.notice {
	background: rgba(0,0,0,.1);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 12px;
	padding: 16px;
	width: 100%;
	margin: 32px 0;
	box-sizing: border-box;
}

.screenshot-grid-2-col,
.screenshot-grid-3-col,
.screenshot-grid-4-col,
.screenshot-grid-5-col {
	max-width: 1189px;
	margin: 0 auto;
	padding: 0 32px;
}

.screenshot-grid-2-col img,
.screenshot-grid-3-col img,
.screenshot-grid-4-col img,
.screenshot-grid-5-col img {
	box-shadow: rgba(0,0,0,.3) 0 16px 32px;
	margin: 0 32px 32px 0;
	border-radius: 8px;
	height: auto;
}


.screenshot-grid-2-col img {
	width: calc(100% * (1/2) - 18px);
	max-width: none;
}

.screenshot-grid-2-col img:first-of-type,
.screenshot-grid-2-col.alt img:nth-of-type(3n+1) {
	width: 100%;
	max-width: none;
}

.screenshot-grid-3-col img {
	width: calc(100% * (1/3) - 24px);
	max-width: none;
}

.screenshot-grid-4-col img {
	width: calc(100% * (1/4) - 27px);
	max-width: none;
}

.screenshot-grid-5-col img {
	width: calc(100% * (1/5) - 29px);
	max-width: none;
}

.screenshot-grid-2-col.alt img:nth-of-type(2n+1) {
	margin-right: 32px;
}

.screenshot-grid-2-col img:nth-of-type(2n+1),
.screenshot-grid-2-col.alt img:nth-of-type(3n),
.screenshot-grid-3-col img:nth-of-type(3n),
.screenshot-grid-4-col img:nth-of-type(4n),
.screenshot-grid-5-col img:nth-of-type(5n) {
	margin-right: 0;
}

.tbscreenshot {
	background: #000;
	padding: 5px;
	border-radius: 5px;
}

.video {
	width: 100%;
	height: 553px;
	box-shadow: rgba(0,0,0,.3) 0 16px 32px;
	margin-bottom: 8px;
}

.quote-grid {
	display: flex;
	flex-wrap: wrap;
	blockquote {
		color: #666;
		font-size: 22px;
		width: calc(50% - 32px);
		margin: 12px 16px;
		&:first-of-type {
			margin-left: 0;
		}
		&:nth-of-type(2n+1) {
			margin-left: 0;
		}
		span {
			font-size: 14px;
		}
	}
}

.wiki-duo {
	margin-bottom: -24px !important;
	img {
		width: auto !important;
		max-height: 585px;
		height: 46vw !important;
		margin-right: 32px !important;
		&:last-of-type {
			margin-right: -30px !important;
		}
	}
}

.soon {
	font-size: 48px;
	font-style: italic;
	text-transform: uppercase;
	color: rgba(0,0,0,.2);
	text-align: center;
	padding: 182px 32px 150px 32px;
}

footer {
	color: #000;
	font-size: 13px;
	line-height: 44px;
	height: 44px;
	span {
		display: block;
		width: 100%;
		text-align: center;
	}
}