Source code
Revision control
Copy as Markdown
Other Tools
// @backward-compat { version 153 }
// The .football-bounce block can be removed after Firefox 153 hits
// Release (2026 World Cup logo variation sunset).
.logo-and-wordmark {
// The variation is a 64x64 container (sized by the shared
// .logo-variation-small class) holding a sprite-windowed SVG at the
// sprite's natural 480x270 cell size. The container keeps page layout
// stable; the SVG overflows so the football's bounce can render past
// the standard logo bounds. The SVG is absolutely positioned so its
// "rest" cell content aligns with the container — the offsets below
// are a centered placeholder and likely need a visual-review tweak
// depending on where the football comes to rest within each cell.
.football-bounce {
overflow: visible;
position: relative;
.football-bounce__sprite {
position: absolute;
// Pointer events go through the visually-overflowed sprite so only
// the 64x64 container catches clicks. Without this, the SVG's full
// 480x270 bounding box would be a click target.
pointer-events: none;
// Centers the 480x270 SVG on the 64x64 container.
// (480 - 64) / 2 = 208; (270 - 64) / 2 = 103.
transform: translate(-208px, -103px);
}
}
}