/* ═══════════════════════════════════════════════════════════════════════════ Tournament Detail v2 — Champions League broadcast aesthetic Matches the patterns shipped on www/tournaments.html (.tcard, .tstatus, ticket-notch cards, engraved Marcellus, Switzer body). Tokens from css/shared/design-tokens.css. Base reset from css/shared/base.css. This stylesheet is scoped to `.tdv2-page` and only escapes that scope for - native styling (broadcast-dialog.js wires #tdv2-dialog) - toast strap (top of viewport) - bracket utility shims (.d-flex etc — see "Bootstrap-compat shims" block) ═══════════════════════════════════════════════════════════════════════════ */ /* ── [hidden] respects local display rules ───────────────────────────────── */ .tdv2-page [hidden], .tdv2-dialog[hidden], [hidden].tdv2-page, [hidden].tdv2-toast { display: none !important; } /* ── Page-local tokens (extends design-tokens.css; not lifted to :root yet). The dialog and the toast are appended to , outside .tdv2-page, so they carry the tokens too. Without them their background and border resolve to nothing and the page shows through. */ .tdv2-page, .tdv2-dialog, .tdv2-toast { --tdv2-bg-page: oklch(0.08 0.025 260); --tdv2-bg-card: oklch(0.14 0.030 258); --tdv2-hairline: color-mix(in oklch, var(--accent) 18%, transparent); --tdv2-hairline-strong: color-mix(in oklch, var(--accent) 35%, transparent); --tdv2-live: oklch(0.74 0.18 145); --tdv2-open: oklch(0.74 0.18 155); --tdv2-upcoming: oklch(0.78 0.16 220); --tdv2-past: oklch(0.55 0.03 260); } .tdv2-page { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-16); position: relative; } @media (max-width: 540px) { .tdv2-page { padding: var(--space-6) var(--space-3) var(--space-12); } } /* ═══════════════════════════════════════════════════════════════════════════ 1. STATUS BANNER (Draft / Cancelled — broadcast strap) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; background: var(--bg-elevated); border: 1px solid var(--border); position: relative; overflow: hidden; } .tdv2-banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; } .tdv2-banner[data-kind="draft"] { color: var(--accent-warm); background: var(--accent-warm-10); border-color: var(--accent-warm-30); } .tdv2-banner[data-kind="cancelled"] { color: var(--danger); background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); } /* ═══════════════════════════════════════════════════════════════════════════ 2. HEADER (eyebrow + engraved title + meta strip) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-header { position: relative; margin-bottom: var(--space-6); padding-top: var(--space-2); } .tdv2-header__eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.20em; color: var(--accent-warm); margin: 0 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); } .tdv2-header__eyebrow::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--accent-warm); flex-shrink: 0; } .tdv2-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .tdv2-header__title { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: 0.01em; color: var(--text-primary); margin: 0; flex: 1 1 auto; min-width: 0; } .tdv2-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Engraved hairline beneath the title — silver-tinted, gradient fade to right. */ .tdv2-header__title::after { content: ''; display: block; height: 1px; margin-top: var(--space-3); background: linear-gradient(90deg, var(--tdv2-hairline-strong), transparent 70%); } /* ── Meta strip — programme-style horizontal info row ──────────────────── */ .tdv2-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: 0; padding: 0; } .tdv2-meta__item { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); letter-spacing: 0.01em; } .tdv2-meta__item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; } /* ── Status pill ───────────────────────────────────────────────────────── */ .tdv2-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--font-heading); font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.18em; border-radius: 3px; border: 1px solid; } .tdv2-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .tdv2-status[data-status="upcoming"], .tdv2-status[data-status="draft"] { color: var(--accent-warm); border-color: var(--accent-warm-30); background: var(--accent-warm-10); } .tdv2-status[data-status="registration_open"] { color: var(--success); border-color: var(--success-30); background: var(--success-10); } .tdv2-status[data-status="in_progress"] { color: var(--success); border-color: var(--success-30); background: var(--success-10); } .tdv2-status[data-status="completed"] { color: var(--accent); border-color: var(--border-accent); background: var(--accent-10); } .tdv2-status[data-status="cancelled"] { color: var(--danger); border-color: rgba(239,68,68,0.30); background: rgba(239,68,68,0.10); } .tdv2-status[data-status="registration_open"]::before, .tdv2-status[data-status="in_progress"]::before { animation: tdv2DotPulse 1.6s var(--ease-out) infinite; } @keyframes tdv2DotPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } } /* ── Icon buttons (share, admin) ───────────────────────────────────────── */ .tdv2-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), background var(--duration) var(--ease-out); text-decoration: none; } .tdv2-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-surface); } .tdv2-icon-btn--admin { color: var(--accent-warm); } .tdv2-icon-btn--admin:hover { color: var(--accent-warm-hover); border-color: var(--accent-warm); } .tdv2-icon-btn svg { width: 16px; height: 16px; } /* ═══════════════════════════════════════════════════════════════════════════ 3. SPONSOR STRIP ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-sponsor { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; } .tdv2-sponsor::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--accent-warm-10), transparent 60%); pointer-events: none; z-index: 0; } .tdv2-sponsor > * { position: relative; z-index: 1; } .tdv2-sponsor__logo { max-height: 40px; max-width: 100px; border-radius: 4px; object-fit: contain; } .tdv2-sponsor__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tdv2-sponsor__label { font-family: var(--font-heading); font-size: 0.65rem; font-weight: var(--weight-bold); letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent-warm); } .tdv2-sponsor__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════════════════ 4. MAIN LAYOUT — vanilla CSS grid (no Bootstrap) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); } @media (max-width: 900px) { .tdv2-overview { grid-template-columns: 1fr; } } .tdv2-overview__main { min-width: 0; } .tdv2-overview__side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } /* ═══════════════════════════════════════════════════════════════════════════ 5. WINNER BANNER (completed state) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-winner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); background: linear-gradient(135deg, var(--accent-10), transparent 60%), var(--tdv2-bg-card); border: 1px solid var(--tdv2-hairline); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .tdv2-winner::after { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 60%); } .tdv2-winner__trophy { font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 4px 12px rgba(200,207,216,0.25)); } .tdv2-winner__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; } .tdv2-winner__label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .tdv2-winner__team { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--text-primary); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: var(--space-3); } .tdv2-winner__badge { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--tdv2-hairline); } /* ═══════════════════════════════════════════════════════════════════════════ 6. STATUS CARDS (upcoming / registration_open / generating bracket) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-statuscard { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .tdv2-statuscard::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 2px; opacity: 0; transition: opacity 0.35s var(--ease-out); } .tdv2-statuscard--upcoming::before { opacity: 1; background: linear-gradient(90deg, var(--accent-warm), transparent 60%); } .tdv2-statuscard--registration::before { opacity: 1; background: linear-gradient(90deg, var(--success), transparent 60%); } .tdv2-statuscard--generating::before { opacity: 1; background: linear-gradient(90deg, var(--accent), transparent 60%); } .tdv2-statuscard__eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 var(--space-2); } .tdv2-statuscard--upcoming .tdv2-statuscard__eyebrow { color: var(--accent-warm); } .tdv2-statuscard--registration .tdv2-statuscard__eyebrow { color: var(--success); } .tdv2-statuscard--generating .tdv2-statuscard__eyebrow { color: var(--accent); } .tdv2-statuscard__heading { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; letter-spacing: 0.01em; color: var(--text-primary); margin: 0 0 var(--space-3); } .tdv2-statuscard__heading [data-countdown] { color: var(--accent-warm); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .tdv2-statuscard__sub { color: var(--text-secondary); margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); } .tdv2-statuscard--registration .tdv2-statuscard__heading [data-countdown] { color: var(--success); } /* Generating bracket — shimmer */ .tdv2-statuscard--generating .tdv2-statuscard__heading::after { content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-left: var(--space-2); border-radius: 50%; background: var(--accent); animation: tdv2Blink 1s ease-in-out infinite; vertical-align: middle; } @keyframes tdv2Blink { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } /* ═══════════════════════════════════════════════════════════════════════════ 7. REGISTRATION CTA (ticket-notch card matching the list) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-cta { --notch-r: 8px; padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; position: relative; isolation: isolate; } .tdv2-cta--registration { border-color: var(--accent-warm-30); } .tdv2-cta--registered { border-color: var(--success-30); background: var(--success-10); } .tdv2-cta--auth { border-color: var(--border-strong); } .tdv2-cta__copy { flex: 1 1 240px; min-width: 0; } .tdv2-cta__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.5rem); color: var(--text-primary); margin: 0 0 var(--space-1); letter-spacing: 0.01em; } .tdv2-cta__sub { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; } .tdv2-cta--registered .tdv2-cta__title { color: var(--success); } .tdv2-cta--registered .tdv2-cta__title::before { content: '✓ '; color: var(--success); margin-right: var(--space-1); } .tdv2-cta__btn { flex-shrink: 0; } /* Inline secondary action (e.g. Withdraw) — sits to the right of the copy. No divider. `margin-left:auto` keeps it pinned to the right even when the row wraps on narrow viewports (column direction overrides this further). */ .tdv2-cta__secondary { flex-shrink: 0; margin-left: auto; display: flex; justify-content: flex-end; } /* Primary CTA button — silver chrome (matches list page's tcard__cta) */ .tdv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); min-height: 44px; background: var(--accent); color: var(--bg-deep); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); text-decoration: none; } .tdv2-btn:hover { background: var(--accent-hover); color: var(--bg-deep); /* explicit — beats a:hover cascade */ transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); } .tdv2-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .tdv2-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .tdv2-btn--ghost:hover { background: var(--bg-surface); color: var(--accent); border-color: var(--accent); } /* Quiet by default — reads as a muted text link with a faint warm-red tint; the full danger colour only surfaces on hover so it doesn't compete with the primary state of the card. */ .tdv2-btn--danger { background: transparent; color: rgba(239,68,68,0.70); border-color: rgba(239,68,68,0.18); } .tdv2-btn--danger:hover { background: rgba(239,68,68,0.08); color: var(--danger); border-color: rgba(239,68,68,0.45); } .tdv2-btn--warm { background: var(--accent-warm); color: var(--bg-deep); } .tdv2-btn--warm:hover { background: var(--accent-warm-hover); color: var(--bg-deep); box-shadow: 0 4px 16px var(--accent-warm-glow); } .tdv2-btn--lg { min-height: 52px; padding-block: var(--space-4); font-size: var(--text-base); } .tdv2-btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } /* Disabled state — used by the registration CTA when no roster meets the 11-player minimum. Stays visually present (so users see what they CAN'T do yet) but rejects clicks/focus-as-trigger. */ .tdv2-btn--disabled, .tdv2-btn--disabled:hover, .tdv2-btn--disabled:focus-visible { background: var(--bg-surface); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* Inline link inside CTA sub-copy ("Manage roster →"). */ .tdv2-cta__link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--weight-semibold); } .tdv2-cta__link:hover { color: var(--accent-hover); } /* ═══════════════════════════════════════════════════════════════════════════ 7b. LINEUP REMINDER (sits under the registration CTA, above the grid) Deliberately lighter than .tdv2-cta: a captain with an unset XI sees "your team is in" directly above this, and two ticket cards in a row read as one message said twice. Same card tokens, half the weight, plus the 3px left rule .tdv2-banner uses. ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-lineup-reminder { /* Not sticky. The v1 rule pinned it at top:80px, from when it sat above the whole overview. Here it sits directly above the grid it points into, and pinned it covered the top 58px of the captain card that Build XI had just centred — measured at a 350px card in a 720px viewport. `relative` is for the ::before rule. */ position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); background: var(--tdv2-bg-card); border: 1px solid var(--tdv2-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; /* clips the left rule to the radius */ } .tdv2-lineup-reminder::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; /* Green, like the check: silver at 3px reads as a thicker border next to the accent-tinted one. .tdv2-banner takes the same rule in its own colour. */ background: var(--success); } .tdv2-lineup-reminder__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--success-20); color: var(--success); font-size: 0.75rem; font-weight: var(--weight-bold); line-height: 1; } .tdv2-lineup-reminder__copy { flex: 1 1 200px; min-width: 0; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); } .tdv2-lineup-reminder__copy strong { color: var(--text-primary); font-weight: var(--weight-semibold); } .tdv2-lineup-reminder__build { flex-shrink: 0; margin-left: auto; } .tdv2-lineup-reminder__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--text-xl); line-height: 1; cursor: pointer; } .tdv2-lineup-reminder__close:hover { color: var(--text-primary); background: var(--accent-10); } /* ═══════════════════════════════════════════════════════════════════════════ 8. PARTICIPANTS GRID ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-section-heading { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: var(--text-2xl); color: var(--text-primary); letter-spacing: 0.01em; margin: var(--space-6) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--tdv2-hairline); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: baseline; column-gap: var(--space-3); } .tdv2-section-heading::before { content: attr(data-eyebrow); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent-warm); grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--space-1); } .tdv2-section-heading__title { grid-column: 1; grid-row: 2; } .tdv2-section-heading__count { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: 0.04em; grid-column: 2; grid-row: 2; justify-self: end; align-self: baseline; } .tdv2-section-heading__count:empty { display: none; } .tdv2-participants { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } .tdv2-participant { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); min-height: 56px; } .tdv2-participant:hover { border-color: var(--border-strong); transform: translateY(-1px); } .tdv2-participant--yours { border-color: var(--tdv2-hairline-strong); background: linear-gradient(135deg, var(--accent-10), transparent 60%), var(--tdv2-bg-card); } /* Card identity comes from the silver-tinted border + diagonal --accent-10 gradient on .tdv2-participant--yours. An additional engraved ::after hairline implied a "header section" with the padding-top zone reading as an empty band, so the rule is intentionally absent here. */ .tdv2-participant__badge { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-surface); } .tdv2-participant__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .tdv2-participant__name { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tdv2-participant__seed { font-family: var(--font-heading); font-size: 0.65rem; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .tdv2-participant__pill { font-family: var(--font-heading); font-size: 0.625rem; font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: var(--accent-10); border: 1px solid var(--accent-30); padding: 4px 10px 4px 8px; border-radius: 999px; margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .tdv2-participant__pill::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-30); flex-shrink: 0; } /* Admin-only Remove entry, on an unpaid card before Start. It takes its own line under Mark entry paid, in the danger colour and without the dot. */ .tdv2-participant__pill--remove { display: flex; width: fit-content; margin: var(--space-2) 0 0; color: var(--danger); background: transparent; border-color: rgba(239,68,68,0.35); cursor: pointer; } .tdv2-participant__pill--remove::before { display: none; } .tdv2-participant__pill--remove:hover { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.60); } .tdv2-participant--captain .tdv2-participant__pill--remove { margin-top: 0; } /* Captain card variant — full row, vertical layout, room for lineup form */ .tdv2-participant--captain { flex-direction: column; align-items: stretch; grid-column: 1 / -1; gap: var(--space-3); padding: var(--space-4) var(--space-5); } .tdv2-participant--captain .tdv2-participant__head { display: flex; align-items: center; gap: var(--space-3); } .tdv2-participant__lineup-host { /* Where mountLineupForm() injects its DOM. */ margin-top: var(--space-2); } /* One-shot pulse on the captain's card, straight after registering. Added and removed by consumeJustRegistered(); nothing else uses it. */ .tdv2-participant--just-joined { animation: tdv2-participant-pulse 2s var(--ease-out) 1; } @keyframes tdv2-participant-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 12px var(--accent-glow); } 100% { box-shadow: 0 0 0 0 transparent; } } /* Empty state */ .tdv2-participants__empty { grid-column: 1 / -1; text-align: center; padding: var(--space-8) var(--space-6); background: var(--tdv2-bg-card); border: 1px dashed var(--tdv2-hairline); border-radius: var(--radius-lg); color: var(--text-secondary); } .tdv2-participants__empty strong { display: block; font-family: var(--font-display); font-weight: var(--weight-normal); color: var(--text-primary); font-size: var(--text-xl); margin-bottom: var(--space-2); letter-spacing: 0.01em; } .tdv2-participants__empty p { margin: 0; font-size: var(--text-sm); } /* ═══════════════════════════════════════════════════════════════════════════ 9. SIDEBAR: COMPETITION INFO (programme card) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-info { padding: var(--space-5); background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .tdv2-info__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--tdv2-hairline); } .tdv2-info__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); margin: 0; letter-spacing: 0.01em; } .tdv2-info__status { font-family: var(--font-heading); font-size: 0.65rem; font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 3px; } .tdv2-info__status--in_progress { color: var(--success); border-color: var(--success-30); background: var(--success-10); } .tdv2-info__status--completed { color: var(--accent); border-color: var(--border-accent); background: var(--accent-10); } .tdv2-info__status--registration_open { color: var(--success); border-color: var(--success-30); background: var(--success-10); } .tdv2-info__status--upcoming { color: var(--accent-warm); border-color: var(--accent-warm-30); background: var(--accent-warm-10); } .tdv2-info__row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px dashed var(--tdv2-hairline); gap: var(--space-3); } .tdv2-info__row:last-child { border-bottom: none; } .tdv2-info__label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .tdv2-info__value { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); text-align: right; letter-spacing: 0.01em; } /* ── "View full rules" trigger (under the sidebar info rows) ─────────────── */ .tdv2-info__rules-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: color-mix(in oklch, var(--accent) 8%, transparent); border: 1px solid var(--tdv2-hairline-strong); border-radius: var(--radius-md); color: var(--accent); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .tdv2-info__rules-btn:hover, .tdv2-info__rules-btn:focus-visible { background: color-mix(in oklch, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--text-primary); outline: none; } .tdv2-info__rules-btn span:last-child { font-size: var(--text-sm); letter-spacing: 0; opacity: 0.7; } .tdv2-info__rules-btn:hover span:last-child, .tdv2-info__rules-btn:focus-visible span:last-child { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ 10. MINI-SCOREBOARD (in_progress: row of live match chips in header) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-scoreboard { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-4) 0 var(--space-2); margin: 0 0 var(--space-4); scrollbar-width: thin; scrollbar-color: var(--bg-surface) transparent; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .tdv2-scoreboard::-webkit-scrollbar { height: 6px; } .tdv2-scoreboard::-webkit-scrollbar-thumb { background: var(--bg-surface); border-radius: 3px; } .tdv2-scoreboard::-webkit-scrollbar-track { background: transparent; } .tdv2-score { flex-shrink: 0; scroll-snap-align: start; display: flex; align-items: stretch; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 240px; cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); position: relative; } .tdv2-score:hover { border-color: var(--border-strong); transform: translateY(-1px); } .tdv2-score--live { border-color: var(--success-30); background: linear-gradient(135deg, var(--success-10), transparent 60%), var(--tdv2-bg-card); } .tdv2-score--live::after { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--success); border-radius: var(--radius-md) var(--radius-md) 0 0; animation: tdv2Pulse 1.6s var(--ease-out) infinite; } .tdv2-score__teams { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .tdv2-score__team { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); color: var(--text-secondary); } .tdv2-score__team--winner { color: var(--text-primary); font-weight: var(--weight-semibold); } .tdv2-score__badge { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-surface); } .tdv2-score__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tdv2-score__nums { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-primary); font-variant-numeric: tabular-nums; padding-left: var(--space-2); border-left: 1px dashed var(--tdv2-hairline); } .tdv2-score__minute { font-family: var(--font-heading); font-size: 0.55rem; font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--success); position: absolute; top: 6px; right: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ 11. TABS (dot-indicator like the list page) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--tdv2-hairline); margin: var(--space-6) 0 var(--space-5); padding-bottom: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tdv2-tabs::-webkit-scrollbar { display: none; } .tdv2-tab { position: relative; padding: var(--space-4) var(--space-5); background: none; border: none; color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color var(--duration) var(--ease-out); display: inline-flex; align-items: center; gap: var(--space-2); } .tdv2-tab::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0); transition: transform var(--duration) var(--ease-out); } .tdv2-tab:hover { color: var(--text-secondary); } .tdv2-tab.is-active { color: var(--accent); } .tdv2-tab.is-active::after { transform: translateX(-50%) scale(1); } .tdv2-tabs__count { font-family: var(--font-heading); font-size: 0.7rem; font-weight: var(--weight-bold); padding: 2px 7px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-secondary); letter-spacing: 0; line-height: 1.4; min-width: 20px; text-align: center; } .tdv2-tab.is-active .tdv2-tabs__count { background: var(--accent); color: var(--bg-deep); } /* Tab panels */ .tdv2-panels { margin-bottom: var(--space-8); } .tdv2-panel { display: none; } .tdv2-panel.is-active { display: block; animation: tdv2PanelIn 0.4s var(--ease-out) both; } @keyframes tdv2PanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tdv2-panel__empty { padding: var(--space-8) var(--space-6); text-align: center; background: var(--tdv2-bg-card); border: 1px dashed var(--tdv2-hairline); border-radius: var(--radius-lg); color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.02em; } .tdv2-bracket-host { min-height: 200px; padding: var(--space-2) 0; } /* ═══════════════════════════════════════════════════════════════════════════ 12. AD SLOTS (restyled as "PARTNER FEATURE" broadcast cards) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-ad { position: relative; display: block; background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 60%), var(--tdv2-bg-card); border: 1px dashed var(--tdv2-hairline); border-radius: var(--radius-md); margin: var(--space-4) 0; padding: var(--space-5); min-height: 90px; color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-xs); text-align: center; display: flex; align-items: center; justify-content: center; } .tdv2-ad::before { content: 'PARTNER FEATURE'; position: absolute; top: 8px; left: 12px; font-family: var(--font-heading); font-size: 0.55rem; font-weight: var(--weight-bold); letter-spacing: 0.20em; color: var(--accent-warm); opacity: 0.7; } .tdv2-ad--a { min-height: 250px; } .tdv2-ad--b { min-height: 90px; } .tdv2-ad--c { min-height: 90px; } .tdv2-ad--sponsor { border-style: solid; border-color: var(--accent-warm-30); } .tdv2-ad--sponsor::before { content: 'SPONSOR'; color: var(--accent-warm); opacity: 1; } /* Mobile sticky D — keep functional but restyle */ .tdv2-ad-mobile { display: none; } @media (max-width: 768px) { .tdv2-ad-mobile:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 50px; background: var(--tdv2-bg-card); border-top: 1px solid var(--tdv2-hairline); z-index: 900; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin: 0; padding: 0; } /* Push content above sticky D */ body.tdv2-has-mobile-ad { padding-bottom: 50px; } } /* ═══════════════════════════════════════════════════════════════════════════ 13. PAGE ERROR (tournament not found) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-page-error { text-align: center; padding: var(--space-16) var(--space-6); } .tdv2-page-error__title { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: clamp(2rem, 5vw, 3rem); color: var(--text-primary); margin: 0 0 var(--space-3); letter-spacing: 0.01em; } .tdv2-page-error__body { color: var(--text-secondary); margin: 0 0 var(--space-6); font-size: var(--text-base); } /* ═══════════════════════════════════════════════════════════════════════════ 14. SLIDE-OVER MATCH PANEL — extends slide-over.css with broadcast styling ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-match { display: flex; flex-direction: column; gap: var(--space-4); } .tdv2-match__status { align-self: flex-start; font-family: var(--font-heading); font-size: 0.65rem; font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 12px 4px 14px; border-radius: 3px; border: 1px solid; position: relative; } .tdv2-match__status::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; } .tdv2-match__status--live { color: var(--success); border-color: var(--success-30); background: var(--success-10); } .tdv2-match__status--completed { color: var(--accent); border-color: var(--border-accent); background: var(--accent-10); } .tdv2-match__status--scheduled { color: var(--text-muted); border-color: var(--border); background: transparent; } .tdv2-match__status--disputed { color: var(--accent-warm); border-color: var(--accent-warm-30); background: var(--accent-warm-10); } .tdv2-match__status--cancelled { color: var(--danger); border-color: rgba(239,68,68,0.30); background: rgba(239,68,68,0.10); } .tdv2-match__teams { display: flex; flex-direction: column; gap: var(--space-2); } .tdv2-match__team { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); } .tdv2-match__team--winner { border-color: var(--tdv2-hairline-strong); background: linear-gradient(135deg, var(--accent-10), transparent 60%), var(--tdv2-bg-card); } .tdv2-match__team--winner .tdv2-match__team-score { color: var(--accent); } .tdv2-match__team-name { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--text-primary); } .tdv2-match__team-score { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; } .tdv2-match__meta { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; } .tdv2-match__meta a { color: var(--accent); } .tdv2-match__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px dashed var(--tdv2-hairline); } /* Stream embed slot — when match has a stream URL */ .tdv2-match__stream { position: relative; aspect-ratio: 16 / 9; background: var(--bg-deep); border: 1px solid var(--tdv2-hairline); border-radius: var(--radius-md); overflow: hidden; } .tdv2-match__stream iframe { width: 100%; height: 100%; border: 0; } .tdv2-match__stream-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2); color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════════════ 15. ADMIN PANEL (slide-over) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-admin h3 { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: var(--text-2xl); letter-spacing: 0.01em; margin: 0 0 var(--space-4); } .tdv2-admin__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px dashed var(--tdv2-hairline); } .tdv2-admin__section { margin-top: var(--space-5); } .tdv2-admin__section h4 { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent-warm); margin: 0 0 var(--space-3); } .tdv2-admin__muted { color: var(--text-muted); font-size: var(--text-sm); margin: 0; padding: var(--space-3) 0; } .tdv2-disputes { display: flex; flex-direction: column; gap: var(--space-2); } .tdv2-disputes__card { background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); position: relative; overflow: hidden; } .tdv2-disputes__card::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: linear-gradient(90deg, var(--accent-warm), transparent 60%); } .tdv2-disputes__head { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.01em; margin-bottom: var(--space-1); } .tdv2-disputes__meta { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-heading); letter-spacing: 0.06em; } .tdv2-disputes__reason { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; line-height: var(--leading-normal); } .tdv2-disputes__evidence { margin: 0 0 var(--space-2); font-size: var(--text-xs); word-break: break-all; } .tdv2-disputes__evidence a { color: var(--accent); } .tdv2-disputes__sent { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); } .tdv2-disputes__sent p { margin: 0; } .tdv2-disputes__fixture { color: var(--text-primary); font-weight: var(--weight-semibold); } .tdv2-disputes__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } .tdv2-disputes__actions button[disabled] { opacity: 0.45; cursor: not-allowed; } .tdv2-lineups { display: flex; flex-direction: column; gap: var(--space-2); } .tdv2-lineups__card { background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); } .tdv2-lineups__head { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.01em; margin-bottom: var(--space-1); } .tdv2-lineups__meta { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-heading); letter-spacing: 0.06em; } .tdv2-lineups__reason { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; } .tdv2-lineups__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════════════════════ 16. BROADCAST DIALOG (replaces SweetAlert2) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-dialog { padding: 0; border: 1px solid var(--tdv2-hairline-strong); border-radius: var(--radius-lg); background: var(--tdv2-bg-card); color: var(--text-primary); max-width: min(480px, calc(100vw - var(--space-6))); width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02), inset 0 1px 0 rgba(255,255,255,0.03); /* Fixed, as the UA sets for dialog:modal. In the top layer a static or relative dialog is laid out as absolute against the initial containing block, so one opened with the page scrolled lands off screen. */ position: fixed; } .tdv2-dialog::backdrop { background: rgba(2, 6, 23, 0.78); backdrop-filter: blur(4px); } .tdv2-dialog::before { /* Engraved silver hairline at the top. Flush to the inside of the border — extending past with `inset: -1px -1px ...` would push 1px past the dialog's content box and trigger 's default horizontal scroll. */ content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); pointer-events: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .tdv2-dialog__form { display: flex; flex-direction: column; margin: 0; } .tdv2-dialog__header { padding: var(--space-5) var(--space-6) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .tdv2-dialog__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); } .tdv2-dialog__icon svg { width: 22px; height: 22px; } .tdv2-dialog__icon--success { color: var(--success); border-color: var(--success-30); background: var(--success-10); } .tdv2-dialog__icon--info { color: var(--accent); border-color: var(--border-accent); background: var(--accent-10); } .tdv2-dialog__icon--warning { color: var(--accent-warm); border-color: var(--accent-warm-30); background: var(--accent-warm-10); } .tdv2-dialog__icon--error { color: var(--danger); border-color: rgba(239,68,68,0.30); background: rgba(239,68,68,0.10); } .tdv2-dialog__icon--question{ color: var(--accent); border-color: var(--border-accent); background: var(--accent-10); } .tdv2-dialog__title { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: var(--text-xl); letter-spacing: 0.01em; color: var(--text-primary); margin: 0; line-height: 1.2; } .tdv2-dialog__body { padding: 0 var(--space-6) var(--space-4); } .tdv2-dialog__text { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; } .tdv2-dialog__html { display: flex; flex-direction: column; gap: var(--space-3); } .tdv2-dialog__html .form-label, .tdv2-dialog__field-label { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2); } .tdv2-dialog__html .swal2-input, .tdv2-dialog__html .swal2-textarea, .tdv2-dialog__html input[type="text"], .tdv2-dialog__html input[type="number"], .tdv2-dialog__html input[type="url"], .tdv2-dialog__html input[type="email"], .tdv2-dialog__html select, .tdv2-dialog__html textarea { width: 100%; padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); font-variant-numeric: tabular-nums; margin: 0; box-sizing: border-box; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .tdv2-dialog__html textarea { min-height: 100px; resize: vertical; line-height: var(--leading-normal); font-family: var(--font-body); } .tdv2-dialog__html input:focus, .tdv2-dialog__html textarea:focus, .tdv2-dialog__html select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .tdv2-dialog__html input::placeholder, .tdv2-dialog__html textarea::placeholder { color: var(--text-muted); } /* Dispute modal — field stacks, character counter, consent check */ .tdv2-dialog__html .dispute-modal__field { text-align: left; } .tdv2-dialog__html .dispute-modal__counter { display: block; font-family: var(--font-heading); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.06em; margin-top: var(--space-2); } .tdv2-dialog__html .dispute-modal__counter--ok { color: var(--success); } .tdv2-dialog__html .dispute-modal__check { display: flex; align-items: flex-start; gap: var(--space-2); text-align: left; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); } .tdv2-dialog__html .dispute-modal__check input[type="checkbox"], .tdv2-dialog__html .dispute-modal__check input[type="radio"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent-warm); } /* Who went through on penalties: a pair of radios in a knockout score dialog */ .tdv2-dialog__html .dispute-modal__through { border: 0; margin: 0; padding: 0; min-width: 0; } .tdv2-dialog__html .dispute-modal__through legend { padding: 0; } .tdv2-dialog__html .dispute-modal__through .dispute-modal__check + .dispute-modal__check { margin-top: var(--space-2); } .tdv2-dialog__html .dispute-modal__hint { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); text-align: left; } .tdv2-dialog__html .dispute-modal__hint code { background: var(--bg-elevated); padding: 1px 6px; border-radius: 3px; font-size: 0.85em; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--accent); } .tdv2-dialog__validation { margin: var(--space-3) var(--space-6) 0; padding: var(--space-3) var(--space-4); background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.30); border-radius: var(--radius-sm); color: var(--danger); font-size: var(--text-sm); font-weight: var(--weight-medium); } .tdv2-dialog__footer { padding: var(--space-4) var(--space-6) var(--space-5); display: flex; gap: var(--space-3); justify-content: flex-end; border-top: 1px dashed var(--tdv2-hairline); margin-top: var(--space-2); } .tdv2-dialog__btn { /* Inherits .tdv2-btn aesthetics — defined inline rather than @extend */ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); min-height: 42px; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .tdv2-dialog__btn--primary { background: var(--accent); color: var(--bg-deep); } .tdv2-dialog__btn--primary:hover { background: var(--accent-hover); color: var(--bg-deep); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); } .tdv2-dialog__btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); } .tdv2-dialog__btn--ghost:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--text-secondary); } /* A cash entry's Registered dialog: the pay link is the action, so OK steps back. */ .tdv2-dialog--pay .tdv2-dialog__btn--primary { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); } .tdv2-dialog--pay .tdv2-dialog__btn--primary:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--text-secondary); transform: none; box-shadow: none; } /* ═══════════════════════════════════════════════════════════════════════════ 17. BROADCAST TOAST (top-of-viewport, non-blocking) ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-toast { position: fixed; top: 80px; /* under the navbar */ left: 50%; transform: translate(-50%, -8px); z-index: 10000; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--tdv2-bg-card); border: 1px solid var(--tdv2-hairline-strong); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); max-width: calc(100vw - var(--space-6)); } .tdv2-toast.is-open { opacity: 1; transform: translate(-50%, 0); } .tdv2-toast__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .tdv2-toast__icon svg { width: 16px; height: 16px; } .tdv2-toast__icon--success { color: var(--success); background: var(--success-10); } .tdv2-toast__icon--info { color: var(--accent); background: var(--accent-10); } .tdv2-toast__icon--warning { color: var(--accent-warm); background: var(--accent-warm-10); } .tdv2-toast__icon--error { color: var(--danger); background: rgba(239,68,68,0.10); } .tdv2-toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tdv2-toast__title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: 0.04em; } .tdv2-toast__text { font-size: var(--text-xs); color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════════════════ 18. PREDICTIONS UI (lightly retokened — full redesign is a follow-up) ═══════════════════════════════════════════════════════════════════════════ */ #predictionsSection h4 { font-family: var(--font-display); font-weight: var(--weight-normal); font-size: var(--text-2xl); letter-spacing: 0.01em; color: var(--text-primary); margin: 0 0 var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); } #predictionsSection .nav-tabs { display: flex; gap: var(--space-1); list-style: none; padding: 0; margin: 0 0 var(--space-4); border-bottom: 1px solid var(--tdv2-hairline); } #predictionsSection .nav-item { list-style: none; } #predictionsSection .nav-link { background: none; border: none; padding: var(--space-3) var(--space-4); color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; position: relative; transition: color var(--duration) var(--ease-out); } #predictionsSection .nav-link.active { color: var(--accent); } #predictionsSection .nav-link.active::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 24px; height: 2px; background: var(--accent); transform: translateX(-50%); } #predictionsSection .tab-pane { display: none; } #predictionsSection .tab-pane.show.active { display: block; } #predictionsSection .card, #predictionsSection .card-static { background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0; margin-bottom: var(--space-2); } #predictionsSection .card-body { padding: var(--space-3) var(--space-4); } #predictionsSection .table { width: 100%; border-collapse: separate; border-spacing: 0; } #predictionsSection .table th { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: var(--space-3) var(--space-3); text-align: left; border-bottom: 1px solid var(--tdv2-hairline); } #predictionsSection .table td { padding: var(--space-3); color: var(--text-secondary); border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-size: var(--text-sm); } #predictionsSection .table td.text-success { color: var(--success); font-weight: var(--weight-semibold); } /* ═══════════════════════════════════════════════════════════════════════════ 19. BOOTSTRAP-COMPAT SHIMS — minimal utility classes for bracket-renderer and predictions, which we're not redesigning in this pass. ═══════════════════════════════════════════════════════════════════════════ */ .d-flex { display: flex; } .d-grid { display: grid; } .d-none { display: none; } .d-block { display: block; } .d-inline-block { display: inline-block; } .justify-content-between { justify-content: space-between; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .me-1 { margin-right: var(--space-1); } .me-2 { margin-right: var(--space-2); } .py-1 { padding-block: var(--space-1); } .py-2 { padding-block: var(--space-2); } .py-3 { padding-block: var(--space-3); } .px-2 { padding-inline: var(--space-2); } .px-3 { padding-inline: var(--space-3); } .border-bottom { border-bottom: 1px solid var(--border); } .border-secondary{ border-color: var(--border) !important; } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-info { color: var(--accent); } .text-warning { color: var(--accent-warm); } .text-white { color: var(--text-primary); } .text-primary { color: var(--text-primary); } .small { font-size: var(--text-xs); } .fw-bold { font-weight: var(--weight-bold); } .fw-semibold { font-weight: var(--weight-semibold); } /* Bootstrap badge shim — used in predictions */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 8px; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-secondary); } .badge.bg-secondary { background: var(--bg-surface); color: var(--text-secondary); } .badge.bg-info { background: var(--accent-10); color: var(--accent); border: 1px solid var(--border-accent); } .badge.bg-success { background: var(--success-10); color: var(--success); } .badge.bg-danger { background: rgba(239,68,68,0.10); color: var(--danger); } /* Bootstrap form shims (predictions uses .form-select) */ .form-select, .form-select-sm { padding: var(--space-2) var(--space-3); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); } .form-select:focus, .form-select-sm:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-input { width: 100%; padding: var(--space-2) var(--space-3); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-label { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2); } /* Bootstrap btn-* legacy shims for any leftover renderers */ .btn-accent { /* defined in components.css; keep working */ } .btn-outline { /* defined in components.css */ } .btn-success { background: var(--success); color: var(--bg-deep); border: 1px solid var(--success); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .btn-success:hover{ filter: brightness(1.1); } .btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(239,68,68,0.30); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .btn-danger:hover { background: rgba(239,68,68,0.10); border-color: var(--danger); } .btn-warning { background: transparent; color: var(--accent-warm); border: 1px solid var(--accent-warm-30); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .btn-warning:hover{ background: var(--accent-warm-10); border-color: var(--accent-warm); } .btn-outline-danger { background: transparent; color: var(--danger); border: 1px solid rgba(239,68,68,0.30); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .btn-outline-danger:hover { background: rgba(239,68,68,0.10); border-color: var(--danger); } .btn-link-muted { background: none; border: none; color: var(--text-muted); padding: var(--space-2) var(--space-3); cursor: pointer; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } .btn-link-muted:hover { color: var(--text-secondary); } .btn-sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); min-height: 36px; } .btn-lg { padding: var(--space-4) var(--space-6); min-height: 52px; } /* ═══════════════════════════════════════════════════════════════════════════ 20. RESPONSIVE FINE-TUNING ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .tdv2-header__top { flex-direction: column; align-items: flex-start; } .tdv2-header__actions { align-self: stretch; justify-content: space-between; } .tdv2-cta { flex-direction: column; align-items: stretch; } /* In a column the 240px basis from the row layout sets the height, which left an empty band between the text and the button. */ .tdv2-cta__copy { flex-basis: auto; } .tdv2-cta__btn { width: 100%; } .tdv2-section-heading { flex-wrap: wrap; } .tdv2-meta { gap: var(--space-3) var(--space-5); } .tdv2-sponsor { flex-direction: column; align-items: flex-start; text-align: left; } .tdv2-dialog { max-width: calc(100vw - var(--space-4)); } .tdv2-dialog__footer { flex-direction: column-reverse; } .tdv2-dialog__btn { width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ 21. LEGACY CSS NEUTRALIZERS The old tournament-detail.css is still loaded for bracket-renderer classes. These rules neutralize the parts that would conflict with v2 chrome. ═══════════════════════════════════════════════════════════════════════════ */ /* The old CSS adds `body { padding-bottom: 50px }` inside its mobile media query unconditionally — even when the mobile ad isn't visible. Reset it and let `body.tdv2-has-mobile-ad` re-apply when the ad is actually shown. */ @media (max-width: 768px) { body:not(.tdv2-has-mobile-ad) { padding-bottom: 0 !important; } } /* The old `.tournament-header__title::after` etc. doesn't apply (DOM uses .tdv2-header) so no neutralizer needed there. */ /* Bracket-host receives both legacy `.bracket-host` and new `.tdv2-bracket-host`; the legacy file already styles `.bracket-host` minimally. Add a touch of broadcast chrome around the bracket card so it doesn't sit naked on the page. */ .tdv2-bracket-host { position: relative; } .tdv2-bracket-host > .bracket-wrapper { background: var(--tdv2-bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); overflow-x: auto; } .tdv2-bracket-host .match-card { background: var(--bg-elevated); border-color: var(--border); border-radius: var(--radius-sm); } .tdv2-bracket-host .match-card.match-card--your-team { border-color: var(--tdv2-hairline-strong); background: linear-gradient(135deg, var(--accent-10), transparent 60%), var(--bg-elevated); } /* The legacy file uses `border-left: 2px solid` on your-team match cards which violates the side-stripe ban. Override with the engraved-hairline top accent instead. */ .tdv2-bracket-host .match-card.match-card--your-team { border-left-width: 1px !important; border-left-color: var(--tdv2-hairline-strong) !important; position: relative; } .tdv2-bracket-host .match-card.match-card--your-team::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); pointer-events: none; } /* Same de-stripe for promotion rows in standings */ .tdv2-bracket-host .standings-table tr.promotes td:first-child { border-left: none !important; } .tdv2-bracket-host .standings-table tr.promotes { background: var(--accent-warm-10); } .tdv2-bracket-host .standings-table tr.promotes td:nth-child(2)::before { content: '▸ '; color: var(--accent-warm); font-weight: bold; } /* group-matches uses a left-border accent — replace with leading dot */ .tdv2-bracket-host .group-matches__date { border-left: none !important; padding-left: 0 !important; position: relative; } .tdv2-bracket-host .group-matches__date::before { content: '●'; color: var(--accent-warm); margin-right: var(--space-2); font-size: 0.7em; } /* ═══════════════════════════════════════════════════════════════════════════ 22. REDUCED MOTION ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 19. TEAM PICKER DIALOG (multi-team manager registration) Built atop .tdv2-dialog chrome; rows act as radio cells. The picker is opened from js/tournaments/team-picker.js via a native . ═══════════════════════════════════════════════════════════════════════════ */ .tdv2-team-picker .tdv2-dialog__body { padding-bottom: var(--space-3); } .tdv2-team-picker__list { display: flex; flex-direction: column; gap: var(--space-2); max-height: min(60vh, 420px); overflow-y: auto; /* Soft inset edges so the scroll bleed doesn't slam into the body padding. */ margin: 0 calc(-1 * var(--space-2)); padding: 2px var(--space-2); } /* Slim scrollbar to keep the broadcast feel. */ .tdv2-team-picker__list::-webkit-scrollbar { width: 6px; } .tdv2-team-picker__list::-webkit-scrollbar-track { background: transparent; } .tdv2-team-picker__list::-webkit-scrollbar-thumb { background: var(--tdv2-hairline); border-radius: 3px; } .tdv2-team-picker__list::-webkit-scrollbar-thumb:hover { background: var(--tdv2-hairline-strong); } .tdv2-team-picker__row { display: grid; grid-template-columns: auto 36px 1fr; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; outline: none; transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .tdv2-team-picker__row:hover { border-color: var(--tdv2-hairline-strong); background: var(--bg-surface); } .tdv2-team-picker__row:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .tdv2-team-picker__row--selected, .tdv2-team-picker__row--selected:hover { background: var(--accent-10); border-color: var(--tdv2-hairline-strong); box-shadow: 0 0 0 1px var(--tdv2-hairline-strong) inset; } .tdv2-team-picker__row--ineligible { cursor: not-allowed; opacity: 0.55; } .tdv2-team-picker__row--ineligible:hover { background: var(--bg-elevated); border-color: var(--border); } .tdv2-team-picker__radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; position: relative; flex-shrink: 0; transition: border-color var(--duration) var(--ease-out); } .tdv2-team-picker__row--selected .tdv2-team-picker__radio { border-color: var(--accent); } .tdv2-team-picker__row--selected .tdv2-team-picker__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); } .tdv2-team-picker__badge { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-base); border: 1px solid var(--border); flex-shrink: 0; } .tdv2-team-picker__main { min-width: 0; /* allow line ellipsis */ display: flex; flex-direction: column; gap: 4px; } .tdv2-team-picker__line1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.3; } .tdv2-team-picker__name { font-weight: var(--weight-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .tdv2-team-picker__count { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .tdv2-team-picker__count-warn { color: var(--danger); font-weight: var(--weight-medium); } .tdv2-team-picker__line2 { display: flex; } .tdv2-team-picker__pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-base); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .tdv2-team-picker__pill[data-role="manager"] { color: var(--accent); border-color: var(--border-accent); } .tdv2-team-picker__pill-glyph { font-size: 0.85em; line-height: 1; } .tdv2-team-picker__note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-body); letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════════════════ 20. MOTION OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .tdv2-status[data-status="registration_open"]::before, .tdv2-status[data-status="in_progress"]::before, .tdv2-score--live::after, .tdv2-statuscard--generating .tdv2-statuscard__heading::after, .tdv2-participant--just-joined, .tdv2-panel.is-active { animation: none !important; } .tdv2-participant, .tdv2-score, .tdv2-btn, .tdv2-icon-btn, .tdv2-cta, .tdv2-team-picker__row, .tdv2-team-picker__radio { transition: none !important; } .tdv2-participant:hover, .tdv2-score:hover, .tdv2-btn:hover, .tdv2-icon-btn:hover { transform: none !important; } }