,
so this CSS just lays them out; swapping the photo is a per-page edit.
BEGINNER TIPS:
• Mobile uses *-portrait.jpg, desktop uses *-bg.jpg (set in each page).
• To add a new palette: copy a body[data-palette="…"] line below,
give it a name, and pick a hex color for --accent (the soft variant
is just the same color with "10" appended — that's ~6% opacity).
• To make the dark vignette stronger, raise the alpha values in the
.page-bg::after gradient (.18 and .30 below).
============================================================================ */
/* ---- 1. FIXED FULL-BLEED BACKGROUND ---------------------------------------
Why not "background-attachment: fixed"? iOS Safari ignores it.
Instead we put an
![]()
in a position:fixed wrapper so the photo really
stays put while you scroll. The ::after pseudo adds a subtle dark wash
so white text / cards on top remain readable.
---------------------------------------------------------------------------- */
.page-bg{
position:fixed; inset:0; z-index:-2; /* behind everything */
width:100%; height:100%;
margin:0; padding:0; pointer-events:none; /* never block clicks */
}
.page-bg img{
width:100%; height:100%; object-fit:cover; object-position:center;
display:block;
}
.page-bg::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(20,18,14,.18), rgba(20,18,14,.30)); /* top→bottom darken */
pointer-events:none;
}
/* base.css gives a cream color; override here so the photo shows. */
html, body{ background:transparent !important; }
/* ---- 2. INDEX-CARD CONTENT PANEL ------------------------------------------
The translucent white "card" that holds all body text. Sits above .page-bg.
---------------------------------------------------------------------------- */
main.container{
background:rgba(255,255,255,.96); /* near-opaque white */
border-radius:12px;
box-shadow:0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
padding:1.6rem 1.6rem 2.2rem;
margin-top:1.2rem;
margin-bottom:2rem;
max-width:1080px;
position:relative;
}
main.container .hero .top-band{ margin:0 -1.6rem 1rem; } /* let the accent strip touch the card edges */
/* ---- 3. BANNER STRIP (hubs / landing pages only) --------------------------
Hidden by default. Hub pages add to show it.
---------------------------------------------------------------------------- */
.banner-strip{
display:none;
width:100%; height:160px; overflow:hidden;
border-radius:0 0 12px 12px;
margin-bottom:-1.2rem;
}
body.has-banner .banner-strip{ display:block; }
.banner-strip img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* ---- Mobile (≤780px) — smaller corners, less padding, shorter banner ----- */
@media (max-width:780px){
main.container{
border-radius:8px;
padding:1.1rem 1rem 1.6rem;
margin:.6rem .5rem 1.2rem;
max-width:none;
}
main.container .hero .top-band{ margin:0 -1rem 1rem; }
.banner-strip{ height:110px; border-radius:0 0 8px 8px; }
}
/* ============================================================================
4. PER-PAGE PALETTE OVERRIDES
----------------------------------------------------------------------------
These rules redefine --accent (and its soft variant) based on which
data-palette="…" the tag carries. They override the base accent
set in base.css :root.
To add a NEW palette: pick a memorable name + a single hex color, then
add a line like:
body[data-palette="my-name"]{ --accent:#aabbcc; --accent-soft:#aabbcc10; }
The "10" appended is the alpha channel (~6% opacity, used for soft fills).
============================================================================ */
/* v9 core palettes — keyed to album / era. */
body[data-palette="default"]{}
body[data-palette="hard-day"]{ --accent:#1a1a1a; --accent-soft:#1a1a1a12; } /* B&W early-'64 film look */
body[data-palette="abbey-night"]{ --accent:#244055; --accent-soft:#24405510; } /* late-night studio blue */
body[data-palette="abbey-day"]{ --accent:#3a4a55; --accent-soft:#3a4a5510; } /* daylight Abbey Road */
body[data-palette="rooftop"]{ --accent:#7a4f2e; --accent-soft:#7a4f2e10; } /* Jan-1969 rooftop brown */
body[data-palette="help"]{ --accent:#1f5fa8; --accent-soft:#1f5fa810; } /* Help! alpine blue */
body[data-palette="rubber-soul"]{ --accent:#6a4a2a; --accent-soft:#6a4a2a10; } /* Rubber Soul sepia */
body[data-palette="revolver"]{ --accent:#b41b1b; --accent-soft:#b41b1b10; } /* Revolver red accent */
body[data-palette="sgt-pepper"]{ --accent:#1e5840; --accent-soft:#1e584010; } /* Sgt Pepper green */
body[data-palette="white-album"]{ --accent:#2a2a2a; --accent-soft:#2a2a2a10; } /* White Album near-black */
body[data-palette="yellow-sub"]{ --accent:#1a7fc4; --accent-soft:#1a7fc410; } /* Yellow Submarine blue */
body[data-palette="liverpool"]{ --accent:#8a3a1a; --accent-soft:#8a3a1a10; } /* warm Cavern brick */
/* v9.1 expanded palettes — more nuanced era moods. */
body[data-palette="mmt"]{ --accent:#7a2aa0; --accent-soft:#7a2aa010; } /* Magical Mystery Tour */
body[data-palette="india"]{ --accent:#c66a1a; --accent-soft:#c66a1a10; } /* Rishikesh saffron */
body[data-palette="swinging-london"]{--accent:#b41b3a; --accent-soft:#b41b3a10; } /* mod red */
body[data-palette="cavern"]{ --accent:#a64a1a; --accent-soft:#a64a1a10; } /* Cavern Club */
body[data-palette="shea"]{ --accent:#3a7a2a; --accent-soft:#3a7a2a10; } /* Shea Stadium green */
body[data-palette="apple"]{ --accent:#d4651a; --accent-soft:#d4651a10; } /* Apple Records orange */
body[data-palette="studio-warm"]{ --accent:#7a5a3a; --accent-soft:#7a5a3a10; } /* tape-warm brown */
/* ---- Print — drop the photo background, full-white card ------------------ */
@media print{
.page-bg, .banner-strip{ display:none !important; }
main.container{ background:#fff; box-shadow:none; border-radius:0; }
}