/* ============================================================ Identity Alley — Music Section ============================================================ Requires global.css to be loaded first. Overrides section-level tokens and defines all components exclusive to the music section (landing page + detail pages). To add a new artist detail page: 1. Link global.css then music.css in the 2. Use existing classes — no new CSS needed for standard layouts 3. Add a .logo-card class to any masonry item showing a logo on a white background ============================================================ */ /* ── Music section tokens ── */ :root { --bg: #12151c; --accent: #b89a5a; --gold: #b89a5a; /* alias — use either in music context */ --ph: #1b1f28; --ph-grid: rgba(240,237,230,0.022); } /* ── Placeholder box ──────────────────────────────────────── Gray holding cell used for artists not yet built out. ──────────────────────────────────────────────────────── */ .ph { background: var(--ph); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; position: relative; overflow: hidden; } .ph::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--ph-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ph-grid) 1px, transparent 1px); background-size: 48px 48px; } .ph-type { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0.5; position: relative; z-index: 1; text-align: center; } .ph-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.2; position: relative; z-index: 1; text-align: center; line-height: 1.6; } /* ── Landing page header ── */ .page-header { padding: 80px 0 64px; border-bottom: 1px solid var(--border); } .page-title { font-family: var(--font-display); font-size: 136px; font-weight: 400; line-height: 0.87; margin-top: 14px; } .page-desc { margin-top: 28px; font-size: 13px; line-height: 1.8; max-width: 640px; } .section-eyebrow { padding: 60px 0 0; } /* ── Featured artist block ── */ .featured-artist { padding: 52px 0; border-bottom: 1px solid var(--border); } .fa-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .fa-name { font-family: var(--font-body); font-size: 56px; font-weight: 400; line-height: 0.88; } .fa-meta { font-size: 10px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-top: 10px; } /* ── Featured grid base ── */ .fg { display: grid; gap: 10px; } .fg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Browse / More Work ── */ .browse-section { padding: 60px 0 80px; } .browse-top { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-bottom: 32px; } .browse-title { font-family: var(--font-body); font-size: 32px; font-weight: 400; white-space: nowrap; } /* ── More Music category subsections ───────────────────────── Each category (Logos, Posters, Album Art, Caricatures) gets its own quiet subhead + "View All" link, rather than every card mashed into one undifferentiated grid. Roughly half the size of .browse-title so it reads as a heading without competing with "More Music" above it. ──────────────────────────────────────────────────────────── */ .browse-subsection { margin-top: 44px; } .browse-subsection.hidden { display: none; } .browse-subhead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding-top: 32px; border-top: 1px solid var(--border); } .browse-subsection:first-child .browse-subhead-row { padding-top: 0; border-top: none; } .browse-subhead { font-family: var(--font-body); font-size: 16px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } /* Filter pills */ .pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .pill { padding: 9px 22px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 300; border: 1px solid rgba(240,237,230,0.18); border-radius: 100px; cursor: pointer; color: var(--text); background: transparent; transition: all 0.15s; } .pill:hover { border-color: var(--gold); color: var(--gold); } .pill.active { background: var(--gold); border-color: var(--gold); color: #12151c; font-weight: 400; } /* Work cards */ .work-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .work-card { cursor: pointer; display: block; text-decoration: none; color: inherit; } .work-card.hidden { display: none; } .wc-thumb { background: var(--ph); border: 1px solid var(--border); aspect-ratio: 4/3; margin-bottom: 13px; position: relative; overflow: hidden; transition: border-color 0.15s; } .wc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } /* Per-category thumbnail shapes — match the master PSD dimensions for each pill filter. Falls back to the default 4/3 above for any type not listed here (e.g. merch, web). */ .work-card[data-type="logo"] .wc-thumb, .work-card[data-type="album"] .wc-thumb { aspect-ratio: 1/1; } .work-card[data-type="poster"] .wc-thumb { aspect-ratio: 2/3; } .work-card[data-type="caricature"] .wc-thumb { aspect-ratio: 4/3; } .wc-thumb::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--ph-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ph-grid) 1px, transparent 1px); background-size: 40px 40px; } .work-card:hover .wc-thumb { border-color: rgba(184,154,90,0.28); } .wc-name { font-size: 14px; font-weight: 400; margin-bottom: 5px; } .wc-type { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); opacity: 0.7; } /* ── Work card click affordance ────────────────────────────── Small corner badge signaling a card is clickable. On touch devices (no hover available) it's always visible. On devices with real hover (mouse/trackpad) it stays hidden until hover or keyboard focus, so desktop doesn't show badges on every card in the grid at once. ──────────────────────────────────────────────────────────── */ .wc-badge { position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(18,21,28,0.82); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 2; } .wc-badge svg { width: 12px; height: 12px; color: var(--gold); } @media (hover: none), (pointer: coarse) { .wc-badge { opacity: 1; } } @media (hover: hover) and (pointer: fine) { .work-card:hover .wc-badge, .work-card:focus-visible .wc-badge { opacity: 1; } } /* ── Artist detail page: hero ── */ .project-hero { padding: 80px 0 64px; border-bottom: 1px solid var(--border); } .project-hero .eyebrow { margin-bottom: 16px; } .project-name { font-family: var(--font-body); font-size: 96px; font-weight: 400; line-height: 0.88; margin-bottom: 24px; } .project-sub { font-size: 13px; letter-spacing: 0.06em; } /* ── Artist detail page: project sections ── */ .project-section { padding: 64px 0; border-bottom: 1px solid var(--border); } .section-header { margin-bottom: 48px; } .section-title { font-family: var(--font-body); font-size: 32px; font-weight: 400; margin-bottom: 8px; } .section-venue { font-size: 11px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; } /* Subsections */ .subsection { margin-bottom: 48px; } .subsection:last-child { margin-bottom: 0; } .subsection-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); opacity: 0.7; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* ── Lyric hotspot map ──────────────────────────────────────── Numbered markers placed directly on an illustration, each revealing a caption on tap/hover. Built for pages where an image was constructed around specific references (e.g. a caricature built around song lyrics) and the connection is explained in the artist's own words rather than by quoting the source material. Positions are set per-marker via inline style (top/left percentages) in the page's own HTML. ──────────────────────────────────────────────────────────── */ .lyric-map { position: relative; } .lyric-map img { width: 100%; display: block; } .lyric-dot { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #12151c; font-family: var(--font-body); font-size: 13px; font-weight: 400; display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 2; transition: transform 0.15s; } .lyric-dot:hover { transform: translate(-50%, -50%) scale(1.12); } .lyric-caption { position: absolute; background: #0e0e0e; border: 1px solid var(--border); color: var(--text); font-size: 12px; line-height: 1.6; padding: 12px 16px; border-radius: 4px; width: 220px; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .lyric-dot.active ~ .lyric-caption, .lyric-dot:hover ~ .lyric-caption { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .lyric-caption { width: 170px; font-size: 11px; padding: 10px 12px; } .lyric-dot { width: 24px; height: 24px; font-size: 11px; } } /* ── Masonry ── */ .masonry { columns: 3; column-gap: 10px; } .masonry-item { break-inside: avoid; margin-bottom: 10px; cursor: pointer; } .masonry-item img { width: 100%; display: block; transition: opacity 0.2s; } .masonry-item:hover img { opacity: 0.88; } /* ── Masonry — strict grid variant ─────────────────────────── .masonry uses CSS multi-column layout (columns:3), which fills each column top-to-bottom BEFORE moving to the next column — it does not read left-to-right, row by row, like a normal grid. For cases where a specific reading order across images matters (e.g. numbered detail crops meant to be read in sequence), add .masonry--grid alongside .masonry: this switches to an actual CSS grid, so the DOM order of .masonry-item elements always matches the left-to-right, top-to-bottom visual order — no column-fill guessing needed. Still uses .masonry-item children so the shared lightbox.js click-wiring (which targets ".masonry img") keeps working unchanged. */ .masonry--grid { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .masonry--grid .masonry-item { break-inside: unset; margin-bottom: 0; } @media (max-width: 1024px) { .masonry--grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .masonry--grid { grid-template-columns: 1fr; } } /* Logo card: white bg treatment for logos shown on dark page */ .logo-card img { background: #f5f2eb; padding: 24px; } /* ── Reference guide pager ────────────────────────────────── Prev/next viewer for multi-page PDF reference guides, rendered as sequential images. Used on More Music detail pages that ship a brand guide (e.g. Matt Coffy Band). ──────────────────────────────────────────────────────── */ .guide-viewer { border: 1px solid var(--border); background: #0e0e0e; } .guide-frame { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 32px; } .guide-frame img { max-width: 100%; max-height: 70vh; display: block; } .guide-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--border); } .guide-btn { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--text); background: transparent; border: 1px solid rgba(240,237,230,0.18); border-radius: 100px; padding: 9px 22px; cursor: pointer; transition: all 0.15s; } .guide-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); } .guide-btn:disabled { opacity: 0.25; cursor: default; } .guide-count { font-size: 10px; letter-spacing: 0.12em; color: var(--gold); opacity: 0.7; text-transform: uppercase; white-space: nowrap; } /* ── Lightbox ── */ .lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .lb-overlay.active { opacity: 1; pointer-events: all; } .lb-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block; box-shadow: 0 8px 48px rgba(0,0,0,0.6); } .lb-close { position: fixed; top: 24px; right: 32px; color: rgba(240,237,230,0.6); font-size: 32px; line-height: 1; cursor: pointer; font-weight: 300; font-family: var(--font-body); transition: color 0.15s; z-index: 1001; } .lb-close:hover { color: var(--text); } /* Wraps image + caption together so caption sits below, left-aligned */ .lb-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 90vw; max-height: 90vh; } /* Lightbox caption — shown below zoomed image when present */ .lb-caption { display: none; text-align: left; color: var(--text); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; margin-top: 16px; } .lb-caption.active { display: block; } /* Lightbox image counter — shown below the caption when a subsection has more than one image */ .lb-count { display: none; text-align: left; color: var(--gold); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-top: 8px; } .lb-count.active { display: block; } /* Lightbox prev/next — solid gold circle, hidden by default; JS shows them only when the current subsection has more than one image, so a single-image lightbox has no dead controls sitting on screen. */ .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); border: none; color: #12151c; cursor: pointer; padding: 0; z-index: 1001; transition: opacity 0.15s; } .lb-nav:hover { opacity: 0.85; } .lb-prev { left: 24px; } .lb-next { right: 24px; } @media (max-width: 768px) { .lb-prev { left: 12px; } .lb-next { right: 12px; } } /* ── Responsive ── */ @media (max-width: 1024px) { .page-title { font-size: 96px; } .fa-name { font-size: 44px; } .project-name { font-size: 72px; } .masonry { columns: 2; } .work-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 768px) { .page-header { padding: 48px 0 40px; } .page-title { font-size: 72px; } .page-desc { max-width: 100%; } .fa-name { font-size: 36px; } .fa-top { flex-direction: column; align-items: flex-start; gap: 16px; } .project-hero { padding: 48px 0 40px; } .project-name { font-size: 52px; } .project-section { padding: 48px 0; } .section-title { font-size: 24px; } .masonry { columns: 1; } .work-grid { grid-template-columns: repeat(2,1fr); } .browse-top { flex-direction: column; align-items: flex-start; gap: 20px; } .guide-frame { min-height: 220px; padding: 20px; } .guide-nav { padding: 14px 16px; } .guide-btn { padding: 8px 16px; } } /* ── Music nav: back link at full size, no logo ── */ .nav-back { font-size: 14px; }