margin, which
would otherwise add its own gap before the marquee on top of the marquee's own margin-top
(flex siblings don't collapse adjoining margins the way normal block-flow ones do). */
padding-top: 0;
margin-top: auto;
margin-bottom: 0;
text-align: right;
}
/* The shared frosted-pill treatment (rgba(0,0,0,0.35) over a photo) is invisible on Intimacy's
solid black — black-on-black has no contrast at all — so it needs its own light-on-dark tint
to read as a button here. */
.tracklist-hero--intimacy .tracklist-hero__back a {
/* color was missing here originally — the shared rule's own color:#fff (meant for the dark
pill everywhere else) was never overridden, so this was genuinely white text on a near-white
pill (rgba(255,255,255,0.12)) at first. #000 was tried next, but the pill itself blends white
at only 12% opacity into the page's own black, so it renders as a dark grey, not a light one
— black text on dark grey is just as illegible the other way. Light grey splits the
difference and reads clearly against this specific pill on both this page and Four's. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--intimacy .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Four: static row of 4 photos up top (not a moving marquee — deliberately a different, simpler
component from Intimacy's), a bottom-anchored background photo blending into black behind the
tracklist (Silent Alarm's own technique, reused as-is), and a 2-column tracklist (main list
left, Bonus Tracks right) instead of the "always below" layout every other album uses — a
deliberate one-off for this page specifically, not a change to the shared component. */
/* Full-bleed, touching both the nav bar above and the viewport's left/right edges at any width —
cancels the hero's own padding on all three sides (top/left/right) rather than just left/right
like the marquee does, since this sits flush against the top of the hero, not somewhere in the
middle of it. */
/* Width behaviour has three stages: capped at the site's usual 1100px content width and centred
on wide viewports (fixed-height, natural-aspect-ratio photos with real empty space on both
sides) — then, exactly where that 1100px cap would otherwise start touching the hero's own side
padding (1100px + 2×the hero's padding = 1180px), it drops the cap AND cancels that padding in
the same breath, jumping straight to flush-with-the-viewport-edges with no padded-but-uncapped
step in between — then, once the fixed-height photos would no longer fit without overflowing
(same 700px breakpoint the 2-column tracklist already collapses at), it drops the fixed height
entirely and reverts to the original behaviour: an equal 4-column grid that always fills the
available width, each photo square-cropped via aspect-ratio+object-fit so nothing overflows
regardless of how narrow the viewport gets. margin-top stays negative at every stage — that's
just closing the gap with the nav bar above, unrelated to any of this — and now reuses the
hero's own --tracklist-hero-vpad instead of a hardcoded -var(--space-6): that custom property
is itself a vh-based lock (see .tracklist-hero's own comment), so it's genuinely smaller than
var(--space-6) on a short viewport — hardcoding this to the old flat value meant it kept
cancelling a *bigger* padding than the hero actually had once that lock shipped, over-cancelling
and pulling the carousel up into the nav bar. Confirmed directly on a real MacBook Air. */
.tracklist-hero__carousel {
display: flex;
gap: 0;
max-width: 1100px;
margin: calc(-1 * var(--tracklist-hero-vpad)) auto var(--space-3);
overflow: hidden;
}
.tracklist-hero__carousel img {
display: block;
height: 280px;
width: auto;
flex-shrink: 0;
}
@media (max-width: 1180px) {
.tracklist-hero__carousel {
max-width: none;
width: calc(100% + 2 * var(--space-5));
margin-left: calc(-1 * var(--space-5));
margin-right: calc(-1 * var(--space-5));
}
}
@media (max-width: 700px) {
.tracklist-hero__carousel {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.tracklist-hero__carousel img {
aspect-ratio: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.tracklist-hero--four {
background-color: #000;
}
.tracklist-hero--four::before {
background-image: url('/Assets/Artwork/Four Artwork/Four background.JPG');
/* NOT cover: the image's only real content (thin red/blue/yellow/green corner brackets, a nod
to the album's 4-rings art) sits right at its far left and right edges, with a huge plain
black field in between. "cover" on any viewport taller/narrower than the image's own very
wide 1391:751 ratio crops symmetrically from the sides inward — cutting off both bracket
pairs entirely and leaving nothing but that plain black middle, which is exactly the "I don't
see the image at all" bug. 100% width, height auto keeps the *entire* width always in frame
(never crops left/right), so the brackets stay visible regardless of viewport shape — still
"stuck to the bottom" and always exactly as wide as the browser window, matching the original
ask, just without cropping away the only part of the image with anything visible in it. This
also can't reintroduce Silent Alarm's old white-gap-on-narrow-screens bug (the reason it
switched to cover in the first place): any gap here is Four's own black page background
showing through, which is indistinguishable from the image's own near-black field. */
background-size: 100% auto;
background-position: center bottom;
}
.tracklist-hero--four .tracklist-hero__title {
color: #fff;
/* Mirrors the carousel's own two width stages exactly (capped+centred on wide, edge-to-edge
below 1180px) so "FOUR" always lines up with the carousel's actual right edge, at any
viewport width — not just whichever stage the carousel happens to be in. (width:100% is now
on the shared base rule — see .tracklist-hero__title — no longer needs repeating here.) */
text-align: right;
}
@media (max-width: 1180px) {
.tracklist-hero--four .tracklist-hero__title {
max-width: none;
width: calc(100% + 2 * var(--space-5));
margin-left: calc(-1 * var(--space-5));
margin-right: calc(-1 * var(--space-5));
}
}
.tracklist-hero--four .tracklist-hero__body {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
column-gap: var(--space-5);
}
.tracklist-hero--four .tracklist-hero__list {
/* Not display:contents here (unlike the shared default) — that trick exists specifically to
let individual tracks auto-place across the old 3-column grid; a clean 2-column layout wants
the whole list to be one grid item (column 1) with its own tracks stacked inside it. */
display: flex;
flex-direction: column;
grid-column: 1;
}
.tracklist-hero--four .tracklist-hero__list a,
.tracklist-hero--four .tracklist-hero__bonus a {
font-family: var(--font-serif);
font-style: italic;
color: #fff;
text-transform: none;
/* align-self:flex-start (fixing the clickable-area-too-wide issue this page hit first) now
lives on the shared base rules instead, since the same bug recurred on Hymns' grid-based
layout — see .tracklist-hero__list a / .tracklist-hero__bonus a. */
transition: color 0.4s ease 0.1s;
}
/* Per-track hover colour, set inline as a custom property per (--track-hover) rather than
one shared rule, since each track needs its own colour — cycling red/blue/yellow/green in a
fixed repeating order across the 12 main tracks guarantees no two adjacent tracks ever match
(a straight period-4 cycle never repeats immediately, whatever the list length). Needs
!important to beat the shared .tracklist-hero__list a:hover rule, which is itself !important. */
.tracklist-hero--four .tracklist-hero__list a:hover {
color: var(--track-hover) !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--four .tracklist-hero__bonus {
grid-column: 2;
grid-row: 1;
margin-top: 0;
width: auto;
text-align: left;
}
/* Below this, the two Georgia-italic columns get cramped — Bonus Tracks drops under the main
list instead, matching the "always below" convention every other album already uses. */
@media (max-width: 700px) {
.tracklist-hero--four .tracklist-hero__body {
grid-template-columns: 1fr;
}
.tracklist-hero--four .tracklist-hero__bonus {
grid-column: 1;
grid-row: auto;
margin-top: var(--space-4);
width: fit-content;
}
}
.tracklist-hero--four .tracklist-hero__bonus-label {
/* Explicitly Gill Sans MT, not the Georgia italic used for every actual track title (main or
bonus) on this page — the label is UI chrome, not a song name. Keeps its uppercase too,
unlike the actual track titles, for the same reason. */
font-family: var(--font-heading);
font-style: normal;
color: #fff;
}
/* Same --track-hover custom-property technique as the main list, just with only 2 tracks and no
adjacency concern to cycle around. */
.tracklist-hero--four .tracklist-hero__bonus a:hover {
color: var(--track-hover);
transition-duration: 0.2s;
transition-delay: 0s;
}
/* The shared frosted-pill treatment (rgba(0,0,0,0.35)) is invisible against Four's own
near-entirely-black page for the same reason Intimacy's was — swap to a light tint instead. */
.tracklist-hero--four .tracklist-hero__back a {
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--four .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Hymns: Gill Sans Light for every piece of text on the page (one of the three lyrics pages this
typeface is reserved for, per the site-wide typography rule) — centred title over a left-aligned
tracklist (the base layout's own default already does this: max-width:1100px;margin:0 auto
centres the .tracklist-hero__body box as a unit, while column 1 inside it is left-aligned, so no
layout override is needed for the list itself, only the title). All-caps on the tracklist is
already the shared default too. No B-Sides for this album — just the standard "always below"
Bonus Tracks block, unmodified. */
.tracklist-hero--hymns {
background-color: #000;
}
.tracklist-hero--hymns::before {
background-image: url('/Assets/Artwork/hymns_bg.jpg');
/* cover + centre bottom — same "always fills the window width, anchored to the bottom" logic
as Silent Alarm/Four, matching "sticky to the bottom and centred... when the window resizes". */
background-size: cover;
background-position: center bottom;
}
.tracklist-hero--hymns .tracklist-hero__title {
font-family: var(--font-body-light);
color: #fff;
text-align: center;
}
.tracklist-hero--hymns .tracklist-hero__list a {
font-family: var(--font-body-light);
color: #fff;
transition: color 0.4s ease 0.1s;
}
/* Narrow-width override, per request — this album never had its own font-size override, so it
was inheriting the shared .tracklist-hero__list a rule's own clamp(), which is a *height*-based
lock (tuned for short laptop screens), not a width one — a narrow-but-tall phone still got the
clamp's full ~2.1rem ceiling regardless of how little horizontal room it actually had. */
@media (max-width: 600px) {
.tracklist-hero--hymns .tracklist-hero__list a {
font-size: 1.15rem;
}
}
.tracklist-hero--hymns .tracklist-hero__list a:hover {
color: #7a7a7a !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--hymns .tracklist-hero__bonus-label {
font-family: var(--font-body-light);
color: #fff;
}
.tracklist-hero--hymns .tracklist-hero__bonus a {
font-family: var(--font-body-light);
color: #fff;
transition: color 0.4s ease 0.1s;
}
/* Narrow-width override, per request — same reasoning as the main tracklist list above (no
font-size override of its own, so it inherits the shared height-based clamp() regardless of
width). Sized a touch smaller than that one since bonus tracks have no leading track number to
disambiguate a wrapped second line from a new entry. */
@media (max-width: 600px) {
.tracklist-hero--hymns .tracklist-hero__bonus a {
font-size: 1rem;
}
}
.tracklist-hero--hymns .tracklist-hero__bonus a:hover {
color: #7a7a7a;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--hymns .tracklist-hero__back a {
font-family: var(--font-body-light);
/* Same contrast fix as Intimacy/Four — the shared dark pill is invisible against this page's
own predominantly black photo. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--hymns .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Alpha Games: almost identical to Hymns (Gill Sans Light throughout, centred title over a
left-aligned tracklist, white text, standard "always below" Bonus Tracks, no B-Sides) — the
three differences are the background's anchor/sizing, normal capitalisation instead of
all-caps, and a flat hover colour instead of grey. */
.tracklist-hero--alpha-games {
background-color: #000;
}
.tracklist-hero--alpha-games::before {
background-image: url('/Assets/Artwork/Alpha Games/AG_bg.jpeg');
/* auto 100% — height is always forced to exactly the box's own height (so it can never leave a
gap at the top or bottom, growing/shrinking as the window resizes vertically), width follows
the image's own aspect ratio and is anchored to the right, cropping from the left if the
image ends up wider than the box at that height. This is a genuinely different technique
from every other album's background so far (all height-driven-when-needed via `cover`) —
here it's *always* height-driven, by design, regardless of the viewport's own aspect ratio. */
background-size: auto 100%;
background-position: right top;
}
.tracklist-hero--alpha-games .tracklist-hero__title {
font-family: var(--font-body-light);
color: #fff;
text-align: center;
}
.tracklist-hero--alpha-games .tracklist-hero__list a {
font-family: var(--font-body-light);
color: #fff;
text-transform: none;
font-size: 1.8rem;
transition: color 0.4s ease 0.1s;
}
/* Narrow-width override, per request — this album's own titles include their track number
directly in the link text ("03. You Should Know The Truth"), longer than any other album's
plain title, so the flat 1.8rem above was wrapping well before the tracklist column's own
right edge on a real phone. Width-based, not touch-gated, same reasoning as the Lyrics/Bios
grid column fixes — this is about whether the text actually fits, not input capability. */
@media (max-width: 600px) {
.tracklist-hero--alpha-games .tracklist-hero__list a {
font-size: 1.1rem;
}
}
.tracklist-hero--alpha-games .tracklist-hero__list a:hover {
color: #ea636a !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--alpha-games .tracklist-hero__bonus-label {
font-family: var(--font-body-light);
color: #fff;
}
.tracklist-hero--alpha-games .tracklist-hero__bonus a {
font-family: var(--font-body-light);
color: #fff;
text-transform: none;
font-size: 1.8rem;
transition: color 0.4s ease 0.1s;
}
/* Narrow-width override, per request — same reasoning as the main tracklist list above. Sized a
touch smaller than that one (1.0 vs 1.1rem) since bonus tracks have no leading track number to
disambiguate a wrapped second line from a new entry, unlike the main list. */
@media (max-width: 600px) {
.tracklist-hero--alpha-games .tracklist-hero__bonus a {
font-size: 1rem;
}
}
.tracklist-hero--alpha-games .tracklist-hero__bonus a:hover {
color: #ea636a;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--alpha-games .tracklist-hero__back {
text-align: center;
}
.tracklist-hero--alpha-games .tracklist-hero__back a {
font-family: var(--font-body-light);
/* Same contrast fix as Intimacy/Four/Hymns — the shared dark pill is invisible against a
predominantly dark page background. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--alpha-games .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Anatomy Of A Brief Romance: almost identical to Alpha Games (centred title, left-aligned
tracklist, white text, flat hover colour, no Bonus Tracks/B-Sides) — differences are the
background's anchor/sizing, no track numbers, and Gill Sans MT instead of Light (so no
font-family override anywhere here — the site's own default already is Gill Sans MT). */
.tracklist-hero--anatomy {
background-color: #000;
}
.tracklist-hero--anatomy::before {
/* Two stacked background layers on the same ::before — a translucent gradient "banner" behind
the title (dark near the top, fading smoothly to fully transparent by its own bottom edge
rather than a hard cutoff line, so the busy tunnel photo underneath doesn't fight with the
title text) painted on top of the actual photo. Comma order matters: the first layer listed
paints on top, so the gradient goes first, the real photo second — both still sit behind
every real child of the hero (title, tracklist, back button) via this element's own
z-index:-1 from the shared base rule. Holds a near-solid tone for its first third before
fading — a straight 2-stop fade starting at full opacity from the very first pixel (the
original attempt) blended into the photo's own dark upper vignette closely enough that it
read as barely-there rather than an actual banner; confirmed via a direct A/B screenshot
(gradient vs. no gradient) that the plain 2-stop version was technically rendering but too
subtle to register. */
background-image:
linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0) 100%),
url('/Assets/Artwork/Textless Artwork/anatomy_artwork.jpeg');
/* cover + center center for the photo — anchored to the middle on both axes, scaled so whichever
dimension (width or height) needs to grow more to fully cover the box is the one driving the
size, cropping the other axis's overflow. Unlike Alpha Games' always-height-driven auto 100%,
this one genuinely swaps which axis drives sizing depending on the viewport's own aspect
ratio. The gradient's own size (400px tall, full width, not tiled) is independent of this. */
background-size: 100% 400px, cover;
background-position: top center, center center;
background-repeat: no-repeat, no-repeat;
}
.tracklist-hero--anatomy .tracklist-hero__title {
color: #e3e5db;
text-align: center;
}
.tracklist-hero--anatomy .tracklist-hero__body {
/* Centres the tracklist vertically in whatever space is left between the title and the back
button, rather than sitting flush under the title — margin-top/bottom:auto on a flex column
item claims 100% of the hero's free space split evenly above and below it, provided nothing
else in the column also has an auto margin competing for that space (see the back button's
own margin-top override below). */
margin-top: auto;
margin-bottom: auto;
}
.tracklist-hero--anatomy .tracklist-hero__list a {
color: #e3e5db;
text-transform: uppercase;
font-size: 1.8rem;
transition: color 0.4s ease 0.1s;
}
/* Narrow-width override, per request — same reasoning as Alpha Games above: the flat 1.8rem was
wrapping before the tracklist column's own right edge on a real phone. */
@media (max-width: 600px) {
.tracklist-hero--anatomy .tracklist-hero__list a {
font-size: 1.05rem;
}
}
.tracklist-hero--anatomy .tracklist-hero__list a:hover {
color: #c6000c !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--anatomy .tracklist-hero__back {
text-align: right;
/* The shared base rule's margin-top:auto would otherwise compete with the tracklist body's own
auto margins above for the hero's free space, pulling the tracklist off-centre toward the top
(flexbox splits free space evenly across *every* auto margin in the column, not per-element) —
zeroed out so the body's auto margins get all of it. The base rule's own padding-top is enough
spacing above this button on its own. */
margin-top: 0;
}
.tracklist-hero--anatomy .tracklist-hero__back a {
/* Same contrast fix as Intimacy/Four/Hymns/Alpha Games — the shared dark pill is invisible
against a predominantly dark page background. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--anatomy .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Bloc Party EP: first EP, and the first page to put a second visual element (the vectorized
star pattern) beside the tracklist. Body is overridden from the shared 3-column grid to a
flex row — the grid's col1/col2(1fr)/col3 approach (as used by AWITC's B-Sides drawer and
Four's Bonus Tracks column) stretches its two occupants to opposite edges of the full 1100px
width, which read as too far apart here; a flex row with a fixed gap keeps the list and image
close together as one visual unit instead of spread across the hero. Left-aligned as a whole
(title + body share the same left edge, matching the real Wix site's own layout), not centred.
Also: sharing an explicit grid row with the list's first item (the original attempt) forced
that row to the image's full 230px height, visually splitting "Banquet" away from the rest of
the list with a dead gap — confirmed via getBoundingClientRect (a ~144px gap between the first
and second track that no other page has) before switching to this flex approach, where the
image and the list are independent siblings with no shared row-sizing to distort. */
.tracklist-hero--bloc-party-ep {
background-color: #000;
}
.tracklist-hero--bloc-party-ep::before {
background-image: url('/Assets/Artwork/EPs/ep_bg.jpeg');
/* auto 100% / left bottom — back to the user's original spec (centring the anchor was tried as
a fix for the figure/tracklist collision, but that fought the "title and tracklist share the
real Wix site's left edge" alignment instead — reverted). The actual fix for the collision
is the scrim on .tracklist-hero__title/__list below, not the background's own position:
tying the image's rendered width to *viewport width* instead of height can't work here
regardless — under auto-100%-height sizing the figure's reach is driven by hero *height*
(rendered width = heroHeight × the image's own fixed aspect ratio), not width, so a
width-based shrink wouldn't track the actual variable causing the reach to grow. And even a
width-tied size can't create real separation at any realistic viewport: the tracklist starts
only ~40px from the hero's own left padding, so the image would have to shrink to a sliver
for the figure to never reach that far, defeating "always full height" outright. */
background-size: auto 100%;
background-position: left bottom;
}
.tracklist-hero--bloc-party-ep .tracklist-hero__title {
color: #fff;
/* Left-aligned, per the real Wix site's own layout (screenshot reference) — matches the
shared base default already, so no text-align override needed at all; the title and the
tracklist below both just use the shared .tracklist-hero__title / __body boxes as-is, which
already share the same left edge (both max-width:1100px;margin:0 auto within the hero). */
/* Translucent scrim, not a repositioning fix — the figure sits at the same left edge as the
title/tracklist at every realistic hero height (see the background-position note above), so
nothing short of moving the text away from the real Wix site's own left-aligned position (a
non-starter — that's the alignment being matched here) can create actual separation.
rgba(0,0,0,0.55) over the page's own solid-black background composites to the *same* black —
the scrim is only visible where it's dimming something that isn't already black, i.e.
exactly the figure's white linework, with no rectangle/box edge visible anywhere else.
inline-block + padding so the box hugs the actual text rather than stretching full width. */
display: inline-block;
background: rgba(0, 0, 0, 0.8);
padding: var(--space-2) var(--space-3);
}
.tracklist-hero--bloc-party-ep .tracklist-hero__body {
display: flex;
align-items: flex-start;
gap: var(--space-5);
}
/* .tracklist-hero__list is display:contents in the base rule (so a column-direction *parent*
flex/grid can flatten it away and lay its children out directly) — wrong here, since this
page's body is a *row*, and contents would scatter the five links as separate row items
instead of a single stacked column. Given its own real box so it becomes one flex item
alongside the image. */
.tracklist-hero--bloc-party-ep .tracklist-hero__list {
display: flex;
flex-direction: column;
order: 1;
/* Same translucent-scrim reasoning as the title above — invisible over the page's own solid
black, dims the figure's white linework just enough to keep the text readable wherever the
two do overlap. One box behind the whole list (sized to the longest line), not per-line —
the base .tracklist-hero__list a rule's own align-self:start keeps each link's *hoverable
area* hugging its own text width regardless, so this doesn't reopen the old "whole line is a
hyperlink" bug even though the visible scrim box itself spans the full list width. */
background: rgba(0, 0, 0, 0.8);
padding: var(--space-2) var(--space-3);
}
.tracklist-hero--bloc-party-ep .tracklist-hero__list a {
color: #fff;
text-transform: uppercase;
transition: color 0.4s ease 0.1s;
}
.tracklist-hero--bloc-party-ep .tracklist-hero__list a:hover {
color: var(--color-accent) !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--bloc-party-ep .tracklist-hero__side-image {
width: 250px;
height: auto;
flex-shrink: 0;
order: 2;
}
/* Below this width the list's own longest line + the 250px image + the flex gap no longer sit
comfortably side by side — stacks them instead, image on top (order swapped so it's first
regardless of a:hover DOM order) rather than squeezing the list narrower. */
@media (max-width: 860px) {
.tracklist-hero--bloc-party-ep .tracklist-hero__body {
flex-direction: column;
align-items: center;
}
.tracklist-hero--bloc-party-ep .tracklist-hero__list {
order: 2;
}
.tracklist-hero--bloc-party-ep .tracklist-hero__side-image {
order: 1;
}
}
.tracklist-hero--bloc-party-ep .tracklist-hero__back a {
/* Same contrast fix as every other predominantly-black page — the shared dark pill is
invisible against a predominantly dark page background. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--bloc-party-ep .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Little Thoughts EP: almost identical to Bloc Party EP (same left-aligned title+list, side
image at the level of the first track, flex-row layout with the same 860px stacking
breakpoint) — differences are no background photo (a flat pale colour instead, so none of
Bloc Party EP's figure-collision scrim is needed here at all), a different side image, and a
light-page colour scheme (black text, olive hover) instead of white-on-black. */
.tracklist-hero--little-thoughts-ep {
background-color: #f9f4e8;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__title {
color: #000;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__body {
display: flex;
align-items: flex-start;
gap: var(--space-5);
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__list {
display: flex;
flex-direction: column;
order: 1;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__list a {
color: #000;
text-transform: uppercase;
transition: color 0.4s ease 0.1s;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__list a:hover {
color: #8fac31 !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__side-image {
width: 250px;
height: auto;
flex-shrink: 0;
order: 2;
}
@media (max-width: 860px) {
.tracklist-hero--little-thoughts-ep .tracklist-hero__body {
flex-direction: column;
align-items: center;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__list {
order: 2;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__side-image {
order: 1;
}
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__back a {
/* The shared base pill (rgba(0,0,0,0.35), meant for white text) composites to a mid-grey that
has almost no luminance difference from #8fac31 itself — confirmed via computed style, the
button was nearly illegible. A light pill instead gives the olive text something to actually
contrast against. */
background: rgba(255, 255, 255, 0.6);
color: #8fac31;
}
.tracklist-hero--little-thoughts-ep .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.85);
}
/* Four More EP: reuses Four's own 4-colour hover cycle (same --track-hover custom-property
technique, same hex values) and its rings background, but everything else is simpler —
centred title/list instead of Four's 2-column layout, no track numbers, no Bonus Tracks. */
.tracklist-hero--four-more-ep {
background-color: #000;
}
.tracklist-hero--four-more-ep::before {
background-image: url('/Assets/Artwork/Four Artwork/Four 2K.jpeg');
/* auto 100% — height always matches the browser window's own height, anchored to horizontal
centre; the rings themselves already sit centred in the source photo, so this needs no
vertical-anchor decision beyond the default centre. */
background-size: auto 100%;
background-position: center center;
}
/* "FOUR MORE EP" as three explicit lines (FOUR / MORE / EP, via literal
in the HTML — not
just wrapping) — FOUR and MORE share one larger size, EP is exactly half of it (both the
min/preferred/max clamp values halved, so the ratio holds at every viewport width, not just
the one it was eyeballed at). text-transform:uppercase is already the shared h1 default, so
the HTML can stay mixed-case. */
.tracklist-hero--four-more-ep .tracklist-hero__title {
color: #fff;
text-align: center;
line-height: 0.85;
/* Vertically centres the title+tracklist as one group in the space between the hero's own top
and the back button — margin-top:auto here paired with margin-bottom:auto on
.tracklist-hero__body (and the back button's own margin-top zeroed out below, so it isn't a
third auto margin competing for the same free space) is the same technique used to centre
Anatomy's tracklist alone, just spanning both the title and the list as a single pair this
time since nothing sits between them needing its own centring. */
margin-top: auto;
}
.tracklist-hero--four-more-ep .tracklist-hero__title-word--big {
font-size: clamp(3.5rem, 8vw, 6.5rem);
}
.tracklist-hero--four-more-ep .tracklist-hero__title-word--small {
font-size: clamp(1.75rem, 4vw, 3.25rem);
}
/* No side image and no Bonus Tracks on this page, so the shared 3-column grid
(list/spacer/side-content) has nothing to put in columns 2/3 — swapped for a plain centred
flex column instead, same technique as Intimacy. */
.tracklist-hero--four-more-ep .tracklist-hero__body {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: auto;
}
.tracklist-hero--four-more-ep .tracklist-hero__list a {
color: #fff;
text-transform: uppercase;
/* The base rule's align-self:start (fixing "whole line is a hyperlink" elsewhere) overrides
this page's own centred body — put back to match, same reasoning as Intimacy. */
align-self: center;
/* On narrow viewports "Straight Thru Cru" wraps to two lines — without this, the wrapped
second line defaults to the page's own left text-align instead of following the link's own
centred position. */
text-align: center;
transition: color 0.4s ease 0.1s;
}
.tracklist-hero--four-more-ep .tracklist-hero__list a:hover {
color: var(--track-hover) !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--four-more-ep .tracklist-hero__back {
/* The shared base rule's margin-top:auto would otherwise be a third auto margin competing
with the title/body pair above for the hero's free space, pulling the group off-centre
toward the top — zeroed out so all of it goes to the title+body pair instead. */
margin-top: 0;
}
.tracklist-hero--four-more-ep .tracklist-hero__back a {
/* Same contrast fix as every other predominantly-black page. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--four-more-ep .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* The Nextwave Sessions: no side image, no Bonus Tracks. Originally left the shared 3-column
grid as-is (list left-aligned, block centred) since that matched the first-round instructions
— the user's own follow-up asked for the list aligned *with the title* instead, i.e. sharing
the title's own centred axis, so this now matches Intimacy/Four More EP's technique instead:
.tracklist-hero__body swapped to a centred flex column, each link's align-self put back to
center (the base rule's align-self:start, fixing "whole line is a hyperlink" elsewhere,
otherwise overrides a centred parent's own align-items). */
.tracklist-hero--nextwave-sessions {
background-color: #040001;
}
.tracklist-hero--nextwave-sessions::before {
background-image: url('/Assets/Artwork/EPs/tns_bg_big.jpg');
/* cover, not 100% auto — width-driven sizing left height uncovered whenever the hero's own
aspect ratio (content/flex-driven, can exceed the image's own ~2.7:1) was narrower than the
image, revealing a plain #040001 band above the texture instead of it. Confirmed directly:
at 2560x1440 and worse at 3840x2160, the rendered image fell hundreds of px short of the
hero's actual height. cover guarantees full coverage on both axes regardless of the box's
aspect ratio, cropping whichever axis has slack — center bottom still anchors which part of
the (now taller-than-native) image survives the horizontal crop. */
background-size: cover;
background-position: center bottom;
}
.tracklist-hero--nextwave-sessions .tracklist-hero__title {
color: #2a7b90;
text-align: center;
}
.tracklist-hero--nextwave-sessions .tracklist-hero__body {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Legibility fix found during verification, not requested: on shorter browser windows (roughly
under ~950px tall at 1280px wide) the last track ("Children Of The Future") lands on the
image's own busiest region (dense orange/teal texture) — confirmed via screenshot at
1280×900 vs 1280×1200, fully legible at the taller height and not at the shorter one. Same fix
as Bloc Party EP's figure collision: a translucent scrim behind the whole list, composited
over this page's own solid-black background it stays black (invisible), and only actually
dims the texture where the two genuinely overlap. Needs display:flex here too — the base
rule's display:contents makes this element generate no box of its own at all (by design, so a
column-direction parent can flatten it away and lay its children out directly), so a
background/padding on it is otherwise a complete no-op; confirmed via
getBoundingClientRect reporting 0×0 before this was added.
margin-left: aligns the list's own left edge (plus its own padding-left below) with where
"The" — the title's first word — actually starts. Measured directly via a Range over the
title's text node at the standard 1280px test width used throughout this project (title text
left edge 214.5px) and tuned by direct measurement of the rendered result, not just formula —
an initial 100px estimate (214.5 − body's own 90px left edge − the list's own 24px
padding-left) landed 8.5px short, so nudged to 109px, confirmed sub-pixel (0.5px) accurate
afterward. Since the title is centred text in a variable-width box whose own font-size is
itself a vw-based clamp(), no fixed formula holds at every viewport width — this is a best-fit
tuned at the one reference width every other measurement in this project has used, not a
dynamic alignment that tracks the title at arbitrary widths. */
.tracklist-hero--nextwave-sessions .tracklist-hero__list {
display: flex;
flex-direction: column;
align-items: flex-start;
background: rgba(0, 0, 0, 0.7);
padding: var(--space-2) var(--space-3);
margin-left: 109px;
}
/* The 109px offset was tuned for the title's own single-line rendered width at the desktop
reference — below the width where the title wraps to two lines (confirmed via rendered height:
88px/2 lines at 500px wide vs 46px/1 line at 700px), "aligned with The" no longer means
anything coherent, and the fixed offset just eats into an already-narrow column, forcing every
longer track title into an awkward multi-line wrap ("French Exit" → "French"/"Exit"). Dropped
back to flush-left at the hero's own padding instead. */
@media (max-width: 700px) {
.tracklist-hero--nextwave-sessions .tracklist-hero__list {
margin-left: 0;
}
}
.tracklist-hero--nextwave-sessions .tracklist-hero__list a {
color: #2a7b90;
font-family: var(--font-serif);
font-style: italic;
text-transform: none;
font-size: 2.6rem;
transition: color 0.4s ease 0.1s;
}
.tracklist-hero--nextwave-sessions .tracklist-hero__list a:hover {
color: #fff !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--nextwave-sessions .tracklist-hero__back a {
/* Same contrast fix as every other predominantly-dark page. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--nextwave-sessions .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* The High Life EP — final EP. List pinned left, side image pinned right, vertically centred
relative to each other: a flex row with justify-content:space-between (not the shared grid's
1fr spacer column, and not Bloc Party EP's tight centred gap — this page wants the pair pushed
to opposite edges, not held close together) and align-items:center. List first in the DOM,
image second — happens to already read as "list left, image right" in the row layout with no
order override needed, and stacks as "image below list" once the row collapses to a column,
matching what was asked without needing Bloc Party EP's DOM-order-plus-flex-order trick. */
.tracklist-hero--high-life-ep {
background-color: #000;
}
.tracklist-hero--high-life-ep::before {
background-image: url('/Assets/Artwork/EPs/high-life-ep-bg-scaled.jpeg');
/* cover — scales so whichever dimension (width or height) needs to grow more to fully cover
the box drives the size, cropping the other axis's overflow; the source photo's own content
(an abstract blue skyline/cityscape pattern) is fairly uniform throughout with nothing
off-centre to bias toward, so a plain centre anchor needed no further decision. */
background-size: cover;
background-position: center center;
}
.tracklist-hero--high-life-ep .tracklist-hero__title {
color: #fff;
}
.tracklist-hero--high-life-ep .tracklist-hero__body {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.tracklist-hero--high-life-ep .tracklist-hero__list {
display: flex;
flex-direction: column;
}
.tracklist-hero--high-life-ep .tracklist-hero__list a {
color: #fff;
font-size: 2.6rem;
transition: color 0.4s ease 0.1s;
}
/* Narrow-width override, per request — the flat 2.6rem here is larger than any other album's own
override, so despite this EP's titles being short, it was still wrapping before the tracklist
column's own right edge on a real phone. */
@media (max-width: 600px) {
.tracklist-hero--high-life-ep .tracklist-hero__list a {
font-size: 1.6rem;
}
}
.tracklist-hero--high-life-ep .tracklist-hero__list a:hover {
color: #c88278 !important;
transition-duration: 0.2s;
transition-delay: 0s;
}
.tracklist-hero--high-life-ep .tracklist-hero__side-image {
width: 400px;
flex-shrink: 0;
}
/* Below this width the list's own longest line ("Keep It Rolling (feat. KennyHoopla)") + the
400px image + the flex gap no longer sit comfortably side by side — collapses to a column,
image second in the DOM so it lands below the list with no order override needed. */
@media (max-width: 1000px) {
.tracklist-hero--high-life-ep .tracklist-hero__body {
flex-direction: column;
align-items: flex-start;
}
}
.tracklist-hero--high-life-ep .tracklist-hero__back a {
/* Same contrast fix as every other predominantly-dark page. */
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.tracklist-hero--high-life-ep .tracklist-hero__back a:hover {
background: rgba(255, 255, 255, 0.22);
}
/* A full-bleed, slowly-scrolling strip of artwork — reusable for any future album that wants one,
not Intimacy-specific by name. Follows immediately after whatever comes before it (originally
pinned to the very bottom of a min-height:100vh hero via margin-top:auto, but on a tall/short-
content viewport that left a large dead gap between the tracklist and the marquee, and could
push the marquee itself below the fold — sits right after in normal flow instead, with just a
small fixed gap). Cancels the hero's own left/right padding so the images touch the actual
viewport edges rather than stopping at the hero's normal content padding. */
.tracklist-hero__marquee {
width: calc(100% + 2 * var(--space-5));
margin-left: calc(-1 * var(--space-5));
margin-right: calc(-1 * var(--space-5));
margin-top: var(--space-2);
overflow: hidden;
}
.tracklist-hero__marquee-track {
display: flex;
align-items: center;
gap: 0;
width: max-content;
animation: tracklist-hero-marquee 40s linear infinite;
}
.tracklist-hero__marquee-track img {
display: block;
height: 200px;
width: auto;
flex-shrink: 0;
}
/* The track's own content is duplicated once in the HTML (two full, identical copies back to
back), so translating by exactly -50% of the doubled track's total width always lands on a
frame pixel-identical to the start — a seamless loop regardless of how many images there are
or how wide any individual one is, with no per-image width math needed. */
@keyframes tracklist-hero-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.tracklist-hero__marquee-track {
animation: none;
}
}
/* CMS-built releases (lyrics/release.html + js/lyrics-release.js): unlike every other album/EP's
own hand-written modifier block above, every visual choice here comes from a CSS custom
property set by JS per release (from the Tracklist Page fields in the CMS), falling back to
sane shared-token defaults when a release leaves a field blank. */
.tracklist-hero--generic {
background-color: var(--tt-bg-color, #000);
}
.tracklist-hero--generic::before {
background-image: var(--tt-bg-image, none);
background-size: cover;
background-position: center center;
}
.tracklist-hero--generic .tracklist-hero__title {
font-family: var(--tt-title-font, var(--font-body));
color: var(--tt-title-color, var(--color-text-muted));
text-align: var(--tt-title-align, left);
}
.tracklist-hero--generic .tracklist-hero__list a,
.tracklist-hero--generic .tracklist-hero__bonus a,
.tracklist-hero--generic .tracklist-hero__bsides-drawer-inner a {
font-family: var(--tt-song-font, var(--font-body));
color: var(--tt-song-color, var(--color-text-muted));
text-align: var(--tt-song-align, left);
justify-self: var(--tt-song-justify, start);
align-self: var(--tt-song-justify, start);
}
.tracklist-hero--generic .tracklist-hero__list a:hover,
.tracklist-hero--generic .tracklist-hero__bonus a:hover,
.tracklist-hero--generic .tracklist-hero__bsides-drawer-inner a:hover {
color: var(--tt-song-hover-color, #000) !important;
}
/* CMS-built releases' Lyrics Page (lyrics/release-lyrics.html + js/lyrics-release-lyrics.js) —
same custom-property-driven approach as .tracklist-hero--generic above. .track__title and
.track__number get their own explicit colour (rather than just inheriting .track__toggle's
shared hover colour, the way most hand-built pages do it) because a release's song-titles
colour is independently choosable here — that breaks the simple inheritance path, so hover/
open state needs its own explicit rule too, same fix Anatomy's own block already needed for
the same reason. */
.lyrics-page--generic {
background: var(--lp-bg-color, var(--color-bg));
}
.lyrics-page--generic .lyrics-page__header h1 {
font-family: var(--lp-title-font, var(--font-body));
color: var(--lp-title-color, var(--color-text));
}
.lyrics-page--generic .track__title {
font-family: var(--lp-song-font, var(--font-body));
color: var(--lp-song-color, var(--color-text));
}
.lyrics-page--generic .track__toggle:hover .track__title,
.lyrics-page--generic .track__toggle[aria-expanded="true"] .track__title {
color: var(--lp-song-hover-color, var(--color-accent));
}
.lyrics-page--generic .track__number {
color: var(--lp-song-hover-color, var(--color-text-muted));
}
.lyrics-page--generic .track__lyrics {
font-family: var(--lp-lyrics-font, var(--font-serif));
color: var(--lp-lyrics-color, var(--color-text));
}