Iosevka/shared/styles-scss/page-parts/banner.scss

@use "../shared/chroma.scss";
@use "../shared/metrics.scss";

$bannerStatHeight: 3.5rem;
$bannerStatPadding: 0.5rem;
$bannerNarrowLimit: metrics.sectionTotalWidthChars(14, 6rem);

.banner {
	height: 100vh;
	position: relative;
	padding: 0;
	overflow: hidden; // Prevent glow from creating scrollbars
}
.banner-title {
	text-align: center;
	white-space: nowrap;
	font-weight: 100;
	font-size: 12rem;
	color: chroma.$light2;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1em;
	line-height: 1em;
	margin: -12rem 0 0 0;
	@include metrics.AutoFontSize(12, 8rem);
	@include metrics.AutoFontSize(12, 6rem);
	@include metrics.AutoFontSize(12, 4rem);
	@include metrics.AutoFontSize(12, 2rem);

	@media (max-width: $bannerNarrowLimit) {
		margin-top: -12rem;
	}
}
.functional-button-row {
	display: flex;
	height: $bannerStatHeight;
	justify-content: center;
	position: absolute;
	bottom: 10rem;
	left: 0;
	right: 0;
}
.banner-stats {
	bottom: 10rem;
	> .stat {
		flex: none;
		box-sizing: border-box;
		padding-top: $bannerStatPadding;
		padding-bottom: $bannerStatPadding;
		> .quantity {
			color: chroma.$light4;
			font-weight: 200;
			font-size: 1.5em;
			line-height: 1em;
		}
		> .desc {
			font-weight: 300;
			font-size: 0.8em;
		}
	}
	> .stat + .stat {
		margin-left: 1rem;
		padding-left: 1rem;
		border-left: 1px solid chroma.$dark3;
	}
	> .main-button {
		font-weight: 500;
		font-stretch: expanded;
		display: flex;
		flex: none;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		margin-left: 1rem;
		padding: $bannerStatPadding 4 * $bannerStatPadding;
		line-height: $bannerStatHeight - 2 * $bannerStatPadding;
		> .label {
			display: block;
			line-height: 1;
		}
	}
	> .install-button {
		color: chroma.$light2;
		text-decoration: none;
		border-width: 0.125em;
		border-style: solid;
		border-image-slice: 1;
		border-image-source: linear-gradient(-45deg, chroma.$cyan1, chroma.$azure1);
		&:hover {
			@include chroma.control-hover();
		}
	}
	> .install-button-split {
		margin-left: 1rem;
		display: flex;
		flex-direction: column;
		> .sub-button {
			line-height: 1;
			color: chroma.$light2;
			display: flex;
			flex: 1;
			box-sizing: border-box;
			text-decoration: none;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			> .label {
				flex: none;
				font-weight: 400;
				font-size: 0.8em;
				vertical-align: 1 / 20 em;
				@include chroma.thin-underline(0.95em, chroma.$dark1, chroma.$light1);
			}
		}
	}

	@media (max-width: $bannerNarrowLimit) {
		display: block;
		height: auto;
		bottom: 10rem;
		> .stat,
		> .install-button {
			margin: 1rem;
			width: auto;
		}
		> .main-button {
			padding: 0.5rem 0.75rem;
		}
		> .install-button {
			height: 3rem;
		}
		> .install-button-split {
			height: 4rem;
		}
	}
}
.banner-scroll-down-arrow {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -5rem);

	span {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		border-bottom: 2px solid chroma.$azure1;
		border-right: 2px solid chroma.$azure1;
		transform: rotate(45deg);
		margin: -15px;
		animation: banner-scroll-down-arrow-animation 4s infinite;
	}

	span:nth-child(2) {
		animation-delay: -0.2s;
	}

	span:nth-child(3) {
		animation-delay: -0.4s;
	}
}

@-webkit-keyframes banner-scroll-down-arrow-animation {
	0% {
		opacity: 0;
		transform: rotate(45deg) translate(-0.5rem, -0.5rem);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) translate(0.5rem, 0.5rem);
	}
}

@-moz-keyframes banner-scroll-down-arrow-animation {
	0% {
		opacity: 0;
		transform: rotate(45deg) translate(-0.5rem, -0.5rem);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) translate(0.5rem, 0.5rem);
	}
}

@-ms-keyframes banner-scroll-down-arrow-animation {
	0% {
		opacity: 0;
		transform: rotate(45deg) translate(-0.5rem, -0.5rem);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) translate(0.5rem, 0.5rem);
	}
}

@-o-keyframes banner-scroll-down-arrow-animation {
	0% {
		opacity: 0;
		transform: rotate(45deg) translate(-0.5rem, -0.5rem);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) translate(0.5rem, 0.5rem);
	}
}

@keyframes banner-scroll-down-arrow-animation {
	0% {
		opacity: 0;
		transform: rotate(45deg) translate(-0.5rem, -0.5rem);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) translate(0.5rem, 0.5rem);
	}
}