Купить билеты
Билеты проданы
Скоро в продаже
Отмена
Варианты: --primary (чёрная), --secondary (рамка), --partner (слот
под партнёра) + бренд-модификатор (--ticketland). Плюс три
некликабельных статуса на сером фоне: --sold (продано), --soon
(продажи ещё не открыты) и --canceled (показ отменён). Раскладку/
позицию (ширину, margin, прижатие к низу карточки) задаёт страница
на родителе-обёртке — здесь только сам вид кнопки. */
.ticket-btn {
display: flex;
align-items: center;
justify-content: center;
height: var(--btn-h-l); /* 60px */
border-radius: var(--card-radius); /* 2px */
font-family: var(--font-accent); /* Pragmatica Extended */
font-size: 18px;
font-weight: var(--font-weight-body);
letter-spacing: -0.015em;
text-decoration: none;
cursor: pointer;
transition: opacity var(--duration-fast) ease,
background var(--duration-fast) ease;
}
.ticket-btn:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
/* Недоступная (нет билетов / продажа закрыта) */
.ticket-btn[disabled],
.ticket-btn[aria-disabled="true"] {
opacity: 0.30;
pointer-events: none;
cursor: default;
}
/* Primary: чёрная заливка, белый текст */
.ticket-btn--primary {
background: var(--color-black-soft);
color: var(--color-white);
border: none;
}
.ticket-btn--primary:hover { opacity: 0.8; }
/* Secondary: прозрачный фон, чёрный бордер (fallback, когда у билета нет партнёра) */
.ticket-btn--secondary {
background: transparent;
color: var(--color-black-soft);
border: 1px solid var(--color-black-soft);
}
.ticket-btn--secondary:hover { opacity: 0.8; }
/* СТАТУСЫ ВМЕСТО КНОПКИ ПОКУПКИ.
Три случая, когда покупать нечего: билеты кончились (--sold),
продажи ещё не открыты (--soon), показ отменён (--canceled).
Ставятся ВМЕСТО пары «Купить билеты» + партнёрская — один элемент
на всю ширину обёртки.
Общий вид: габарит .ticket-btn (60px, Extended, 18→20px), плашка
10% чёрного, рамки нет. Различает их только цвет текста:
--sold чёрный — нейтральная констатация факта
--soon красный — акцент, за показом стоит следить
--canceled красный — акцент, показ не состоится
Плотность фона именно 10%: на более плотной плашке фирменный
красный не добирает порог WCAG AA (на 15% — 4,2:1 при норме 4,5).
На 10% красный даёт 5,3:1, чёрный — 17:1. Не затемнять.
Элемент — , а не : кликать некуда, ссылка без href
не нужна и сама выпадает из tab-порядка (не требуются ни
tabindex="-1", ни aria-disabled).
Билеты проданы
*/
.ticket-btn--sold,
.ticket-btn--soon,
.ticket-btn--canceled {
background: var(--color-black-soft-10);
border: none;
cursor: default;
pointer-events: none;
user-select: none;
}
.ticket-btn--sold { color: var(--color-black-soft); }
.ticket-btn--soon { color: var(--color-brand); }
.ticket-btn--canceled { color: var(--color-brand); }
/* Общий disabled-стиль .ticket-btn гасит кнопку до opacity .30 —
статусам это не нужно: и серая плашка, и текст должны читаться
в полную силу.
Специфичность :is() равна самому «тяжёлому» селектору внутри, то
есть классу — итог (0,2,0), ровно как у .ticket-btn[aria-disabled].
При равной специфичности выигрывает порядок в файле, поэтому
правило обязано стоять ПОСЛЕ общего. Не переносить выше. */
:is(.ticket-btn--sold, .ticket-btn--soon, .ticket-btn--canceled):is([disabled], [aria-disabled="true"], :hover) {
opacity: 1;
}
/* Partner — СЛОТ. Вёрстка фиксирует только габарит и доступность.
Оформление (рамка, цвета, лого, разделители) приносит конкретный
партнёр своим модификатором (--ticketland и т.п.) — базовый бренд
не навязывается. CMS кладёт внутрь только ИНЛАЙН-контент (img, svg,
span, текст), без вложенных /