/* ========================================================= Shaul Bustan Between two grounds: sand of the Negev, light of the Baltic. Three voices — Barlow Condensed states, Inter informs, Cormorant sings. Nothing is rounded. Theme: data-theme on — "black" | "petrol" | "cream" ========================================================= */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant'; src: url('../fonts/cormorant-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Cormorant'; src: url('../fonts/cormorant-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- Themes ---------- */ body[data-theme="black"] { /* Four values. White reads, gold accents, night and sea are the ground. Every tint is one of them blended toward another. */ --night: #0a0f16; --sea: #16375c; --gold: #f8db6e; --white: #ffffff; --bg: var(--night); --panel: var(--sea); --text: var(--white); /* 19.22:1 on night, 12.10:1 on sea */ --muted: #d5dde6; /* white toward sea — 14.01 / 8.83 */ --faint: #aab6c4; /* white toward sea — 9.33 / 5.88 */ --line: rgba(255, 255, 255, 0.18); --invert-bg: var(--gold); --invert-text: var(--night); --accent: var(--gold); --sand: var(--gold); --gold-hi: var(--gold); --sea-hi: var(--sea); --glow-gold: rgba(248, 219, 110, 0.50); --glow-gold-soft: rgba(248, 219, 110, 0.18); --glow-sea: rgba(22, 55, 92, 0.45); --surface: var(--gold); --on-surface: var(--night); /* white on gold is 1.37:1 — never use it */ --on-surface-muted: var(--sea); --on-surface-faint: #4a4a35; } body[data-theme="petrol"] { --bg: #1b2429; --panel: #202a30; --text: #ffffff; --muted: rgba(255, 255, 255, 0.72); --faint: rgba(255, 255, 255, 0.45); --line: rgba(255, 255, 255, 0.16); --invert-bg: #ffffff; --invert-text: #1b2429; } body[data-theme="cream"] { --bg: #f7f4ed; --panel: #efebe1; --text: #16191c; --muted: rgba(22, 25, 28, 0.72); --faint: rgba(22, 25, 28, 0.48); --line: rgba(22, 25, 28, 0.14); --invert-bg: #16191c; --invert-text: #f7f4ed; } /* ---------- Tokens ---------- */ :root { --font-display: 'Barlow Condensed', 'Inter', sans-serif; --font-quote: 'Cormorant', Georgia, serif; --radius: 0; --radius-lg: 0; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --brand-size: 2rem; --nav-size: 0.95rem; --nav-gap: 1.85rem; --h2: clamp(1.5rem, 2.2vw, 2rem); --h3: 1.05rem; --pad-x: clamp(1.5rem, 3.4vw, 3.5rem); --section-y: clamp(4.5rem, 9vw, 9rem); --header-h: 5rem; --wide: 1600px; --measure: 74ch; --reading: 1180px; /* narrower column for calendar and press */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 300; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font); font-weight: 300; line-height: 1.2; margin: 0; } p { margin: 0 0 1.3em; } /* Visible keyboard focus everywhere — never removed, only restyled. */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .skip-link { position: absolute; left: var(--pad-x); top: -100px; z-index: 200; background: var(--invert-bg); color: var(--invert-text); padding: 0.7rem 1.2rem; font-size: 0.9rem; transition: top 0.2s var(--ease); } .skip-link:focus { top: 1rem; } /* ---------- Utilities ---------- */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad-x); } .wrap--reading { max-width: var(--reading); } .measure { max-width: var(--measure); } .section { padding-block: var(--section-y); } .section--panel { background: var(--panel); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .section-title { font-size: var(--h2); font-weight: 300; margin: 0 0 clamp(1.8rem, 3vw, 2.8rem); } .section-title--center { text-align: center; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .link-underline { display: inline-block; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 0.3s var(--ease); } .link-underline:hover { border-color: currentColor; } .btn { display: inline-block; font-size: 0.85rem; font-weight: 400; letter-spacing: 0.04em; padding: 0.8rem 2.2rem; border: 1px solid var(--line); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } /* Gated on .js — without scripting nothing is ever hidden. */ .js .reveal { opacity: 0; transform: translateY(18px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---------- Header (sits over the photo) ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; min-height: var(--header-h); padding: 1.6rem var(--pad-x); color: var(--white); /* the menu is white, and turns gold on hover */ background: transparent; box-shadow: 0 1px 0 transparent; transition: background 0.35s var(--ease), color 0.35s var(--ease), min-height 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease); } .site-header.is-fixed { background: var(--bg); color: var(--text); min-height: 4.6rem; padding-block: 1rem; box-shadow: 0 1px 0 var(--line); } .brand { font-size: var(--brand-size); font-weight: 300; letter-spacing: 0.005em; white-space: nowrap; justify-self: start; } .site-header.is-fixed .brand { font-size: 1.5rem; } .nav { display: flex; align-items: center; justify-content: center; gap: var(--nav-gap); } .nav a, .nav .nav-label { font-size: var(--nav-size); font-weight: 300; letter-spacing: 0.01em; color: inherit; white-space: nowrap; transition: opacity 0.3s var(--ease); } .nav a:hover, .nav .nav-label:hover { opacity: 0.6; } .nav-item { position: relative; } .nav-sub { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 14.5rem; background: var(--bg); color: var(--text); padding: 1rem 1.2rem; display: grid; gap: 0.6rem; opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; box-shadow: 0 14px 44px rgba(0,0,0,0.35); } .nav-sub a { font-size: 0.88rem; } .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; } .socials-icons { display: flex; align-items: center; gap: 1.1rem; } .socials-icons a { opacity: 0.9; transition: opacity 0.3s var(--ease); } .socials-icons svg { width: 18px; height: 18px; fill: currentColor; } .lang { font-size: 0.85rem; font-weight: 300; display: flex; gap: 0.3rem; opacity: 0.8; } .lang .is-active { opacity: 1; font-weight: 400; } .burger { display: none; width: 24px; height: 13px; position: relative; z-index: 130; } .burger span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.2s var(--ease); } .burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { bottom: 0; } body.menu-open .burger { color: var(--text); } body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); } /* ---------- Hero: full bleed photo, pinned ---------- The photo stays put and every following section scrolls over it. Pure CSS: sticky at z-index 0, content above it at z-index 1. */ .hero { position: sticky; top: 0; z-index: 0; /* svh is the viewport with Safari's bars showing, so on an iPhone it leaves a strip of the next section visible under the photograph. lvh is the screen with the bars hidden: the picture always covers, and since nothing is set over it, nothing can end up behind the toolbar. */ height: 100svh; height: 100lvh; min-height: 640px; background: #000; /* the photograph's own black, so the frame matches it */ } .hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } /* Everything after the hero rides over it on an opaque background. */ main > section:not(.hero) { position: relative; z-index: 1; } /* The biography lifts over the photo behind a soft edge rather than a hard cut. */ #BIOGRAPHY { padding-top: calc(var(--section-y) + 2rem); } /* ---------- Full-screen menu (two panels: links + a featured photo) ---------- */ .site-nav-overlay { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: 1.1fr 0.9fr; background: var(--bg); color: var(--text); opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s; } body.menu-open .site-nav-overlay { opacity: 1; visibility: visible; } .site-nav-overlay__links { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 6rem var(--pad-x) 3rem; } .site-nav-overlay__links a, .site-nav-overlay__links .nav-label { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 300; line-height: 1.35; color: var(--text); opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } body.menu-open .site-nav-overlay__links a, body.menu-open .site-nav-overlay__links .nav-label { opacity: 1; transform: none; } /* Links arrive in sequence, which is what makes the panel feel composed. */ body.menu-open .site-nav-overlay__links > *:nth-child(1) { transition-delay: 0.10s; } body.menu-open .site-nav-overlay__links > *:nth-child(2) { transition-delay: 0.15s; } body.menu-open .site-nav-overlay__links > *:nth-child(3) { transition-delay: 0.20s; } body.menu-open .site-nav-overlay__links > *:nth-child(4) { transition-delay: 0.25s; } body.menu-open .site-nav-overlay__links > *:nth-child(5) { transition-delay: 0.30s; } body.menu-open .site-nav-overlay__links > *:nth-child(6) { transition-delay: 0.35s; } body.menu-open .site-nav-overlay__links > *:nth-child(7) { transition-delay: 0.40s; } body.menu-open .site-nav-overlay__links > *:nth-child(8) { transition-delay: 0.45s; } .site-nav-overlay__links a:hover { opacity: 0.55; } .site-nav-overlay__sub { display: grid; gap: 0.35rem; padding: 0.6rem 0 1rem 1.4rem; } .site-nav-overlay__sub a { font-size: 1rem !important; color: var(--muted); } .site-nav-overlay__feature { position: relative; overflow: hidden; background: var(--panel); } .site-nav-overlay__feature img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); } body.menu-open .site-nav-overlay__feature img { transform: none; } .site-nav-overlay__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem clamp(1.5rem, 2.5vw, 2.5rem); background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); color: #fff; font-size: 0.85rem; line-height: 1.7; } .site-nav-overlay__caption strong { display: block; font-weight: 400; font-size: 0.95rem; } .site-nav-overlay__meta { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } /* ---------- Biography ---------- */ .bio__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; } .bio__portrait { position: sticky; top: 6.5rem; } .bio__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .bio__text p { max-width: var(--measure); } .bio__quote { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 300; font-style: italic; line-height: 1.6; max-width: 52ch; margin: 0 0 0.4rem; } .bio__quote + p, .bio__quote-source + p { margin-top: 0; } .bio__quote-source { display: block; font-style: normal; font-size: 0.85rem; color: var(--faint); margin: 0.7rem 0 2.2rem; } .bio__more[hidden] { display: none; } .toggle { font-size: 0.9rem; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-top: 0.8rem; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } /* ---------- Media: videos and photos share one grid ---------- */ .tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .tile { display: block; width: 100%; padding: 0; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); outline-offset: 4px; } .tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: grayscale(1) contrast(1.03); transition: filter 1.1s var(--ease), transform 1.4s var(--ease); } .tile:hover img, .tile:focus-visible img { filter: grayscale(0) contrast(1); transform: scale(1.035); } /* No frame, no gap. The grid is one continuous surface; hover is carried by the photograph coming into colour, nothing else. */ .tile__play { position: absolute; inset: 0; display: grid; place-items: center; } .tile__play span { width: 0; height: 0; border-left: 15px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6)); transition: border-left-color 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease); } .tile:hover .tile__play span, .tile:focus-visible .tile__play span { border-left-color: var(--white); transform: scale(1.15); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 140; background: rgba(10, 15, 22, 0.97); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; } .lightbox.is-open { opacity: 1; visibility: visible; } /* The column has to be constrained, not content-sized. Left to itself the grid sizes its auto column from the iframe's own intrinsic width, so the frame's width:100% resolved to more than the space available and the video hung off the right edge on a phone. minmax(0,1fr) pins it to the row. */ .lightbox__body { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; } .lightbox__frame, .lightbox__figure, .work-detail { max-width: 100%; } .lightbox__frame { width: min(1200px, 100%); aspect-ratio: 16 / 9; position: relative; } .lightbox__frame iframe { width: 100%; height: 100%; border: 0; } .lightbox__frame img { width: 100%; height: 100%; object-fit: cover; } .lightbox__playbtn { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.25); } .lightbox__playbtn span { width: 0; height: 0; border-left: 26px solid var(--white); border-top: 16px solid transparent; border-bottom: 16px solid transparent; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7)); transition: border-left-color 0.4s var(--ease), transform 0.4s var(--ease); } /* The triangle is drawn with borders, so a background on it paints a white box behind the mark. Only the mark itself should brighten. */ .lightbox__playbtn:hover span { background: none; } .lightbox__caption { color: #fff; text-align: center; max-width: 60ch; margin-top: 1.4rem; } .lightbox__caption h3 { font-size: 1.2rem; font-weight: 400; margin: 0 0 0.5rem; } .lightbox__caption p { font-size: 0.9rem; line-height: 1.7; color: var(--muted); margin: 0; } .lightbox__figure { display: grid; justify-items: center; gap: 1rem; } .lightbox__img { max-width: min(1300px, 100%); max-height: 78vh; object-fit: contain; } .lightbox__credit { font-size: 0.82rem; color: var(--faint); text-align: center; margin: 0; } .lightbox__close { position: absolute; top: 1.5rem; right: clamp(1rem, 4vw, 3rem); font-size: 0.9rem; color: var(--muted); } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; padding: 1rem; color: var(--faint); } .lightbox__nav--prev { left: 0.5rem; } .lightbox__nav--next { right: 0.5rem; } .lightbox__nav[hidden] { display: none; } /* ---------- Calendar ---------- */ .events { display: grid; } .event { display: grid; grid-template-columns: 10rem 1fr auto; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: baseline; padding: 1.3rem 0; border-top: 1px solid var(--line); } .events .event:last-child { border-bottom: 1px solid var(--line); } .event__date small { display: block; font-size: 0.85rem; color: var(--faint); } .event__title { font-size: var(--h3); font-weight: 400; margin: 0 0 0.25rem; } .event__place { font-size: 0.9rem; color: var(--muted); margin: 0; } .event__note { font-size: 0.88rem; color: var(--faint); margin: 0.35rem 0 0; max-width: 64ch; } .event__link { font-size: 0.88rem; color: var(--muted); white-space: nowrap; } .event__link:hover { color: var(--text); } .archive[hidden] { display: none; } .archive h3 { font-size: 0.95rem; font-weight: 400; color: var(--faint); margin: 2.6rem 0 0.4rem; } .center-action { display: flex; justify-content: center; margin-top: 2.5rem; } /* ---------- Press ---------- */ .press { display: grid; gap: clamp(2rem, 4vw, 3.2rem); justify-items: center; } .press-item { display: grid; gap: 0.7rem; justify-items: center; text-align: center; } .press-item blockquote { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 300; line-height: 1.6; max-width: 60ch; } .press-item__meta { font-size: 0.85rem; color: var(--faint); } .press-item[hidden] { display: none; } /* ---------- Newsletter ---------- */ .newsletter { text-align: center; padding-block: clamp(3rem, 5.5vw, 4.5rem); border-top: 1px solid var(--line); } .newsletter p { font-size: 0.95rem; color: var(--muted); margin: 0 0 1.4rem; } /* ---------- Contact ---------- */ .contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4.5vw, 4.5rem); } .contact h3 { font-size: 0.95rem; font-weight: 400; color: var(--faint); margin: 0 0 0.8rem; } .field { display: grid; gap: 0.3rem; margin-bottom: 1.3rem; } .field label { font-size: 0.85rem; color: var(--faint); } .field input, .field textarea { font: inherit; font-size: 0.95rem; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0.55rem 0; transition: border-color 0.3s var(--ease); } .field textarea { resize: vertical; min-height: 7rem; } .form-note { font-size: 0.85rem; color: var(--faint); } .hp { position: absolute; left: -9999px; } /* ---------- Footer ---------- */ .site-footer { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line); padding: clamp(2rem, 3.5vw, 3rem) 0; font-size: 0.82rem; color: var(--faint); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; } .site-footer a:hover { color: var(--text); } /* ---------- Subpages ---------- */ .page-head { padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(2rem, 4vw, 3rem); } .page-head h1 { font-size: var(--h2); } .page-head p { max-width: var(--measure); color: var(--muted); margin-top: 1.2rem; } /* ---------- Tablet / mobile ---------- */ @media (max-width: 1200px) { :root { --nav-gap: 1.2rem; --nav-size: 0.88rem; --brand-size: 1.6rem; } } @media (max-width: 1100px) { } @media (max-width: 900px) { .site-header { grid-template-columns: 1fr auto; } .burger { display: block; justify-self: end; } .header-right { display: none; } .nav { display: none; } /* replaced by the overlay below 900px */ body.menu-open { overflow: hidden; } .site-nav-overlay { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .site-nav-overlay__feature { display: none; } .site-nav-overlay__links { justify-content: flex-start; padding-top: 7rem; overflow-y: auto; } .bio__grid, .contact__grid { grid-template-columns: 1fr; } .bio__portrait { position: static; } .event { grid-template-columns: 1fr; gap: 0.4rem; } } @media (max-width: 560px) { } /* ========================================================= Three voices, the horizon, and the light ========================================================= */ /* ---------- Voice one: Barlow Condensed states ---------- */ .brand { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.4rem, 2vw, 1.85rem); } .site-header.is-fixed .brand { font-size: 1.35rem; } .section-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.9; letter-spacing: 0.005em; position: relative; border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 2.4vw, 2.6rem); margin-bottom: clamp(2.4rem, 4vw, 4rem); } /* The horizon: a hairline across the page, with a band of sand marking where the light falls on it. */ .section-title::after { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--gold); box-shadow: 0 0 10px var(--glow-gold), 0 0 26px var(--glow-gold-soft); transition: width 1.4s var(--ease) 0.2s; } .section-title.is-visible::after { width: min(38%, 22rem); } .section-title--center { text-align: center; } .section-title--center::after { left: 50%; transform: translateX(-50%); } .event__title, .lightbox__caption h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.015em; font-size: 1.35rem; line-height: 1.15; } .site-nav-overlay__links a, .site-nav-overlay__links .nav-label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.08; font-size: clamp(2rem, 5.5vw, 3.8rem); } .site-nav-overlay__sub a { font-family: var(--font); text-transform: none; font-weight: 300; letter-spacing: 0; font-size: 0.95rem !important; color: var(--muted); } .btn, .toggle { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; } .btn { padding: 0.95rem 2.4rem; border: 1px solid var(--line); } .toggle { border: 0; border-bottom: 1px solid var(--line); padding: 0.35rem 0 0.4rem; } /* ---------- Voice two: Inter informs ---------- */ .nav a, .nav .nav-label, .lang { font-weight: 300; letter-spacing: 0.02em; } .event__place, .event__note, .event__link, .press-item__meta, .form-note, .field label, .lightbox__credit, .site-footer { font-size: 0.92rem; } .site-footer { color: var(--muted); } .event__note { color: var(--muted); } /* ---------- Voice three: Cormorant sings ---------- Reserved for the quotes, and nowhere else. */ .bio__quote, .press-item blockquote { font-family: var(--font-quote); font-weight: 300; font-style: italic; letter-spacing: 0.005em; } .bio__quote { font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.4; max-width: 34ch; } .press-item blockquote { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.38; max-width: 32ch; } .bio__quote-source, .press-item__meta { font-family: var(--font); font-style: normal; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; color: var(--faint); } /* ---------- Sand and sea ---------- */ .event__date small { font-family: var(--font); text-transform: none; letter-spacing: 0; color: var(--faint); } .bio__portrait img { filter: grayscale(1); transition: filter 1.1s var(--ease); } .bio__portrait:hover img { filter: none; } /* ---------- One page of sand ---------- */ .section--light { background: #f8db6e; --text: var(--on-surface); --muted: var(--on-surface-muted); --faint: var(--on-surface-faint); --line: rgba(20, 24, 27, 0.20); color: var(--text); } /* ---------- The light ---------- Two washes that cross: warm from one side, cold from the other. Very low, very slow. It should be felt rather than noticed. */ .section--lit { position: relative; isolation: isolate; overflow: hidden; } .section--lit::before { content: ''; position: absolute; inset: -30% -15% auto -15%; height: 150%; z-index: -1; pointer-events: none; background: radial-gradient(56% 44% at 16% -4%, rgba(248, 219, 110, 0.16), transparent 70%), radial-gradient(50% 44% at 86% 6%, rgba(248, 219, 110, 0.10), transparent 72%); animation: crossLight 44s ease-in-out infinite alternate; } @keyframes crossLight { from { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.55; } to { transform: translate3d( 4%, 2%, 0) scale(1.12); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .section--lit::before { animation: none; opacity: 0.7; } } /* ---------- Motion: slow, and only where it means something ---------- */ .js .reveal { opacity: 0; transform: translateY(20px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .reveal { transition-delay: calc(var(--i, 0) * 70ms); } /* line-height 0.9 lets the ink sit outside the line box top and bottom, so the mask is grown in both directions and pulled back with negative margins. The start offset must clear the taller mask. */ .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.2em 0 0.3em; margin: -0.2em 0 -0.3em; } .js .word > span { display: inline-block; transform: translateY(150%); transition: transform 1s var(--ease); transition-delay: calc(var(--w, 0) * 80ms); } .section-title.is-visible .word > span { transform: none; } .section-title[data-split] { opacity: 1; transform: none; } .hero img { animation: none; filter: none; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transition-delay: 0ms !important; } .js .reveal { opacity: 1; transform: none; } .js .word > span { transform: none !important; transition: none !important; } .section-title::after { transition: none; width: min(38%, 22rem); } } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tile-grid { grid-template-columns: 1fr; } } /* The play marks are drawn with borders; no glyph may sit inside them. */ .tile__play span, .lightbox__playbtn span { font-size: 0; line-height: 0; overflow: hidden; } /* ========================================================= Light The page is lit rather than coloured. Gold is the desert sun, sea-blue the water under it. They never overlap as text on ground — that pairing is 1.48:1. ========================================================= */ /* A warm bloom behind the display type, as if lit from the page. */ .section-title { text-shadow: 0 0 42px rgba(245, 208, 108, 0.22), 0 0 96px rgba(245, 208, 108, 0.10); } .site-header.is-fixed .brand { text-shadow: 0 0 26px rgba(245, 208, 108, 0.18); } /* Nothing is laid over the hero photograph — no wash, no tint, no scale. It is shown exactly as René shot it. */ /* Sea-blue answers the gold on the quieter marks. */ .bio__quote, .press-item blockquote { color: var(--text); } .bio__quote-source, .press-item__meta { color: var(--sea); } .site-nav-overlay__links a:hover { color: #a3d3f7; } /* On the gold page the light is already on; no bloom needed. */ .section--light .section-title { text-shadow: none; } .section--light .section-title::after { box-shadow: none; } .section--light .bio__quote-source, .section--light .press-item__meta { color: var(--on-surface-faint); } .section--light .press-item__meta a:hover { color: var(--on-surface); border-color: var(--on-surface); } @media (prefers-reduced-motion: reduce) { } /* ========================================================= The progression The page is one ramp, top to bottom: night over the sea, opening out to daylight water across the image grid, warming through dusk into full desert sun on the press page, then falling back to night. Each section begins on the value the one above it ended on, so the colour bleeds rather than steps. ========================================================= */ /* The ramp, and the one rule that governs it. Night and sea blend cleanly — saturation never drops below 0.38 anywhere between them, so those two carry the long gradients. Gold does not: blended toward night its saturation collapses to 0.18, and toward sea to 0.06, which is the olive mud. So gold is never long-blended. It arrives and leaves across 70px, which reads as a softened edge rather than a zone. */ /* Flat fields, hard cuts. No gradient anywhere between sections — the edge between two colours is the transition. Nothing to band, nothing to crease. */ .flow { position: relative; z-index: 1; background: var(--night); } .flow > section { position: relative; z-index: 1; } #BIOGRAPHY { background: var(--night); } #MEDIA { background: var(--sea); } #CALENDAR { background: var(--night); } #PRESS { background: #f8db6e; } #CONTACT { background: var(--night); } /* The gold bleeds across the blue as a wash, the way the tube throws colour onto the ground in the reference. */ .section--lit::before { background: radial-gradient(58% 46% at 14% -4%, rgba(248, 219, 110, 0.30), transparent 70%), radial-gradient(54% 48% at 88% 8%, rgba(91, 184, 240, 0.26), transparent 72%), radial-gradient(46% 40% at 62% 92%, rgba(248, 219, 110, 0.16), transparent 72%); } /* The press page keeps its own light; no wash over it. */ #PRESS.section--lit::before, #PRESS::before { display: none; } /* On the brightest stretch of the ramp the hairlines need to lift. */ #MEDIA { --line: rgba(248, 219, 110, 0.30); } /* gold, lifted for the sea field */ /* The footer closes on night. */ .site-footer { background: #0a0f16; } /* ========================================================= The press page: smaller type, lit from its own centre ========================================================= */ #PRESS { position: relative; isolation: isolate; } #PRESS::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Gold is already the lightest value available, so the centre is lifted by shading the edges toward night rather than by adding white. */ background: radial-gradient(66% 58% at 50% 42%, transparent 38%, rgba(10, 15, 22, 0.10) 68%, rgba(10, 15, 22, 0.20) 100%); } .section--light .press-item blockquote { font-size: clamp(1.1rem, 1.55vw, 1.5rem); line-height: 1.45; max-width: 40ch; } .section--light .press-item__meta { font-size: 0.68rem; letter-spacing: 0.16em; } .press { gap: clamp(2.6rem, 4.5vw, 4rem); } /* Slower, longer arrivals — the page should assemble, not snap. */ .reveal.is-visible { transition: opacity 1.5s var(--ease), transform 1.5s var(--ease); } .reveal { transition-delay: calc(var(--i, 0) * 90ms); } .js .reveal { transform: translateY(26px); } .js .word > span { transition: transform 1.15s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal.is-visible { transition: none; } .js .reveal { transform: none; } } /* ========================================================= White reads, gold accents Gold is no longer asked to carry body copy. It marks the horizon, the dates, every hover, the play mark, and the press page — and nothing else. ========================================================= */ .brand, .section-title, .event__title, .lightbox__caption h3 { color: var(--white); } .bio__quote, .press-item blockquote { color: var(--text); } /* The display type stays white; the gold is the light behind it. */ .section-title { text-shadow: 0 0 46px rgba(248, 219, 110, 0.26), 0 0 110px rgba(248, 219, 110, 0.12); } .brand { text-shadow: 0 0 24px rgba(248, 219, 110, 0.20); } /* Gold, used sparingly and always meaning the same thing. */ .bio__quote-source, .press-item__meta { color: var(--faint); } /* Press: gold field, night ink, and now genuinely brighter from the middle because white is available to lift it. */ #PRESS::after { background: radial-gradient(60% 50% at 50% 40%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.16) 48%, transparent 74%); } .section--light { --text: var(--night); --muted: var(--sea); --faint: #4a4a35; } .section--light .section-title { color: var(--night); text-shadow: none; } .section--light .press-item blockquote { color: var(--night); } /* Lightbox chrome on white. */ .lightbox__caption h3 { color: var(--white); } .lightbox__playbtn span, .tile__play span { border-left-color: var(--white); } /* The menu is white and turns gold on hover — nothing in the header is gold at rest. */ .site-header, .site-header.is-fixed { color: var(--white); } .brand, .nav a, .nav .nav-label, .lang, .socials-icons a { color: var(--white); } /* ========================================================= Two corrections ========================================================= */ /* The submit button sat flush against the textarea's underline. */ #contact-form .btn { margin-top: 2.2rem; } #contact-form .form-note { margin-top: 1rem; min-height: 1.2em; } /* No glow behind the headings. It was a text-shadow first, which the overflow:hidden word masks clipped into hard rectangles; then a radial layer, which smeared sideways because the heading box is full-width while the word is short. The gold horizon rule is accent enough. */ .section-title, .brand { text-shadow: none; } /* ========================================================= No gold in type Gold appears exactly twice on the site and neither is text: the horizon rule under a heading, and the press field. Everything written is white, or white blended toward sea. ========================================================= */ .site-header, .site-header.is-fixed, .brand, .nav a, .nav .nav-label, .lang, .socials-icons a, .section-title, .event__title, .lightbox__caption h3, .bio__quote, .press-item blockquote { color: var(--white); } .event__date { color: var(--white); } .event__date small { color: var(--faint); } .bio__quote-source, .press-item__meta, .form-note, .field label { color: var(--faint); } .event__place, .site-footer { color: var(--muted); } /* Hover is a change of weight of attention, not of hue: the type comes to full white and the rule beneath it draws itself in. */ .nav a:hover, .nav .nav-label:hover, .site-nav-overlay__links a:hover, .socials-icons a:hover, .lang a:hover { color: var(--white); opacity: 1; } .nav a::after { background: var(--white); } .link-underline:hover, .press-item__meta a:hover { color: var(--white); border-color: var(--white); } .toggle:hover { color: var(--white); border-color: var(--white); } .btn:hover { background: var(--white); border-color: var(--white); color: var(--night); } .field input:focus, .field textarea:focus { border-color: var(--white); } ::selection { background: var(--white); color: var(--night); } .tile:hover .tile__play span, .tile:focus-visible .tile__play span, .lightbox__playbtn:hover span { border-left-color: var(--white); filter: none; } /* The two places gold is allowed. */ .section-title::after { background: var(--gold); box-shadow: none; } #PRESS { background: #f8db6e; } /* On the gold field everything inverts to night. */ .section--light, .section--light .section-title, .section--light .press-item blockquote { color: var(--night); } .section--light .press-item__meta { color: var(--on-surface-faint); } .section--light .section-title::after { background: var(--night); } .section--light .toggle { color: var(--night); border-color: rgba(10, 15, 22, 0.3); } .section--light .toggle:hover { color: var(--night); border-color: var(--night); } /* ========================================================= Menu and socials: a minimal shift of colour At rest the menu is a cool off-white — barely off pure white, but enough that the hover has somewhere to go. On hover it both lifts in lightness and becomes plainly blue, so the change reads as attention rather than as dimming. #d5dde6 hue 212 sat .25 -> #a3d3f7 hue 206 sat .84 ========================================================= */ .nav a, .nav .nav-label, .socials-icons a, .lang { color: #d5dde6; transition: color 0.35s var(--ease), opacity 0.35s var(--ease); } .nav a:hover, .nav .nav-label:hover, .nav a:focus-visible, .site-nav-overlay__links a:hover, .socials-icons a:hover, .socials-icons a:focus-visible, .lang a:hover { color: #a3d3f7; opacity: 1; } /* The underline follows the same blue. */ .nav a::after { background: #a3d3f7; } /* The name stays pure white — it is not a link, and it should not look like one waiting to be hovered. */ .brand { color: var(--white); } .lang .is-active { color: var(--white); } /* Icons carry the shift too, and lift very slightly. */ .socials-icons svg { fill: currentColor; transition: transform 0.35s var(--ease); } .socials-icons a:hover svg, .socials-icons a:focus-visible svg { transform: translateY(-1px); } /* ========================================================= Mobile The menu takes the whole screen: links centred, a close cross top right, socials and the language switch along the foot. Media tiles get smaller and lose the greyscale — a touch screen has no hover, so a photograph that only comes into colour on hover would simply never come into colour. ========================================================= */ @media (max-width: 900px) { /* ---------- the menu ---------- */ .site-nav-overlay { grid-template-columns: 1fr; grid-template-rows: 1fr auto; background: var(--night); padding: 0; } .site-nav-overlay__feature { display: none; } .site-nav-overlay__links { align-items: center; justify-content: center; text-align: center; gap: 0.4rem; padding: 5.5rem var(--pad-x) 1.5rem; overflow-y: auto; } .site-nav-overlay__links a, .site-nav-overlay__links .nav-label { font-size: clamp(1.9rem, 8.5vw, 2.7rem); line-height: 1.18; } .site-nav-overlay__sub { justify-items: center; padding: 0.5rem 0 0.9rem; gap: 0.5rem; } .site-nav-overlay__sub a { font-size: 1rem !important; } /* the cross */ .site-nav-overlay__close { position: absolute; top: 1.5rem; right: var(--pad-x); width: 34px; height: 34px; z-index: 5; display: grid; place-items: center; } .site-nav-overlay__close span { position: absolute; left: 4px; right: 4px; height: 1.5px; background: var(--white); transition: background 0.3s var(--ease); } .site-nav-overlay__close span:nth-child(1) { transform: rotate(45deg); } .site-nav-overlay__close span:nth-child(2) { transform: rotate(-45deg); } .site-nav-overlay__close:hover span, .site-nav-overlay__close:focus-visible span { background: #a3d3f7; } /* the foot */ .site-nav-overlay__foot { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 1.5rem var(--pad-x) calc(2.4rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .site-nav-overlay__foot .socials-icons { gap: 2rem; } .site-nav-overlay__foot .socials-icons svg { width: 22px; height: 22px; } .site-nav-overlay__foot .lang { font-size: 1rem; gap: 0.5rem; letter-spacing: 0.04em; } /* the burger hands over to the cross once the menu is open */ body.menu-open .burger { opacity: 0; pointer-events: none; } /* ---------- media ---------- */ .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { aspect-ratio: 1 / 1; } /* No hover on a touch screen, so the photographs stay in colour. */ .tile img { filter: none; transform: none; } .tile:hover img, .tile:focus-visible img { filter: none; transform: none; } .bio__portrait img { filter: none; } } @media (max-width: 560px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= Header and the Projects dropdown ========================================================= */ /* The dropdown used to sit 6px below its label. That gap is a dead zone: moving the pointer toward the panel leaves the item, hover is lost, the panel closes and reopens — which is the flicker. The panel now begins exactly at the label's lower edge and carries its spacing as padding, so the pointer never leaves the hover area. It also no longer slides. */ .nav-sub { top: 100%; left: 50%; transform: translateX(-50%); margin: 0; padding: 1.5rem 1.5rem 1.3rem; min-width: 15rem; /* Close to fully transparent; the blur and a brightness knock-down do the legibility work, so the panel stays readable over the photograph, over the blue, and over the gold press field alike. */ background: rgba(10, 15, 22, 0.10); -webkit-backdrop-filter: blur(22px) brightness(0.32) saturate(1.15); backdrop-filter: blur(22px) brightness(0.32) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none; transition: opacity 0.28s var(--ease), visibility 0.28s; } /* Browsers without backdrop-filter get a solid panel rather than an unreadable transparent one. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-sub { background: rgba(10, 15, 22, 0.94); } } /* The header keeps one height. It used to shrink on scroll — min-height, padding and the brand size all changed at once — which moved every item in it. Only the background changes now. And no rule beneath it. */ .site-header.is-fixed { min-height: var(--header-h); padding-block: 1.6rem; box-shadow: none; } .site-header.is-fixed .brand { font-size: clamp(1.4rem, 2vw, 1.85rem); } /* ---------- mobile: Projects opens on tap ---------- */ @media (max-width: 900px) { .site-nav-overlay__sub { display: none; } .site-nav-overlay__links .nav-item.is-open .site-nav-overlay__sub { display: grid; } .site-nav-overlay__links .nav-label { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; } /* a chevron that turns when the group is open */ .site-nav-overlay__links .nav-label::after { content: ''; width: 0.42em; height: 0.42em; margin-top: -0.18em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.3s var(--ease); } .site-nav-overlay__links .nav-item.is-open .nav-label::after { transform: rotate(-135deg); margin-top: 0.12em; } } /* ========================================================= Projects opens on click, not on hover A hover dropdown flickers by nature: the pointer re-entering restarts the transition, moving between the label and the panel can drop the hover for a frame, and the panel's backdrop-filter forces a fresh compositing layer each time. A click has none of those failure modes, works identically on desktop and on touch, and is honest about being a menu. ========================================================= */ .nav-label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.42rem; } .nav-label::after { content: ''; width: 0.36em; height: 0.36em; margin-top: -0.16em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.3s var(--ease); } .nav-item.is-open > .nav-label::after { transform: rotate(-135deg); margin-top: 0.1em; } .nav-sub { transition: opacity 0.24s var(--ease); } .nav-item.is-open > .nav-sub { opacity: 1; visibility: visible; } /* ========================================================= Desktop refinements ========================================================= */ /* 1. A lower bar, and 70% transparent once it is solid. The blur and a brightness knock-down keep white legible over the photograph, the blue and the gold press field alike — plain alpha would not. */ .site-header { padding-block: 1.1rem; } .site-header.is-fixed { min-height: var(--header-h); padding-block: 1.1rem; background: rgba(10, 15, 22, 0.30); -webkit-backdrop-filter: blur(20px) brightness(0.45) saturate(1.1); backdrop-filter: blur(20px) brightness(0.45) saturate(1.1); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.is-fixed { background: rgba(10, 15, 22, 0.92); } } /* 2. No arrow on Projects in the header. The mobile menu keeps its chevron, where it is doing real work telling you the group is collapsed. */ .nav .nav-label::after { display: none; } .nav .nav-label { gap: 0; } /* 3. The dropdown: smaller, 70% transparent, no frame. */ .nav-sub { min-width: 12.5rem; padding: 1.1rem 1.2rem 1rem; gap: 0.5rem; border: 0; background: rgba(10, 15, 22, 0.30); -webkit-backdrop-filter: blur(20px) brightness(0.42) saturate(1.1); backdrop-filter: blur(20px) brightness(0.42) saturate(1.1); } .nav-sub a { font-size: 0.84rem; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-sub { background: rgba(10, 15, 22, 0.94); } } /* ========================================================= Shared: the play mark, and the send button ========================================================= */ /* 4. The play mark is gold. On touch there is no hover, so it has to read as gold at rest rather than only on hover. */ .tile__play span, .lightbox__playbtn span { border-left-color: var(--gold); } .tile:hover .tile__play span, .tile:focus-visible .tile__play span, .lightbox__playbtn:hover span { border-left-color: var(--gold); filter: drop-shadow(0 0 14px rgba(248, 219, 110, 0.55)); } /* 5. Send loses its frame and takes the language of the fields above it: left aligned, a single rule beneath, full width of the column. */ #contact-form .btn { display: block; width: 100%; text-align: left; padding: 0.55rem 0 0.7rem; border: 0; background: none; color: var(--text); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } #contact-form .btn:hover, #contact-form .btn:focus-visible { background: none; color: var(--white); } /* ========================================================= Mobile refinements ========================================================= */ @media (max-width: 900px) { /* Imprint, the photo credit and the rights line stack and centre. They were a space-between row, which on a narrow screen left them ragged across two lines with a gap in the middle. */ .site-footer .wrap { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.9rem; } .site-footer .wrap > * { text-align: center; } } /* ========================================================= Works A catalogue reads as a list, not as tiles: year, title, scoring, duration — one line per piece, with a rule between. Selecting a row opens the full entry in the same lightbox the media grid uses. ========================================================= */ .page-head { padding-block: calc(var(--header-h) + 4rem) clamp(2rem, 4vw, 3.5rem); } .page-head__lead { max-width: 46ch; color: var(--muted); font-size: 1.05rem; } .works { display: grid; } .work { display: grid; align-items: baseline; width: 100%; text-align: left; grid-template-columns: 4.5rem 1fr auto; gap: clamp(1rem, 2.5vw, 2.4rem); padding: 1.15rem 0; border-top: 1px solid var(--line); transition: color 0.3s var(--ease); } .works .work:last-child { border-bottom: 1px solid var(--line); } .work:hover, .work:focus-visible { color: var(--white); } .work__year { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--faint); transition: color 0.3s var(--ease); } .work:hover .work__year, .work:focus-visible .work__year { color: var(--gold); } .work__body { display: grid; gap: 0.3rem; } .work__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.015em; font-size: 1.25rem; line-height: 1.15; } .work__scoring { font-size: 0.9rem; line-height: 1.55; color: var(--muted); max-width: 52ch; } .work__meta { display: flex; align-items: baseline; gap: 1rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .work__rec { color: var(--gold); } /* ---------- the detail window ---------- */ .work-detail { width: min(760px, 100%); max-height: 82vh; overflow-y: auto; text-align: left; color: var(--text); padding-right: 0.5rem; } .work-detail h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 0.9rem; } .work-detail__line { font-size: 0.95rem; color: var(--muted); margin: 0 0 1.6rem; } .work-detail__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; font-size: 0.92rem; margin: 0 0 0.8rem; color: var(--muted); } .work-detail__row > span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .work-detail__note { font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: 1.15rem; line-height: 1.5; max-width: 46ch; margin: 1.4rem 0 0; color: var(--text); } .work-detail__media { margin-top: 1.8rem; } .work-detail__media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } .work-detail__cap { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0 0 0.5rem; } .work-detail__audio { margin-top: 1.8rem; display: grid; gap: 0.9rem; } .work-audio { display: grid; gap: 0.35rem; } .work-audio span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .work-audio audio { width: 100%; height: 34px; } @media (max-width: 700px) { .work { grid-template-columns: 3.4rem 1fr; gap: 0.9rem 1rem; } .work__meta { grid-column: 2; } .work-detail__row { grid-template-columns: 1fr; gap: 0.2rem; } } /* ========================================================= Works: accordion, films, opera ========================================================= */ /* ---------- accordion ---------- */ .wgroup { border-top: 1px solid var(--line); } .wgroup:last-of-type { border-bottom: 1px solid var(--line); } .wgroup__head { margin: 0; } .wgroup__toggle { display: block; width: 100%; text-align: left; padding: clamp(1.3rem, 2.4vw, 2rem) 0; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1; letter-spacing: 0.01em; color: var(--muted); transition: color 0.35s var(--ease); } .wgroup__toggle:hover, .wgroup__toggle:focus-visible, .wgroup.is-open .wgroup__toggle { color: var(--white); } /* grid-template-rows animates; height:auto does not */ .wgroup__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); } .wgroup.is-open .wgroup__panel { grid-template-rows: 1fr; } .wgroup__panel > .works { overflow: hidden; } .wgroup.is-open .wgroup__panel > .works { padding-bottom: 1.6rem; } .wgroup .work:first-child { border-top: 0; } .wgroup .works .work:last-child { border-bottom: 0; } @media (prefers-reduced-motion: reduce) { .wgroup__panel { transition: none; } } /* ---------- films ---------- */ .films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); } .film { display: grid; gap: 0.9rem; text-align: left; width: 100%; padding: 0; } .film__shot { display: block; overflow: hidden; background: var(--panel); aspect-ratio: 2 / 3; } .film__shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter 0.7s var(--ease), transform 1.1s var(--ease); } .film:hover .film__shot img, .film:focus-visible .film__shot img { filter: none; transform: scale(1.04); } .film__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; line-height: 1.15; letter-spacing: 0.015em; } .film__meta { font-size: 0.82rem; line-height: 1.5; color: var(--faint); } .film:hover .film__title, .film:focus-visible .film__title { color: var(--white); } @media (max-width: 1000px) { .films { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } } /* ========================================================= Opera A full-height photograph carrying the title, then the same video tiles the media grid uses — one video treatment on the whole site rather than a second one here. ========================================================= */ #OPERA { padding: 0; } .opera__stage { position: relative; height: 100svh; height: 100lvh; min-height: 560px; overflow: hidden; background: var(--night); } .opera__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.05); } .opera__over { position: absolute; inset: auto 0 0 0; padding-top: clamp(2.5rem, 7vh, 6rem); padding-bottom: clamp(1.6rem, 3.5vh, 3rem); background: linear-gradient(to top, rgba(10,15,22,0.92) 12%, rgba(10,15,22,0.55) 55%, transparent); } .opera__kicker { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--gold); margin: 0 0 0.9rem; } .opera__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 0.92; letter-spacing: 0.005em; color: var(--white); margin: 0 0 1rem; max-width: 18ch; } .opera__line { font-size: 0.98rem; color: var(--muted); margin: 0; } /* The note follows the photograph closely — the old padding-block put 96px here, and Cormorant's leading added ~26px more on top of that. */ .opera__body { padding-top: clamp(1rem, 1.8vw, 1.6rem); padding-bottom: clamp(3rem, 7vw, 6rem); } .opera__note { margin-top: -0.22em; /* Cormorant's leading, removed optically */ font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.42; max-width: 34ch; margin: 0 0 1.4rem; color: var(--text); } .opera__prem { font-size: 0.92rem; color: var(--faint); max-width: 60ch; margin: 0 0 clamp(2.5rem, 5vw, 4rem); } .opera__tiles { margin: 0; } @media (max-width: 900px) { .opera__stage { height: 78svh; } .opera__name { max-width: 100%; } } /* ========================================================= How to Write for Oud A reading page: one narrow column, numbered chapters, and the notation examples inverted to sit on the dark ground. ========================================================= */ .oud-head { padding-top: calc(var(--header-h) + 4rem); } .oud-kicker { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--gold); margin: 0 0 1.2rem; max-width: 42ch; } .oud-head .section-title { border-top: 0; padding-top: 0; } .oud-head .section-title::after { display: none; } .oud-by { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.85rem; color: var(--muted); margin: 0 0 2.4rem; } .oud-dl { margin-top: 0.5rem; } .oud-body > p, .oud-body > ol, .oud-body > dl { max-width: 62ch; } .oud-body > p { font-size: 1.02rem; line-height: 1.85; } .oud-h { display: flex; align-items: baseline; gap: 1.1rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: 0.01em; margin: 0 0 1.8rem; } .oud-h > span { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--gold); flex: none; transform: translateY(-0.25em); } .oud-sub { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.05em; color: var(--muted); margin: 2.6rem 0 1rem; } .oud-list { padding-left: 1.2rem; margin: 0 0 1.4rem; } .oud-list li { margin-bottom: 0.45rem; line-height: 1.7; } .oud-spec { display: grid; grid-template-columns: 13rem 1fr; gap: 0.65rem 1.6rem; margin: 0 0 1.6rem; padding: 1.3rem 0; border-block: 1px solid var(--line); } .oud-spec dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); line-height: 1.6; } .oud-spec dd { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--text); } .oud-fig { margin: 2.2rem 0; } .oud-fig img { width: 100%; max-width: 34rem; height: auto; } .oud-fig figcaption { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 0.7rem; } .oud-pull { font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important; line-height: 1.45 !important; max-width: 40ch !important; margin-top: 1.8rem; } .oud-copy { font-size: 0.8rem; color: var(--faint); margin-top: 2.6rem; } /* the language switch is inert on an English-only page */ .lang-na { opacity: 0.35; cursor: default; } @media (max-width: 700px) { .oud-spec { grid-template-columns: 1fr; gap: 0.2rem 0; } .oud-spec dd { margin-bottom: 0.9rem; } .oud-h { gap: 0.8rem; } } /* ========================================================= Oud guide: centred, and a wider measure The column sits in the middle of the page at about two thirds of its width. Headings and furniture centre with it; the running text stays left-aligned, because centred body copy gives the eye no fixed left edge to return to and a guide of this length would be tiring to read. ========================================================= */ .oud-head .wrap, #OUD-1 .wrap, #OUD-2 .wrap, #OUD-3 .wrap, #OUD-4 .wrap, #OUD-5 .wrap, #OUD-6 .wrap { max-width: min(66vw, 1000px); margin-inline: auto; } .oud-head { text-align: center; } .oud-head .oud-kicker { max-width: 46ch; margin-inline: auto; } .oud-head .section-title { text-align: center; } .oud-body { text-align: center; } .oud-body > p, .oud-body > ol, .oud-body > dl, .oud-body > figure, .oud-body > .oud-film { text-align: left; margin-inline: auto; max-width: 68ch; } .oud-body > p { font-size: 1.05rem; line-height: 1.85; } .oud-h { justify-content: center; text-align: center; } .oud-sub { text-align: center; } .oud-body > .oud-pull { text-align: center; max-width: 44ch !important; } .oud-copy { text-align: center; } /* ---------- chapter menu ---------- */ .oud-toc { display: grid; gap: 0.1rem; max-width: 34rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: left; border-top: 1px solid var(--line); } .oud-toc a { display: flex; align-items: baseline; gap: 1rem; padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em; color: var(--muted); transition: color 0.3s var(--ease), padding-left 0.3s var(--ease); } .oud-toc a > span { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--gold); flex: none; min-width: 1.6rem; } .oud-toc a:hover, .oud-toc a:focus-visible { color: var(--white); padding-left: 0.6rem; } /* the chapters need to clear the fixed header when jumped to */ #OUD-1, #OUD-2, #OUD-3, #OUD-4, #OUD-5, #OUD-6 { scroll-margin-top: var(--header-h); } /* ---------- a video inside the prose ---------- */ .oud-film { margin: clamp(2rem, 4vw, 3.2rem) auto; } .oud-film .tile { aspect-ratio: 16 / 9; } .oud-film__cap { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0.8rem 0 0; text-align: left; } .oud-head .oud-film { max-width: 46rem; margin-inline: auto; } .oud-head .oud-film__cap { text-align: center; } @media (max-width: 900px) { .oud-head .wrap, #OUD-1 .wrap, #OUD-2 .wrap, #OUD-3 .wrap, #OUD-4 .wrap, #OUD-5 .wrap, #OUD-6 .wrap { max-width: 100%; } .oud-toc { max-width: 100%; } } /* ========================================================= Shaul Bustan Trio The accent is taken from the group photograph: the sand of the Baltic shore, with the pale sky as the second note. Both were checked against the ground — sand 8.67:1, sky 9.81:1 — so gold simply steps aside on this page. ========================================================= */ body[data-page="trio"] { --gold: #edc362; /* the amber backdrop of the group photograph */ --sea: #a8bbd4; } .trio-hero { position: relative; height: 100svh; height: 100lvh; min-height: 460px; overflow: hidden; background: var(--night); } /* This photograph is bright at the top, and the header sits over it in white. A short scrim keeps the menu readable without darkening the picture. */ .trio-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; z-index: 1; height: calc(var(--header-h) + 3rem); background: linear-gradient(to bottom, rgba(10, 15, 22, 0.62), transparent); pointer-events: none; } /* The picture is mostly empty amber above the heads. On a wide screen cover crops top and bottom, and the crop is pulled down the frame so what goes is the backdrop, not the oud. */ .trio-hero__pic { display: block; width: 100%; height: 100%; } .trio-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; } /* The name now falls across the pale soundboard of the oud, so the scrim is both taller and deeper than it was over the old, darker crop. */ .trio-hero__over { position: absolute; inset: auto 0 0 0; padding-block: clamp(7rem, 22vh, 15rem) clamp(2rem, 6vh, 4.5rem); background: linear-gradient(to top, rgba(10,15,22,0.94) 0%, rgba(10,15,22,0.86) 22%, rgba(10,15,22,0.52) 52%, rgba(10,15,22,0.18) 78%, transparent 100%); } .trio-hero__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(2.2rem, 6.5vw, 5.5rem); line-height: 0.94; letter-spacing: 0.01em; color: var(--white); margin: 0 0 0.6rem; } .trio-hero__line { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.82rem; color: var(--gold); margin: 0; } #trio-about > p { max-width: 66ch; font-size: 1.02rem; line-height: 1.85; } .trio-pull { font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.3vw, 1.9rem) !important; line-height: 1.45; max-width: 40ch !important; margin: 2.2rem 0 !important; color: var(--text); } .trio-prog { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-top: 2.4rem; } .trio-prog__label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.6rem; } .trio-prog__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.1; margin: 0 0 0.5rem; } .trio-prog__line { font-size: 0.95rem; color: var(--muted); margin: 0; } /* ---------- venues with no date left ---------- */ .trio-venues { margin-top: 2.4rem; } .trio-venues h3 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 0 0 1rem; } .trio-venues ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .trio-venues li { font-size: 0.95rem; color: var(--muted); padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); } /* ---------- booking ---------- */ .trio-booking { text-align: center; } .trio-booking p { margin-inline: auto; } .trio-booking__lead { font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.35; max-width: 24ch; margin: 0 auto 1.2rem; } @media (max-width: 800px) { .member { grid-template-columns: 1fr; } .member__shot img { aspect-ratio: 3 / 2; } } /* ---------- the three of them, then names ---------- */ /* Only 1200 px in the original, so it is held to half that: at 2x it still resolves, and it reads as a portrait rather than a banner. */ .trio-group { margin: 0 auto clamp(2rem, 4vw, 3.4rem); position: relative; max-width: 600px; } .trio-group img { width: 100%; height: auto; display: block; } .trio-group figcaption { position: absolute; left: 0; bottom: 0; padding: 0.4rem 0.7rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); background: rgba(10, 15, 22, 0.6); } .trio-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .trio-name { display: grid; gap: 0.4rem; text-align: left; width: 100%; padding: clamp(1.3rem, 2.4vw, 2rem) 0; border-top: 1px solid var(--line); transition: color 0.3s var(--ease), padding-left 0.35s var(--ease); } .trio-name:hover, .trio-name:focus-visible { color: var(--white); padding-left: 0.5rem; } .trio-name__n { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.8rem); line-height: 1.08; letter-spacing: 0.015em; } .trio-name__r { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } /* the biography, opened */ .member-detail { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 2rem; } .member-detail__shot { position: relative; } .member-detail__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .member__credit { position: absolute; left: 0; bottom: 0; padding: 0.35rem 0.55rem; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); background: rgba(10, 15, 22, 0.65); } .member__role { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.1rem; } .member__detail { font-size: 0.88rem; color: var(--faint); } .member-detail h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.05; margin: 0 0 0.4rem; } .member-detail p { line-height: 1.75; font-size: 0.96rem; } @media (max-width: 800px) { .trio-names { grid-template-columns: 1fr; } .member-detail { grid-template-columns: 1fr; gap: 1.2rem; } .member-detail__shot img { aspect-ratio: 3 / 2; } } /* ========================================================= Trio: the press panel, and booking without a frame ========================================================= */ /* #PRESS carries the gold ground site wide. The trio page was still marked section--lit, so it kept white ink and the quotes vanished into the gold. It is a light section like the home page, in the trio's own amber. */ body[data-page="trio"] #PRESS { background: #edc362; } /* On a light ground the white hover further down the sheet would erase the link, so night wins here. */ .section--light .press-item__meta a, .section--light .link-underline { color: inherit; } .section--light .press-item__meta a:hover, .section--light .press-item__meta a:focus-visible, .section--light .link-underline:hover, .section--light .link-underline:focus-visible { color: var(--night); border-color: var(--night); } /* Booking takes the language of Send: no frame, no rule, gold that steps to white on hover. */ .trio-booking .btn { display: inline-block; border: 0; background: none; padding: 0.5rem 0 0.6rem; color: var(--gold); transition: color 0.3s var(--ease); } .trio-booking .btn:hover, .trio-booking .btn:focus-visible { background: none; border: 0; color: var(--white); } /* ========================================================= Trio, second pass: the videos lead, the trio sits beside its photograph, and a biography opens large ========================================================= */ /* Twelve columns so two different tile widths can share one grid with no seam: three videos across the first row, then the photographs four up. */ #trio-media { grid-template-columns: repeat(12, minmax(0, 1fr)); } #trio-media .tile--video { grid-column: span 4; } #trio-media .tile--photo { grid-column: span 3; } /* Das Trio: the photograph on the left, the three names stacked beside it. */ #trio-members { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); } #trio-members .trio-group { max-width: none; margin: 0; } #trio-members .trio-names { grid-template-columns: 1fr; } /* The first name would otherwise draw a rule level with the top of the photo. */ #trio-members .trio-name:first-child { border-top: 0; padding-top: 0; } /* The biography, opened: the portrait as large as the screen allows, the text holding its own column beside it. The three portraits are different shapes, so each keeps its own proportions rather than being cropped to a common one. */ .work-detail.member-detail { width: min(1500px, 100%); max-height: 86vh; overflow: visible; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.6rem, 3vw, 3.2rem); align-items: start; } .member-detail__shot img { width: 100%; height: auto; aspect-ratio: auto; max-height: 80svh; object-fit: contain; } .member-detail__text { max-height: 80svh; overflow-y: auto; padding-right: 0.7rem; } @media (max-width: 900px) { /* On a phone the videos run full width — they are the reason to be here — and the photographs follow two up. */ /* Full width and in the video's own proportions, so a 16:9 still is not cropped into the square the photographs use. */ #trio-media .tile--video { grid-column: span 12; aspect-ratio: 16 / 9; } #trio-media .tile--photo { grid-column: span 6; } #trio-members { grid-template-columns: 1fr; } #trio-members .trio-name:first-child { border-top: 1px solid var(--line); padding-top: clamp(1.3rem, 2.4vw, 2rem); } .work-detail.member-detail { grid-template-columns: 1fr; max-height: 84vh; overflow-y: auto; } .member-detail__shot img { max-height: 52svh; } .member-detail__text { max-height: none; overflow: visible; padding-right: 0; } } /* The hero on a phone: the upright frame, whole. Cropping it to a phone's proportions would take the cello off the right edge, so the hero takes the picture's own shape instead and stops short of the fold. */ @media (max-width: 700px) { .trio-hero { height: auto; aspect-ratio: 1500 / 2242; max-height: 100svh; min-height: 0; } .trio-hero__img { object-position: 50% 50%; } /* The desktop scrim is built for a wide crop with the players low in frame. Upright, that same band reaches their faces, so here it is short and sits only under the name. */ .trio-hero__over { padding-block: clamp(2.4rem, 9vh, 3.6rem) 1.4rem; background: linear-gradient(to top, rgba(10,15,22,0.93) 0%, rgba(10,15,22,0.80) 34%, rgba(10,15,22,0.34) 72%, transparent 100%); } } /* ========================================================= Imprint, and the discography ========================================================= */ .legal .section-title { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); } .legal-h { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.78rem; color: var(--gold); margin: 2.6rem 0 0.7rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .legal-h:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .legal p { font-size: 1rem; line-height: 1.85; max-width: 62ch; margin: 0 0 0.9rem; } } /* ========================================================= Discography — the shelf, after the ECM shop: covers and nothing else, in colour, with the title set beneath. ========================================================= */ .disco-stream { font-size: 0.95rem; line-height: 1.7; color: var(--muted); max-width: 52ch; margin: 0 0 clamp(2.4rem, 5vw, 3.6rem); } .albums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.2rem, 2.4vw, 2.4rem); row-gap: clamp(2.4rem, 4vw, 3.6rem); } /* A button centres its own content vertically. Inside a stretched grid row that pushed every card with a one-line caption half the difference down, so the covers in a row started at different heights. Laying the card out as a column and refusing the stretch puts every cover back on the row's top. */ .album { display: flex; flex-direction: column; align-items: stretch; align-self: start; width: 100%; text-align: left; padding: 0; background: none; border: 0; color: inherit; outline-offset: 6px; } .album__shot { display: block; overflow: hidden; background: var(--panel); aspect-ratio: 1 / 1; } /* The covers are artwork, so they keep their colour; only the scale moves. */ .album__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); } .album:hover .album__shot img, .album:focus-visible .album__shot img { transform: scale(1.04); } .album__name { display: block; margin: 0.95rem 0 0.25rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(0.86rem, 1.05vw, 0.98rem); line-height: 1.2; letter-spacing: 0.02em; transition: color 0.3s var(--ease); } .album:hover .album__name, .album:focus-visible .album__name { color: var(--gold); } .album__line { display: block; font-size: 0.78rem; color: var(--faint); line-height: 1.5; } /* ---------- the album, opened ---------- */ .work-detail.album-detail { width: min(1180px, 100%); max-height: 86vh; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(1.8rem, 3.4vw, 3.4rem); align-items: start; overflow: visible; } .album-detail__shot img { width: 100%; height: auto; max-height: 74svh; object-fit: contain; display: block; } .album-detail__text { max-height: 78svh; overflow-y: auto; padding-right: 0.8rem; } .album-detail__h { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; color: var(--gold); margin: 1.9rem 0 0.7rem; } .album-detail__fact { font-size: 0.9rem; line-height: 1.7; color: var(--muted); margin: 0; } .credit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; } .credit-list li { display: flex; flex-wrap: wrap; gap: 0 0.6rem; align-items: baseline; font-size: 0.9rem; } .credit-list__n { color: var(--text); } .credit-list__r { color: var(--faint); font-size: 0.82rem; } .credit-list--plain { margin-top: 0.5rem; } .credit-list--plain .credit-list__n { color: var(--muted); font-size: 0.86rem; } /* ---------- the tracklist ---------- */ .tracklist { list-style: none; padding: 0; margin: 1.6rem 0 0; } .track { display: grid; grid-template-columns: 2.1rem 1fr auto; align-items: baseline; gap: 0 0.7rem; border-top: 1px solid var(--line); } .track:last-child { border-bottom: 1px solid var(--line); } .track__no { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--faint); font-variant-numeric: tabular-nums; } .track__title { font-size: 0.92rem; line-height: 1.45; text-align: left; padding: 0.62rem 0; background: none; border: 0; color: var(--text); transition: color 0.3s var(--ease); display: flex; align-items: baseline; gap: 0.55rem; } .track__title:hover, .track__title:focus-visible { color: var(--gold); } a.track__title { text-decoration: none; } .track__time { font-size: 0.8rem; color: var(--faint); font-variant-numeric: tabular-nums; } /* A sample announces itself with a small triangle that becomes a pause bar. */ .track__mark { flex: 0 0 auto; width: 0; height: 0; align-self: center; border-left: 7px solid var(--gold); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: border-color 0.3s var(--ease); } .track.is-playing .track__mark { width: 7px; height: 10px; border: 0; background: linear-gradient(to right, var(--gold) 0 2px, transparent 2px 5px, var(--gold) 5px 7px); } .track.is-playing .track__title { color: var(--gold); } .album-detail__total { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0.9rem 0 0; } .album-detail__rights { font-size: 0.76rem; color: var(--faint); margin-top: 1.8rem; } @media (max-width: 1100px) { .albums { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work-detail.album-detail { grid-template-columns: 1fr; max-height: 84vh; overflow-y: auto; } .album-detail__shot img { max-height: 42svh; } .album-detail__text { max-height: none; overflow: visible; padding-right: 0; } } /* Album extras: the German title of an English record, and the booklet's text for a single piece. */ .album-detail__sub { font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: 1.05rem; color: var(--muted); margin: -0.5rem 0 0.9rem; } /* The note belongs to the whole row, so it spans past the number column. */ .track { grid-template-areas: "no title time" ". note note"; } .track__no { grid-area: no; } .track__title { grid-area: title; } .track__time { grid-area: time; } .track__note { grid-area: note; margin: -0.15rem 0 0.7rem; font-size: 0.8rem; line-height: 1.65; color: var(--faint); max-width: 62ch; } /* The honeypot. Not display:none — the better bots skip hidden fields, and a field they skip catches nothing. Off-screen, out of the tab order instead. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* The trio name sits at the foot of the picture. With the hero at lvh the bottom of it can fall behind Safari's toolbar, so the overlay keeps a toolbar's worth of padding under the type on a touch screen. */ @media (max-width: 700px) { .trio-hero__over { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); } } /* A cancelled concert: struck through, dimmed, and labelled. It stays on the page rather than vanishing, so anyone holding a ticket sees what happened. */ .event--cancelled .event__title, .event--cancelled .event__place { text-decoration: line-through; } .event--cancelled { opacity: 0.62; } .event__off { display: inline-block; margin-left: 0.7rem; vertical-align: middle; font-family: var(--font); font-weight: 500; text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; padding: 0.22em 0.6em; background: #b4453c; color: #fff; }