Template:Infobox/styles.css: Difference between revisions

Revision as of 17:45, 18 August 2026

.loka-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1em 1em;
	/* Opaque, not translucent -- matches Template:Biome's dark card
	   (#1c1712) so the box is a fixed, controlled colour instead of a tint
	   that blends with whatever's behind it. A translucent dark overlay
	   looked fine over this wiki's own dark page background but turned
	   into a muddy grey wash for anyone on light mode, since it was never
	   actually rendering a real background colour of its own -- just
	   darkening whatever happened to be there. color is likewise set
	   explicitly rather than left to inherit, since inherited page text
	   colour flips dark/light with the theme too.
	   A flat single colour with hard corners and no shadow reads as cheap
	   -- a subtle top-to-bottom gradient (pure vertical, so it lines up
	   cleanly with the header photo's own vertical fade, see
	   loka-infobox-header-photo img's mask), a real drop shadow to lift the
	   card off the page, and rounded corners (clipped via overflow:hidden,
	   which is why the header photo's own square corners still end up
	   rounded to match) turn it into an actual designed card instead of a
	   flat tinted rectangle. */
	background: linear-gradient(180deg, #221b14 0%, #17120d 100%);
	color: #f0ece2;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: light) {
	.loka-infobox {
		background: linear-gradient(180deg, #ffffff 0%, #f4efe3 100%);
		color: #241f1a;
		border-color: rgba(0, 0, 0, .1);
		box-shadow: 0 8px 24px rgba(60, 45, 20, .16), 0 1px 3px rgba(0, 0, 0, .08);
	}
}

.loka-infobox--wide {
	width: 440px;
}

/* Below this width a floated fixed-width box (300px, or 520px for --wide)
   either overflows the viewport or squeezes body text into an unreadably
   narrow column, so every infobox drops the float and goes full-width
   instead -- applies wiki-wide since this is the shared shell every
   specific infobox is built on. */
@media (max-width: 600px) {
	.loka-infobox,
	.loka-infobox--wide {
		float: none;
		clear: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1em 0;
		box-sizing: border-box;
	}
}

.loka-infobox-name {
	text-align: center;
	font-family: UNIVERSAL-SERIF, serif;
	font-variant: small-caps;
	font-size: 1.25em;
	font-weight: 600;
	padding: .5em;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Plain text, not a solid coloured chip -- matches the same muted gold
   "eyebrow" treatment used for every other section heading in an infobox
   (loka-tournament-col-heading etc.) instead of standing out as its own
   loud element. Flips to a darker amber in light mode, same as those. */
.loka-infobox-type {
	color: #f0cf8e;
	font-weight: 700;
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: center;
	padding: .3em .5em;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: light) {
	.loka-infobox-type {
		color: #9c6b2e;
		border-bottom-color: rgba(0, 0, 0, .1);
	}
}

.loka-infobox-image {
	line-height: 0;
	text-align: center;
	padding: 10px;
}

.loka-infobox-image img {
	max-width: 100%;
	height: auto;
}

.loka-infobox-header-photo {
	position: relative;
	height: 150px;
	overflow: hidden;
}

.loka-infobox-header-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Previous attempts used a second overlay div and tried to hand-tune its
	   alpha to approximately match the box's own background colour by eye
	   -- fragile, and it kept reading as a hard cut regardless of the exact
	   numbers used. This instead fades the photo's OWN opacity to nothing
	   via a mask, so what's revealed underneath as it disappears is
	   whatever's actually behind it (.loka-infobox's real background),
	   guaranteed to match exactly since nothing is being approximated. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}

.loka-infobox-header-scrim {
	position: absolute;
	inset: 0;
	/* Only handles darkening the top for the name/type text now -- the
	   bottom fade is the image's own mask (above), not this. */
	background: linear-gradient(to bottom,
		rgba(8, 6, 3, .8) 0,
		rgba(8, 6, 3, .35) 50px,
		rgba(8, 6, 3, 0) 85px);
}

.loka-infobox-header-text {
	position: relative;
}

.loka-infobox-header-text .loka-infobox-name {
	/* Explicit, not inherited: this text always sits on the header photo's
	   own permanent dark scrim (see loka-infobox-header-scrim), regardless
	   of the page's own light/dark theme, so it must always be light --
	   otherwise it silently inherits .loka-infobox's theme-adaptive colour
	   and goes dark-on-dark in light mode (a real, previously-unnoticed
	   bug: the name was unreadable against its own header photo). */
	color: #ffffff;
	border-bottom: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.loka-infobox-header-text .loka-infobox-type {
	/* Sitting on top of an arbitrary photo needs some kind of scrim behind
	   it to stay legible regardless of what's in the image, so this one
	   keeps a background chip unlike the plain-text version above -- but a
	   neutral dark tint (matching the header photo's own scrim) rather
	   than a saturated brown patch. Always dark regardless of page theme,
	   like the rest of the header photo overlay. */
	background: rgba(20, 16, 12, .55);
	color: #ffffff;
	border-bottom: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.loka-infobox-row {
	display: flex;
	align-items: baseline;
	padding: .35em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .9em;
}

/* Matches the muted, uppercase "eyebrow" label treatment used by
   Infobox tournament's detail tiles and Infobox town's Location panel
   (loka-tournament-detail-label / loka-town-location-heading), so every
   infobox on the wiki shares one label language even though tournament's
   is a stacked tile and this one is a side-by-side row. */
.loka-infobox-row-key {
	flex: 0 0 38%;
	font-size: .78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .65;
	text-align: left;
}

.loka-infobox-row-value {
	flex: 1;
	text-align: left;
}

.loka-infobox-row--wide {
	flex-direction: column;
	align-items: flex-start;
	gap: .3em;
}

.loka-hlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline;
}

.loka-hlist li {
	display: inline;
}

.loka-hlist li:not(:last-child)::after {
	content: ", ";
}

.loka-hlist--stacked {
	display: block;
}

.loka-hlist--stacked li {
	display: block;
}

.loka-hlist--stacked li:not(:last-child)::after {
	content: none;
}

/* A faint white hairline (8% opacity) reads fine as a subtle divider on
   this wiki's own dark page background, but is nearly invisible against
   a light one -- flipped to an equally faint dark line instead so every
   infobox keeps its internal row/section dividers in both themes. */
@media (prefers-color-scheme: light) {
	.loka-infobox-name {
		border-bottom-color: rgba(0, 0, 0, .1);
	}

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