/* ═══════════════════════════════════════════════════════════════════════ Tournament Card Theming Applies per-tournament theme (shape + animation + decoration + pattern) to .tournament-card elements on the listing page and on the detail hero. Each card carries its own CSS vars and data-theme-* attributes. ═══════════════════════════════════════════════════════════════════════ */ .tournament-card[data-theme-preset] { background: linear-gradient(165deg, color-mix(in srgb, var(--theme-bg-start) 92%, transparent) 0%, color-mix(in srgb, var(--theme-bg-mid) 92%, transparent) 60%, color-mix(in srgb, var(--theme-bg-end) 92%, transparent) 100%) !important; border: 1px solid color-mix(in srgb, var(--theme-primary) 35%, transparent) !important; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .tournament-card[data-theme-preset]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 12% 8%, var(--theme-glow1), transparent 55%), radial-gradient(circle at 88% 92%, var(--theme-glow2), transparent 55%); opacity: .85; } .tournament-card[data-theme-preset] > * { position: relative; z-index: 1; } .tournament-card[data-theme-preset]:hover { transform: translateY(-3px); box-shadow: 0 16px 40px color-mix(in srgb, var(--theme-primary) 35%, transparent) !important; border-color: color-mix(in srgb, var(--theme-accent) 60%, transparent) !important; } /* Accents inside the card use the theme colors */ .tournament-card[data-theme-preset] .tournament-card-title, .tournament-card[data-theme-preset] h3, .tournament-card[data-theme-preset] .tournament-name { background: linear-gradient(135deg, #ffffff 0%, var(--theme-accent) 60%, var(--theme-primary) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .tournament-card[data-theme-preset] .progress-bar, .tournament-card[data-theme-preset] .progress-fill, .tournament-card[data-theme-preset] .tc-progress-fill { background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent)) !important; } .tournament-card[data-theme-preset] .tc-status-pill, .tournament-card[data-theme-preset] .tc-badge, .tournament-card[data-theme-preset] .status-badge { border: 1px solid color-mix(in srgb, var(--theme-accent) 60%, transparent) !important; background: color-mix(in srgb, var(--theme-primary) 22%, transparent) !important; color: #fff !important; } .tournament-card[data-theme-preset] .tc-prize, .tournament-card[data-theme-preset] .prize-value, .tournament-card[data-theme-preset] .tournament-prize { color: var(--theme-accent) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--theme-primary) 40%, transparent) !important; } .tournament-card[data-theme-preset] .btn, .tournament-card[data-theme-preset] .tc-btn { border-color: color-mix(in srgb, var(--theme-primary) 45%, transparent) !important; } .tournament-card[data-theme-preset] .btn-primary, .tournament-card[data-theme-preset] .tc-btn-primary { background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important; border-color: var(--theme-accent) !important; color: #fff !important; } /* ── SHAPES ───────────────────────────────────────────────────────────── */ .tournament-card[data-theme-shape="sharp"] { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); border-radius: 0 !important; } .tournament-card[data-theme-shape="rounded"] { border-radius: 22px !important; } .tournament-card[data-theme-shape="hex"] { clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%); border-radius: 0 !important; padding-left: 1.8rem !important; padding-right: 1.8rem !important; } .tournament-card[data-theme-shape="slant"] { clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); border-radius: 0 !important; border-left: 5px solid var(--theme-accent) !important; } .tournament-card[data-theme-shape="bevel"] { clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); border-radius: 0 !important; } .tournament-card[data-theme-shape="frame"] { border: 2px double color-mix(in srgb, var(--theme-accent) 70%, transparent) !important; border-radius: 4px !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary) 30%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--theme-accent) 10%, transparent), 0 12px 32px color-mix(in srgb, var(--theme-glow1) 70%, transparent) !important; } .tournament-card[data-theme-shape="neon"] { border: 1px solid var(--theme-primary) !important; border-radius: 8px !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary) 45%, transparent), 0 0 22px color-mix(in srgb, var(--theme-primary) 55%, transparent), 0 0 44px color-mix(in srgb, var(--theme-secondary) 30%, transparent), inset 0 0 18px color-mix(in srgb, var(--theme-primary) 14%, transparent) !important; } .tournament-card[data-theme-shape="glass"] { background: color-mix(in srgb, var(--theme-bg-mid) 55%, transparent) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border: 1px solid color-mix(in srgb, #ffffff 14%, transparent) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent), 0 8px 32px color-mix(in srgb, var(--theme-primary) 18%, transparent) !important; } .tournament-card[data-theme-shape="brutal"] { border: 3px solid var(--theme-primary) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 color-mix(in srgb, var(--theme-secondary) 60%, transparent) !important; } /* ── ANIMATIONS ───────────────────────────────────────────────────────── */ @keyframes tcThemePulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary) 40%, transparent), 0 8px 24px color-mix(in srgb, var(--theme-glow1) 60%, transparent); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 70%, transparent), 0 12px 36px color-mix(in srgb, var(--theme-primary) 50%, transparent); } } @keyframes tcThemeScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes tcThemeShimmer { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } @keyframes tcThemeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes tcThemeGlow { 0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--theme-primary) 30%, transparent), 0 0 28px color-mix(in srgb, var(--theme-secondary) 18%, transparent); } 50% { box-shadow: 0 0 30px color-mix(in srgb, var(--theme-primary) 60%, transparent), 0 0 60px color-mix(in srgb, var(--theme-secondary) 40%, transparent); } } .tournament-card[data-theme-anim="pulse"] { animation: tcThemePulse 3.4s ease-in-out infinite; } .tournament-card[data-theme-anim="float"] { animation: tcThemeFloat 4.2s ease-in-out infinite; } .tournament-card[data-theme-anim="glow"] { animation: tcThemeGlow 3.6s ease-in-out infinite; } .tournament-card[data-theme-anim="shimmer"] { background-image: linear-gradient(110deg, transparent 40%, color-mix(in srgb, var(--theme-accent) 22%, transparent) 50%, transparent 60%) !important; background-size: 200% 100%; background-repeat: no-repeat; animation: tcThemeShimmer 4.5s linear infinite; } .tournament-card[data-theme-anim="scan"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--theme-accent), transparent); animation: tcThemeScan 3.8s linear infinite; pointer-events: none; z-index: 3; } @media (prefers-reduced-motion: reduce) { .tournament-card[data-theme-anim] { animation: none !important; } .tournament-card[data-theme-anim="scan"]::before { animation: none !important; display: none; } } /* ── DECORATIONS ──────────────────────────────────────────────────────── */ .tournament-card[data-theme-deco="corner-tags"]::before { content: ''; position: absolute; top: 0; left: 0; border-top: 14px solid var(--theme-accent); border-right: 14px solid transparent; pointer-events: none; z-index: 4; } .tournament-card[data-theme-deco="corner-tags"]::after { /* override the default glow ::after when corner-tags is active */ content: ''; position: absolute; bottom: 0; right: 0; inset: auto 0 0 auto; width: 0; height: 0; border-bottom: 14px solid var(--theme-primary); border-left: 14px solid transparent; background: none !important; opacity: 1 !important; pointer-events: none; z-index: 4; } .tournament-card[data-theme-deco="underline-strip"] { border-bottom: 4px solid var(--theme-accent) !important; } .tournament-card[data-theme-deco="glow-rings"] { background-image: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary) 18%, transparent), transparent 40%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--theme-secondary) 18%, transparent), transparent 40%) !important; } /* ── PATTERN OVERLAY (on the card backdrop) ───────────────────────────── */ .tournament-card[data-theme-pattern]:not([data-theme-pattern="minimal"])::after { opacity: 0.55; } .tournament-card[data-theme-pattern="chevron"]::after { background-image: radial-gradient(circle at 12% 8%, var(--theme-glow1), transparent 55%), radial-gradient(circle at 88% 92%, var(--theme-glow2), transparent 55%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--theme-primary) 14%, transparent) 0 2px, transparent 2px 12px); } .tournament-card[data-theme-pattern="hex"]::after { background-image: radial-gradient(circle at 12% 8%, var(--theme-glow1), transparent 55%), radial-gradient(circle at 88% 92%, var(--theme-glow2), transparent 55%), radial-gradient(circle at 50% 50%, transparent 7px, color-mix(in srgb, var(--theme-primary) 22%, transparent) 8px, transparent 9px); background-size: auto, auto, 32px 36px; } .tournament-card[data-theme-pattern="scanlines"]::after { background-image: radial-gradient(circle at 12% 8%, var(--theme-glow1), transparent 55%), radial-gradient(circle at 88% 92%, var(--theme-glow2), transparent 55%), repeating-linear-gradient(0deg, color-mix(in srgb, var(--theme-primary) 18%, transparent) 0 1px, transparent 1px 3px); } /* ═══════════════════════════════════════════════════════════════════════ Detail page body — same treatment as bracket page ═══════════════════════════════════════════════════════════════════════ */ body.tournament-detail-page[data-theme-preset] { background: linear-gradient(180deg, var(--theme-bg-start) 0%, var(--theme-bg-mid) 50%, var(--theme-bg-end) 100%) !important; } body.tournament-detail-page[data-theme-preset]::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .10; mix-blend-mode: screen; } body.tournament-detail-page[data-theme-pattern="hex"]::before { background-image: radial-gradient(circle at 50% 50%, transparent 9px, color-mix(in srgb, var(--theme-primary) 60%, transparent) 10px, transparent 11px); background-size: 40px 46px; } body.tournament-detail-page[data-theme-pattern="chevron"]::before { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--theme-primary) 30%, transparent) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--theme-secondary) 22%, transparent) 0 2px, transparent 2px 14px); } body.tournament-detail-page[data-theme-pattern="scanlines"]::before { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--theme-primary) 40%, transparent) 0 1px, transparent 1px 3px); opacity: .07; } body.tournament-detail-page[data-theme-pattern="grid"]::before { background-image: linear-gradient(color-mix(in srgb, var(--theme-primary) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 35%, transparent) 1px, transparent 1px); background-size: 48px 48px; } body.tournament-detail-page[data-theme-pattern="dots"]::before { background-image: radial-gradient(color-mix(in srgb, var(--theme-primary) 55%, transparent) 1.5px, transparent 1.5px); background-size: 28px 28px; } body.tournament-detail-page[data-theme-preset] .tournament-hero__title { background: linear-gradient(135deg, #ffffff 0%, var(--theme-accent) 55%, var(--theme-primary) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.tournament-detail-page[data-theme-preset] .btn-primary, body.tournament-detail-page[data-theme-preset] .btn-accent, body.tournament-detail-page[data-theme-preset] .btn-bracket { background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important; border-color: var(--theme-accent) !important; color: #fff !important; box-shadow: 0 0 18px color-mix(in srgb, var(--theme-primary) 45%, transparent) !important; } body.tournament-detail-page[data-theme-preset] .section-title, body.tournament-detail-page[data-theme-preset] .standings-title { color: var(--theme-accent) !important; } /* Pattern overlay sits behind content via z-index:-1, so no stacking adjustments needed on body children */