:root {
--td-accent: #e63946;
}
.tourdates { --td-text: inherit;
--td-bg: transparent; --td-surface: rgba( 128, 128, 128, 0.08 );
--td-surface: color-mix( in srgb, currentColor 6%, transparent );
--td-muted: rgba( 128, 128, 128, 0.85 );
--td-muted: color-mix( in srgb, currentColor 62%, transparent );
--td-border: rgba( 128, 128, 128, 0.28 );
--td-border: color-mix( in srgb, currentColor 20%, transparent );
--td-radius: 12px;
--td-badge-bg: var(--td-accent);
--td-badge-text: #ffffff;
--td-gap: 1rem;
color: var(--td-text);
font-family: inherit;
line-height: 1.5;
box-sizing: border-box;
}
.tourdates *,
.tourdates *::before,
.tourdates *::after {
box-sizing: border-box;
} .tourdates--empty .tourdates__empty {
margin: 0;
padding: 1rem 1.25rem;
background: var(--td-surface);
border: 1px dashed var(--td-border);
border-radius: var(--td-radius);
color: var(--td-muted);
text-align: center;
} .tourdates__gig {
display: flex;
align-items: stretch;
gap: var(--td-gap);
padding: 1rem;
background: var(--td-bg);
border: 1px solid var(--td-border);
border-radius: var(--td-radius);
}
.tourdates__gig--featured {
box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.06 );
} .tourdates__date-badge {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 68px;
padding: 0.5rem 0.75rem;
background: var(--td-badge-bg);
color: var(--td-badge-text);
border-radius: calc( var(--td-radius) - 4px );
text-align: center;
line-height: 1.1;
}
.tourdates__day {
font-size: 1.75rem;
font-weight: 700;
}
.tourdates__month {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.tourdates__year {
font-size: 0.7rem;
opacity: 0.85;
} .tourdates__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.35rem;
min-width: 0;
}
.tourdates__label {
display: inline-block;
align-self: flex-start;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--td-accent);
}
.tourdates__title {
margin: 0;
font-size: 1.25rem;
line-height: 1.25;
}
.tourdates__meta {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.9rem;
color: var(--td-muted);
font-size: 0.9rem;
}
.tourdates__meta-item {
display: inline-flex;
align-items: center;
}
.tourdates__meta-date::before {
content: "\1F4C5";
margin-right: 0.35rem;
}
.tourdates__meta-time::before {
content: "\1F552";
margin-right: 0.35rem;
}
.tourdates__meta-location::before {
content: "\1F4CD";
margin-right: 0.35rem;
}
.tourdates__desc {
margin-top: 0.25rem;
color: var(--td-text);
}
.tourdates__desc p {
margin: 0 0 0.5rem;
} .tourdates__button {
display: inline-block;
align-self: flex-start;
margin-top: 0.5rem;
padding: 0.55rem 1.1rem;
background: var(--td-accent);
color: var(--td-badge-text);
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: filter 0.15s ease, transform 0.15s ease;
}
.tourdates__button:hover,
.tourdates__button:focus {
filter: brightness( 0.92 );
transform: translateY( -1px );
color: var(--td-badge-text);
}
.tourdates__button--small {
margin-top: 0;
padding: 0.4rem 0.85rem;
font-size: 0.85rem;
} .tourdates__items {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.tourdates__item {
list-style: none;
margin: 0;
} .tourdates__year-header {
list-style: none;
margin: 0.75rem 0 0.15rem;
padding-bottom: 0.2rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--td-muted);
border-bottom: 1px solid var(--td-border);
}
.tourdates__items > .tourdates__year-header:first-child {
margin-top: 0;
}
.tourdates--list .tourdates__gig {
align-items: center;
}
.tourdates--list .tourdates__date-badge {
min-width: 58px;
}
.tourdates--list .tourdates__day {
font-size: 1.4rem;
}
.tourdates__action {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.tourdates__action .tourdates__button {
margin-top: 0;
align-self: center;
} .tourdates__expander {
margin-top: 0.75rem;
}
.tourdates__expander-summary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
list-style: none;
padding: 0.5rem 0.9rem;
font-weight: 600;
color: var(--td-accent);
border: 1px solid var(--td-border);
border-radius: 999px;
user-select: none;
transition: background 0.15s ease;
}
.tourdates__expander-summary:hover,
.tourdates__expander-summary:focus {
background: var(--td-surface);
} .tourdates__expander-summary::-webkit-details-marker {
display: none;
}
.tourdates__expander-summary::after {
content: "\25BE"; font-size: 0.8em;
transition: transform 0.2s ease;
}
.tourdates__expander[open] .tourdates__expander-summary::after {
transform: rotate( 180deg );
} .tourdates__expander-less {
display: none;
}
.tourdates__expander[open] .tourdates__expander-more {
display: none;
}
.tourdates__expander[open] .tourdates__expander-less {
display: inline;
}
.tourdates__expander-list {
margin-top: 0.75rem;
} .tourdates--past {
margin-top: 1rem;
}
.tourdates__expander--past .tourdates__expander-summary {
color: var(--td-muted);
} @media ( max-width: 480px ) {
.tourdates__gig {
flex-wrap: wrap;
align-items: flex-start;
} .tourdates__body {
flex: 1 1 0;
} .tourdates__action {
flex-basis: 100%;
margin-top: 0.5rem;
}
.tourdates__action .tourdates__button {
width: 100%;
text-align: center;
}
.tourdates__gig--featured .tourdates__button {
width: 100%;
text-align: center;
} .tourdates--list .tourdates__button--small {
padding: 0.6rem 1.1rem;
font-size: 0.9rem;
}
}