@import '_reset';
@import '_media-queries';

@font-face {
	font-family: 'Space Grotesk Variable';
	src:	url("../fonts/SpaceGrotesk[wght].woff2") format("woff2"),
			url("../fonts/SpaceGrotesk[wght].woff") format("woff");
	font-weight: 100 700;
	font-style: normal;
}

@font-face {
	font-family: 'Space Grotesk OpenType';
	src:	url("../fonts/SG-OpenType.woff2") format("woff2"),
			url("../fonts/SG-OpenType.woff") format("woff");
	font-weight: 100 700;
	font-style: normal;
}

@font-face {
	font-family: 'Space Grotesk Transition';
	src:	url("../fonts/SG-Transition.woff2") format("woff2"),
			url("../fonts/SG-Transition.woff") format("woff");
	font-weight: 100 700;
	font-style: normal;
}

@font-face {
	font-family: 'Space Grotesk Linear';
	src:	url("../fonts/SG-Linear.woff2") format("woff2"),
			url("../fonts/SG-Linear.woff") format("woff");
	font-weight: 100 700;
	font-style: normal;
}

$accent: orange;
$muted: #aaa;

* {
	box-sizing: border-box;
}

html {
	font-size: 12px;
	--scroll-behavior: smooth;
	scroll-behavior: smooth;
}

body {
	font-family: 'Space Grotesk';
	font-weight: 400;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0em;
	-webkit-font-smoothing: antialiased;

	color: white;
	background-color: black;
}

a {
	color: inherit;
	text-decoration: none;
}

span.nowrap {
	white-space: nowrap;
}

span.label {
	display: block;
	padding-bottom: 2.5rem;

	font-family: 'Space Grotesk';
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.04em;
}

header {
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.04em;
	padding: 0 2.5rem;

	& > .content {
		padding: 2.75rem 0;
		border-bottom: solid white 0.85vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}	
}

nav {
	display: none;

	@include min-screen(800px) {
		display: block;
	}

	ul {
		display: flex;

		li + li {
			margin-left: 2rem;
		}
	}
}

section {
	padding: 0 2.5rem;

	& > .content {
		padding: 2.75rem 0;
		border-bottom: solid white 0.85vw;
	}

	&.ot-section > .content {
		padding: 0;
	}
}

.large-type {
	position: relative;

	.text {
		font-size: calc((100vw - 5rem) * 0.158);
		line-height: 0.925;
		text-align: center;
		margin-bottom: calc(1.75rem + 2.65rem);
	}
}

.switch-container {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	div {
		display: flex;
		align-items: flex-end;
		padding-bottom: 2.75rem;

		span {
			display: inline-block;
			position: relative;

			font-weight: 500;
			font-size: 1rem;
			line-height: 1;
			letter-spacing: 0.04em;
			padding: 0.3em 0 0.35em 0;
			border-radius: 1rem;
			color: white;
			background-color: black;

			&:before {
				content: " ";
				position: absolute;
				display: inline-block;
				width: 1em;
				height: 1em;
				border-radius: 0.5em;
				margin-right: 0.5em;
				background-color: black;
				top: 0.325em;
				transform: translateX(0);
				opacity: 0;
				transition: all 150ms;
			}

			transition: all 150ms;
		}

		&.active {

			span {
				background-color: $accent;
				color: black;
				padding: 0.3em 0.75em 0.35em 0.75em;
				transition: all 200ms;

				@include min-screen(600px) {
					padding: 0.3em 0.75em 0.35em 1.9em;

					&:before {
						transform: translateX(-1.5em);
						opacity: 1;
						transform: translateX(-1.5em);
					}
				}
			}
		}
	}
}

.large-type.variable-animation {
	.text {
		font-family: 'Space Grotesk Linear';
		transition: none;

		animation-name: variableloop;
		animation-duration: 2500ms;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}
}

@keyframes variableloop {
	from {
		font-weight: 300;
	}

	50% {
		font-weight: 700;
	}

	to {
		font-weight: 300;
	}
}

.weights {
	.text {
		font-family: 'Space Grotesk';
		transition: font-weight 300ms;
	}

	.switch-container {
		div {
			&:nth-child(1), &:nth-child(4) {
				width: 20%;
				flex: 0 0 20%;
			}

			&:nth-child(2), &:nth-child(3) {
				width: 30%;
				flex: 0 0 30%;
				justify-content: space-around;
			}

			&:nth-child(4) {
				justify-content: flex-end;
			}
		}

		@include min-screen(600px) {
			div {
				&:nth-child(1), &:nth-child(4) {
					width: 16.666%;
					flex: 0 0 16.666%;
				}

				&:nth-child(2), &:nth-child(3) {
					width: 33.333%;
					flex: 0 0 33.333%;
					justify-content: space-around;
				}

				&:nth-child(4) {
					justify-content: flex-end;
				}
			}
		}
	}
}

.large-type.opentype {
	.text {
		font-family: 'Space Grotesk OpenType';

		span {
			//color: white;
			color: $accent;
			font-weight: 700;
			transition: font-weight 300ms, color 300ms;
		}

		span.disabled {
			color: $muted;
			font-weight: 100;
		}
	}

	.switch-container {
		div {
			width: 50%;
			flex: 0 0 50%;

			&:last-child {
				justify-content: flex-end;

				&.active span {
					background-color: $muted;
				}
			}
		}
	}
}

.large-type.transition {
	.text {
		font-family: 'Space Grotesk Transition';
		font-weight: 100;
		transition: font-weight 300ms;

		&.disabled {
			font-weight: 700;
		}
	}

	.switch-container {
		div {
			width: 50%;
			flex: 0 0 50%;

			&:last-child {
				justify-content: flex-end;
			}
		}
	}
}

.columns {
	display: flex;
	align-items: baseline;

	.column {
		width: 50%;
		flex: 0 0 50%;

		&:first-child {
			border-right: solid white 0.85vw;
		}

		&:last-child {
			padding-left: 2.5rem;
		}

		& > div {
			transform: translateX(-0.4vw);
		}
	}

	font-size: 10vw;
	line-height: 0.9;
	font-weight: 400;
}

.waterfall {
	span.mobile + span {
		display: none;
	}

	& > div {
		overflow: hidden;
		font-size: 32px;
		line-height: 40px;

		span {
			display: block;
			white-space: nowrap;

			&:nth-child(1), &:nth-child(2) {
				font-weight: 700;
			}

			&:nth-child(3), &:nth-child(4) {
				font-weight: 500;
			}

			&:nth-child(5), &:nth-child(6) {
				font-weight: 400;
			}

			&:nth-child(7), &:nth-child(8) {
				font-weight: 300;
			}
		}
	}

	@include min-screen(800px) {
		span.mobile {
			display: none;
		}

		span.mobile + span {
			display: block;
		}

		& > div {
			font-size: 48px;
			line-height: 54px;
		}
	}
}

.about {
	.title, .author {
		font-weight: 500;
		font-size: 1rem;
		letter-spacing: 0.04em;
	}	

	.author {
		line-height: 1.3;
	}

	.description {
		font-size: 2rem;
		line-height: 1.25;
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	@include min-screen(800px) {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto;

		.title {
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 1;
			grid-row-end: 2;
		}

		.author {
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 2;
			grid-row-end: 3;
			align-self: end;
			padding-bottom: 0.4rem;
			padding-right: 2.5rem;
		}

		.description {
			grid-column-start: 2;
			grid-column-end: 3;
			grid-row-start: 1;
			grid-row-end: 3;
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

.paragraphs {
	position: relative;

	.text {
		padding-bottom: 3.75rem;

		.paragraph {
			overflow: hidden;

			& > div {
				overflow: hidden;
			}
		}

		.paragraph.large {
			font-size: 24px;
			line-height: 32px;

			& > div {
				max-height: calc(32px * 14);
			}
		}

		.paragraph.medium {
			font-size: 21px;
			line-height: 24px;	
			padding-top: 2.5rem;

			& > div {
				max-height: calc(24px * 8);
			}
		}

		.paragraph.small {
			font-size: 13px;
			line-height: 18px;
			padding-top: 2.5rem;
			padding-bottom: 2px;

			& > div {
				max-height: calc(18px * 10);
			}
		}

		@include min-screen(800px) {
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: 244px 244px;

			.paragraph.large {
				grid-column-start: 1;
				grid-column-end: 1;
				grid-row-start: 1;
				grid-row-end: 3;

				& > div {
					padding-right: 2rem;
				}
			}

			.paragraph.medium {
				grid-column-start: 2;
				grid-column-end: 3;
				grid-row-start: 1;
				grid-row-end: 2;
				padding-top: 0;
			}

			.paragraph.small {
				grid-column-start: 2;
				grid-column-end: 3;
				grid-row-start: 2;
				grid-row-end: 3;
				align-self: end;
				padding-top: 0;
			}
		}
	}
}

section > .character-set {
	display: flex;
	padding-top: 0;
	padding-bottom: 3rem;

	font-family: 'Space Grotesk Variable';
	font-weight: 700;

	@include min-screen(600px) {
		display: flex;

		& > div {
			width: 50%;
			flex: 0 0 50%;
		}
	}

	

	span.label {
		padding-bottom: 2.75rem;
	}

	.character-preview {
		display: none;

		@include min-screen(600px) {
			display: block;
		}

		padding-right: 2.5rem;

		& > div {
			position: sticky;
			top: 0;
			padding-top: 2.75rem;

			div.character {
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;
				//border: 1px solid white;				

				height: calc(100vh - 9.25rem);
				padding-bottom: 2.75rem;

				div.character-content {
					display: block;
					position: relative;
					width: 100%;
					text-align: center;
					padding: 0;

					& > span {
						display: block;
						position: absolute;
						left: 0px;
						width: 100%;
						height: 0;
						border-top: 1px dotted #444;

						&:before {
							display: block;
							position: absolute;
							bottom: 0.5rem;
							left: 0;
							font-size: 0.8rem;
							font-weight: 500;
							letter-spacing: 0.05em;
							color: #444;
						}

						&.baseline {
							bottom: 28%;
							//border-color: $accent;

							&:before {
								content: "Baseline";
							}
						}

						&.x-height {
							bottom: 59.275%;

							&:before {
								content: "X-Height";
							}
						}

						&.ascender {
							bottom: 72.25%;

							&:before {
								content: "Cap Height";
							}
						}

						&.descender {
							bottom: 15.25%;

							&:before {
								content: "Descender";
							}
						}
					}

					div.character {
						width: 100%;
						height: auto;
						z-index: 1;
						padding: 0.325em 0 0.25em 0;

						font-size: 28vw;
						line-height: 1;
						font-weight: 700;
						letter-spacing: 0;
						text-align: center;
					}
				}

				div#character-info {
					position: absolute;
					bottom: 0;
					left: 0;

					font-weight: 500;
					line-height: 1;
					letter-spacing: 0.04em;

					span + span {
						margin-left: 2rem;
					}
				}
			}
		}
	}

	.character-list {
		padding-top: 2.75rem;

		.character-group {
			& + .character-group {
				padding-top: 2.5rem;
			}

			& > div {
				display: flex;
				flex-wrap: wrap;
				border-top: 1px solid white;
				border-left: 1px solid white;

				& > span {
					width: 16.666%;
					flex: 0 0 16.666%;
					padding: 4.5vw 0 4vw 0;

					border-right: 1px solid white;
					border-bottom: 1px solid white;

					font-size: 7.5vw;
					font-weight: 700;
					text-align: center;

					cursor: default;
					transition: background-color 100ms, color 100ms;

					@include min-screen(600px) {
						padding: 2.5vw 0 2.25vw 0;
						font-size: 3.75vw;
					}

					@include min-screen(900px) {
						width: 20%;
						flex: 0 0 12.5%;
						padding: 2vw 0 1.75vw 0;
						font-size: 2.95vw;
					}

					@include min-screen(1200px) {
						width: 10%;
						flex: 0 0 10%;
						padding: 1.5vw 0 1.25vw 0;
						font-size: 2.25vw;
					}

					&.active {
						background-color: white;
						color: $accent;
						transition: background-color 200ms, color 200ms;
					}
				}
			}
		}
	}
}

.ot-container {
	@include min-screen(600px) {
		display: flex;
		flex-wrap: wrap;
	}

	.ot {
		flex: 0 0 50%;
		border-top: 1px dotted #444;

		&:nth-child(1) {
			border-top: none;
		}

		@include min-screen(600px) {
			flex: 0 0 50%;
			border-top: 1px dotted #444;

			&:nth-child(2) {
				border-top: none;
			}

			&:nth-child(odd) {
				.ot-content {
					border-right: 1px dotted #444;
					padding-right: 2.5rem;
				}
			}

			&:nth-child(even) {
				.ot-content {
					padding-left: 2.5rem;
				}
			}
		}

		.ot-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 2.5rem;
			padding-bottom: 2.5rem;


			.label {
				flex: 0 0 100%;
				align-self: flex-end;
				order: 3;
				padding: 3.5rem 0 0 0;
			}

			.ot-string {
				flex: 0 1 auto;
				font-family: 'Space Grotesk Variable';
				font-weight: 500;
				font-size: 7vw;
				line-height: 1;

				&:nth-child(2) {
					span {
						color: $muted;
					}
				}

				&:nth-child(3) {
					span {
						color: $accent;
					}
				}

				@include min-screen(600px) {
					font-size: 3.5vw;
				}
			}
		}
	}
}

.download {
	.links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: 0.5rem 0 3rem 0;

		a {
			font-size: 2rem;
			line-height: 1;
			font-weight: 700;

			background-color: white;
			color: black;

			padding: 0.75em 1.75rem;
			margin: 0.25em;

			border-radius: 1.25em;

			&:hover {
				background-color: $accent;
			}
		}
	}
}

#gf-badge svg {
	fill: white !important;
}

footer {
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	padding: 1.25rem;

	a {
		text-decoration: underline;
	}

	ul a {
		text-decoration: none;
	}

	p + p {
		margin-top: 1.3em;
	}

	.column {
		padding: 1.25rem;
	}

	@include min-screen(800px) {
		display: flex;

		.column {
			width: 25%;

			&:last-child {
				width: 50%;
			}
		}
	}
}