/* ========================================================================== Ramon Alexander — Site stylesheet -------------------------------------------------------------------------- Implements the layout patterns in docs/design-system.md using ONLY the tokens defined in css/tokens.css. No raw hex/px colors here — everything references a --color-*/--space-*/--step-* token. Load order (in each page ): 1. css/tokens.css (this file @imports it, but pages also link it early) 2. css/style.css (this file) Sections: 0. Import tokens 1. Reset & base 2. Typography base 3. Layout primitives (.container/.section/.stack/.grid-auto) 4. Skip link 5. Header / nav + mobile menu 6. Footer 7. Buttons & links 8. Eyebrow / kicker + section headings 9. Hero + credential strip 10. Long-form bio / pull-quote / figures 11. Discography grid 12. Timeline (performances) + upcoming shows 13. Collaborator grid 14. Video-card grid 15. Press 16. Contact / form 17. Media placeholders 18. Utilities ========================================================================== */ @import url("tokens.css"); /* ------------------------------------------------------------------ * * 1. RESET & BASE * * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } ul[class], ol[class] { list-style: none; padding: 0; } /* ------------------------------------------------------------------ * * 2. TYPOGRAPHY BASE * * ------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-medium); /* medium, not semibold — calmer, less shouty */ line-height: var(--leading-snug); color: var(--color-heading); text-wrap: balance; } h1 { font-size: var(--step-6); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--step-5); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--step-4); } h4 { font-size: var(--step-3); } h5 { font-size: var(--step-2); } p { text-wrap: pretty; } /* ------------------------------------------------------------------ * * 3. LAYOUT PRIMITIVES * * ------------------------------------------------------------------ */ .container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; } .container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); } .container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); } .section { padding-block: var(--section-y); } .section--lg { padding-block: var(--section-y-lg); } .section--sunken { background-color: var(--color-bg-sunken); } .section--inverse { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); } .section--inverse h1, .section--inverse h2, .section--inverse h3, .section--inverse h4, .section--inverse h5 { color: var(--color-text-inverse); } .stack > * + * { margin-block-start: var(--flow, var(--space-md)); } .stack--tight { --flow: var(--space-2xs); } .stack--loose { --flow: var(--space-lg); } .grid-auto { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } /* ------------------------------------------------------------------ * * 4. SKIP LINK * * ------------------------------------------------------------------ */ .skip-link { position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-skip-link); transform: translateY(-160%); background: var(--color-accent); color: var(--c-ink-900); padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); text-decoration: none; transition: transform var(--dur-fast) var(--ease-standard); } .skip-link:focus { transform: translateY(0); } /* ------------------------------------------------------------------ * * 5. HEADER / NAV + MOBILE MENU * * ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky-header); background-color: var(--color-bg-inverse); color: var(--color-text-inverse); border-block-end: var(--border-hairline) solid var(--color-border-inverse); } .site-header.is-scrolled { box-shadow: var(--shadow-md); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4rem; padding-block: var(--space-2xs); } .wordmark { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--color-text-inverse); line-height: 1.05; } .wordmark__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--weight-semibold); } .wordmark__tag { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-wide); color: var(--color-text-inverse-muted); text-transform: uppercase; } /* Nav toggle (mobile hamburger) */ .nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; min-width: 44px; justify-content: center; padding: var(--space-2xs) var(--space-xs); background: transparent; color: var(--color-text-inverse); border: var(--border-hairline) solid var(--color-border-inverse); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .nav-toggle__bars { position: relative; width: 1.15rem; height: 2px; background: currentColor; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } /* Primary nav list */ .primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3xs); } .primary-nav__link { display: block; padding: var(--space-xs) var(--space-2xs); text-decoration: none; color: var(--color-text-inverse); border-block-end: var(--border-thick) solid transparent; } .primary-nav__link:hover { color: var(--color-accent); } .primary-nav__link[aria-current="page"] { color: var(--color-accent); border-block-end-color: var(--color-accent); } /* Contact = primary booking CTA in the nav */ .primary-nav__cta { background: var(--color-accent); color: var(--c-ink-900); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); text-align: center; border-block-end: none; } .primary-nav__cta:hover { background: var(--color-accent-strong); color: var(--c-ink-900); } .primary-nav__cta[aria-current="page"] { border-block-end: none; color: var(--c-ink-900); } /* Grouped tab ("Live & Teaching") — a disclosure holding Performances, Masterclasses and Collaborations. Desktop: a dropdown panel opened on hover or click. Mobile: an inline accordion inside the menu panel. Open state comes from .is-open, which JS sets alongside aria-expanded — the single source of truth, so nothing can fight the button's own state. Hover on desktop is a pointer-only affordance layered on top of that (see the note on that rule). The no-JS case is handled by the @media (scripting: none) block after the desktop rules. */ .primary-nav__item--group { position: relative; } .primary-nav__trigger { display: flex; align-items: center; gap: var(--space-3xs); width: 100%; background: none; border: 0; border-block-end: var(--border-thick) solid transparent; font: inherit; line-height: inherit; color: var(--color-text-inverse); cursor: pointer; } .primary-nav__trigger:hover { color: var(--color-accent); } /* Current *section* (one of the three pages is open) — same brass marker as an active top-level link, so the group reads as "you are in here". */ .primary-nav__trigger.is-current-section { color: var(--color-accent); border-block-end-color: var(--color-accent); } .primary-nav__chevron { width: 0; height: 0; border-inline: 0.3em solid transparent; border-block-start: 0.34em solid currentColor; transition: transform var(--dur-fast) var(--ease-standard); } .primary-nav__trigger[aria-expanded="true"] > .primary-nav__chevron { transform: rotate(180deg); } .primary-nav__submenu { list-style: none; margin: 0; padding: 0; } .primary-nav__sublink { display: block; text-decoration: none; color: var(--color-text-inverse); border-block-end: var(--border-thick) solid transparent; } .primary-nav__sublink:hover { color: var(--color-accent); } .primary-nav__sublink[aria-current="page"] { color: var(--color-accent); border-block-end-color: var(--color-accent); } /* Mobile + small tablet: nav collapses behind the toggle. Threshold raised to 72em so the (now 8-item) horizontal nav only appears when there's real room for it; below that the full menu lives comfortably in the toggle panel. Uses media range syntax so the split at 72em is exact. Any max-width value below 72em leaves a band that matches neither query — CSS px are fractional, so there is no "last value before 72em" to pick. Earlier attempts (71.99em, then 71.9375em) only resized that band; inside it the nav had no display rule at all and the header rendered broken. Keep these two queries, the pair in the no-JS block, and the matchMedia in js/main.js in sync. */ @media (width < 72em) { .primary-nav { position: absolute; inset-inline: 0; top: 100%; z-index: var(--z-mobile-menu); background: var(--color-bg-inverse); border-block-end: var(--border-hairline) solid var(--color-border-inverse); box-shadow: var(--shadow-lg); padding: var(--space-sm) var(--gutter) var(--space-lg); display: none; } .primary-nav.is-open { display: block; } .primary-nav__link { font-size: var(--step-2); } .primary-nav__cta { margin-block-start: var(--space-xs); padding: var(--space-xs); } /* Group behaves as an inline accordion: the submenu pushes the rest of the panel down rather than floating over it. */ .primary-nav__trigger { justify-content: space-between; } .primary-nav__submenu { display: none; margin-inline-start: var(--space-xs); padding-inline-start: var(--space-xs); border-inline-start: var(--border-hairline) solid var(--color-border-inverse); } .primary-nav__item--group.is-open > .primary-nav__submenu { display: block; } .primary-nav__sublink { padding: var(--space-xs) var(--space-2xs); font-size: var(--step-0); } } /* Desktop (lg+): horizontal nav, no toggle */ @media (width >= 72em) { .nav-toggle { display: none; } .primary-nav { display: block !important; } .primary-nav__list { flex-direction: row; align-items: center; flex-wrap: wrap; /* safety: wrap rather than overflow if tight */ justify-content: flex-end; gap: var(--space-3xs) var(--space-2xs); } .primary-nav__link { padding: var(--space-2xs) var(--space-xs); } .primary-nav__cta { padding-inline: var(--space-md); } /* Group becomes a floating dropdown panel. Hover is a pointer-only affordance — it reveals the panel without changing aria-expanded, which tracks the button's own (click/keyboard) state. Pointer users get the familiar hover dropdown; AT users get an honest disclosure. The trigger and panel are adjacent, so there's no dead gap to fall through. */ .primary-nav__item--group { width: auto; } .primary-nav__trigger { width: auto; } .primary-nav__submenu { position: absolute; inset-inline-end: 0; top: 100%; z-index: var(--z-mobile-menu); min-width: max-content; padding: var(--space-2xs); background: var(--color-bg-inverse); border: var(--border-hairline) solid var(--color-border-inverse); border-block-start: var(--border-thick) solid var(--color-accent); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), visibility var(--dur-fast); } .primary-nav__item--group:hover > .primary-nav__submenu, .primary-nav__item--group.is-open > .primary-nav__submenu { opacity: 1; visibility: visible; transform: none; } .primary-nav__sublink { padding: var(--space-2xs) var(--space-xs); white-space: nowrap; } } /* No-JS fallback. Both the mobile panel and the grouped tab are opened by JS. `scripting: none` lets CSS know that up front, so the fallback needs no class toggling and there's no flash of the wrong state on load. Must stay after the two blocks above: same specificity, so it wins on order alone. Browsers too old for the query keep the previous behaviour. */ /* Below 72em the toggle can't open anything, so the whole nav would be unreachable. Degrade to a stacked list under the wordmark, group expanded. */ @media (scripting: none) and (width < 72em) { .nav-toggle { display: none; } /* .site-header__inner is a nowrap flex row, so a static nav would sit *beside* the wordmark in a cramped second column. Let it wrap and claim a full row of its own. */ .site-header__inner { flex-wrap: wrap; } .primary-nav { position: static; display: block; flex-basis: 100%; padding: 0 0 var(--space-sm); background: none; border-block-end: 0; box-shadow: none; } .primary-nav__trigger { cursor: default; } .primary-nav__chevron { display: none; } .primary-nav__submenu { display: block; box-shadow: none; border-radius: 0; } } /* At 72em+ the nav is already visible without JS — only the dropdown needs help. Hover already opens it in CSS; :focus-within adds the keyboard path, which is safe to use here precisely because there's no button state to contradict. */ @media (scripting: none) and (width >= 72em) { .primary-nav__trigger { cursor: default; } .primary-nav__item--group:focus-within > .primary-nav__submenu { opacity: 1; visibility: visible; transform: none; } } /* ------------------------------------------------------------------ * * 6. FOOTER * * ------------------------------------------------------------------ */ .site-footer { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); border-block-start: var(--border-thick) solid var(--color-accent); padding-block: var(--section-y); } .site-footer a { color: var(--color-link-inverse); } .site-footer a:hover { color: var(--color-link-inverse-hover); } .footer-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } @media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer-col h2 { font-family: var(--font-mono); font-size: var(--step--1); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-accent); margin-block-end: var(--space-sm); } .footer-brand__name { font-family: var(--font-display); font-size: var(--step-3); color: var(--color-text-inverse); } .footer-brand__tag { color: var(--color-text-inverse-muted); margin-block-start: var(--space-2xs); } .footer-list { display: flex; flex-direction: column; gap: var(--space-2xs); } .footer-bottom { margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-block-start: var(--border-hairline) solid var(--color-border-inverse); font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-inverse-muted); } /* ------------------------------------------------------------------ * * 7. BUTTONS & LINKS * * ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; border: var(--border-thick) solid transparent; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn--primary { background: var(--color-accent); color: var(--c-ink-900); } .btn--primary:hover { background: var(--color-accent-strong); } .btn--secondary { background: transparent; border-color: var(--color-accent); color: var(--color-accent-on-light); } .btn--secondary:hover { background: var(--color-accent); color: var(--c-ink-900); } /* Secondary button on dark sections uses brass text directly */ .section--inverse .btn--secondary, .hero .btn--secondary { color: var(--color-accent); } .section--inverse .btn--secondary:hover, .hero .btn--secondary:hover { color: var(--c-ink-900); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* Inline text links inside prose */ .prose a, a.inline-link { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; } .prose a:hover, a.inline-link:hover { color: var(--color-link-hover); } .section--inverse .prose a, .section--inverse a.inline-link { color: var(--color-link-inverse); } .section--inverse .prose a:hover, .section--inverse a.inline-link:hover { color: var(--color-link-inverse-hover); } /* ------------------------------------------------------------------ * * 8. EYEBROW / KICKER + SECTION HEADINGS * * ------------------------------------------------------------------ */ .eyebrow { display: block; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-accent-on-light); margin-block-end: var(--space-2xs); } .section--inverse .eyebrow, .hero .eyebrow { color: var(--color-accent); } .section-head { margin-block-end: var(--space-xl); max-width: var(--measure); } /* ------------------------------------------------------------------ * * 9. HERO + CREDENTIAL STRIP * * ------------------------------------------------------------------ */ .hero { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); padding-block: var(--section-y-lg); } .hero__grid { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 64em) { .hero__grid { grid-template-columns: 55fr 45fr; } } .hero__title { font-size: var(--step-7); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-inverse); } .hero__standfirst { font-size: var(--step-2); color: var(--color-text-inverse-muted); max-width: var(--measure-narrow); margin-block-start: var(--space-md); } .hero__cta { margin-block-start: var(--space-lg); } .hero__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; } /* Credential strip below hero */ .credential-strip { background-color: var(--color-bg-inverse-raised); color: var(--color-text-inverse-muted); border-block: var(--border-hairline) solid var(--color-border-inverse); font-family: var(--font-mono); font-size: var(--step--1); padding-block: var(--space-md); } .credential-strip__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center; } .credential-strip__item { display: inline-flex; align-items: center; gap: var(--space-2xs); } .credential-strip__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } /* ------------------------------------------------------------------ * * 10. LONG-FORM BIO / PULL-QUOTE / FIGURES * * ------------------------------------------------------------------ */ .prose { max-width: var(--measure); } .prose > * + * { margin-block-start: var(--space-md); } .prose p { font-size: var(--step-0); line-height: var(--leading-relaxed); } .prose h2 { margin-block-start: var(--space-xl); } .prose h3 { margin-block-start: var(--space-lg); } .prose .lead { font-size: var(--step-1); line-height: var(--leading-relaxed); } .prose ul:not([class]) { padding-inline-start: var(--space-md); } .prose ul:not([class]) li { margin-block-start: var(--space-2xs); line-height: var(--leading-relaxed); } .pull-quote { font-family: var(--font-display); font-size: var(--step-4); line-height: var(--leading-snug); color: var(--color-accent-3); border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-md); margin-block: var(--space-lg); max-width: calc(var(--measure) + 6ch); } .section--inverse .pull-quote { color: var(--color-accent); } figure.inline-figure { margin-block: var(--space-lg); } figure.inline-figure img, figure.inline-figure .media-placeholder { border-radius: var(--radius-md); } figure.inline-figure figcaption { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); margin-block-start: var(--space-2xs); } /* Definition-style "credentials at a glance" list */ .creds { border-block-start: var(--border-hairline) solid var(--color-border); } .creds > div { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-block-end: var(--border-hairline) solid var(--color-border); } @media (min-width: 40em) { .creds > div { grid-template-columns: 14rem 1fr; gap: var(--space-md); } } .creds dt { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent-on-light); } .creds dd { margin: 0; } /* ------------------------------------------------------------------ * * 11. DISCOGRAPHY GRID * * ------------------------------------------------------------------ */ .discography { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .album-card { background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .album-card__art { aspect-ratio: 1 / 1; } .album-card__body { padding: var(--space-md); display: grid; gap: var(--space-2xs); } .album-card__title { font-size: var(--step-3); } .album-card__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); } .album-card__note { font-size: var(--step-0); color: var(--color-text); } /* Discography groups (by role) + streaming embeds */ .disco-group__title { font-size: var(--step-2); margin-block: var(--space-xl) var(--space-md); padding-block-end: var(--space-2xs); border-block-end: var(--border-hairline) solid var(--color-border); } .disco-group__title:first-of-type { margin-block-start: var(--space-lg); } .disco-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; } /* Streaming cards lead with text, then the player fills the card width. */ .album-card--stream .album-card__body { padding-block-end: var(--space-xs); } .album-embed { margin-block-start: auto; padding: 0 var(--space-md); } .album-embed iframe { display: block; width: 100%; min-height: 152px; border: 0; border-radius: var(--radius-md); } .album-links { margin: 0; padding: var(--space-sm) var(--space-md) var(--space-md); } .album-link { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-wide); color: var(--color-link); text-decoration: none; } .album-link:hover { text-decoration: underline; } /* ------------------------------------------------------------------ * * 12. TIMELINE + UPCOMING SHOWS * * ------------------------------------------------------------------ */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline__group + .timeline__group { margin-block-start: var(--space-xl); } .timeline__entry { position: relative; padding-inline-start: var(--space-lg); padding-block: var(--space-sm); border-inline-start: var(--border-thick) solid var(--color-border-strong); } .timeline__entry::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-2xs)); top: var(--space-md); width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-bg); } .timeline__year { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-accent-on-light); letter-spacing: var(--tracking-wide); } .timeline__title { font-size: var(--step-3); margin-block-start: var(--space-3xs); } .timeline__where { color: var(--color-text-muted); margin-block-start: var(--space-3xs); } .timeline__note { margin-block-start: var(--space-2xs); } .pill { display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-ink-900); background: var(--color-accent); padding: 0 var(--space-2xs); border-radius: var(--radius-pill); } /* Upcoming shows list (JS-rendered) */ .shows { display: grid; gap: var(--space-md); } .show-card { display: grid; gap: var(--space-2xs); padding: var(--space-md); background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } @media (min-width: 40em) { .show-card { grid-template-columns: 10rem 1fr auto; align-items: center; gap: var(--space-md); } } .show-card__date { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-accent-on-light); letter-spacing: var(--tracking-wide); } .show-card__title { font-family: var(--font-display); font-size: var(--step-3); } .show-card__where { color: var(--color-text-muted); margin-block-start: var(--space-3xs); } .empty-state { padding: var(--space-lg); background: var(--color-bg-sunken); border: var(--border-hairline) dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); } .empty-state p + p { margin-block-start: var(--space-2xs); } /* ------------------------------------------------------------------ * * 13. COLLABORATOR GRID * * ------------------------------------------------------------------ */ .collab-group + .collab-group { margin-block-start: var(--space-xl); } .collab-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); margin-block-start: var(--space-md); } .collab-cell { padding: var(--space-md); background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-sm); } .collab-cell__name { font-family: var(--font-display); font-size: var(--step-2); } .collab-cell__role { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); margin-block-start: var(--space-3xs); } /* ------------------------------------------------------------------ * * 14. VIDEO-CARD GRID * * ------------------------------------------------------------------ */ .video-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); } .video-card { background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .video-card__frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-inverse); } /* Click-to-load thumbnail button */ .video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; } .video-card__poster img { width: 100%; height: 100%; object-fit: cover; } .video-card__scrim { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(23, 19, 15, 0.35); transition: background-color var(--dur-fast) var(--ease-standard); } .video-card__poster:hover .video-card__scrim { background: rgba(23, 19, 15, 0.55); } .video-card__play { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent); color: var(--c-ink-900); transition: transform var(--dur-fast) var(--ease-out); } .video-card__poster:hover .video-card__play { transform: scale(1.08); } .video-card__play svg { width: 1.5rem; height: 1.5rem; } .video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-card__body { padding: var(--space-md); display: grid; gap: var(--space-2xs); } .video-card__title { font-family: var(--font-display); font-size: var(--step-3); } .video-card__desc { color: var(--color-text-muted); font-size: var(--step-0); } .video-card__chips-label { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); margin-block-start: var(--space-2xs); } .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .chip { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 36px; padding: var(--space-3xs) var(--space-xs); border: var(--border-hairline) solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-bg-raised); color: var(--color-text); font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none; cursor: pointer; } .chip:hover { background: var(--color-accent); color: var(--c-ink-900); } .chip__time { letter-spacing: var(--tracking-wide); color: var(--color-accent-on-light); } .chip:hover .chip__time { color: var(--c-ink-900); } .video-card__watch { margin-block-start: var(--space-2xs); } /* ------------------------------------------------------------------ * * 15. PRESS * * ------------------------------------------------------------------ */ .quote-card { background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border); border-inline-start: 3px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-lg); } .quote-card blockquote { font-family: var(--font-display); font-size: var(--step-3); line-height: var(--leading-snug); } .quote-card figcaption { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); margin-block-start: var(--space-sm); } .coverage-list { border-block-start: var(--border-hairline) solid var(--color-border); } .coverage-list li { padding-block: var(--space-sm); border-block-end: var(--border-hairline) solid var(--color-border); } /* ------------------------------------------------------------------ * * 16. CONTACT / FORM * * ------------------------------------------------------------------ */ .contact-grid { display: grid; gap: var(--space-xl); } @media (min-width: 48em) { .contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } } .contact-details { display: grid; gap: var(--space-md); } .contact-details a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; } .contact-details a:hover { color: var(--color-link-hover); } .form { display: grid; gap: var(--space-md); } .field { display: grid; gap: var(--space-2xs); } .field label { font-weight: var(--weight-semibold); } .field .req { color: var(--color-accent-2-on-light); font-weight: var(--weight-regular); } .field input, .field select, .field textarea { width: 100%; padding: var(--space-xs) var(--space-sm); background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text); } .field textarea { min-height: 8rem; resize: vertical; } .field .hint { font-size: var(--step--1); color: var(--color-text-muted); } .form__note { font-size: var(--step--1); color: var(--color-text-muted); } /* ------------------------------------------------------------------ * * 17. MEDIA PLACEHOLDERS * * ------------------------------------------------------------------ */ .media-placeholder { display: grid; place-items: center; text-align: center; padding: var(--space-md); width: 100%; height: 100%; min-height: 8rem; background: var(--color-bg-sunken); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-wide); border: var(--border-hairline) dashed var(--color-border); } .section--inverse .media-placeholder, .hero .media-placeholder { background: var(--color-bg-inverse-raised); color: var(--color-text-inverse-muted); border-color: var(--color-border-inverse); } .media-placeholder--1x1 { aspect-ratio: 1 / 1; min-height: 0; } .media-placeholder--4x5 { aspect-ratio: 4 / 5; min-height: 0; } .media-placeholder--3x2 { aspect-ratio: 3 / 2; min-height: 0; } .media-placeholder--16x9 { aspect-ratio: 16 / 9; min-height: 0; } /* ------------------------------------------------------------------ * * 18. UTILITIES + FOCUS * * ------------------------------------------------------------------ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } .page-intro { max-width: var(--measure); } .page-intro .lead { font-size: var(--step-1); line-height: var(--leading-relaxed); color: var(--color-text); } .confirm-note { margin-block-start: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-bg-sunken); border-inline-start: 3px solid var(--color-accent-2); border-radius: var(--radius-sm); font-size: var(--step--1); color: var(--color-text-muted); } /* ------------------------------------------------------------------ * * 19. BLOG — post listing (blog.html) + article pages * * ------------------------------------------------------------------ */ .post-list { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } .post-card { display: flex; flex-direction: column; background: var(--color-bg-raised); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .post-card__media { aspect-ratio: 3 / 2; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-card__body { padding: var(--space-lg); display: grid; gap: var(--space-2xs); } .post-card__meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent-on-light); } .post-card__title { font-size: var(--step-4); } .post-card__title a { text-decoration: none; color: var(--color-heading); } .post-card__title a:hover { color: var(--color-link); } .post-card__excerpt { color: var(--color-text); line-height: var(--leading-relaxed); } .post-card__more { margin-block-start: var(--space-2xs); font-weight: var(--weight-semibold); color: var(--color-link); text-decoration: none; } .post-card__more:hover { color: var(--color-link-hover); text-decoration: underline; } /* Article page: meta line + byline; body reuses .prose */ .article-meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent-on-light); } .article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-sm); } .byline { margin-block-start: var(--space-2xl); padding-block-start: var(--space-md); border-block-start: var(--border-hairline) solid var(--color-border); font-size: var(--step--1); color: var(--color-text-muted); } /* ------------------------------------------------------------------ * * 20. PHOTOGRAPHIC LAYER * * Added once real photography arrived (see design-system.md §7). * * Three components: a full-bleed photo hero, a text+image feature * * band, and a photo strip. All crops are set with aspect-ratio so * * images reserve their space and never shift layout (CLS). * * ------------------------------------------------------------------ */ /* --- 20.1 Full-bleed photographic hero ---------------------------- */ .hero--feature { position: relative; isolation: isolate; /* Grid (not flex) so the content row can shrink below its min-content width — a flex item defaults to min-width:auto and would force the long display headline to overflow the viewport on narrow screens. */ display: grid; align-content: end; min-height: min(88vh, 48rem); min-height: min(88svh, 48rem); padding-block: var(--section-y-lg) var(--section-y); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; display: block; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; /* Bias the crop upward so Ramon stays in frame as the box gets shorter. */ object-position: 50% 32%; display: block; /* The source is a dim club photograph. Lift it at render time rather than re-encoding — this costs nothing in file quality and is reversible. The small contrast bump stops the shadows going flat/milky as they brighten. Text legibility is unaffected: the scrim's bottom stop is calculated against a worst-case pure-white image (see the ::after rule below). */ filter: brightness(1.14) contrast(1.06) saturate(1.04); } /* Warm ink scrim — carries body text to AA against a busy photograph. * * Lightened 2026-07-28 so the photograph reads brighter. The bottom stop is * the only one that matters for legibility (all hero text sits there), so it * is set from the contrast maths rather than by eye. Worst case — a pure * WHITE photo under the 0.88 stop — composites to ~#33302C, giving: * cream body text (--c-paper-100 #f5ede0) ≈ 11.4:1 * muted standfirst (--c-sand-300 #c9b79c) ≈ 6.8:1 * brass role line (--c-brass-400 #cb9f4c) ≈ 5.4:1 * All clear WCAG AA (4.5:1) regardless of what the image is doing. The upper * stops carry no text and are free to be much lighter. * DO NOT lower the 0% stop below 0.88 without re-running these numbers. */ .hero--feature::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(23, 19, 15, 0.93) 0%, rgba(23, 19, 15, 0.84) 40%, rgba(23, 19, 15, 0.32) 64%, rgba(23, 19, 15, 0.38) 100% ); } /* No width here — .container on the same element owns the gutters/max-width. min-width:0 lets the grid item shrink so long words wrap instead of pushing the page into horizontal scroll. */ .hero__inner { position: relative; z-index: 2; min-width: 0; } .hero__title { max-width: 18ch; } /* Let the big display name break rather than overflow on small screens. */ .hero__name { overflow-wrap: break-word; } .hero__name { display: block; font-size: var(--step-7); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-inverse); } .hero__role { display: block; margin-block-start: var(--space-sm); font-family: var(--font-mono); font-size: var(--step--1); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-accent); } /* --- 20.2 Feature band: copy alongside a photograph ---------------- */ .feature { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 64em) { .feature { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .feature--reverse .feature__media { order: -1; } } .feature__media { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background-color: var(--color-bg-sunken); } .feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .feature__media--portrait { aspect-ratio: 4 / 5; } .feature__media--landscape { aspect-ratio: 3 / 2; } .feature__media--square { aspect-ratio: 1 / 1; } .feature__body > * + * { margin-block-start: var(--space-md); } /* --- 20.3 Photo strip --------------------------------------------- */ .photo-strip { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .photo-strip figure { margin: 0; } .photo-strip img { display: block; width: 100%; /* height:auto is required — the width/height HTML attributes act as presentational hints, and an explicit height would both win over this rule and disable aspect-ratio, leaving uncropped full-height images. */ height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .photo-strip figcaption { margin-block-start: var(--space-2xs); font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); } .section--inverse .photo-strip figcaption { color: var(--color-text-inverse-muted); } /* --- 20.4 Header fit at mid widths -------------------------------- * * The nav turns horizontal at 72em, and with the (larger) Fraunces wordmark * it was wrapping onto a second row up to around 1360px. Keep the mono * tagline on one line and tighten link padding in that band. */ .wordmark__tag { white-space: nowrap; } /* Applies at every width where the nav is horizontal. It previously stopped at 85em, so padding grew again above ~1360px and the nav wrapped onto a second row. No upper bound. */ @media (min-width: 72em) { .primary-nav__link { padding-inline: var(--space-3xs); } .primary-nav__cta { padding-inline: var(--space-sm); } .site-header__inner { gap: var(--space-sm); } } /* --- 20.5 Offer list (contact: masterclass/residency formats) ------ * * The reset strips markers from any ul[class], so re-enable them here. */ .offer-list { margin-block-start: var(--space-sm); padding-inline-start: var(--space-md); list-style: disc; color: var(--color-text-muted); } .offer-list li { margin-block-start: var(--space-2xs); line-height: var(--leading-relaxed); } /* ------------------------------------------------------------------ * * 21. DISCOGRAPHY v2 — uniform album cards + two-column page opener * * ------------------------------------------------------------------ */ /* --- 21.1 Page opener: heading left, standfirst right -------------- * * A .prose column caps at 66ch, which left half the 75rem container * empty on wide screens. Split it into two columns instead. */ .page-opener { display: grid; gap: var(--space-lg); } @media (min-width: 64em) { .page-opener { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; } } .page-opener__body > * + * { margin-block-start: var(--space-md); } .page-opener__body { max-width: var(--measure); } /* --- 21.2 Album cards --------------------------------------------- * * Every card is the same shape: 1:1 cover, then body, then a footer * pinned to the bottom. Cards stretch to the tallest in their row, so * the footers line up. (The old rule used align-items:start, which is * what made the cards ragged.) */ .disco-grid { align-items: stretch; } .album-card { height: 100%; } .album-card__cover { aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--color-bg-sunken); border-block-end: var(--border-hairline) solid var(--color-border); } .album-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Cover stand-in for releases with no artwork (unreleased / unresolved). */ .album-card__cover--none { display: grid; place-items: center; padding: var(--space-md); text-align: center; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); background-image: repeating-linear-gradient( 45deg, transparent 0 10px, var(--color-bg-sunken) 10px 20px); } .album-card__body { flex: 1 1 auto; } /* Footer: compact player + links, pushed to the card's bottom edge. */ .album-card__footer { margin-block-start: auto; padding: 0 var(--space-md) var(--space-md); display: grid; gap: var(--space-2xs); } .album-card__footer .album-embed { margin: 0; padding: 0; } .album-card__footer .album-embed iframe { min-height: 80px; height: 80px; } .album-card__footer .album-links { padding: 0; } .album-card__status { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); } /* --- 21.3 Single-card group: centre it -----------------------------* * A group with one release (e.g. "As producer & pianist") otherwise sat * in column 1 of a 3-column grid, leaving two thirds empty. */ .disco-grid > .album-card:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 24rem); } /* --- 21.4 Split section head: title left, standfirst right ----------* * Same fix as .page-opener, for section headings that carry an intro * paragraph. .section-head caps at --measure, so clear that here. */ @media (min-width: 64em) { .section-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; max-width: none; } } .section-head--split > :last-child { max-width: var(--measure); } /* --- 21.5 Enquiry form submission status --------------------------- * * Announced via role="status"/aria-live. Never colour-only: each state * carries a leading glyph as well, per design-system.md §2. */ .form__status { font-size: var(--step-0); line-height: var(--leading-relaxed); min-height: 1.5em; } .form__status.is-pending { color: var(--color-text-muted); } .form__status.is-success { color: var(--color-success, var(--c-ink-900)); font-weight: var(--weight-semibold); } .form__status.is-success::before { content: "✓ "; } .form__status.is-error { color: var(--color-error); font-weight: var(--weight-semibold); } .form__status.is-error::before { content: "! "; } /* --- 21.6 Mamre heritage figure ------------------------------------ * * The supplied source files are only 336-448px wide, so they are shown * two-up inside the narrow reading column (~350px each) — about their * native size. Do not widen this to a single full-width image: it would * upscale and go soft. */ .photo-strip--pair { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } @media (max-width: 30em) { .photo-strip--pair { grid-template-columns: 1fr; } } .mamre-figure .photo-strip img { box-shadow: var(--shadow-sm); } .mamre-figure .photo-strip figcaption { margin-block-start: var(--space-3xs); text-transform: none; letter-spacing: var(--tracking-normal); } /* Attribution — required for this shoot (Roché Petersen). */ .credit { display: block; margin-block-start: var(--space-3xs); font-style: normal; color: var(--color-text-muted); } /* --- 21.7 Wordmark tagline at cramped desktop widths ---------------- * * Between 72em and 85em the horizontal nav and the wordmark together * exceed the container, wrapping the header onto two rows. (Grouping * three pages under "Live & Teaching" took the nav from 10 items to 8, * so this band is tighter than it was — kept as a safety margin.) The * mono tagline is decorative; the nav is functional, so the tagline * yields in that band only. It returns at 85em and stays on mobile, * where the hamburger leaves plenty of room. */ @media (min-width: 72em) and (max-width: 85em) { .wordmark__tag { display: none; } } /* --- 21.8 Timeline poster/figure ------------------------------------ * * A small supporting image inside a timeline entry (e.g. the Montreux * Franschhoek poster). Deliberately modest — it is evidence, not a * hero, so it must not outweigh the entry text. */ .timeline__figure { margin: var(--space-sm) 0 0; max-width: 18rem; } .timeline__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .timeline__figure figcaption { margin-block-start: var(--space-3xs); font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); }