.page-main--artists {
max-width: 1120px;
}
.artists-controls[hidden],
[data-artist][hidden] {
display: none !important;
}
.artists-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-bottom: 28px;
}
.view-switch {
display: inline-flex;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.view-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
font-family: var(--font-sans);
font-size: var(--fs-ui);
color: var(--text-soft);
background: none;
border: 0;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.view-btn + .view-btn {
border-left: 1px solid var(--border);
}
.view-btn svg {
flex: none;
opacity: 0.85;
}
.view-btn:hover {
color: var(--text);
}
.view-btn--active {
color: var(--text);
background: var(--surface-hover);
font-weight: 600;
}
.view-btn:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
color: var(--text);
}
.artists-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex: 1 1 auto;
}
.artists-count {
flex: 1 1 100%;
}
.artist-id {
display: inline-flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.artist-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
}
.artist-avatar {
flex: none;
width: 30px;
height: 30px;
border-radius: var(--radius-full);
object-fit: cover;
background: var(--bg-light);
border: 1px solid var(--border);
}
.artists-table .artist-avatar {
width: 26px;
height: 26px;
}
.artist-status {
display: inline-block;
flex: none;
padding: 3px 9px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
border: 1px solid transparent;
border-radius: var(--radius-full);
}
.artist-status--open {
color: var(--pine);
background: color-mix(in srgb, var(--pine) 14%, transparent);
border-color: color-mix(in srgb, var(--pine) 34%, transparent);
}
.artist-status--unknown {
color: var(--text-soft);
background: var(--surface-hover);
border-color: var(--border);
}
.artist-status--closed {
color: var(--warning);
background: var(--warning-bg1);
border-color: color-mix(in srgb, var(--warning) 32%, transparent);
}
.artist-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.artist-links a {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-light);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text);
text-decoration: none;
transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.artist-links a:hover {
color: var(--accent);
border-color: var(--accent-muted);
background: var(--bg-surface);
}
.artists-gallery {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
gap: 18px;
}
.artist-card {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-block);
overflow: hidden;
transition: border-color 0.15s var(--ease-out);
}
.artist-card:hover {
border-color: var(--accent-muted);
}
.artist-preview {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 3 / 2;
background: var(--bg-light);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.artist-monogram {
font-family: var(--font-serif);
font-weight: 700;
font-size: 2.6rem;
line-height: var(--lh-flat);
color: color-mix(in srgb, var(--text-soft) 55%, transparent);
user-select: none;
-webkit-user-select: none;
}
.artist-preview-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.artist-preview--none {
border-bottom-color: transparent;
}
.artist-status-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
display: inline-flex;
background: var(--bg-surface);
border-radius: var(--radius-full);
}
.artist-card-body {
display: flex;
flex-direction: column;
gap: 9px;
padding: 13px 14px 15px;
}
.artist-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.artists-board {
display: flex;
align-items: flex-start;
gap: 16px;
overflow-x: auto;
padding-bottom: 4px;
}
.board-col {
flex: 1 1 0;
min-width: 220px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-block);
overflow: hidden;
}
.board-col-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
.board-col-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-label);
color: var(--text-soft);
}
.board-col-list {
list-style: none;
margin: 0;
padding: 0;
}
.board-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 11px 14px;
border-bottom: 1px solid var(--border);
}
.board-col-list .board-card:last-child {
border-bottom: 0;
}
.artists-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-block);
}
.artists-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
font-size: var(--fs-ui);
}
.artists-table .artist-name {
overflow-wrap: normal;
word-break: normal;
}
.artists-table th {
text-align: left;
padding: 11px 16px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-soft);
background: var(--bg-table-head);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.artists-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.artists-table tbody tr:last-child td {
border-bottom: 0;
}
.artists-table tbody tr:hover {
background: var(--surface-hover);
}
.artists-empty {
margin: 28px 0 0;
font-size: var(--fs-ui);
color: var(--text-soft);
}
@media (max-width: 40em) {
.artists-gallery {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.artist-card-head .artist-id {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.board-col {
min-width: 200px;
}
.view-btn {
padding: 12px 16px;
}
.artist-links a {
padding: 10px 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.view-btn,
.artist-card,
.artist-links a {
transition: none;
}
}