/* ======================================= SPYDER CHARLES — shared stylesheet Palette: white text on TRUE black. No borders anywhere — boxes are distinguished by fill only. Color only ever shows up as a per-artist tint on release boxes — never as text or page background — so it reads as identity, not decoration. To tint an artist's release boxes, set one number on : That's it. No new colors to design as the roster grows. Omit --hue entirely for a page with no artist identity (e.g. index). --bg #000000 true black page background --bg-alt #0a0a0a box fill (index roster, no --hue) --text #ece7e2 warm off-white --text-dim #9a948e muted label/caption tone --line hairline rule, used only for full-width section dividers (header/footer), never around a box Type: Georgia (display, restrained use) / system sans (body, UI) ====================================== */ :root { --bg: #000000; --bg-alt: #0a0a0a; --text: #ece7e2; --text-dim: #9a948e; --line: rgba(236, 231, 226, 0.1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: center; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; margin: 0; } .wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; } /* ---------- site header ---------- */ .site-header .wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .header-logo { width: clamp(180px, 28vw, 260px); height: auto; margin: 0 auto; } .wordmark { font-family: Georgia, serif; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; } .wordmark a { color: var(--text); } .back-link { font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.04em; } .back-link:hover { color: var(--text); } /* ---------- landing page ---------- */ .hero { padding: 40px 0 16px; } .logo { display: block; width: 100%; max-width: clamp(220px, 55vw, 560px); height: auto; margin: 0 auto 16px; } .hero h1 { font-size: clamp(2rem, 6vw, 3rem); max-width: 18ch; margin: 0 auto; } .hero p { color: var(--text-dim); max-width: 46ch; margin: 8px auto 0; font-size: 1.02rem; } .roster { padding: 16px 0 48px; } .roster-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .roster-row { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 16px; background: var(--bg-alt); transition: transform 0.15s ease, background 0.2s ease; } .roster-row:hover { background: #141414; transform: translateY(-2px); } .roster-name { font-size: clamp(1.05rem, 2.5vw, 1.25rem); } /* ---------- artist page ---------- */ .artist-hero { padding: 8px 0 12px; border-bottom: 1px solid var(--line); } .artist-hero .eyebrow { color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; } .artist-hero h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin-top: 6px; } .artist-hero p { color: var(--text-dim); max-width: 52ch; margin: 8px auto 0; } .releases { padding: 24px 0; } .releases h2 { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; } .cover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .cover-card { background: hsl(var(--hue, 220) var(--hue-sat, 0%) 8%); padding: 12px; } body[style*="--hue"] .cover-card { --hue-sat: 40%; } .cover-card .art { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: rgba(255, 255, 255, 0.04); } .cover-card .meta { padding-top: 8px; text-align: center; } .cover-card .title { font-size: 0.95rem; } .cover-card { transition: transform .2s ease; } .cover-card:hover { transform: scale(1.03); } .roster-row { display: flex; flex-direction: column; align-items: stretch; padding: 0; background: var(--bg-alt); transition: transform 0.15s ease, background 0.2s ease; overflow: hidden; } .roster-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .roster-name { padding: 12px 16px; text-align: center; } .roster-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } /* ---------- listen ---------- */ .listen { padding: 24px 0 40px; } .listen h2 { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; } .platform-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } .platform-links a { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-alt); padding: 10px 14px; font-size: 0.95rem; transition: background 0.2s ease; } .platform-icon { width: 32px; height: 32px; fill: currentColor; flex-shrink: 0; } .platform-links a:hover { background: #1a1a1a; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 12px 0; color: var(--text-dim); font-size: 0.7rem; } .site-footer p { margin: 4px auto 0; max-width: 60ch; font-size: 0.7rem; opacity: 0.8; } /* ---------- mobile ---------- */ @media (max-width: 640px) { .wrap { padding: 0 18px; } .header-logo { width: 160px; } .cover-grid { grid-template-columns: repeat(2, 1fr); } }