refactor(css): extract .tint-candle / .tint-ember utility classes

The candle tint (color-mix accent fill + matching solid border) was inlined
as style="" in five spots across SeriesPassPurchase and EventSeriesTicketCard.
Promote to .tint-candle / .tint-ember utility classes in main.css and replace
the inline styles with the class.
This commit is contained in:
Jennie Robinson Faber 2026-05-24 22:18:26 +01:00
parent dac423afcd
commit 53f81b3605
3 changed files with 16 additions and 10 deletions

View file

@ -248,6 +248,17 @@ p a, blockquote a {
border-color: var(--border);
}
/* ---- ACCENT TINT BLOCKS ---- */
/* Faint accent fill + matching solid border. Replaces inline color-mix styles. */
.tint-candle {
background: color-mix(in srgb, var(--candle) 15%, transparent);
border: 1px solid var(--candle);
}
.tint-ember {
background: color-mix(in srgb, var(--ember) 15%, transparent);
border: 1px solid var(--ember);
}
/* ---- SEGMENTED CONTROL (flush dashed-border groups) ---- */
/* Negative-margin overlap: every item keeps all 4 borders,
siblings overlap by 1px, active item paints on top via z-index. */