/* -----------------------------------------------------------------------
* Astro cards.css — verbatim port of the card, bio, facts, and bio-nav
* rules from Astro's page files:
* ~/boswell-poc/src/pages/sisters/index.astro (122-257)
* ~/boswell-poc/src/pages/sisters/[slug].astro (181-268, 305-338)
*
* Astro's tokens resolve through the aliases in astro/global.css.
*
* Follow-up commits will append the remaining card families to this
* same file (from press/index.astro, media/index.astro, media/charts.astro,
* media/discography.astro): .release-card, .lesson-card, .music-teaser,
* .see-also.
*
* Edits made against the Astro source:
* 1. `.sister-card__link` is an `` in Astro. In WordPress the card
* is a `core/group` with a `core/buttons` CTA — the whole-card click
* target is already provided by the theme's `is-style-card-plain`
* block style (`::before` overlay expanding the CTA's hit area).
* `.sister-card__link` styling therefore applies to the outer group
* via a compound selector; the CTA anchor keeps its overlay.
* 2. `:global(...)` wrappers in Astro's scoped styles dropped to plain
* descendant selectors.
* 3. `.subpage-card` (an on ground-gold) needs its `color` and
* `border-*` rules scoped to `.sisters-subpages .subpage-card`
* (specificity 0-2-0) so they beat `global.css`'s `.ground-gold a`
* rule (0-1-1). Astro achieves the same via its
* `data-astro-cid-*` scoping.
* 4. `.subpage-card__eyebrow`'s color rule needs `.subpage-card
* .subpage-card__eyebrow` (0-2-0) so it beats `.ground-gold
* .eyebrow` (0-2-0, later in cascade). We also nudge specificity
* with a compound selector so cascade order determines the winner
* — cards.css loads after global.css so the yellow-soft color wins.
* 5. `.music-teaser` (an on ground-gold, same as subpage-card)
* needs its `color`, `background`, `border`, `text-decoration` and
* `:hover`/`:focus-visible` rules scoped to `.music-teasers
* .music-teaser` (0-2-0 base, 0-3-0 with hover pseudo) so they beat
* `global.css`'s `.ground-gold a` (0-1-1) and `.ground-gold
* a:hover` (0-2-1). Astro achieves the same via its
* `data-astro-cid-*` scoping.
* 6. `.music-teaser__eyebrow`'s color rule scoped to `.music-teaser
* .music-teaser__eyebrow` (0-2-0) matches `.ground-gold .eyebrow`
* (0-2-0) — cards.css loads after global.css so yellow-soft wins.
* 7. `.release-card__link` (an on ground-gold) needs its `color`,
* `background` and `border` rules scoped to `.press-releases
* .release-card__link` (0-2-0) so they beat `.ground-gold a`
* (0-1-1); `.release-card__link:hover` scoped to `.press-releases
* .release-card__link:hover` (0-3-0) so it beats `.ground-gold
* a:hover` (0-2-1). Astro achieves the same via its
* `data-astro-cid-*` scoping.
* 8. `.lessons-grid__head` / `.lessons-grid__title` / `.lessons-grid__lede`
* rules from media/index.astro L162-164 added alongside the existing
* `.lessons-cards` / `.lesson-card` block (which was ported at
* commit ac1c464). No selector changes.
* 9. `.see-also__card` (an on ground-gold, same shape as .music-teaser
* / .subpage-card / .release-card__link) needs its `color`, `background`,
* `border`, `text-decoration` and `:hover`/`:focus-visible` rules scoped
* to `.see-also .see-also__card` (0-2-0 base, 0-3-0 with hover pseudo)
* so they beat `global.css`'s `.ground-gold a` (0-1-1) and `.ground-gold
* a:hover` (0-2-1). Astro achieves the same via its `data-astro-cid-*`
* scoping.
* 10. `.see-also__eyebrow`'s color rule scoped to `.see-also__card
* .see-also__eyebrow` (0-2-0) matches `.ground-gold .eyebrow` (0-2-0)
* — cards.css loads after global.css so yellow-soft wins.
*
* No other selector was renamed.
* -------------------------------------------------------------------- */
/* --- Sister cards grid (sisters/index.astro) ------------------------- */
.sisters-grid { position: relative; overflow: hidden; }
.sisters-grid__head { max-width: var(--measure); margin-bottom: var(--space-5); }
.sisters-grid__title {
margin-top: var(--space-2);
font-family: var(--font-display);
font-size: clamp(var(--step-4), 3.5vw + 0.3rem, var(--step-6));
font-weight: 300;
letter-spacing: var(--track-tight);
}
.sisters-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--paper-hairline);
border-left: 1px solid var(--paper-hairline);
}
@media (max-width: 900px) { .sisters-cards { grid-template-columns: 1fr; } }
.sister-card {
border-right: 1px solid var(--paper-hairline);
border-bottom: 1px solid var(--paper-hairline);
position: relative;
}
.sister-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--purple);
opacity: 0.85;
}
.sister-card__link,
.sister-card > .wp-block-group {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(var(--space-5), 2.4vw, var(--space-7));
padding-left: calc(clamp(var(--space-5), 2.4vw, var(--space-7)) + 6px);
height: 100%;
border: 0;
transition: background var(--dur) var(--ease-out-quart);
}
.sister-card__link:hover, .sister-card__link:focus-visible,
.sister-card:hover, .sister-card:focus-within {
background: color-mix(in oklab, var(--purple) 6%, transparent);
}
.sister-card__meta { display: flex; align-items: baseline; gap: var(--space-3); }
.sister-card__order {
font-family: var(--font-display);
font-size: var(--step-3);
color: var(--purple);
line-height: 1;
font-feature-settings: 'tnum';
}
.sister-card__nickname {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--step--1);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--text-on-paper-muted);
}
/* .sister-card__name is a ; the Section block scss has
* `.ground-paper :is(h2, h3) { font-weight: 300 }` (0-2-1) that would
* override this. Bump the selector to 0-2-0 so the ported weight of
* 400 wins on paper grounds. */
.sister-card__name,
.sister-card .sister-card__name {
font-family: var(--font-display);
font-size: clamp(var(--step-3), 2vw, var(--step-4));
font-weight: 400;
letter-spacing: var(--track-tight);
line-height: 1;
color: var(--ink);
}
/* Section block inner-rhythm rule adds `margin-block-start: 1rem` on
* every non-first child of a bozzies/section inner. `.sisters-cards`
* follows an h2 and picks that up. Reset with a compound selector so
* the specificity (0-2-1) matches the Section block's rule and later
* cascade wins. */
.wp-block-bozzies-section.ground-paper .sisters-cards,
.sisters-cards { margin-top: 0; padding: 0; list-style: none; }
.wp-block-bozzies-section.ground-paper .sister-card h3.sister-card__name { font-weight: 400; }
.sister-card__quote {
font-family: var(--font-ui);
font-style: italic;
font-size: var(--step-0);
line-height: var(--leading-normal);
color: var(--oxblood);
max-width: 36ch;
margin: 0;
}
.sister-card__cta {
margin-top: auto;
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--step--1);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--purple);
padding-top: var(--space-3);
}
.sister-card__link:hover .sister-card__cta svg,
.sister-card:hover .sister-card__cta svg { transform: translateX(4px); }
.sister-card__cta svg { transition: transform var(--dur) var(--ease-out-quart); }
/* --- Sisters sub-page teasers (dark cards on gold ground) ----------- */
.sisters-subpages { position: relative; overflow: hidden; }
.sisters-subpages__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(var(--space-4), 2.4vw, var(--space-6));
position: relative; z-index: 1;
}
@media (max-width: 820px) { .sisters-subpages__grid { grid-template-columns: 1fr; } }
.subpage-card,
.sisters-subpages .subpage-card {
display: flex; flex-direction: column; gap: var(--space-3);
padding: clamp(var(--space-5), 2.4vw, var(--space-6));
border: 1px solid color-mix(in oklab, var(--purple) 55%, black);
background: color-mix(in oklab, var(--purple) 92%, black);
color: var(--paper-warm);
text-decoration: none;
transition: transform var(--dur) var(--ease-out-quart), background var(--dur) var(--ease-out-quart);
}
.sisters-subpages .subpage-card:hover,
.sisters-subpages .subpage-card:focus-visible,
.sisters-subpages .subpage-card:focus-within { transform: translateY(-3px); background: var(--oxblood); color: var(--paper-warm); }
.subpage-card .subpage-card__eyebrow { color: var(--yellow-soft); }
.subpage-card__title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(var(--step-3), 2.4vw, var(--step-4));
letter-spacing: var(--track-tight);
color: var(--paper-warm);
margin: 0;
max-width: 34ch;
}
.subpage-card__body {
font-family: var(--font-body); font-size: var(--step-0);
line-height: var(--leading-normal);
color: rgba(245, 234, 209, 0.9);
margin: 0;
max-width: 58ch;
}
.subpage-card__cta {
margin-top: auto;
display: inline-flex; align-items: center; gap: var(--space-2);
color: var(--yellow-soft);
font-family: var(--font-ui); font-weight: 500; font-size: var(--step--1);
letter-spacing: var(--track-caps); text-transform: uppercase;
padding-top: var(--space-3);
}
.subpage-card__cta svg { transition: transform var(--dur) var(--ease-out-quart); }
.subpage-card:hover .subpage-card__cta svg { transform: translateX(4px); }
/* --- Two-column sticky-portrait bio body ---------------------------- */
.bio-body { position: relative; }
/* Astro's per-page .prose block in sisters/[slug].astro (line 271) adds
* position:relative + z-index:1 so the prose column sits above the
* ground-paper noise overlay. Article.css's shared .prose rule omits
* this because press articles don't need it; scope it to .bio-body here
* to match Astro's bio pages without touching article prose. */
.bio-body .prose { position: relative; z-index: 1; }
.bio-body__layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: clamp(var(--space-5), 3vw, var(--space-7));
align-items: start;
max-width: var(--measure-wide);
margin-inline: auto;
}
@media (max-width: 820px) {
.bio-body__layout { grid-template-columns: 1fr; }
}
.bio-portrait {
margin: 0;
width: 300px;
max-width: 100%;
position: sticky;
top: calc(80px + var(--space-3));
align-self: start;
}
.bio-portrait img {
display: block;
width: 100%;
height: 300px;
object-fit: cover;
object-position: center 20%;
filter: grayscale(0.4) contrast(1.05);
border: 1px solid var(--paper-hairline);
box-shadow: 0 8px 20px -12px rgba(24, 22, 21, 0.35);
}
.bio-portrait__caption {
margin-top: var(--space-2);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--step--2);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--purple);
text-align: center;
}
@media (max-width: 820px) {
/* Drop the 300 px fixed width at mobile too — grid 1fr with a 300 px
* item is sized to the item's min-content, which locks the column at
* 300 px even when the viewport is 320 (= 7 px horizontal overflow
* from the surrounding container's padding). Letting the figure fill
* the grid column caps the image at the available width. */
.bio-portrait {
position: static;
margin-bottom: var(--space-4);
width: 100%;
}
}
/* --- Facts strip (sisters/[slug].astro) ----------------------------- */
.facts-strip { border-bottom: 1px solid var(--paper-hairline); background: color-mix(in oklab, var(--paper) 96%, var(--purple) 4%); }
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: clamp(var(--space-3), 1.5vw, var(--space-5));
margin: 0;
}
.facts__pair {
display: grid;
grid-template-rows: auto auto;
gap: var(--space-1);
padding-left: var(--space-3);
border-left: 2px solid var(--purple);
}
.facts__label {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--step--2);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--purple);
margin: 0;
}
.facts__value {
font-family: var(--font-body);
font-size: var(--step-0);
color: var(--text-on-paper);
line-height: var(--leading-normal);
margin: 0;
}
/* --- Bio timeline heading -------------------------------------------- */
.bio-timeline { position: relative; overflow: hidden; background: color-mix(in oklab, var(--paper) 96%, var(--purple) 4%); }
.bio-timeline__head { max-width: var(--measure-wide); margin: 0 auto var(--space-5); text-align: center; }
.bio-timeline__title {
margin-top: var(--space-2);
font-family: var(--font-display);
font-size: clamp(var(--step-4), 3vw + 0.3rem, var(--step-5));
font-weight: 300;
letter-spacing: var(--track-tight);
}
/* --- Sisters bottom nav (prev / all / next) ------------------------- */
.bio-nav { border-top: 1px solid var(--paper-hairline); }
.bio-nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-5);
align-items: center;
}
.bio-nav__link {
display: inline-flex;
flex-direction: column;
gap: var(--space-1);
border: 0;
padding-block: var(--space-3);
}
.bio-nav__link--prev { text-align: left; }
.bio-nav__link--all { text-align: center; }
.bio-nav__link--next { text-align: right; justify-self: end; }
.bio-nav__label {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--step--2);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--text-on-paper-muted);
}
.bio-nav__name {
font-family: var(--font-display);
font-size: var(--step-2);
color: var(--ink);
}
@media (max-width: 640px) {
.bio-nav__inner { grid-template-columns: 1fr; text-align: center; }
.bio-nav__link { text-align: center; justify-self: center; }
}
/* --- Press releases grid (press/index.astro, gold ground) ----------
* The eyebrow / title / description sit inside ``.
* `text-align: center` is declared on each of the four selectors individually
* (not just on `.releases-head`) so no owner-added class, print stylesheet,
* or late-cascade override can knock the children off-center while leaving
* the parent centered. `margin-inline: auto` on the head + blurb boxes
* centers them horizontally — parent `.wp-block-bozzies-section__inner` is
* wider than the 60rem + 58ch caps so the boxes would otherwise hang left. */
.releases-head { max-width: var(--measure-wide); margin: 0 auto var(--space-5); text-align: center; }
.releases-head__eyebrow { text-align: center; }
.releases-head__title { margin: var(--space-2) auto 0; font-family: var(--font-display); font-size: clamp(var(--step-4), 3vw + 0.3rem, var(--step-5)); font-weight: 300; color: var(--ink); text-align: center; }
.releases-head__blurb { margin: var(--space-2) auto 0; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); max-width: var(--measure-body); text-align: center; }
.releases-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--space-4);
list-style: none;
padding: 0;
margin: 0;
position: relative;
z-index: 1;
}
.press-releases .release-card__link {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
background: color-mix(in oklab, var(--purple) 92%, black);
border: 1px solid color-mix(in oklab, var(--purple) 55%, black);
color: var(--paper-warm);
text-decoration: none;
transition: transform var(--dur) var(--ease-out-quart), background var(--dur) var(--ease-out-quart);
height: 100%;
}
.press-releases .release-card__link:hover { transform: translateY(-3px); background: var(--oxblood); }
.release-card__type { font-family: var(--font-ui); font-weight: 600; font-size: var(--step--2); letter-spacing: var(--track-caps); color: var(--yellow-soft); }
.release-card__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: var(--leading-snug); color: var(--paper-warm); }
.release-card__date { margin: 0; font-family: var(--font-ui); font-size: var(--step--1); color: rgba(245, 234, 209, 0.75); }
/* --- Lesson rows on /media/ (media/index.astro) -------------------- */
.lessons-grid { position: relative; overflow: hidden; }
.lessons-grid__head { max-width: var(--measure-wide); margin: 0 auto var(--space-6); text-align: center; position: relative; z-index: 1; }
.lessons-grid__title { margin: var(--space-2) auto 0; font-family: var(--font-display); font-size: clamp(var(--step-4), 3.5vw + 0.3rem, var(--step-6)); font-weight: 300; letter-spacing: var(--track-tight); text-align: center; }
.lessons-grid__lede { margin: var(--space-3) auto 0; font-family: var(--font-body); font-size: var(--step-1); line-height: var(--leading-loose); color: var(--text-on-paper); max-width: var(--measure-body); text-align: center; }
.lessons-cards { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--paper-hairline); position: relative; z-index: 1; }
.lesson-card { border-bottom: 1px solid var(--paper-hairline); position: relative; background: color-mix(in oklab, var(--paper) 97%, var(--purple) 3%); }
.lesson-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--purple); opacity: 0.9; }
.lesson-card__link {
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(var(--space-4), 3vw, var(--space-6));
align-items: center;
padding: clamp(var(--space-5), 2.4vw, var(--space-6));
padding-left: calc(clamp(var(--space-5), 2.4vw, var(--space-6)) + 8px);
border: 0;
transition: background var(--dur) var(--ease-out-quart);
}
.lesson-card__link:hover, .lesson-card__link:focus-visible { background: color-mix(in oklab, var(--purple) 6%, transparent); }
.lesson-card__num { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 4rem; }
.lesson-card__num-label { font-family: var(--font-ui); font-weight: 500; font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-on-paper-muted); }
.lesson-card__num-value { font-family: var(--font-display); font-size: var(--step-5); font-weight: 300; color: var(--purple); line-height: 1; font-feature-settings: 'tnum'; }
.lesson-card__body { min-width: 0; }
.lesson-card__title { font-family: var(--font-display); font-size: clamp(var(--step-3), 2vw, var(--step-4)); font-weight: 400; letter-spacing: var(--track-tight); color: var(--ink); margin: 0; }
.lesson-card__summary { margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-on-paper); max-width: var(--measure-body); }
.lesson-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--purple); font-family: var(--font-ui); font-weight: 500; font-size: var(--step--1); letter-spacing: var(--track-caps); text-transform: uppercase; }
.lesson-card__cta svg { transition: transform var(--dur) var(--ease-out-quart); }
.lesson-card__link:hover .lesson-card__cta svg { transform: scale(1.1); }
@media (max-width: 640px) {
.lesson-card__link { grid-template-columns: auto 1fr; row-gap: var(--space-3); }
.lesson-card__cta { grid-column: 1 / -1; justify-content: flex-end; }
}
/* --- Music sub-page teasers (dark cards on gold) ------------------- */
.music-teasers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-4), 2.4vw, var(--space-6)); position: relative; z-index: 1; }
@media (max-width: 1000px) { .music-teasers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .music-teasers__grid { grid-template-columns: 1fr; } }
.music-teaser,
.music-teasers .music-teaser {
display: flex; flex-direction: column; gap: var(--space-3);
padding: clamp(var(--space-5), 2.4vw, var(--space-6));
border: 1px solid color-mix(in oklab, var(--purple) 55%, black);
background: color-mix(in oklab, var(--purple) 92%, black);
color: var(--paper-warm);
text-decoration: none;
transition: transform var(--dur) var(--ease-out-quart), background var(--dur) var(--ease-out-quart);
}
.music-teasers .music-teaser:hover,
.music-teasers .music-teaser:focus-visible,
.music-teasers .music-teaser:focus-within { transform: translateY(-3px); background: var(--oxblood); color: var(--paper-warm); }
.music-teaser .music-teaser__eyebrow { color: var(--yellow-soft); }
.music-teaser__title { font-family: var(--font-display); font-size: clamp(var(--step-3), 2.4vw, var(--step-4)); font-weight: 400; letter-spacing: var(--track-tight); color: var(--paper-warm); margin: 0; }
.music-teaser__body { font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-normal); color: rgba(245, 234, 209, 0.9); margin: 0; max-width: var(--measure-body); }
.music-teaser__cta { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--yellow-soft); font-family: var(--font-ui); font-weight: 500; font-size: var(--step--1); letter-spacing: var(--track-caps); text-transform: uppercase; padding-top: var(--space-3); }
.music-teaser:hover .music-teaser__cta svg { transform: translateX(4px); }
.music-teaser__cta svg { transition: transform var(--dur) var(--ease-out-quart); }
/* --- See-also cross-links (charts, discography) -------------------- */
.see-also { position: relative; overflow: hidden; }
.see-also__grid { display: flex; justify-content: center; }
.see-also .see-also__card {
display: flex; flex-direction: column; gap: var(--space-3);
padding: clamp(var(--space-5), 2.4vw, var(--space-6));
max-width: 40rem; width: 100%;
border: 1px solid color-mix(in oklab, var(--purple) 55%, black);
background: color-mix(in oklab, var(--purple) 92%, black);
color: var(--paper-warm);
text-decoration: none;
transition: transform var(--dur) var(--ease-out-quart), background var(--dur) var(--ease-out-quart);
}
.see-also .see-also__card:hover, .see-also .see-also__card:focus-visible { transform: translateY(-3px); background: var(--oxblood); color: var(--paper-warm); }
.see-also__card .see-also__eyebrow { color: var(--yellow-soft); }
.see-also__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(var(--step-3), 2.4vw, var(--step-4)); letter-spacing: var(--track-tight); color: var(--paper-warm); margin: 0; max-width: var(--measure-title); }
.see-also__body { font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-normal); color: rgba(245, 234, 209, 0.9); margin: 0; max-width: var(--measure-body); }
.see-also__cta {
margin-top: auto; padding-top: var(--space-3);
display: inline-flex; align-items: center; gap: var(--space-2);
color: var(--yellow-soft);
font-family: var(--font-ui); font-weight: 500; font-size: var(--step--1);
letter-spacing: var(--track-caps); text-transform: uppercase;
}
.see-also__cta svg { transition: transform var(--dur) var(--ease-out-quart); }
.see-also__card:hover .see-also__cta svg { transform: translateX(4px); }