Template:Deprecated/styles.css

.loka-deprecated-notice {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 0 1em;
	padding: .7em 1em;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .12);
	border-left: 4px solid rgba(255, 255, 255, .35);
	border-radius: 4px;
}

/* The logo is deliberately desaturated (grayscale filter, not a separate
   pre-converted image) and further faded -- colour and full opacity read
   as "current/official", which is the opposite of what a notice for
   retired content should signal. */
.loka-deprecated-notice-logo {
	flex: none;
	display: block;
	opacity: .55;
}

.loka-deprecated-notice-logo img {
	display: block;
	width: 64px;
	height: auto;
	filter: grayscale(1);
}

.loka-deprecated-notice-title {
	font-family: UNIVERSAL-SERIF, serif;
	font-variant: small-caps;
	font-weight: 700;
	font-size: 1.05em;
	letter-spacing: .03em;
	color: #cfcfcf;
	margin-bottom: .18em;
}

.loka-deprecated-notice-text {
	font-size: .88em;
	line-height: 1.4;
	opacity: .82;
	font-style: italic;
}

@media (prefers-color-scheme: light) {
	.loka-deprecated-notice {
		background: rgba(0, 0, 0, .03);
		border-color: rgba(0, 0, 0, .12);
		border-left-color: rgba(0, 0, 0, .35);
	}
	.loka-deprecated-notice-title { color: #4a4a4a; }
}

/* Narrow enough that the logo plus body text no longer fit comfortably
   side by side -- stack instead, same as every other two-column layout
   in the tournament system on mobile. */
@media (max-width: 480px) {
	.loka-deprecated-notice {
		flex-direction: column;
		align-items: flex-start;
	}
}