/* ============================================================ 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: #161c18; --accent: #7a9e82; --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(--accent); 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; } .page-title { font-family: var(--font-display); font-size: 136px; font-weight: 400; line-height: 0.87; margin-top: 14px; color: var(--accent); } .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: 13px; color: var(--text); letter-spacing: 0.06em; 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(--accent); } /* ── Featured label ────────────────────────────────────────── Sits above the featured-artist block, styled identically to .browse-subhead so "Featured" and "Logos / Caricatures / Posters" read as one consistent labeling system across the page rather than two different conventions. */ .featured-label { font-family: var(--font-body); font-size: 16px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 56px; } /* 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(--accent); color: var(--accent); } .pill.active { background: var(--accent); border-color: var(--accent); color: #161c18; 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: 6px; 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="caricature"] .wc-thumb { aspect-ratio: 4/3; } /* ── Poster grid — natural aspect ratio, no crop ───────────── Gig posters come in genuinely different proportions show to show (venue print sizes vary), so forcing a uniform box either crops real artwork off or letterboxes awkwardly. Instead, the poster row lets each thumbnail keep its true aspect ratio and vertically centers the row so shorter/taller posters align on a shared middle rather than a shared top edge. Add .work-grid--poster alongside .work-grid on the Posters section's grid container to opt in. */ .work-grid--poster { align-items: center; } .work-grid--poster .work-card { align-self: center; } .work-grid--poster .wc-thumb { aspect-ratio: auto; height: auto; /* Slightly more visible than the default hairline border — posters with dark/black backgrounds otherwise blend into the page background with no visual separation. Applies uniformly regardless of whether the source file has its own printed border (e.g. Daryl's House) or not. */ border-color: rgba(240,237,230,0.18); } .work-grid--poster .wc-thumb img { position: static; height: auto; object-fit: unset; } .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(--accent); 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(--accent); } @media (hover: none), (pointer: coarse) { .wc-badge { opacity: 1; background: rgba(255,255,255,0.9); border: 1px solid #12151c; box-sizing: border-box; } .wc-badge svg { color: #12151c; stroke-width: 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: 13px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; } /* Subsections */ .subsection { margin-bottom: 48px; } .subsection:last-child { margin-bottom: 0; } .subsection-label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); opacity: 0.85; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* ── Lyric map hero image ───────────────────────────────────── A single large image, not constrained by .masonry's 3-column layout (which would otherwise render one lone image at only about a third width). Used for a caricature/illustration meant to be viewed large rather than as a gallery thumbnail. ──────────────────────────────────────────────────────────── */ .lyric-map { width: 100%; margin-bottom: 8px; } .lyric-map img { width: 100%; display: block; } /* ── 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(--accent); color: var(--accent); } .guide-btn:disabled { opacity: 0.25; cursor: default; } .guide-count { font-size: 10px; letter-spacing: 0.12em; color: var(--accent); 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 the dot indicator when present. order:2 (paired with .lb-count's order:1 below) pins this after the dots regardless of source markup order, so a caption's line count never shifts where the dots sit. */ .lb-caption { display: none; text-align: left; color: var(--text); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; margin-top: 12px; order: 2; } .lb-caption.active { display: block; } /* Lightbox dot indicator — sits directly under the image (order:1, ahead of the caption) whenever a group has more than one image. Reuses the #lb-count element/id from every page's shared markup, just repurposed as a dot container instead of "X / Y" text, so no page's HTML needs to change. */ .lb-count { display: none; justify-content: center; align-items: center; gap: 8px; width: 100%; margin-top: 16px; order: 1; } .lb-count.active { display: flex; } .lb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(240,237,230,0.22); flex-shrink: 0; transition: background 0.15s ease; } .lb-dot.active { background: var(--accent); } /* Large groups (more than 8 images, e.g. "View All Logos") shrink and wrap onto a centered second row instead of overflowing or squeezing into one illegible line. align-self:center is required here — once max-width shrinks this element below 100%, the parent's align-items:flex-start (.lb-content is left-aligned, for the image/caption above it) would otherwise pin the now-narrower dot block to the left edge instead of centering it under the image. */ .lb-count--many { flex-wrap: wrap; max-width: 240px; gap: 6px; align-self: center; } .lb-count--many .lb-dot { width: 5px; height: 5px; } /* Lightbox prev/next — solid accent 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(--accent); border: none; color: #161c18; 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; } /* Nav Contact — colored with Community's own accent (sage) rather than the neutral default, so it reads as a live, distinct action next to the back link, not just more chrome. */ .nav-contact { color: var(--accent); } .nav-contact:hover { color: var(--text); } /* ── Artist prev/next navigation ───────────────────────────── Sits at the bottom of every detail page, between the last project-section and the footer. Reuses .nav-back (left chevron badge) for Previous and .cta-link (right chevron badge) for Next, rather than introducing new visual language — same arrow system already used for "← Music" and "View All Projects" elsewhere on these pages. */ .artist-nav { display: flex; justify-content: space-between; align-items: center; padding: 48px 0; border-top: 1px solid var(--border); } .artist-nav-label { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); opacity: 0.7; margin-bottom: 6px; } .artist-nav-prev, .artist-nav-next { display: flex; flex-direction: column; } .artist-nav-next { align-items: flex-end; text-align: right; } @media (max-width: 768px) { .artist-nav { align-items: flex-start; padding: 40px 0; } /* Hard 47% cap on each side guarantees a gap between Previous and Next no matter how long either artist's name is — the longest names in the current lineup ("Entertainers for Elders", "Red Tail Hawk Records") wrap to a second line within their own half rather than colliding with the other side or forcing a truncated ellipsis. */ .artist-nav-prev, .artist-nav-next { max-width: 47%; } } /* ── Contact overlay accent override — Community only ──────── contact-overlay.css defaults --overlay-accent to gold (Music's color) sitewide. This single override swaps it to Community's own sage green wherever this stylesheet is loaded, leaving Music's gold completely untouched everywhere else. */ body .contact-overlay { --overlay-accent: var(--accent); }