vlw.se/assets/css/pages/index.css

/* ## Picture */

vv-shell {
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
	justify-content: space-between;

	img {
		width: 25vh;
		margin: auto;
		filter: hue-rotate(var(--hue-accent));
		pointer-events: none;
		-webkit-filter: hue-rotate(var(--hue-accent));
	}
}

/* ## Menu */

.menu {
	width: 100%;
	display: flex;
	max-width: 300px;
	flex-direction: column;

	svg {
		width: 100%;
		animation: dash 1500ms linear infinite;
	}

	menu {
		color: var(--color-accent);
		margin: var(--padding) 0;
		padding: unset;
		font-size: clamp(20px, 8vh, 60px);
		list-style: none;
		text-align: right;
		font-weight: bold;
		line-height: clamp(20px, 8vh, 60px);

		@media (hover: hover) {
			&:hover li {
				opacity: .6;
			}
		}

		li {
			transition: 200ms opacity, 200ms color;

			@media (hover: hover) {
				/* enable font-weight hover animation */
				@media not (prefers-reduced-motion: reduce) {
					& {
						transition: 200ms opacity, 200ms color, 300ms font-weight;
					}
				}

				&:hover {
					opacity: 1;
					font-weight: 100;
					text-shadow: 0 0 10px rgba(var(--primer-color-accent), .4);
				}
			}
		}
	}

	button {
		border: unset;
		padding: var(--padding) 0;
		text-align: right;

		p {
			&:first-of-type {
				color: var(--color-accent);
			}
		}

		.email {
			@media (hover: hover) {
				&:hover {
					background-color: transparent;
				}
			}
		}
	}
}

@keyframes dash {
	to { stroke-dashoffset: 32; }
}

/* # Email-copied splash */

splash {
	--confetti: unset;
	--text-shadow: 0 0 30px black;

	top: 50%;
	left: 50%;
	color: white;
	z-index: 200;
	display: initial !important;
	position: fixed;
	font-size: 80px;
	animation: splash-reveal 1s ease;
	transform: translate(-50%, -50%);
	transition: 300ms opacity;
	font-weight: 900;
	perspective: 300px;
	text-shadow:
		var(--text-shadow),
		var(--text-shadow),
		var(--text-shadow),
		var(--text-shadow)
	;
	pointer-events: none;

	&::after {
		top: 50%;
		left: 50%;
		width: 8px;
		height: 16px;
		content: "";
		opacity: 0;
		position: absolute;
		animation: splash-confetti 1s ease;
		box-shadow: var(--confetti);
		background-color: transparent;
	}

	&.hide {
		opacity: 0;
	}
}

@keyframes splash-confetti {
	0%   {
		transform: rotate(12deg) scale(0);
		opacity: 1;
	}

	60% {
		opacity: 1;
	}

	100% {
		transform: rotate(-10deg) scale(1);
		opacity: 0;
	}
}

@keyframes splash-reveal {
	0%   { transform: translate(-50%, -50%) rotate(-8deg) scale(0); }
	35%  { transform: translate(-50%, -50%) rotate(-3deg) scale(1.1); }
	100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

/* # Features */

.cta {
	content: "tap ";

	@media (pointer: fine) {
		&::before {
			content: "click ";
		}
	}
}

/* # Size quries */

@media (min-width: 900px) {
	vv-shell {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		align-items: center;
	}

	vv-shell img {
		width: 35vh;
	}
}