Template:Infobox website/styles.css

.loka-website-launched-ago {
	display: block;
	margin-top: .1em;
	font-size: .85em;
	opacity: .68;
}

.loka-website-status--active {
	color: #54FC54;
}

.loka-website-status--beta {
	color: #FCA800;
}

.loka-website-status--inactive,
.loka-website-status--discontinued {
	color: #FC5454;
}

.loka-website-screenshot {
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.loka-website-screenshot img {
	display: block;
	width: 100%;
	height: auto;
}

.loka-website-screenshot-caption {
	padding: .4em .6em;
	font-size: .72em;
	font-style: italic;
	text-align: center;
	opacity: .68;
}

.loka-website-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .6em;
	padding: .5em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.loka-website-link {
	display: inline-flex;
	align-items: center;
}

/* Same reasoning as Template:Infobox player's generation colours: these
   neon shades read clearly against a dark infobox but wash out (green,
   amber) or vanish (nothing here is near-white, but keep the pattern
   consistent) on a light one -- darker, equally-distinct equivalents for
   light mode, same hues. */
@media (prefers-color-scheme: light) {
	.loka-website-status--active {
		color: #2E7D32;
	}

	.loka-website-status--beta {
		color: #8A5A00;
	}

	.loka-website-status--inactive,
	.loka-website-status--discontinued {
		color: #C62828;
	}

	.loka-website-screenshot {
		border-top-color: rgba(0, 0, 0, .1);
	}

	.loka-website-links {
		border-top-color: rgba(0, 0, 0, .1);
	}
}