ui/powerupbannerhud.razor.scss
// POWERUP BANNER
//
// Centre screen, above the crosshair. The original draws powerup text in its own
// "nz.powerup" font at a size that dominates — it is meant to be read without
// looking away from what you are shooting.
root
{
position: absolute;
width: 100%;
height: 100%;
pointer-events: none; // never eat clicks
justify-content: center;
align-items: center;
}
.banner
{
position: absolute;
// ⛔ SPANNED AND TEXT-CENTRED, NOT CENTRED BY THE PARENT. `root` sets
// `justify-content: center`, but an ABSOLUTELY POSITIONED child is taken out of
// the flex flow and ignores it — the banner rendered hard against the LEFT edge
// while the parent looked like it was centring everything. Stretching it edge to
// edge and centring the TEXT is what actually holds it in the middle.
left: 0px;
// ⛔ AN EXPLICIT WIDTH. `left: 0 / right: 0` does NOT stretch an absolutely
// positioned panel here the way it would in a browser — the box stayed
// zero-width, so `text-align: center` was centring inside nothing and the text
// rendered from the left edge. This is the second attempt at centring this
// banner; the first assumed the parent's `justify-content` applied, the second
// assumed opposing offsets implied a width. Neither is true in this layout.
width: 100%;
// ⚠️ And centre it as a FLEX CONTAINER as well as with `text-align`, so the
// result does not depend on which of the two this system honours for a text
// panel.
align-items: center;
justify-content: center;
// ⚠️ BOTTOM CENTRE. The corners are taken — health and stamina bottom-left,
// points, round and ammo bottom-right — and the middle of that strip is the one
// piece of screen furniture nothing else claims.
bottom: 15%;
font-family: Inter;
// ⚠️ Sized to be READ, not to dominate. At 68 it was a title card over the
// gameplay; this is an announcement you take in while still shooting.
font-size: 40px;
font-weight: 800;
letter-spacing: 4px;
// The CoD gold, matching the points and the PaP trim rather than inventing a
// third accent.
color: rgba( 235, 200, 100, 1 );
// ⛔ A HARD SHADOW, NOT A GLOW. This sits over gameplay at any brightness — a
// soft glow disappears against a bright wall, while an offset black shadow keeps
// the letterforms readable on snow and in a dark corner alike.
text-shadow: 0px 3px 8px rgba( 0, 0, 0, 1 );
text-align: center;
white-space: nowrap;
}
// ═══ BASALT (`HudTheme`) — the map's face, Cinzel on the powerup banner ═══
//
// *"i want the font for this map to affect … all hud messages that appear on screen"* (2026-09-27). The root wears the theme's class; the rules name it and each box
// here that sets Inter itself.
// ⛔ ON INTER'S LINE BOX, so no row grows taller: 0.898 of Cinzel's own line, which is Inter's 1.211 of the size. See
// `.round` in SurvivalHud.razor.scss for why it is not 1.211. It is wider on mixed-case text, which it sets in small capitals. Cinzel-Bold is the one face shipped,
// so every weight draws bold.
.theme-basalt,
.theme-basalt .banner
{
font-family: Cinzel;
line-height: 0.898;
}