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

@import 'common.scss';

$topMargin: 40px;

#splash {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 100;
	font-family: $font-family;
	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;
		}

		#magentaLink {
			margin-top: $topMargin * 0.8;
			letter-spacing: 0.8px;
			line-height: 30px;
			font-size: 20px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-weight: normal;
			color: #aaa;
			font-size: 14px;

			a {
				color: $orange;
				text-decoration: underline;
				cursor: pointer;
				&:hover:active {
					color: white;
				}
			}

		}

		$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 : 110px;
	$badgeHeight: 60px;
	$badgeMargin : 20px;
	$badegOpacity: 0.7;

	$smallScreen : 500px;
	$smallBadgeWidth : 70px;
	$smallBadgeHeight: 40px;

	#badges {

		position: absolute;
		display: inline-block;
		bottom: $badgeMargin;
		left: $badgeMargin;

		@media (max-width: $smallScreen) {
			// bottom: $badgeMargin * 0.5;
		}

		.badge {
			display: inline-block;
			position: relative;
			margin-right: $badgeMargin;
			width: $badgeWidth;
			height: $badgeHeight;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			opacity: $badegOpacity;

			@media (max-width: $smallScreen) {
				width: $smallBadgeWidth;
				height: $smallBadgeHeight;				
			}
		}

		#aiExperiments {
			background-image: url(../images/badgeAI_master.svg);
			&:hover {
				opacity: 1;
				&:active {
					opacity: 0.3;
				}
			}
		}

		#googleFriends {
			cursor: initial;
			background-image: url(../images/badgeFriends_master.svg);	
		}

		#badgeBreak{
			display: inline-block;
			position: relative;
			margin-right: $badgeMargin;

			$breakScale : 0.95;

			$breakHeight: $badgeHeight * $breakScale;
			height: $breakHeight;
			background-color: white;
			opacity: $badegOpacity / 2;
			width: 1px;

			@media (max-width: $smallScreen) {
				$smallBreakHeight: $smallBadgeHeight * $breakScale;
				height: $smallBreakHeight;
			}
		}
	}



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

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

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

			&:hover {
				opacity: 1;

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