Module:Move/Components/Infobox/styles.css

/*
 * The artwork sat under the type and element badges until they moved into the
 * game sections, and reads as cramped against the infobox edge and the title
 * without them. The padding sits on the image rather than its container
 * because a grid item is blockified, so the container grows with it.
 */
.t-move-infobox-image {
	padding-block: 2.5rem;
}

/*
 * The move type, category and element badges head each game's section rather
 * than overlaying the artwork, because the two games classify a move
 * differently often enough that a single set at the top would be a claim the
 * data does not support.
 *
 * They pack to the left so the first badge lands in the same place on every
 * move's page, and the column gap is set to spread them nearly to the section's
 * far edge without justifying them. 28px is the widest that fits: measured at
 * the content font, the widest row the game data can produce is NORMAL +
 * PHYSICAL + Normal at 233px of the 296px available, leaving 31px a side.
 */
.t-move-infobox-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-bottom: 12px;
}

/*
 * Inside a tabber the panel's top padding is carried by the section's first
 * child, which is now the badge row rather than the stats grid.
 */
.t-infobox-section-subsections
	.tabber__panel
	> .t-infobox-section
	> .t-move-infobox-badges:first-child {
	padding-top: 12px;
}

/*
 * Move type colours, taken from the move holder art in EvoCreo 2
 * (Sprites/Menu/CreoMenu/Moves_UI/moves_menu_holder_*.png): normal is cyan,
 * super violet, elite gold and heal green. Paired the same way as the element
 * badges — saturated on a pale tint in light mode, pale on a deep shade in
 * dark mode. Doubled selectors so these beat the plain .t-badge colours.
 */
.t-move-type.t-move-type--normal {
	color: light-dark(#00708a, #7fdff2);
	background-color: light-dark(#d9f4fa, #00323d);
}

.t-move-type.t-move-type--super {
	color: light-dark(#4b2fd6, #bfb0ff);
	background-color: light-dark(#e7e1ff, #1e0f66);
}

.t-move-type.t-move-type--elite {
	color: light-dark(#8a5200, #f8c058);
	background-color: light-dark(#fdf0d6, #3d2600);
}

.t-move-type.t-move-type--heal {
	color: light-dark(#00702c, #6ee89a);
	background-color: light-dark(#daf7e2, #003014);
}