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

@import 'common.scss';

$topMargin: 35px;

#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: 55px;
			letter-spacing: 1px;
			font-weight: 300;
		}

		#germanSubTitle, #germanHowItWorks {
			margin-top: $topMargin;
			letter-spacing: 0.8px;
			line-height: 30px;
			font-size: 15px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-weight: 300;
		}
		#subTitle {
			margin-top: 0px;
			letter-spacing: 0.8px;
			line-height: 30px;
			font-size: 15px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-weight: 300;
			font-style: italic;
		}

		#germanHowItWorks {
			$size : 20px;
			$margin: 30px;

			color: $orange;
			width: 100&;
			display: inline-block;
			text-align: center;
			/*margin-left: $margin;*/
		}

		#howItWorks {
			$size : 20px;
			$margin: 0px;

			color: $orange;
			width: 100%;
			display: inline-block;
			/*margin-left: $margin;*/
			letter-spacing: 0.8px;
			line-height: 30px;
			font-size: 15px;
			/*margin-right: auto;*/
			text-align: center;
			font-weight: 300;
			font-style: italic;
		}

		#aboutPageLink {
			$size : 20px;
			$margin: 30px;

			margin-top: $topMargin;
			color: $orange;
			width: auto;
			display: inline-block;
			margin-left: $margin;

			/*&:before {*/
				/*position: absolute;*/
				/*width: $size;*/
				/*height: $size;*/
				/*margin-left: -$margin;*/
				/*margin-top: $size / 4;*/
				/*content : '';*/
				/*background-image: url(../images/yellow_play_triangle.svg);*/
			/*}*/

			cursor: pointer;

			transition: transform 0.1s;

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

		$loaderWidth: 398px;
		$loaderHeight: 118px;

		#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;

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

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


				#fillText {
					width: $loaderWidth;
					height: 100%;
					color: $orange;
					$imgWidth: 40px;
					$margin : 52px;

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

					#play {
						margin-left: 150px;
						right: $margin;
						position: relative;
						/*display: inline-block;*/
					}
					#germanPlay {
						margin-left: 120px;
						right: $margin;
						position: absolute;
						padding-top: 30px;
						/*display: inline-block;*/
					}
					#piano {
						width: 100%;
						height: 100%;
						background-image : url(../images/keyboard_icon_CMedit.svg);
						background-position: center center;
						background-repeat: no-repeat;
					}

				}
			}

			#loaderText, #fillText {
				line-height: $loaderHeight;
				font-size: 22px;
				text-align: center;
				font-weight: normal;
			}
			&.loaded {
				 margin-top: $topMargin;
				 border: none;
				 width: 400px;
				 height: 120px;
				 background-color: transparent;

				 #loaderText {
					 background-color: transparent;
				 }
				 #fillText {
					 background-color: transparent;
				 }
				 #fill {
					 background-color: transparent;
				 }
			 }

		}
	}

	#buildWith {
		margin-top: $topMargin;
	}

	$badgeWidth : 120px;
	$badgeHeight: 60px;
	$badgeMargin : 20px;
	$badegOpacity: 0.7;

	$smallScreen : 575px;
	$smallBadgeWidth : 90px;
	$smallBadgeHeight: 40px;
	$smallBadgeMargin: 8px;

	#badges {

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

		@media (max-width: $smallScreen) {
			// bottom: $badgeMargin * 0.5;
			bottom: 40px;
			$badgesWidth : $smallBadgeWidth * 3 + $smallBadgeMargin * 3 + 2px;
			width: $badgesWidth;
			left: 50%;
			margin-left: -$badgesWidth/2;
			// left: $smallBadgeMargin * 2;			
			// left: 50%;
			// transform: translate(-50%, 0);
		}

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

			@media (max-width: $smallScreen) {
				width: $smallBadgeWidth;
				height: $smallBadgeHeight;	
				font-size: 10px!important;
				margin-right: $smallBadgeMargin;
				opacity: 1;
			}
		}

		#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);	
			margin-right: 0px;
		}


		#magentaLink {
			font-weight: bold;
			font-size: 12px;
			margin-left: 0px;
		    margin-right: 0px;
		    color: white;

			/*&:hover {*/
				/*opacity: 1;*/
			/*}*/

			@media (max-width: $smallScreen) {
				font-size: 7px;
			}


			div {
				display: inline-block;
				position: relative;
			}

			$imgSize : $badgeHeight;
			$smallImg : $smallBadgeHeight;
			#img {
				background-image: url(../images/magenta_bw_logo.png);
				background-size: 90% 90%;
				background-position: left center;
				background-repeat: no-repeat;
				width: $imgSize;
				height: $imgSize;
				float: left;

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

			#text {
				margin-top: 14px;
				float: right;
				height: 100%;
				width: $badgeWidth - $imgSize;

				@media (max-width: $smallScreen) {
					margin-top: 7px;
					width: $smallBadgeWidth - $smallImg;
				}

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

		}

		.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;
				margin-right: $smallBadgeMargin;
			}
		}
	}



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

		@media (max-width: $smallScreen) {
			bottom: $smallBadgeMargin;
			left: 50%;
			right: initial;
			transform: translate(-50%, 0);

			* {
				font-size: 8px!important;
			}
		}

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