/* ==================================================================== Genre tag stylesheet -------------------------------------------------------------------- Every genre gets its own perceptually-spaced hue + tinted background. Pattern (dark-mode default): .tag-- { background: oklch(0.40 0.12 H / 0.25); color: oklch(0.85 0.10 H); } Light-mode patches at the bottom flip to a light tint + darker ink. ==================================================================== */ :root { /* genre hues — perceptually spaced */ --g-pop: 345; /* magenta */ --g-hh: 200; /* cyan */ --g-rap: 45; /* gold */ --g-rbpop: 320; /* fuchsia */ --g-rb: 0; /* neutral (handled separately) */ --g-soul: 100; /* yellow-green */ --g-funk: 70; /* gold */ --g-jazz: 45; /* warm amber */ --g-disco: 355; /* hot pink */ --g-house: 255; /* indigo */ --g-trap: 290; /* purple */ --g-drill: 15; /* deep red */ --g-afrobeat: 130; /* green */ --g-indie: 180; /* teal */ --g-reggae: 145; /* forest */ --g-country: 35; /* burnt orange */ --g-rock: 20; /* red-orange */ --g-folk: 85; /* olive */ --g-electronic: 215; /* azure */ --g-dance: 270; /* violet */ --g-latin: 25; /* terracotta */ --g-gospel: 285; /* royal purple */ --g-punk: 5; /* crimson */ --g-edm: 250; /* electric blue */ --g-dnb: 165; /* mint */ --g-ambient: 210; /* sky */ --g-techno: 195; /* steel */ --g-experimental: 305; /* orchid */ --g-alt: 95; /* chartreuse */ --g-blues: 230; /* deep blue */ --g-gospel2: 310; /* magenta-purple */ } /* base tag look (matches existing .tag spec) */ .tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } /* dark-mode tints */ .tag--pop { background: oklch(0.40 0.12 var(--g-pop) / 0.25); color: oklch(0.85 0.10 var(--g-pop)); } .tag--hh { background: oklch(0.40 0.12 var(--g-hh) / 0.25); color: oklch(0.85 0.10 var(--g-hh)); } .tag--rap { background: oklch(0.40 0.13 var(--g-rap) / 0.28); color: oklch(0.88 0.12 var(--g-rap)); } .tag--rbpop { background: oklch(0.40 0.12 var(--g-rbpop) / 0.25); color: oklch(0.85 0.10 var(--g-rbpop)); } .tag--rb { background: #1f1f25; color: var(--text); border-color: var(--line-strong); } .tag--soul { background: oklch(0.40 0.12 var(--g-soul) / 0.25); color: oklch(0.85 0.10 var(--g-soul)); } .tag--funk { background: oklch(0.40 0.12 var(--g-funk) / 0.25); color: oklch(0.85 0.10 var(--g-funk)); } .tag--jazz { background: oklch(0.40 0.12 var(--g-jazz) / 0.25); color: oklch(0.85 0.10 var(--g-jazz)); } .tag--disco { background: oklch(0.40 0.12 var(--g-disco) / 0.25); color: oklch(0.85 0.10 var(--g-disco)); } .tag--house { background: oklch(0.40 0.12 var(--g-house) / 0.25); color: oklch(0.85 0.10 var(--g-house)); } .tag--trap { background: oklch(0.40 0.12 var(--g-trap) / 0.25); color: oklch(0.85 0.10 var(--g-trap)); } .tag--drill { background: oklch(0.40 0.12 var(--g-drill) / 0.25); color: oklch(0.85 0.10 var(--g-drill)); } .tag--afrobeat { background: oklch(0.40 0.12 var(--g-afrobeat) / 0.25); color: oklch(0.85 0.10 var(--g-afrobeat)); } .tag--indie { background: oklch(0.40 0.12 var(--g-indie) / 0.25); color: oklch(0.85 0.10 var(--g-indie)); } .tag--reggae { background: oklch(0.40 0.12 var(--g-reggae) / 0.25); color: oklch(0.85 0.10 var(--g-reggae)); } .tag--country { background: oklch(0.40 0.12 var(--g-country) / 0.25); color: oklch(0.85 0.10 var(--g-country)); } .tag--rock { background: oklch(0.40 0.12 var(--g-rock) / 0.25); color: oklch(0.85 0.10 var(--g-rock)); } .tag--folk { background: oklch(0.40 0.12 var(--g-folk) / 0.25); color: oklch(0.85 0.10 var(--g-folk)); } .tag--electronic { background: oklch(0.40 0.12 var(--g-electronic) / 0.25); color: oklch(0.85 0.10 var(--g-electronic)); } .tag--dance { background: oklch(0.40 0.12 var(--g-dance) / 0.25); color: oklch(0.85 0.10 var(--g-dance)); } .tag--latin { background: oklch(0.40 0.12 var(--g-latin) / 0.25); color: oklch(0.85 0.10 var(--g-latin)); } .tag--gospel { background: oklch(0.40 0.12 var(--g-gospel) / 0.25); color: oklch(0.85 0.10 var(--g-gospel)); } .tag--punk { background: oklch(0.40 0.12 var(--g-punk) / 0.25); color: oklch(0.85 0.10 var(--g-punk)); } .tag--edm { background: oklch(0.40 0.12 var(--g-edm) / 0.25); color: oklch(0.85 0.10 var(--g-edm)); } .tag--dnb { background: oklch(0.40 0.12 var(--g-dnb) / 0.25); color: oklch(0.85 0.10 var(--g-dnb)); } .tag--ambient { background: oklch(0.40 0.12 var(--g-ambient) / 0.25); color: oklch(0.85 0.10 var(--g-ambient)); } .tag--techno { background: oklch(0.40 0.12 var(--g-techno) / 0.25); color: oklch(0.85 0.10 var(--g-techno)); } .tag--experimental { background: oklch(0.40 0.12 var(--g-experimental) / 0.25); color: oklch(0.85 0.10 var(--g-experimental)); } .tag--alt { background: oklch(0.40 0.12 var(--g-alt) / 0.25); color: oklch(0.85 0.10 var(--g-alt)); } .tag--blues { background: oklch(0.40 0.12 var(--g-blues) / 0.25); color: oklch(0.85 0.10 var(--g-blues)); } .tag--kpop { background: oklch(0.40 0.14 340 / 0.25); color: oklch(0.85 0.14 340); } :root[data-theme="light"] .tag--kpop { background: oklch(0.94 0.06 340); color: oklch(0.40 0.20 340); } /* Drag-to-reorder drop indicators on genre chips */ .genrepop__chip { cursor: grab; user-select: none; position: relative; } .genrepop__chip:active { cursor: grabbing; } .genrepop__chip.is-dragging { opacity: 0.4; } .genrepop__chip.is-dropbefore::before, .genrepop__chip.is-dropafter::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent, #4af); border-radius: 2px; } .genrepop__chip.is-dropbefore::before { left: -3px; } .genrepop__chip.is-dropafter::after { right: -3px; } .genrepop__hint { opacity: 0.55; font-weight: 400; font-size: 0.85em; margin-left: 4px; } /* light-mode patches: lighter tint + darker ink */ :root[data-theme="light"] .tag--rb { background: rgba(28, 26, 22, 0.06); color: var(--text); border-color: var(--line-strong); } :root[data-theme="light"] .tag--pop { background: oklch(0.94 0.05 var(--g-pop)); color: oklch(0.36 0.18 var(--g-pop)); } :root[data-theme="light"] .tag--hh { background: oklch(0.94 0.05 var(--g-hh)); color: oklch(0.36 0.16 var(--g-hh)); } :root[data-theme="light"] .tag--rap { background: oklch(0.94 0.06 var(--g-rap)); color: oklch(0.38 0.18 var(--g-rap)); } :root[data-theme="light"] .tag--rbpop { background: oklch(0.94 0.05 var(--g-rbpop)); color: oklch(0.36 0.16 var(--g-rbpop)); } :root[data-theme="light"] .tag--soul { background: oklch(0.94 0.05 var(--g-soul)); color: oklch(0.36 0.16 var(--g-soul)); } :root[data-theme="light"] .tag--funk { background: oklch(0.94 0.05 var(--g-funk)); color: oklch(0.36 0.16 var(--g-funk)); } :root[data-theme="light"] .tag--jazz { background: oklch(0.94 0.05 var(--g-jazz)); color: oklch(0.36 0.16 var(--g-jazz)); } :root[data-theme="light"] .tag--disco { background: oklch(0.94 0.05 var(--g-disco)); color: oklch(0.36 0.16 var(--g-disco)); } :root[data-theme="light"] .tag--house { background: oklch(0.94 0.05 var(--g-house)); color: oklch(0.36 0.16 var(--g-house)); } :root[data-theme="light"] .tag--trap { background: oklch(0.94 0.05 var(--g-trap)); color: oklch(0.36 0.16 var(--g-trap)); } :root[data-theme="light"] .tag--drill { background: oklch(0.94 0.05 var(--g-drill)); color: oklch(0.36 0.16 var(--g-drill)); } :root[data-theme="light"] .tag--afrobeat { background: oklch(0.94 0.05 var(--g-afrobeat)); color: oklch(0.36 0.16 var(--g-afrobeat)); } :root[data-theme="light"] .tag--indie { background: oklch(0.94 0.05 var(--g-indie)); color: oklch(0.36 0.16 var(--g-indie)); } :root[data-theme="light"] .tag--reggae { background: oklch(0.94 0.05 var(--g-reggae)); color: oklch(0.36 0.16 var(--g-reggae)); } :root[data-theme="light"] .tag--country { background: oklch(0.94 0.05 var(--g-country)); color: oklch(0.36 0.16 var(--g-country)); } :root[data-theme="light"] .tag--rock { background: oklch(0.94 0.05 var(--g-rock)); color: oklch(0.36 0.16 var(--g-rock)); } :root[data-theme="light"] .tag--folk { background: oklch(0.94 0.05 var(--g-folk)); color: oklch(0.36 0.16 var(--g-folk)); } :root[data-theme="light"] .tag--electronic { background: oklch(0.94 0.05 var(--g-electronic)); color: oklch(0.36 0.16 var(--g-electronic)); } :root[data-theme="light"] .tag--dance { background: oklch(0.94 0.05 var(--g-dance)); color: oklch(0.36 0.16 var(--g-dance)); } :root[data-theme="light"] .tag--latin { background: oklch(0.94 0.05 var(--g-latin)); color: oklch(0.36 0.16 var(--g-latin)); } :root[data-theme="light"] .tag--gospel { background: oklch(0.94 0.05 var(--g-gospel)); color: oklch(0.36 0.16 var(--g-gospel)); } :root[data-theme="light"] .tag--punk { background: oklch(0.94 0.05 var(--g-punk)); color: oklch(0.36 0.16 var(--g-punk)); } :root[data-theme="light"] .tag--edm { background: oklch(0.94 0.05 var(--g-edm)); color: oklch(0.36 0.16 var(--g-edm)); } :root[data-theme="light"] .tag--dnb { background: oklch(0.94 0.05 var(--g-dnb)); color: oklch(0.36 0.16 var(--g-dnb)); } :root[data-theme="light"] .tag--ambient { background: oklch(0.94 0.05 var(--g-ambient)); color: oklch(0.36 0.16 var(--g-ambient)); } :root[data-theme="light"] .tag--techno { background: oklch(0.94 0.05 var(--g-techno)); color: oklch(0.36 0.16 var(--g-techno)); } :root[data-theme="light"] .tag--experimental { background: oklch(0.94 0.05 var(--g-experimental)); color: oklch(0.36 0.16 var(--g-experimental)); } :root[data-theme="light"] .tag--alt { background: oklch(0.94 0.05 var(--g-alt)); color: oklch(0.36 0.16 var(--g-alt)); } :root[data-theme="light"] .tag--blues { background: oklch(0.94 0.05 var(--g-blues)); color: oklch(0.36 0.16 var(--g-blues)); }