source ⟩ hypertext ⟩ public ⟩ latbs ⟩ tupaians ⟩ 2 ⟩ hotwired.css

:root {
	--background: white;
	--text: #111;
	--accent: currentColor;

	--hotwired-bg: #ef0;

	--ibm-plex: "IBM Plex Mono", var(--typewriter);
	--display-serif: "Instrument Serif", var(--cormorant);
}

img {
	margin: 0;
}

#hotwired-masthead {
	display: flex;
	align-items: center;
	gap: 5ch;

	block-size: calc(40px + 4ch);
	padding: 2ch;

	background-color: var(--hotwired-bg);

	& #hotwired-title {
		block-size: 40px;
	}

	& #hotwired-slogan {
		font-family: var(--display-serif);
		font-size: 1.2em;
		font-style: italic;
	}

	& #masthead-clocks {
		display: flex;
		margin-inline-start: auto;
		gap: 1ch;

		& .clock {
			line-height: 1;
			text-align: center;

			& .clock-dial {
				font-family: var(--display-serif);
				font-size: 1.5em;
			}

			& .clock-label {
				font-family: var(--ibm-plex);
				font-size: 0.8em;
			}
		}
	}
}

#hotwired-navbar ul {
	display: flex;
	margin: 0;
	padding: 0;

	background-color: var(--hotwired-bg);
	border-block: 1px solid black;

	& li {
		display: block;
		padding-inline: 1ch;
		margin: 0;

		font-family: var(--ibm-plex);
		text-transform: uppercase;

		border-inline-end: 1px solid black;

		&.navbar-meta {
			color: var(--hotwired-bg);

			background-color: black;
		}

		&#navbar-search {
			display: flex;
			flex-grow: 1;
			align-items: center;
			justify-content: end;
			gap: 1ch;
			text-transform: none;

			& > input {
				flex-grow: 1;
				block-size: 80%;
				inline-size: 4ch;
				max-inline-size: 40ch;
				margin: 0;
				padding: 0;

				background-color: transparent;
				border: none;
				border-block-end: 1px solid black;
			}

			& #search-icon {
				inline-size: 16px;
			}
		}

		& a {
			text-decoration: none;
		}
	}
}

#article-header {
	display: grid;
	grid-template-columns: 1fr 1fr;

	block-size: 30em;

	color: white;

	background-color: black;

	& #article-titles {
		display: flex;
		justify-content: center;
		align-items: center;

		& #article-titlebox {
			max-inline-size: 30em;

			& #article-topic {
				margin-block-end: 1ch;

				font-family: var(--ibm-plex);
				text-transform: uppercase;

				& a {
					font-weight: bold;
					text-decoration: none;
				}
			}

			& h2 {
				margin-block: 0 1ch;

				font-family: var(--display-serif);
				font-size: 3rem;
				font-weight: normal;
				line-height: 1;
			}

			& #article-subhead {
				margin-block-end: 3ch;

				font-family: var(--sans-serif);
				font-size: 1.1em;
				text-wrap: balance;
				hyphens: none;
			}

			& #article-credits {
				font-family: var(--ibm-plex);
				text-transform: uppercase;

				& a {
					font-weight: bold;
					text-decoration: none;
				}
			}
		}
	}

	& #article-hero-image {
		block-size: 30em;
		inline-size: 100%;

		object-fit: cover;
	}
}

#hotwired-body {
	display: flex;
	justify-content: center;
	gap: 5em;

	& article {
		flex-basis: 55ch;

		font-family: "Crimson Pro", var(--serif);
		font-size: 1.15em;
	}

	& #more-stories {
		flex-basis: 45ch;

		& h3 {
			margin-block: 0.75em;

			font-family: var(--display-serif);
			font-size: 1.5em;
			font-weight: normal;
		}

		& .story {
			display: grid;
			grid-template-columns: 5em 1fr;
			grid-template-rows: auto 1fr auto;
			align-items: center;
			column-gap: 1ch;

			margin-block-end: 1em;

			& .story-image {
				grid-row: 1 / 4;
				inline-size: 5em;
				block-size: 5em;

				object-fit: cover;
			}

			& .story-topic {
				font-family: var(--ibm-plex);
				font-size: 0.8em;
				text-transform: uppercase;
			}

			& .story-title {
				font-family: var(--display-serif);
				line-height: 1.1;
				font-size: 1.1em;
				text-wrap: balance;
			}

			& .story-when {
				font-family: var(--sans-serif);
				font-size: 0.9em;
				font-style: italic;
			}
		}
	}
}

/* Inline | https://satyrs.eu/latbs/tupaians/2 */

#bebo-embed {
	display: block;
	text-decoration: none;
	border-radius: 20px;
	display: grid;
	grid-template-rows: auto auto auto auto;
	font-family: var(--system);
	font-size: 1rem;
	margin-inline: 1em;
	border: 1px solid #f038;
	box-shadow: -5px -5px 15px #f034, 5px 5px 15px #f404, 0px 5px 5px #0002,
		inset 5px 5px 10px #fff8, inset -2px -5px 10px #c003;
	background-image: linear-gradient(to bottom right, #ffeef1, #fff2ee);
}

#bebo-embed > * {
	padding-inline: 1em;
}

#bebo-header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding-block-start: 1em;
}

#bebo-header-avatar {
	inline-size: 3em;
	border-radius: 50%;
	box-shadow: 0 0 2px #f03;
}

#bebo-header-text {
	font-size: 0.9em;
	line-height: 1.2;
}

#bebo-header-alias b {
	color: #f03;
}

#bebo-post p {
	text-align: start;
}

#bebo-stats {
	display: flex;
	font-size: 0.9em;
	gap: 1em;
	justify-content: space-around;
	padding-block-end: 1rem;
}

#bebo-footer {
	padding-block: 1rem;
	padding-inline-start: 2em;
	color: #f03;
	border-block-start: 1px solid #f034;
	background-color: #f001;
	text-align: end;
}

.bebo-stat b {
	color: #f03;
}

p.fuck-you {
	filter: blur(2px);
}

#signup-bug {
	background-color: var(--hotwired-bg);
	padding: 1em;
	text-align: center;
	margin-block: -5em 1em;
	z-index: 3;
	position: relative;
	box-shadow: 0 0 3em 1em white;

	& #signup-heading {
		font-family: var(--display-serif);
		font-size: 2em;
		font-style: italic;
	}

	& #signup-explainer {
		font-family: var(--sans-serif);
	}

	& #signup-yearly {
		text-decoration: none;
		display: block;
		background-color: black;
		color: var(--hotwired-bg);
		font-family: "IBM Plex Mono", monospace;
		text-transform: uppercase;
		padding: 1ch;
		line-height: 1;
		margin-block: 1em;
	}

	& #signup-monthly {
		display: block;
		font-family: "IBM Plex Mono", monospace;
		text-transform: uppercase;
		font-size: 0.7em;
		margin-block-end: 1em;
	}
}

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	src: url("/fonts/InstrumentSerif.woff2");
}

@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	src: url("/fonts/InstrumentSerifItalic.woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-weight: normal;
	font-style: normal;
	src: url("/fonts/IBMPlexMono-Regular.woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-weight: bold;
	font-style: normal;
	src: url("/fonts/IBMPlexMono-Bold.woff2");
}

@font-face {
	font-family: "Crimson Pro";
	font-weight: normal;
	font-style: normal;
	src: url("/fonts/CrimsonPro.woff2");
}

@font-face {
	font-family: "Crimson Pro";
	font-weight: normal;
	font-style: italic;
	src: url("/fonts/CrimsonProItalic.woff2");
}