Template:UI/card/styles.css

/* TemplateStyles for {{UI/card}}.
 *
 * Theme tokens via `var(--labki-*, literal)`. The fallback literal
 * preserves rendering on wikis whose MW version's TemplateStyles
 * sanitizer rejects var() in a given property (e.g. older MW where
 * even `background` rejected var()). On MW 1.44+ the var() resolves
 * to whatever the platform's labki-tweeki.css (or per-wiki
 * MediaWiki:Tweeki.css override) has bound to the token, so cards
 * flip with `[data-bs-theme="dark"]` automatically.
 *
 * Geometry (border-radius, box-shadow, padding, transition,
 * transform) stays literal — MW 1.44.5 / css-sanitizer 5.5.0 rejects
 * var() for those property matchers regardless of value type.
 */

.wiki-card {
	padding: 16px;
	border: 1px solid var(--labki-border, #d8dde3);
	border-radius: 8px;
	background: var(--labki-bg-subtle, #f4f6f8);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Card-lift on hover. `:focus-within` would be the obvious keyboard
   parity, but MediaWiki's TemplateStyles selector allowlist on this
   wiki rejects it — keyboard users still see the inner link's own
   focus ring, which is the primary affordance for tab nav. */
.wiki-card:hover {
	border: 1px solid var(--labki-accent, #2774AE);
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

/* Honor user motion preferences: keep the color/shadow change for
   affordance, but skip the translate animation. */
@media (prefers-reduced-motion: reduce) {
	.wiki-card {
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}
	.wiki-card:hover {
		transform: none;
	}
}

.wiki-card .card-icon {
	display: inline-block;
	font-size: 1.4em;
	margin-right: 8px;
	vertical-align: middle;
	color: var(--labki-accent, #2774AE);
}

.wiki-card .card-title {
	font-size: 1.15em;
	font-weight: 600;
}

.wiki-card .card-title a,
.wiki-card .card-title a:visited {
	color: var(--labki-text, #2c2c2c);
}

.wiki-card .card-desc {
	margin-top: 6px;
	color: var(--labki-text-muted, #5a6a7a);
	line-height: 1.45;
}

/* Auto-flowing card grid container — wrap a row of {{UI/card}} calls
   in <div class="wiki-card-grid">. Layout-only; relies on at least
   one nested .wiki-card to bring this stylesheet into the page. */
.wiki-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 24px 0;
}