Template:Infobox/styles.css: Difference between revisions

Latest revision as of 10:49, 24 August 2026

.loka-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1em 1em;
	/* Opaque, not translucent, for the same reason as before (a translucent
	   overlay only ever looked right against this wiki's own dark page
	   background, and washed out on light mode) — but now a genuinely
	   neutral charcoal (equal R/G/B) rather than the previous warm
	   brown-tinted near-black, since that read as muddy/dirty rather than
	   a clean dark surface. Kept as a subtle vertical gradient (still lines
	   up with the header photo's own fade), a light touch of shadow to
	   lift it off the page without being heavy, and gently rounded
	   corners (clipped via overflow:hidden, which is why the header
	   photo's own square corners still end up rounded to match). */
	background: linear-gradient(180deg, #1c1c1c 0%, #131313 100%);
	color: #f0ece2;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	/* Whatever ends the box (a chrono grid row, a location panel, a links
	   row) otherwise supplies only its own small internal padding, which
	   reads as too tight against the box's own bottom edge — this adds a
	   bit of dedicated breathing room after it, on every infobox type. */
	padding-bottom: .6em;
}

@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 3px 10px rgba(0, 0, 0, .1);
	}
}

.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);
}

/* A quiet, full-width section ribbon. The neutral tint keeps the type label
   visually tied to chronology headings without bringing back the saturated
   brown blocks used by older revisions. */
.loka-infobox-type {
	color: #f0cf8e;
	background: rgba(255, 255, 255, .045);
	font-weight: 700;
	font-size: .7em;
	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;
		background: rgba(0, 0, 0, .035);
		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. */
	/* A straight two-stop fade (opaque to transparent in one even ramp)
	   reads as an abrupt cutoff to the eye — most of its *visible* change
	   happens in the upper, still-fairly-opaque half, then the faint tail
	   lingers and still looks like it stops short. These extra stops
	   approximate an eased ease-out curve instead (steep at first, then
	   gradually gentler), which is the standard way to fake CSS gradient
	   easing since gradients can't reference an actual easing function. */
	-webkit-mask-image: linear-gradient(to bottom,
		#000 0%, #000 35%,
		rgba(0, 0, 0, .85) 48%,
		rgba(0, 0, 0, .6) 60%,
		rgba(0, 0, 0, .36) 71%,
		rgba(0, 0, 0, .18) 82%,
		rgba(0, 0, 0, .06) 92%,
		transparent 100%);
	mask-image: linear-gradient(to bottom,
		#000 0%, #000 35%,
		rgba(0, 0, 0, .85) 48%,
		rgba(0, 0, 0, .6) 60%,
		rgba(0, 0, 0, .36) 71%,
		rgba(0, 0, 0, .18) 82%,
		rgba(0, 0, 0, .06) 92%,
		transparent 100%);
}

/* .loka-infobox-header-photo img (above) is a broad descendant selector
   meant only for the actual backdrop photo — but the header's own title
   text (loka-infobox-header-text, below) sits INSIDE .loka-infobox-header-photo
   too, as an overlay, so any <img> a specific infobox puts in its own
   title (e.g. Infobox world's titleicon) is ALSO a descendant and was
   silently inheriting position:absolute; inset:0; width/height:100% from
   it &mdash; collapsing that icon to nothing visible (confirmed live on [[The
   End]]: the shield rendered at 0px width, sized to the whole 150px-tall
   photo band instead of its own small inline size). Same specificity as
   that rule, so appearing later here is what makes this the one that
   wins for anything actually inside the text overlay. */
.loka-infobox-header-text img {
	position: static;
	inset: auto;
	width: auto;
	height: auto;
	object-fit: initial;
	-webkit-mask-image: none;
	mask-image: none;
}

.loka-infobox-header-scrim {
	position: absolute;
	inset: 0;
	/* Only handles darkening the top for the name/type text now &mdash; 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;
	text-align: center;
}

.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 &mdash;
	   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 2px 4px rgba(0, 0, 0, .95);
}

.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 &mdash; 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. Case/weight/letter-spacing
	   and colour are otherwise identical to the base .loka-infobox-type
	   (and every other section-heading label in the infobox), so it reads
	   as the same kind of text rather than a one-off exception.
	   A full-width backdrop (the plain block-level default, same as the
	   base rule) rather than a tight pill &mdash; a small badge floating over
	   an arbitrary photo can end up sitting on a patch that doesn't give
	   it enough contrast on one side or the other; spanning edge to edge
	   guarantees a consistent dark strip behind the text regardless of
	   what's in the photo at that point. No border-radius here since a
	   rounded shape wouldn't make sense on a bar that already meets both
	   edges of the box. */
	background: rgba(8, 10, 12, .58);
	border-bottom: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.loka-infobox-row {
	display: flex;
	/* center, not baseline &mdash; baseline aligns the value to the last line
	   of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines
	   against a short one-line value like "16"), which reads as visibly
	   misaligned. Centering keeps the value vertically centred against
	   the key's full wrapped height regardless of how many lines it takes. */
	align-items: center;
	padding: .35em .6em .35em .9em;
	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;
}

/* 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 &mdash; 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);
	}
}