style.scss

@import "css/vars";

// Styles specific to homepage

body > header {
	display: block;
	text-align: center;
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 5em), 0% 100%);
	background: linear-gradient(transparent, rgba(0,0,0,.5)), url(img/header.jpg) bottom / cover;

	a {
		color: inherit;
	}

	.masthead {
		display: flex;
		justify-content: space-between;

		.logo {
			img {
				display: block;

				&:not(:hover) {
					filter: grayscale(100%) brightness(400%);
				}
			}
		}
	}

	.promo {
		padding: 5em;
		padding: 3em calc(50% - 16em) 5em;
		font-size: 150%;

		.tagline {
			font-size: 280%;
			line-height: 1;
			margin-bottom: 0;
			font-weight: 100;
		}

		p {
			hyphens: manual;
			font-weight: 500;
		}

		.button {
			&:not(:hover) {
				background: white;
				color: black;
				mix-blend-mode: screen;
			}

			&:hover {
				background: $green;
				color: white;
			}
		}
	}
}

body > header nav iframe {
	display: inline-block;

	&:not(:hover) {
		mix-blend-mode: screen;
		filter: invert(100%);
	}

	&:hover,
	&:focus {
		mix-blend-mode: luminosity;
	}
}

#what {
	ul {
		font-size: 150%;
		hyphens: none;
	}

	a {
		font-weight: 400;
	}
}

#pros {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: center;
	$background: lighten($blue, 15%);
	background: $background;
	padding: 5em calc(50vw - #{$content-width/2}) 6em;
	clip-path: polygon(0% 0%, 100% 4em, 100% calc(100% - 7em), 0% 100%);
	font-weight: 400;
	margin: 0 -2rem;

	@media (max-width: 1150px) {
		margin: 0 -1rem;
	}

	article {
		box-sizing: border-box;
		padding: .4em;

		@media (min-width: 800px) {
			width: 50%;
		}

		h1 {
			margin: 0;
			color: white;
			font: bold 150%/1 $heading-font;

			&::before {
				content: "✓";
				display: inline-block;
				vertical-align: text-bottom;
				margin-right: .3em;
				width: 1em;
				background: white;
				color: $background;
				border-radius: 50%;
				text-align: center;
				font-size: 135%;
				line-height: 1;
			}
		}

		a, strong {
			font-weight: 900;
		}

		a {
			color: inherit;
			text-decoration: underline;
			text-decoration-color: hsla(0,0%,0%,.3);
		}
	}
}

.manual.example {
	[mv-app="shopping"] {
		h1 {
			margin: 0;
			color: hsl(200, 20%, 50%);
			font: bold 200% Helvetica Neue, sans-serif;
			letter-spacing: -.04em;
		}

		ul {
			padding: 0;
		}

		li {
			padding: .5em;
		}

		li:not(.mv-deleted) {
			display: flex;
			background: hsl(200, 20%, 97%);

			&:nth-child(odd) {
				background: hsl(200, 20%, 94%);
			}
		}

		:checked + span {
			font-style: italic;
			text-decoration: line-through;
			color: gray;
		}

		label {
			flex: 1;
		}

		.mv-item-bar.mv-ui {
			position: static;
			pointer-events: auto;
			opacity: 1;
			mix-blend-mode: multiply;
			border: 0;
		}
	}
}