aiexperiments-ai-duet/static/style/splash.css

@import 'common.scss';

$topMargin: 50px;

#splash {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 100;
	font-family: 'Quicksand', sans-serif;
	font-weight: bold;
	color: white;
	transition: opacity 0.2s;

	&.disappear {
		opacity: 0;
		pointer-events: none;
	}

	#learnMore {
		margin-top: $topMargin;
		font-size: 18px;
		display: block;
		// @mixin yellowLink;
	}

	#titleContainer {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80%;
		transform: translate(-50%, -50%);
		text-align: center;
		min-width: 300px;

		#title {
			line-height: 60px;
			font-size: 65px;
			letter-spacing: 1px;
			font-weight: normal;
		}

		#subTitle {
			margin-top: $topMargin;
			letter-spacing: 0.8px;
			line-height: 30px;
			font-size: 20px;
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-weight: normal;
		}

		$loaderWidth: 200px;
		$loaderHeight: 60px;

		#loader {
			position: relative;
			margin-top: $topMargin;
			background-color: black;
			border: 2px solid $orange;
			width: $loaderWidth;
			height: $loaderHeight;
			margin-left: auto;
			margin-right: auto;
			text-transform: uppercase;

			&.clickable {
				cursor: pointer;

				transition: transform 0.1s;

				&:hover {
					transform: scale(1.1);
				}

				#fillText:active {
					color: black!important;
					background-color: $orange;

					#piano {
						filter: brightness(0);
					}
				}
			}

			#loaderText {
				position: absolute;
				width: 100%;
				height: 100%;
				color: black;
				background-color: $orange;
			}

			#fill {
				position: absolute;
				height: 100%;
				width: 0%;
				overflow: hidden;
				background-color: black;


				#fillText {
					width: $loaderWidth;
					height: 100%;
					color: $orange;

					$imgWidth: 40px;
					$margin : 52px;

					* {
						position: absolute;
						top: 0px;
					}

					#play {
						right: $margin;
					}

					#piano {
						left: $margin;
						width: $imgWidth;
						height: 100%;
						background-image : url(../images/keyboard_icon.svg);
						background-position: center center;
						background-repeat: no-repeat;
					}
				}
			}

			#loaderText, #fillText {
				line-height: $loaderHeight;
				font-size: 22px;
				text-align: center;
				font-weight: normal;
			}
		}
	}

	#buildWith {
		margin-top: $topMargin;
	}

	$badgeWidth : 80px;
	$badgeHeight: 50px;
	$badgeMargin : 20px;
	$badegOpacity: 0.7;

	#aiExperiments, #googleFriends {
		width: $badgeWidth;
		height: $badgeHeight;
		position: absolute;
		bottom: $badgeMargin;
		opacity: $badegOpacity;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	#aiExperiments {
		left: $badgeMargin;
		background-image: url(../images/badgeAI_master.svg);

		&:hover {
			opacity: 1;

			&:active {
				opacity: 0.3;
			}
		}
	}

	#googleFriends {
		cursor: initial;
		left: $badgeWidth + $badgeMargin * 3;
		background-image: url(../images/badgeFriends_master.svg);	
	}

	#badgeBreak{
		$breakHeight: $badgeHeight * 0.8;
		height: $breakHeight;
		left: $badgeWidth + $badgeMargin * 1.8;
		background-color: white;
		opacity: $badegOpacity / 2;
		position: absolute;
		width: 1px;
		bottom: $badgeMargin + ($badgeHeight - $breakHeight) / 2;
	}

	#privacyAndTerms {
		position: absolute;
		bottom: $badgeMargin;
		right: $badgeMargin;
		width: auto;
		font-weight: normal;

		* {
			height: 14px;
			line-height: 14px;
			font-size: 14px;
			color: white;
			display: inline;
			opacity: $badegOpacity;
			margin: 2px;
		}

		a {
			text-decoration: none;
			cursor: pointer;

			&:hover {
				opacity: 1;

				&:active {
					opacity: 0.3;
				}
			}
		}
	}
}