style.css

@import url('/components/CableTrack.css');
@import url('/components/Conveyor.css');
@import url('/components/Crate.css');
@import url('/components/DotMatrixDisplay.css');
@import url('/components/Gantry.css');
@import url('/components/HangingLight.css');
@import url('/components/IBeam.css');
@import url('/components/Lamp.css');
@import url('/components/Router.css');
@import url('/components/SwitchBox.css');


/** Root **/

:root {
	--color-bolt: hsl(204 3% 16% / 1);
	--color-metal-plate: hsl(204 10% 19% / 1);
	--color-metal-plate-light: hsl(204 10% 34% / 1);
	--color-metal-plate-dark: hsl(204 10% 11% / 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}


/** General **/

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: white;
	background:
		radial-gradient(circle at 50% 58%, var(--color-bolt) 5px, transparent 5px),
		radial-gradient(circle at 50% 42%, var(--color-bolt) 5px, transparent 5px),
		url('/textures/rust_coarse_01_rough_1k.webp'),
		linear-gradient(
			180deg,
			var(--color-metal-plate) calc(50% - 7px),
			var(--color-metal-plate-dark) calc(50% - 7px),
			var(--color-metal-plate-dark) 50%,
			var(--color-metal-plate-light) 50%,
			var(--color-metal-plate-light) calc(50% + 7px),
			var(--color-metal-plate) calc(50% + 7px)
		);
	background-position: center;
	background-repeat:
		repeat,
		repeat,
		repeat,
		repeat;
	background-size:
		180px 500px,
		180px 500px,
		700px 700px,
		180px 500px;
	background-blend-mode:
		normal,
		normal,
		overlay,
		normal;
}

section {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	max-width: unset;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	font-weight: 700;
	background-color: unset;
	border: unset;
	border-radius: unset;
	overflow: hidden;
}

.spacer {
	display: block;
	height: 1.3em;
	min-height: 1.3em;
}
.spacer.double {
	display: block;
	height: 2.6em;
	min-height: 2.6em;
}

.icon {
	filter: unset;
}


/** Specific **/

.fallbackOnly {
	display: none;
	user-select: none;
	pointer-events: none;
}

.interactionInput {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(50%);
	overflow: hidden;
}

section > h1 {
	margin: 0;
	color: white;
	font-size: 18rem;
	line-height: 1em;
	mix-blend-mode: overlay;
}
@media screen and (max-width: 600px) {
	section > h1 {
		margin-top: 0.5em;
		font-size: 10rem;
	}
}
section > h2 {
	margin: 0;
	color: white;
	font-size: 3.5rem;
	line-height: 1em;
	mix-blend-mode: overlay;
}
section > p {
	margin: 1rem 0 0;
	color: white;
	font-weight: 700;
	mix-blend-mode: overlay;
}

.landingTagline {
	font-size: larger;
}

.landing > .matrix {
	margin-top: 10vh;
}

ul.technologies {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 10rem 3rem;
	max-width: 80rem;
	margin: 9rem 0;
	padding: 0 5rem;
	list-style: none;
}

.projects {
	min-height: unset;
	background: linear-gradient(0deg, #222, #111 0.8rem, transparent calc(0.8rem + 10px));
}
.projects::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #000, transparent 2rem);
	pointer-events: none;
}
.projects > h2 {
	margin: 5rem auto calc(-5rem - 1em) 6rem;
}
.projects > p {
	margin: 9.5rem auto calc(-9.5rem - 1em) 6rem;
}

.scrollIndicator {
	position: absolute;
	bottom: 1rem;
	right: 4rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	color: white;
	mix-blend-mode: overlay;
	opacity: 0.3;
	user-select: none;
}
@media screen and (max-width: 700px) {
	.scrollIndicator {
		right: 0.2rem;
	}
}
.scrollIndicator > span:nth-of-type(1)::before {
	content: url('https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/widgets/default/48px.svg');
	font-size: 2rem;
	filter: invert(1);
}
.scrollIndicator > span:nth-of-type(2) {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 6rem;
	background-color: currentColor;
	clip-path: polygon(
		0.7rem 0%,
		calc(100% - 0.7rem) 0%,
		calc(100% - 0.7rem) calc(100% - 1.5rem),
		100% calc(100% - 1.5rem),
		50% 100%,
		0% calc(100% - 1.5rem),
		0.7rem calc(100% - 1.5rem)
	);
}
.scrollIndicator > span:nth-of-type(2)::after {
	content: 'DOWN';
	color: black;
	text-align: center;
	transform: rotate(-90deg) translate(0.6em, -0.2em);
	transform-origin: center;
	opacity: 0.7;
}


/** Lighting **/

.lighting {
	position: absolute;
	z-index: 10;
	inset: 0;
	display: block;
	mix-blend-mode: plus-lighter;
	user-select: none;
	pointer-events: none;
}
.lighting > .shadows,
.lighting > .lights {
	position: absolute;
	inset: 0;
}

.landing > .lighting {
	opacity: 0.1;
	mask-image: linear-gradient(180deg, #000 80%, transparent);
	-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
}
.landing > .lighting > .shadows {
	background:
		linear-gradient(180deg, transparent 50%, #000);
}
.landing > .lighting > .lights {
	background:
		radial-gradient(circle at 0% 0%, #fff, transparent),
		radial-gradient(circle at 100% 0%, #fff, transparent);
}

.contact > .lighting {
	opacity: 0.1;
	mask-image: linear-gradient(180deg, transparent, #000 20%);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%);
}
.contact > .lighting > .shadows {
	display: none;
}
.contact > .lighting > .lights {
	background:
		radial-gradient(circle at 50% 50%, #fffc, transparent 200%);
}

.tech > .lighting {
	opacity: 0.1;
	mask-image: linear-gradient(180deg, #000 80%, transparent);
	-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
}
.tech > .lighting > .shadows {
	display: none;
}
.tech > .lighting > .lights {
	background:
		radial-gradient(circle at 50% 50%, #fffc, transparent 200%);
}

.fast > .lighting {
	opacity: 0.2;
	mask-image: linear-gradient(180deg, #000 80%, transparent);
	-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
}
.fast > .lighting > .shadows {
	display: none;
}
.fast > .lighting > .lights {
	background:
		radial-gradient(circle at 50% 50%, #fffc 15%, transparent 50%);
}

.projects > .lighting {
	opacity: 0.9;
	mask-image: linear-gradient(180deg, transparent 4rem, #000);
	-webkit-mask-image: linear-gradient(180deg, transparent 4rem, #000);
}
.projects > .lighting > .shadows {
	display: none;
}
.projects > .lighting > .lights {
	background:
		radial-gradient(circle at calc(100% - 20vw - 1rem) calc(40% - 1rem), #fffc, transparent 15%),
		radial-gradient(circle at calc(100% - 20vw - 1rem) calc(40% - 1rem), #fff4, transparent);
}
@media screen and (max-width: 700px) {
	.projects > .lighting > .lights {
		background:
			radial-gradient(circle at calc(100% - 10vw - 1rem) calc(40% - 1rem), #fffc, transparent 15%),
			radial-gradient(circle at calc(100% - 10vw - 1rem) calc(40% - 1rem), #fff4, transparent);
	}
}
@media screen and (max-width: 400px) {
	.projects > .lighting > .lights {
		background:
			radial-gradient(circle at calc(100% + 0.5rem - 1rem) calc(40% - 1rem), #fffc, transparent 15%),
			radial-gradient(circle at calc(100% + 0.5rem - 1rem) calc(40% - 1rem), #fff4, transparent);
	}
}