sharkk/website public

branch main
showing the latest snapshot on main
style.css 19.6 KB · CSS
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-family);
	background-color: var(--body-bg);
	color: white;
	background-image: url('../img/lines.svg');
	background-repeat: repeat-y;
	background-size: 100% auto;
	overflow-x: hidden;
}

body > div.container {
	max-width: var(--site-width);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

body > div.container:first-of-type {
	z-index: 30;
}

a {
	color: #59c2ff;
	text-decoration: none;

	&:hover, &:focus {
		color: hsl(202, 90%, 47%)
	}
}

[hidden] {
	display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	.highlight {
		background: linear-gradient(#12AEF5, #2253B6);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

header#main {
	margin-top: 1rem;
	height: 100px;
	width: 100%;
	position: relative;
	z-index: 10;
	background-color: var(--bg-color);
	background-image: url('../img/logo.svg');
	background-repeat: no-repeat;
	background-position: top left;
	padding-right: 1rem;
	display: flex;
	align-items: center;
	font-family: var(--font-family);
	box-shadow: 0 2rem 4rem hsl(0 0% 0% / 0.24);

	& > a#logo-link {
		display: block;
		width: 120px;
		height: 100px;
	}

	& > div.content {
		flex: 1;
		height: 100px;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	nav {
		display: flex;

		.nav-item {
			position: relative;
		}

		.nav-item > a {
			display: inline-flex;
			align-items: center;
			gap: 0.375rem;
			color: hsl(218 22% 57%);
			font-size: 1.25rem;
			padding: 0.5rem 1rem;
			text-decoration: none;
			text-transform: uppercase;
			font-weight: 500;

			&:hover {
				color: white;
				background-color: hsl(218 22% 37%);
			}
		}

		.nav-item:hover > a,
		.nav-item:focus-within > a {
			color: white;
			background-color: hsl(218 22% 37%);
		}

		.nav-dropdown {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 20;
			min-width: 100%;
			background-color: hsl(218 22% 37%);
			color: black;
			padding: 2rem;
			transform: translateX(var(--dropdown-shift, 0));
		}

		.nav-item:hover > .nav-dropdown,
		.nav-item:focus-within > .nav-dropdown {
			display: flex;
			gap: 3rem;
		}

		.nav-chevron {
			width: 0.6rem;
			height: 0.6rem;
			fill: #12AEF5;
		}

		.nav-dropdown div a {
			white-space: nowrap;
		}

		.nav-dropdown div.link-list {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}
	}
}

div#slider {
	height: var(--slider-height);
	margin: var(--slider-inset) auto;
	position: relative;
	z-index: 1;

	.slide {
		width: 100%;
		height: 100%;
		background-image: url('../img/slides/test2.jpg');
		background-position: top center;
		background-repeat: no-repeat;
		background-color: black;
	}

	&.work-header .slide {
		background-image: url('../img/works/testheader1.jpg');
		background-position: center;
	}
}

.hero {
	width: 100%;
	min-height: auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: none;
	box-shadow: none;

	.content {
		max-width: 680px;
	}

	.copy {
		max-width: 34rem;
		margin-top: 1rem;
		margin-left: auto;
		margin-right: auto;
		color: hsl(218 22% 80%);
		font-size: 1.125rem;
		line-height: 1.7;
	}

	.actions {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 2rem;
	}

	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.85rem 1.25rem;
		border: 1px solid hsl(218 68% 42%);
		border-radius: 0.25rem;
		background: linear-gradient(#59c2ff 0%, #12AEF5 48%, #2253B6 100%);
		color: white;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		text-shadow: 0 -1px 0 hsl(218 68% 26% / 0.6);
		box-shadow:
			inset 0 1px 0 hsl(0 0% 100% / 0.45),
			inset 0 -1px 0 hsl(218 68% 22% / 0.35),
			0 1px 2px hsl(0 0% 0% / 0.24);
		transition:
			transform 120ms ease,
			box-shadow 120ms ease,
			filter 120ms ease;

		&.primary {
			box-shadow:
				inset 0 1px 0 hsl(0 0% 100% / 0.45),
				inset 0 -1px 0 hsl(218 68% 22% / 0.35),
				0 1px 2px hsl(0 0% 0% / 0.24),
				0 0.75rem 1.5rem hsl(218 68% 42% / 0.2);
		}

		&.secondary {
			background: linear-gradient(hsl(218 22% 52%), hsl(218 22% 35%));
			border-color: hsl(218 22% 25%);
		}

		&:hover,
		&:focus {
			filter: brightness(1.08);
			transform: translateY(-1px);
			box-shadow:
				inset 0 1px 0 hsl(0 0% 100% / 0.55),
				inset 0 -1px 0 hsl(218 68% 22% / 0.35),
				0 2px 4px hsl(0 0% 0% / 0.3);
		}

		&:active {
			filter: brightness(0.95);
			transform: translateY(1px);
			box-shadow:
				inset 0 2px 4px hsl(0 0% 0% / 0.28),
				inset 0 1px 0 hsl(0 0% 100% / 0.16);
		}
	}

	.welcome-heading {
		font-family: 'Road Rage', var(--font-family);
		font-weight: 400;
		font-size: clamp(5rem, 13vw, 7rem);
		line-height: 1;
		margin-inline: -0.08em;
		padding-inline: 0.08em;

		& > .intro {
			white-space: nowrap;
		}

		& > .highlight {
			display: block;
			margin-left: -0.4em;
			padding-left: 0.4em;
		}
	}
}

main {
	width: 100%;
	background-color: var(--bg-color);
}

.page {
	margin-top: 1rem;
	padding: 3rem;
	background:
		radial-gradient(circle at 90% 10%, hsl(202 90% 47% / 0.16), transparent 30rem),
		var(--bg-color);
	box-shadow: 0 2rem 4rem hsl(0 0% 0% / 0.24);

	h1,
	h2 {
		font-family: 'Road Rage', var(--font-family);
		font-weight: 400;
	}

	h1 {
		margin-top: 0.25rem;
		font-size: clamp(4rem, 10vw, 7rem);
		line-height: 1;
	}

	.copy {
		max-width: 40rem;
		margin-top: 1rem;
		color: hsl(218 22% 80%);
		font-size: 1.1rem;
		line-height: 1.7;
	}
}

.hero-page {
	padding: 0;
	background: none;
	box-shadow: none;

	.hero {
		padding: 4rem 0 0;
	}
}

.blog-page {
	--blog-section-spacing: 4rem;

	padding: 0;
	background: none;
	box-shadow: none;

	.hero {
		padding: var(--blog-section-spacing) 0;
	}
}

.blog-tools {
	margin-bottom: var(--blog-section-spacing);
	display: flex;
	flex-direction: column;
	gap: 1rem;

	input {
		width: 100%;
		padding: 1rem 1.25rem;
		border: 1px solid hsl(218 22% 46%);
		border-radius: 0.25rem;
		background-color: var(--bg-color);
		color: white;
		font: inherit;
		box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.16);

		&::placeholder {
			color: hsl(218 22% 66%);
		}

		&::-webkit-search-cancel-button {
			-webkit-appearance: none;
			width: 1rem;
			height: 1rem;
			background-color: #59c2ff;
			mask:
				linear-gradient(45deg, transparent 43%, black 43% 57%, transparent 57%),
				linear-gradient(-45deg, transparent 43%, black 43% 57%, transparent 57%);
			cursor: pointer;
		}

		&:focus {
			outline: 2px solid #59c2ff;
			outline-offset: 2px;
		}
	}
}

.blog-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.5rem;
}

.filter-dropdown-chip {
	position: relative;
	width: max-content;

	[data-filter-toggle] {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.7rem 0.9rem;
		border: 1px solid hsl(218 22% 46%);
		border-radius: 999px;
		background: hsl(218 22% 31% / 0.92);
		color: hsl(218 22% 84%);
		font: inherit;
		font-size: 0.8rem;
		font-weight: 700;
		cursor: pointer;
		box-shadow: 0 0.75rem 1.25rem hsl(0 0% 0% / 0.14);

		&::after {
			content: '';
			width: 0.45rem;
			height: 0.45rem;
			border-right: 2px solid #59c2ff;
			border-bottom: 2px solid #59c2ff;
			transform: translateY(-0.15rem) rotate(45deg);
		}
	}

	[data-filter-toggle] strong {
		color: white;
	}

	.filter-menu {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		z-index: 20;
		min-width: 100%;
		padding: 0.45rem;
		border: 1px solid hsl(218 22% 46%);
		border-radius: 0.75rem;
		background: hsl(218 22% 24%);
		box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.22);
	}

	.filter-menu button {
		width: 100%;
		padding: 0.65rem 0.8rem;
		border: 0;
		border-radius: 0.45rem;
		background: transparent;
		color: hsl(218 22% 84%);
		font: inherit;
		font-size: 0.85rem;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		cursor: pointer;

		&:hover,
		&:focus,
		&.is-active {
			background: hsl(202 90% 47% / 0.22);
			color: white;
		}
	}

	&:hover [data-filter-toggle],
	&:focus-within [data-filter-toggle] {
		border-color: #59c2ff;
		color: white;
		background: hsl(202 90% 47% / 0.22);
	}
}

.blog-list {
	display: flex;
	flex-direction: column;
	gap: var(--blog-section-spacing);
}

.blog-card {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	min-height: 430px;
	background-color: var(--bg-color);
	box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.18);
	overflow: hidden;

	.cover {
		grid-column: span 2;
		position: relative;
		overflow: hidden;
		min-height: 430px;
		background-color: hsl(218 22% 24%);
	}

	img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 220ms ease;
	}

	.summary {
		padding: 2rem;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background:
			radial-gradient(circle at 100% 0%, hsl(202 90% 47% / 0.14), transparent 16rem),
			var(--bg-color);
	}

	time {
		color: #59c2ff;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	h2 {
		margin-top: 0.75rem;
		font-family: var(--font-family);
		font-size: 2rem;
		font-weight: 800;
		line-height: 1.15;
		color: white;
	}

	p {
		margin-top: 1rem;
		color: hsl(218 22% 82%);
		line-height: 1.65;
	}

	.read-more {
		margin-top: 1.5rem;
	}

	&.is-reversed {
		.cover {
			order: 2;
		}

		.summary {
			order: 1;
		}
	}

	&:hover img,
	&:focus-within img {
		transform: scale(1.04);
	}
}

.blog-empty {
	padding: 2rem;
	background-color: var(--bg-color);
	color: hsl(218 22% 82%);
	text-align: center;
	box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.16);
}

.load-more {
	width: 100%;
	margin-top: var(--blog-section-spacing);
	padding: 1rem;
	border: 1px solid hsl(218 22% 25%);
	border-radius: 0.25rem;
	background: linear-gradient(hsl(218 22% 52%), hsl(218 22% 35%));
	color: white;
	font: inherit;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 hsl(218 68% 26% / 0.6);
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.45),
		inset 0 -1px 0 hsl(218 22% 22% / 0.35),
		0 1px 2px hsl(0 0% 0% / 0.24);
	cursor: pointer;

	&:hover,
	&:focus {
		filter: brightness(1.08);
	}
}

.read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	border: 1px solid hsl(218 68% 42%);
	border-radius: 0.25rem;
	background: linear-gradient(#59c2ff 0%, #12AEF5 48%, #2253B6 100%);
	color: white;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 hsl(218 68% 26% / 0.6);
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.45),
		inset 0 -1px 0 hsl(218 68% 22% / 0.35),
		0 1px 2px hsl(0 0% 0% / 0.24);

	&:hover,
	&:focus {
		color: white;
		filter: brightness(1.08);
	}
}

.blog-post-page {
	padding: 0;
	background: none;
	box-shadow: none;

	.blog-post {
		display: grid;
		gap: 0;
	}

	.cover-card {
		position: relative;
		overflow: hidden;
		min-height: 430px;
		background-color: var(--bg-color);
		box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.18);
	}

	.cover-card::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(transparent 48%, hsl(218 22% 16% / 0.72));
	}

	.cover {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.post-header {
		position: relative;
		z-index: 1;
		max-width: 46rem;
		margin: -4rem auto 4rem;
		padding-inline: 1rem;
		text-align: center;
	}

	h1 {
		margin: 0;
		font-family: 'Road Rage', var(--font-family);
		font-size: clamp(3.25rem, 8vw, 5.5rem);
		font-weight: 400;
		line-height: 0.95;
		text-wrap: balance;
		text-shadow: 0 2px 4px hsl(0 0% 0% / 0.5);
	}

	.content {
		max-width: 42rem;
		margin-inline: auto;
	}

	time {
		display: block;
		color: #59c2ff;
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.copy,
	.content > p:not(.copy) {
		margin-top: 1rem;
		color: hsl(218 22% 82%);
		line-height: 1.7;
	}

	.copy {
		font-size: 1.15rem;
	}

	.read-more {
		margin-top: 2rem;
	}

	.comments {
		width: 100%;
		max-width: 42rem;
		margin: 5rem auto 0;
	}

	.comments h2 {
		font-family: 'Road Rage', var(--font-family);
		font-size: 3rem;
		font-weight: 400;
		line-height: 1;
	}

	.comment-thread {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		margin-top: 1.5rem;
	}

	.comment {
		display: flex;
		align-items: flex-end;
		gap: 0.75rem;
	}

	.comment.is-right {
		flex-direction: row-reverse;
	}

	.avatar {
		flex: 0 0 auto;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		display: grid;
		place-items: center;
		background: var(--avatar-color);
		color: white;
		font-size: 0.75rem;
		font-weight: 800;
		box-shadow:
			0 0 0 2px hsl(218 22% 18%),
			0 0.75rem 1rem hsl(0 0% 0% / 0.18);
	}

	.bubble {
		position: relative;
		max-width: min(30rem, 78%);
		padding: 0.9rem 1rem;
		border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
		background:
			radial-gradient(circle at 12% 0%, hsl(202 90% 47% / 0.18), transparent 12rem),
			hsl(218 22% 34%);
		color: white;
		box-shadow:
			inset 0 1px 0 hsl(0 0% 100% / 0.08),
			0 1rem 1.5rem hsl(0 0% 0% / 0.16);
	}

	.comment.is-right .bubble {
		border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
		background:
			radial-gradient(circle at 88% 0%, hsl(255 100% 68% / 0.16), transparent 12rem),
			hsl(218 22% 28%);
	}

	.bubble header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.comment-meta {
		display: flex;
		align-items: baseline;
		gap: 0.5rem;
		min-width: 0;
	}

	.comment-meta strong {
		font-size: 0.9rem;
	}

	.comment-meta span {
		color: hsl(218 22% 76%);
		font-size: 0.75rem;
	}

	.comment-votes {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		color: hsl(218 22% 82%);
		font-size: 0.75rem;
		font-weight: 800;
	}

	.comment-votes button {
		width: 1.45rem;
		height: 1.45rem;
		border: 0;
		border-radius: 999px;
		display: inline-grid;
		place-items: center;
		background: transparent;
		color: hsl(218 22% 68% / 0.7);
		cursor: pointer;

		&:hover,
		&:focus {
			color: #59c2ff;
			background: hsl(202 90% 47% / 0.1);
		}
	}

	.comment-votes .vote-down:hover,
	.comment-votes .vote-down:focus {
		color: #ff6b6b;
		background: hsl(0 85% 64% / 0.1);
	}

	.comment-votes svg {
		width: 0.82rem;
		height: 0.82rem;
		fill: currentColor;
	}

	.bubble p {
		margin-top: 0.35rem;
		color: hsl(218 22% 90%);
		line-height: 1.5;
	}

	.markdown-editor {
		width: 100%;
		max-width: 42rem;
		margin: 1.25rem auto 0;
	}

	textarea {
		width: 100%;
		min-height: 3.75rem;
		max-height: 12rem;
		overflow-y: auto;
		resize: none;
		padding: 1.05rem 1rem;
		border: 1px solid hsl(218 22% 46%);
		border-radius: 0.75rem;
		background:
			radial-gradient(circle at 12% 0%, hsl(202 90% 47% / 0.12), transparent 12rem),
			hsl(218 22% 24%);
		color: white;
		font: inherit;
		line-height: 1.45;
		box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.16);

		&::placeholder {
			color: hsl(218 22% 66%);
		}

		&:focus {
			outline: 2px solid #59c2ff;
			outline-offset: 2px;
		}
	}
}

.works-page {
	padding: 0;
	background: none;
	box-shadow: none;

	.hero {
		min-height: auto;
		padding: 4rem 0 0;

		.content {
			max-width: 48rem;
		}

		h1.long,
		h2.long {
			max-width: 20ch;
			text-wrap: balance;
		}

		h1.long {
			font-size: clamp(3.75rem, 8vw, 5.5rem);
		}

		h2.long {
			font-size: clamp(3.5rem, 7.5vw, 5.25rem);
			line-height: 1;
		}
	}
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;

	.work-card {
		position: relative;
		overflow: hidden;
		min-height: 360px;
		padding: 1.25rem;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background-color: hsl(218 22% 24%);
		box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.18);

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background:
				linear-gradient(transparent 20%, hsl(218 22% 16% / 0.92)),
				linear-gradient(90deg, hsl(218 22% 16% / 0.68), transparent);
		}

		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 220ms ease;
		}

		h2,
		p {
			position: relative;
			z-index: 1;
		}

		h2 {
			margin: -0.2em -0.35em;
			padding: 0.2em 0.35em;
			color: white;
			font-size: 3.5rem;
			line-height: 1.15;
			text-shadow: 0 1px 2px hsl(0 0% 0% / 0.6);
		}

		p {
			max-width: 28rem;
			margin-top: 0.75rem;
			color: hsl(218 22% 84%);
			line-height: 1.55;
		}

		&:hover img,
		&:focus img {
			transform: scale(1.06);
		}

		&:hover h2,
		&:focus h2 {
			background: linear-gradient(#12AEF5, #2253B6);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
			-webkit-text-fill-color: transparent;
			text-shadow: none;
		}
	}
}

.work-page {
	padding: 0;
	background: none;
	box-shadow: none;

	h1 {
		font-size: clamp(3rem, 7vw, 5.25rem);
	}

	.feature {
		width: 100%;
		margin-bottom: 4rem;
		text-align: center;

		p {
			max-width: 42rem;
			margin-top: 1rem;
			margin-left: auto;
			margin-right: auto;
			color: hsl(218 22% 82%);
			font-size: 1.15rem;
			line-height: 1.7;
		}
	}

	.cards {
		display: flex;
		flex-direction: column;
		gap: 4rem;
		margin-top: 1rem;
	}

	.card {
		padding: 1rem 0;
		background: none;
		box-shadow: none;
		overflow: visible;

		h2 {
			position: relative;
			display: inline-block;
			font-size: 2.25rem;
			line-height: 1;
			padding-bottom: 0.18em;
			border-bottom: 4px solid #59c2ff;
		}

		p {
			max-width: 42rem;
			margin-top: 1rem;
			color: hsl(218 22% 82%);
			line-height: 1.7;
		}

		&:first-child h2::before,
		&:last-child h2::after {
			content: '';
			position: absolute;
			bottom: -4px;
			width: 100vw;
			border-bottom: 4px solid #59c2ff;
		}

		&:first-child h2::before {
			right: 100%;
		}

		&:last-child {
			text-align: right;

			h2::after {
				left: 100%;
			}

			p {
				margin-left: auto;
			}
		}
	}
}

.boxart {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;

	.item {
		position: relative;
		overflow: hidden;
		min-height: 320px;
		padding: 1rem;
		display: flex;
		align-items: flex-end;
		background-color: var(--bg-color);
		box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.18);

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(transparent 35%, hsl(218 22% 18% / 0.88));
		}

		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform-origin: center;
			transition: transform 220ms ease;
		}

		.title {
			position: relative;
			z-index: 1;
			display: inline-block;
			margin: -0.2em -0.35em;
			padding: 0.2em 0.35em;
			color: white;
			font-family: 'Road Rage', var(--font-family);
			font-size: 1.25rem;
			line-height: 1.15;
			font-weight: 400;
			text-shadow: 0 1px 2px hsl(0 0% 0% / 0.6);
			transform-origin: left bottom;
			transition:
				transform 160ms ease,
				color 160ms ease,
				text-shadow 160ms ease;
		}

		&:hover .title,
		&:focus .title {
			background: linear-gradient(#12AEF5, #2253B6);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
			-webkit-text-fill-color: transparent;
			text-shadow: none;
			transform: scale(1.28);
		}

		&:hover img,
		&:focus img {
			transform: scale(1.06);
		}
	}
}

.footer {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background-color: var(--bg-color);
	box-shadow: 0 1rem 2rem hsl(0 0% 0% / 0.16);
	backdrop-filter: blur(8px);

	.brand {
		display: flex;
		align-items: center;
		gap: 0.75rem;

		img {
			width: 1.5rem;
			height: 1.5rem;
			opacity: 0.45;
		}
	}

	p {
		color: hsl(218 22% 76%);
		font-size: 0.875rem;
	}

	.links {
		display: flex;
		gap: 1rem;

		a {
			font-size: 0.875rem;
			font-weight: 600;
		}
	}
}