/* * TipArena design system — transcribed 1:1 from `Portal Demo Home.dc.html` * (claude_design project). One file for the whole look: tokens, theme chrome * (ticker/header/footer) and every section, so the light/dark palettes can * never drift apart across files. * * Scoping: everything lives under `.tsarena`. The tiparena theme chrome puts * that class on a page wrapper; an `arena` element variant rendered under a * different theme carries it on its own root. Dark mode = the site's existing * `html.dark` toggle (scheme system), mirroring the design's [data-theme=dark]. */ /* The tokens are shared by the element wrapper and by the page-level scope the plugin puts on under this design, so Elementor's own widgets can be dressed to match. Only .tsarena carries the look; body.tsarena-scope carries nothing but the variables, so nothing is restyled just by being on the page. */ .tsarena, body.tsarena-scope { /* light palette (design defaults) */ --a-bg: #F7F8FB; --a-surface: #FFFFFF; --a-raised: #F1F3F9; --a-ink: #0C1220; --a-muted: #3E4759; --a-faint: #6B7689; --a-line: rgba(13, 20, 40, .12); --a-line2: rgba(13, 20, 40, .24); --a-brand: #2447F0; --a-brand-fg: #FFFFFF; --a-brand-ink: #1733C7; --a-brand-soft: rgba(36, 71, 240, .10); --a-pos: #0B8A43; --a-pos-fg: #FFFFFF; --a-pos-soft: rgba(11, 138, 67, .13); --a-live: #E11D2E; --a-gold: #9A6A00; --a-gold-soft: rgba(154, 106, 0, .13); --a-glow: 0 0 0 1px rgba(36, 71, 240, .28), 0 18px 44px rgba(36, 71, 240, .22); --a-fixture-scrim: linear-gradient(180deg, rgba(12, 18, 32, .82) 0%, rgba(12, 18, 32, .66) 42%, rgba(22, 35, 78, .92) 100%); --a-fixture-glow: radial-gradient(760px 320px at 50% -20%, rgba(36, 71, 240, .42), transparent 70%); --a-lock-bg: linear-gradient(160deg, #16234E 0%, #0C1220 100%); --a-lock-glow: radial-gradient(420px 220px at 90% 0%, rgba(36, 71, 240, .55), transparent 72%); --a-band-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 38%, rgba(255, 255, 255, .92) 52%, rgba(255, 255, 255, .66) 72%, rgba(255, 255, 255, .38) 100%); --a-band-glow: radial-gradient(760px 340px at 84% 6%, rgba(36, 71, 240, .14), transparent 70%); --a-card-shadow: 0 2px 0 rgba(12, 18, 32, .04), 0 18px 44px rgba(20, 35, 90, .14); --a-hero-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 38%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .62) 68%, rgba(255, 255, 255, .34) 100%); --a-live-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 40%, rgba(255, 255, 255, .92) 54%, rgba(255, 255, 255, .66) 74%, rgba(255, 255, 255, .38) 100%); --a-join-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 40%, rgba(255, 255, 255, .93) 55%, rgba(255, 255, 255, .78) 76%, rgba(255, 255, 255, .58) 100%); --a-about-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 40%, rgba(255, 255, 255, .93) 54%, rgba(255, 255, 255, .74) 74%, rgba(255, 255, 255, .46) 100%); --a-contact-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 40%, rgba(255, 255, 255, .93) 55%, rgba(255, 255, 255, .74) 76%, rgba(255, 255, 255, .48) 100%); --a-contact-glow: radial-gradient(760px 340px at 20% 0%, rgba(36, 71, 240, .13), transparent 70%); --a-news-scrim: linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 40%, rgba(255, 255, 255, .92) 54%, rgba(255, 255, 255, .7) 74%, rgba(255, 255, 255, .42) 100%); --a-news-glow: radial-gradient(760px 320px at 84% 6%, rgba(36, 71, 240, .14), transparent 70%); --a-post-glow: radial-gradient(820px 340px at 82% -10%, rgba(36, 71, 240, .12), transparent 70%); --a-doc-glow: radial-gradient(760px 320px at 18% -40%, rgba(36, 71, 240, .1), transparent 66%); --a-about-glow: radial-gradient(780px 340px at 84% 4%, rgba(36, 71, 240, .14), transparent 70%); --a-join-glow: radial-gradient(760px 340px at 20% 0%, rgba(36, 71, 240, .13), transparent 70%); --a-hero-glow: radial-gradient(880px 440px at 84% 4%, rgba(36, 71, 240, .14), transparent 70%); --a-panel-bg: linear-gradient(150deg, #16234E 0%, #0C1220 62%); --a-panel-hot: #93A9FF; --a-panel-glow: radial-gradient(620px 220px at 78% 120%, rgba(36, 71, 240, .55), transparent 70%); font-family: 'Barlow', sans-serif; background: var(--a-bg); color: var(--a-ink); transition: background .25s, color .25s; /* The design computes at the browser default; a host theme's global line-height (Tailwind preflight sets 1.5) otherwise inflates every row here — buttons, chips, stat tiles, the whole hero. Elements that need a specific leading set it themselves below. */ line-height: normal; } .dark .tsarena, .dark body.tsarena-scope { --a-bg: #0A0C0B; --a-surface: #101312; --a-raised: #161A18; --a-ink: #EEF2EF; --a-muted: #A2ACA5; --a-faint: #69736C; --a-line: rgba(236, 245, 239, .08); --a-line2: rgba(236, 245, 239, .15); --a-brand: #C9F231; --a-brand-fg: #0A0C0B; --a-brand-ink: #C9F231; --a-brand-soft: rgba(201, 242, 49, .12); --a-pos: #43DE8B; --a-pos-fg: #0A0C0B; --a-pos-soft: rgba(67, 222, 139, .12); --a-live: #F2564D; --a-gold: #EFC93F; --a-gold-soft: rgba(239, 201, 63, .12); --a-glow: 0 0 0 1px rgba(201, 242, 49, .28), 0 18px 44px rgba(201, 242, 49, .14); --a-fixture-scrim: linear-gradient(180deg, rgba(10, 12, 11, .82) 0%, rgba(10, 12, 11, .66) 42%, rgba(29, 34, 32, .94) 100%); --a-fixture-glow: radial-gradient(760px 320px at 50% -20%, rgba(201, 242, 49, .16), transparent 70%); --a-lock-bg: linear-gradient(160deg, #1D2220 0%, #101312 100%); --a-lock-glow: radial-gradient(420px 220px at 90% 0%, rgba(201, 242, 49, .14), transparent 72%); --a-band-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 38%, rgba(10, 12, 11, .92) 52%, rgba(10, 12, 11, .66) 72%, rgba(10, 12, 11, .38) 100%); --a-band-glow: radial-gradient(760px 340px at 84% 6%, rgba(201, 242, 49, .1), transparent 70%); --a-card-shadow: 0 1px 2px rgba(0, 0, 0, .4); --a-hero-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 38%, rgba(10, 12, 11, .92) 50%, rgba(10, 12, 11, .6) 68%, rgba(10, 12, 11, .3) 100%); --a-live-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 40%, rgba(10, 12, 11, .92) 54%, rgba(10, 12, 11, .66) 74%, rgba(10, 12, 11, .38) 100%); --a-join-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 40%, rgba(10, 12, 11, .93) 55%, rgba(10, 12, 11, .78) 76%, rgba(10, 12, 11, .58) 100%); --a-about-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 40%, rgba(10, 12, 11, .93) 54%, rgba(10, 12, 11, .74) 74%, rgba(10, 12, 11, .46) 100%); --a-contact-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 40%, rgba(10, 12, 11, .93) 55%, rgba(10, 12, 11, .74) 76%, rgba(10, 12, 11, .48) 100%); --a-contact-glow: radial-gradient(760px 340px at 20% 0%, rgba(201, 242, 49, .1), transparent 70%); --a-news-scrim: linear-gradient(96deg, #0A0C0B 0%, #0A0C0B 40%, rgba(10, 12, 11, .92) 54%, rgba(10, 12, 11, .7) 74%, rgba(10, 12, 11, .42) 100%); --a-news-glow: radial-gradient(760px 320px at 84% 6%, rgba(201, 242, 49, .1), transparent 70%); --a-post-glow: radial-gradient(820px 340px at 82% -10%, rgba(201, 242, 49, .09), transparent 70%); --a-doc-glow: radial-gradient(760px 320px at 18% -40%, rgba(201, 242, 49, .1), transparent 66%); --a-about-glow: radial-gradient(780px 340px at 84% 4%, rgba(201, 242, 49, .1), transparent 70%); --a-join-glow: radial-gradient(760px 340px at 20% 0%, rgba(201, 242, 49, .1), transparent 70%); --a-hero-glow: radial-gradient(880px 440px at 84% 4%, rgba(201, 242, 49, .1), transparent 70%); --a-panel-bg: linear-gradient(150deg, #1D2220 0%, #101312 62%); --a-panel-hot: #C9F231; --a-panel-glow: radial-gradient(620px 220px at 78% 120%, rgba(201, 242, 49, .12), transparent 70%); } .tsarena *, .tsarena *::before, .tsarena *::after { box-sizing: border-box; } .tsarena a { color: inherit; text-decoration: none; } /* The tipster dashboard is the plugin's own Tailwind app rather than arena markup: its buttons state their own colour, which the reset above outranks. */ .tsarena .ts-app a.text-white, .tsarena .ts-app a.text-white:hover { color: #fff; } .tsarena img { filter: saturate(1.1) contrast(1.05); } .dark .tsarena img { filter: saturate(.85) contrast(1.05); } @keyframes tsaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes tsaTicker { to { transform: translateX(-50%); } } /* Shared primitives (exact values from the design) */ .tsarena .tsa-shell { padding-left: max(40px, calc((100% - 1200px) / 2)); padding-right: max(40px, calc((100% - 1200px) / 2)); } .tsarena .tsa-mono { font-family: 'JetBrains Mono', monospace; } .tsarena .tsa-cond { font-family: 'Barlow Condensed', sans-serif; } .tsarena .tsa-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 10px; } .tsarena .tsa-h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; margin: 0 0 8px; } .tsarena .tsa-sub { font-size: 15px; color: var(--a-muted); margin: 0; max-width: 520px; } .tsarena .tsa-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--a-brand); color: var(--a-brand-fg); font-weight: 700; border-radius: 8px; cursor: pointer; border: 0; font-family: inherit; } .tsarena .tsa-btn--ghost { background: transparent; color: inherit; border: 1px solid var(--a-line2); } .tsarena .tsa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-live); animation: tsaPulse 1.4s infinite; display: inline-block; } .tsarena .tsa-wl { width: 13px; height: 13px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; display: grid; place-items: center; } .tsarena .tsa-wl--w { background: var(--a-pos); color: var(--a-pos-fg); } .tsarena .tsa-wl--l { background: var(--a-live); color: #fff; } .tsarena .tsa-wl--p { background: var(--a-faint); color: #fff; } /* ============================== Live results ticker ============================== */ .tsarena .tsa-ticker { background: var(--a-surface); border-bottom: 1px solid var(--a-line); display: flex; align-items: center; overflow: hidden; } .tsarena .tsa-ticker__label { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--a-bg); border-right: 1px solid var(--a-line); z-index: 1; } .tsarena .tsa-ticker__live { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--a-live); } .tsarena .tsa-ticker__viewport { overflow: hidden; flex: 1; } /* --tsa-ticker-seconds is set inline from the row count so a long feed scrolls at the same readable speed as a short one (see ts_scores_ticker_html). */ .tsarena .tsa-ticker__track { display: flex; gap: 40px; width: max-content; animation: tsaTicker var(--tsa-ticker-seconds, 60s) linear infinite; padding: 8px 24px; font-family: 'JetBrains Mono', monospace; font-size: 12px; white-space: nowrap; } .tsarena .tsa-ticker:hover .tsa-ticker__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .tsarena .tsa-ticker__track { animation: none; } } .tsarena .tsa-ticker__item { display: inline-flex; gap: 10px; } .tsarena .tsa-ticker__league { color: var(--a-faint); letter-spacing: .08em; } .tsarena .tsa-ticker__score { font-weight: 500; } .tsarena .tsa-ticker__state { color: var(--a-faint); } .tsarena .tsa-ticker__state--hot { color: var(--a-brand-ink); } /* ============================== Header / nav ============================== */ .tsarena .tsa-nav { display: flex; align-items: center; gap: 36px; height: 68px; background: var(--a-surface); border-bottom: 1px solid var(--a-line); } .tsarena .tsa-logo { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 26px; text-transform: uppercase; line-height: 1; letter-spacing: .01em; white-space: nowrap; } .tsarena .tsa-logo__accent { color: var(--a-brand-ink); } .tsarena .tsa-logo__tag { display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 3px 7px; background: var(--a-brand); color: var(--a-brand-fg); font-size: 13px; letter-spacing: .1em; border-radius: 4px; line-height: 1; font-style: normal; } .tsarena .tsa-nav__menu { flex: 1; display: flex; justify-content: center; gap: 26px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--a-muted); } .tsarena .tsa-nav__menu a { padding: 6px 2px; } .tsarena .tsa-nav__menu a.is-active, .tsarena .tsa-nav__menu .current-menu-item a { color: var(--a-brand-ink); border-bottom: 2px solid var(--a-brand); } .tsarena .tsa-nav__side { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-nav__login { font-size: 14px; font-weight: 600; color: var(--a-muted); cursor: pointer; } .tsarena .tsa-nav__cta { font-size: 14px; padding: 10px 18px; gap: 7px; } .tsarena .tsa-nav__cta .msr-a { font-size: 16px; } /* The phone navigation: a burger in the bar, the menu in a drawer. Both are hidden on a desktop, where .tsa-nav__menu carries the links itself. */ .tsarena .tsa-nav__burger { display: none; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--a-ink); } .tsarena .tsa-nav__burgerbars { display: block; width: 20px; } .tsarena .tsa-nav__burgerbars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; } .tsarena .tsa-nav__burgerbars span + span { margin-top: 5px; } .tsarena .tsa-nav__burger[aria-expanded="true"] .tsa-nav__burgerbars span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .tsarena .tsa-nav__burger[aria-expanded="true"] .tsa-nav__burgerbars span:nth-child(2) { opacity: 0; } .tsarena .tsa-nav__burger[aria-expanded="true"] .tsa-nav__burgerbars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Several of these carry a display of their own, which outranks the browser's own [hidden] rule — the attribute is how the scripts hide a panel or a spent "load more", so it has to win here. */ .tsarena [hidden], .tsa-drawer[hidden], .tsa-drawer__overlay[hidden] { display: none !important; } .tsa-drawer__overlay { position: fixed; inset: 0; z-index: 998; background: var(--a-backdrop, rgba(12, 18, 32, .55)); opacity: 0; transition: opacity .25s ease; } .tsa-drawer__overlay.is-open { opacity: 1; } .tsa-drawer { position: fixed; top: 0; right: 0; z-index: 999; width: 100%; max-width: 320px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--a-surface); color: var(--a-ink); border-left: 1px solid var(--a-line); box-shadow: -24px 0 60px rgba(12, 18, 32, .28); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; font-family: 'Barlow', sans-serif; } .tsa-drawer.is-open { transform: translateX(0); } body.tsa-drawer-open { overflow: hidden; } .admin-bar .tsa-drawer { top: 46px; height: calc(100dvh - 46px); } @media screen and (min-width: 783px) { .admin-bar .tsa-drawer { top: 32px; height: calc(100dvh - 32px); } } .tsa-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--a-line); } .tsa-drawer__title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); } .tsa-drawer__close { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--a-line); border-radius: 50%; background: none; color: var(--a-muted); cursor: pointer; } .tsa-drawer__close .msr-a { font-size: 18px; } .tsa-drawer__menu { display: flex; flex-direction: column; padding: 8px 0; } .tsa-drawer__menu a { padding: 14px 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--a-ink); border-bottom: 1px solid var(--a-line); } .tsa-drawer__menu a.is-active, .tsa-drawer__menu .current-menu-item a { color: var(--a-brand-ink); } .tsa-drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--a-line); } .tsa-drawer__account { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--a-line2); border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600; color: var(--a-muted); cursor: pointer; } .tsa-drawer__account .msr-a { font-size: 19px; color: var(--a-brand-ink); } .tsa-drawer__cta { justify-content: center; width: 100%; font-size: 15px; padding: 13px 18px; } /* ============================== Hero ============================== */ .tsarena .tsa-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--a-line); background: var(--a-surface); } .tsarena .tsa-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; } .tsarena .tsa-hero__scrim { position: absolute; inset: 0; background: var(--a-hero-scrim); } .tsarena .tsa-hero__glow { position: absolute; inset: 0; background: var(--a-hero-glow); } .tsarena .tsa-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 80px; } .tsarena .tsa-hero__kicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 18px; } .tsarena .tsa-hero__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 64px; line-height: .98; text-transform: uppercase; letter-spacing: .005em; } .tsarena .tsa-hero__title em { color: var(--a-brand-ink); font-style: italic; } .tsarena .tsa-hero__lead { margin: 22px 0 0; max-width: 460px; color: var(--a-muted); font-size: 17px; line-height: 1.6; } .tsarena .tsa-hero__ctas { display: flex; gap: 14px; margin-top: 30px; } .tsarena .tsa-hero__ctas .tsa-btn { font-size: 15px; padding: 14px 26px; } .tsarena .tsa-hero__ctas .tsa-btn .msr-a { font-size: 18px; } .tsarena .tsa-hero__ctas .tsa-btn--ghost { background: var(--a-surface); } .tsarena .tsa-hero__trust { display: flex; gap: 24px; margin-top: 32px; font-size: 13px; color: var(--a-muted); } .tsarena .tsa-hero__trust span { display: inline-flex; align-items: center; gap: 8px; } .tsarena .tsa-hero__trust .msr-a { font-size: 16px; color: var(--a-brand-ink); } /* right rail */ .tsarena .tsa-hero__rail { display: flex; flex-direction: column; gap: 14px; } .tsarena .tsa-hero__railbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 7px 8px 7px 16px; box-shadow: 0 6px 18px rgba(20, 35, 90, .1); } .tsarena .tsa-hero__railbar-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--a-muted); } .tsarena .tsa-hero__railbar-live { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--a-live); border-radius: 999px; padding: 4px 10px; } .tsarena .tsa-hero__railbar-live .tsa-dot { width: 6px; height: 6px; background: #fff; } .tsarena .tsa-nextpick { background: var(--a-surface); border: 1px solid var(--a-brand); border-radius: 16px; padding: 20px; box-shadow: 0 0 0 1px rgba(36, 71, 240, .28), 0 18px 44px rgba(36, 71, 240, .22); } .tsarena .tsa-nextpick__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /* In the hero card the status chip is bare type (no plate) — the padded FREE plate belongs to the pick cards further down. */ .tsarena .tsa-nextpick__top .tsa-free { background: transparent; padding: 0; } .tsarena .tsa-league { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-nextpick__match { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; line-height: 1.05; margin-bottom: 4px; } .tsarena .tsa-nextpick__when { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); margin-bottom: 14px; } .tsarena .tsa-pickrow { display: flex; gap: 10px; margin-bottom: 14px; } .tsarena .tsa-pickbox { flex: 1; background: var(--a-raised); border: 1px solid var(--a-line); border-radius: 8px; padding: 10px 13px; } .tsarena .tsa-pickbox__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 5px; } .tsarena .tsa-pickbox__value { font-weight: 600; font-size: 14px; } .tsarena .tsa-odds { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; background: var(--a-brand); border-radius: 8px; padding: 10px 16px; color: var(--a-brand-fg); } .tsarena .tsa-odds--plain { background: var(--a-raised); border: 1px solid var(--a-line2); color: inherit; } .tsarena .tsa-odds__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; } .tsarena .tsa-odds--plain .tsa-odds__label { color: var(--a-faint); opacity: 1; } .tsarena .tsa-odds__value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; } .tsarena .tsa-tipsterrow { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--a-line); padding-top: 13px; } .tsarena .tsa-tipsterrow__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .tsarena .tsa-tipsterrow__avatar--ring { border: 2px solid var(--a-brand); } .tsarena .tsa-tipsterrow__body { flex: 1; min-width: 0; } .tsarena .tsa-tipsterrow__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; line-height: 1.1; } .tsarena .tsa-tipsterrow__yield { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--a-faint); } .tsarena .tsa-tipsterrow .tsa-btn { font-size: 12.5px; padding: 9px 15px; gap: 6px; } .tsarena .tsa-tipsterrow .tsa-btn .msr-a { font-size: 14px; } .tsarena .tsa-hero__minis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tsarena .tsa-mini { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tsarena .tsa-mini__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; } .tsarena .tsa-mini__num--brand { color: var(--a-brand-ink); } .tsarena .tsa-mini__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-mini__spark polyline { stroke: var(--a-brand-ink); } .tsarena .tsa-mini__wl { display: flex; gap: 4px; } .tsarena .tsa-mini__wl .tsa-wl { width: 14px; height: 14px; border-radius: 4px; } /* ============================== Navy stats strip ============================== */ .tsarena .tsa-strip { background: var(--a-panel-bg); position: relative; overflow: hidden; } .tsarena .tsa-strip__glow { position: absolute; inset: 0; background: var(--a-panel-glow); pointer-events: none; } .tsarena .tsa-strip__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 32px; padding-bottom: 32px; } .tsarena .tsa-strip__cell { display: flex; align-items: center; gap: 15px; } .tsarena .tsa-strip__cell + .tsa-strip__cell { padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, .14); } .tsarena .tsa-strip__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #fff; } .tsarena .tsa-strip__icon--brand { background: var(--a-brand); color: var(--a-brand-fg); border: 0; } .tsarena .tsa-strip__icon .msr-a { font-size: 20px; } .tsarena .tsa-strip__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 28px; line-height: 1; color: #fff; } .tsarena .tsa-strip__num--hot { color: var(--a-panel-hot); } .tsarena .tsa-strip__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-top: 5px; } /* ============================== Section scaffolding ============================== */ .tsarena .tsa-section { padding-top: 76px; padding-bottom: 76px; } /* An element that pads itself is right on a page that lets it: the home page spaces its bands with exactly this. Where the builder sets a section's padding instead, that placement asks for the padding to step aside. */ .tsarena-scope .tsa-flush .tsa-section { padding-top: 0; padding-bottom: 0; } .tsarena .tsa-section--alt { background: var(--a-surface); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); } .tsarena .tsa-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .tsarena .tsa-sechead--center { display: block; text-align: center; } .tsarena .tsa-sechead--center .tsa-sub { max-width: none; } /* a centred head sets 10 under its heading when a subline follows it */ .tsarena .tsa-sechead--center .tsa-h2:has(+ .tsa-sub) { margin-bottom: 10px; } .tsarena .tsa-sechead__cta { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--a-line2); font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 8px; cursor: pointer; flex: none; } .tsarena .tsa-sechead__cta .msr-a { font-size: 16px; } /* ============================== Latest predictions (feed arena) ============================== */ .tsarena .tsa-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 30px 0 26px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 10px 14px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-chips { display: flex; gap: 8px; } .tsarena .tsa-chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .12s; background: var(--a-raised); color: var(--a-muted); border: 1px solid var(--a-line); } .tsarena .tsa-chip.is-active { background: var(--a-brand); color: var(--a-brand-fg); border-color: var(--a-brand); } .tsarena .tsa-filterbar__updated { display: inline-flex; align-items: center; gap: 8px; padding-right: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); white-space: nowrap; } /* featured pick */ .tsarena .tsa-featpick { display: grid; grid-template-columns: 1fr 1.05fr; border-radius: 16px; overflow: hidden; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--a-card-shadow); margin-bottom: 20px; } .tsarena .tsa-featpick__media { position: relative; min-height: 380px; } .tsarena .tsa-featpick__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tsarena .tsa-featpick__scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(12, 18, 32, .72) 0%, rgba(12, 18, 32, .34) 45%, rgba(20, 35, 90, .62) 100%); } .tsarena .tsa-featpick__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 26px 28px; color: #fff; } .tsarena .tsa-featpick__badges { display: flex; align-items: center; gap: 10px; min-width: 0; } .tsarena .tsa-potd { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--a-brand); color: var(--a-brand-fg); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; flex: none; } .tsarena .tsa-potd .msr-a { font-size: 13px; } .tsarena .tsa-featpick__league { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-featpick__match { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.05; text-transform: uppercase; max-width: 330px; text-wrap: balance; } .tsarena .tsa-featpick__facts { display: flex; gap: 10px; margin-top: 16px; } .tsarena .tsa-fact { display: flex; flex-direction: column; gap: 3px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 8px 13px; } .tsarena .tsa-fact__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .tsarena .tsa-fact__value { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; } .tsarena .tsa-featpick__detail { padding: 30px 32px; display: flex; flex-direction: column; gap: 20px; justify-content: center; } .tsarena .tsa-featpick__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tsarena .tsa-featpick__when { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-featpick__pickrow { display: flex; align-items: stretch; gap: 14px; margin-bottom: 0; } .tsarena .tsa-featpick__pickrow .tsa-pickbox { padding: 14px 16px; } .tsarena .tsa-featpick__pickrow .tsa-odds { min-width: 96px; padding: 12px 18px; } .tsarena .tsa-featpick__pickrow .tsa-odds__value { font-size: 26px; } .tsarena .tsa-featstats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); padding: 14px 0; } .tsarena .tsa-featstats > div { display: flex; flex-direction: column; gap: 4px; } .tsarena .tsa-featstats > div + div { padding-left: 16px; border-left: 1px solid var(--a-line); } .tsarena .tsa-featstats__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; } .tsarena .tsa-featstats__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-featpick__detail .tsa-tipsterrow { gap: 12px; } .tsarena .tsa-featpick__detail .tsa-tipsterrow__avatar { width: 42px; height: 42px; } .tsarena .tsa-featpick__detail .tsa-tipsterrow__name { font-size: 17px; line-height: 1.15; } .tsarena .tsa-featpick__detail .tsa-tipsterrow__yield { font-size: 11px; } .tsarena .tsa-featpick__detail .tsa-tipsterrow .tsa-btn { font-size: 13px; padding: 11px 18px; } .tsarena .tsa-featpick__detail .tsa-tipsterrow .tsa-btn .msr-a { font-size: 15px; } /* pick cards grid */ .tsarena .tsa-pickgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tsarena .tsa-pickcard { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 20px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-pickcard--live { border-color: var(--a-live); } .tsarena .tsa-pickcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tsarena .tsa-free { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--a-pos); background: var(--a-pos-soft); border-radius: 4px; padding: 4px 9px; } .tsarena .tsa-livechip { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--a-live); } .tsarena .tsa-livechip .tsa-dot { width: 6px; height: 6px; } .tsarena .tsa-pickcard__match { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; line-height: 1.05; margin-bottom: 4px; } .tsarena .tsa-pickcard__when { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); margin-bottom: 14px; } .tsarena .tsa-pickcard .tsa-odds { min-width: 72px; padding: 8px 13px; } .tsarena .tsa-pickcard .tsa-odds__value { font-size: 19px; } .tsarena .tsa-pickcard .tsa-tipsterrow { gap: 10px; } .tsarena .tsa-pickcard .tsa-tipsterrow__avatar { width: 32px; height: 32px; } .tsarena .tsa-pickcard .tsa-tipsterrow__name { font-size: 15px; } .tsarena .tsa-pickcard .tsa-tipsterrow__yield { font-size: 10px; } .tsarena .tsa-pickcard .tsa-btn, .tsarena .tsa-pickcard .tsa-btn--ghost { font-size: 12px; padding: 8px 13px; gap: 5px; } .tsarena .tsa-pickcard .tsa-btn .msr-a { font-size: 14px; } /* ============================== Tipster cards ============================== */ .tsarena .tsa-tipgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .tsarena .tsa-tipcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--a-bg); border: 1px solid var(--a-line); box-shadow: var(--a-card-shadow); } .tsarena .tsa-tipcard--top { border-color: var(--a-brand); box-shadow: 0 0 0 1px rgba(36, 71, 240, .28), 0 18px 44px rgba(36, 71, 240, .22); } .tsarena .tsa-tipcard__banner { position: relative; height: 104px; flex: none; } .tsarena .tsa-tipcard__bimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tsarena .tsa-tipcard__bscrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 18, 32, .05), rgba(12, 18, 32, .62)); } .tsarena .tsa-tipcard__rank { position: absolute; top: 12px; left: 14px; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--a-ink); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .tsarena .tsa-tipcard--top .tsa-tipcard__rank { background: var(--a-brand); color: var(--a-brand-fg); } .tsarena .tsa-tipcard__sport { position: absolute; bottom: 11px; left: 15px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .88); } .tsarena .tsa-tipcard__body { padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .tsarena .tsa-tipcard__head { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-tipcard__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .tsarena .tsa-tipcard--top .tsa-tipcard__avatar { border: 2px solid var(--a-brand); } .tsarena .tsa-tipcard__nameline { display: flex; align-items: center; gap: 6px; } .tsarena .tsa-tipcard__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1; } .tsarena .tsa-tipcard__nameline .msr-a { font-size: 15px; color: var(--a-brand-ink); } .tsarena .tsa-tipcard__wl { display: flex; gap: 4px; margin-top: 6px; } .tsarena .tsa-tipcard__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); padding: 12px 0; } .tsarena .tsa-tipcard__stats > div { display: flex; flex-direction: column; gap: 3px; } .tsarena .tsa-tipcard__stats > div + div { padding-left: 10px; border-left: 1px solid var(--a-line); } .tsarena .tsa-tipcard__statnum { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; } .tsarena .tsa-tipcard__statnum--brand { color: var(--a-brand-ink); } .tsarena .tsa-tipcard__statlabel { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-tipcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; } .tsarena .tsa-tipcard__foot .tsa-btn, .tsarena .tsa-tipcard__foot .tsa-btn--ghost { font-size: 12.5px; padding: 9px 16px; gap: 6px; } .tsarena .tsa-tipcard__foot .tsa-btn .msr-a, .tsarena .tsa-tipcard__foot .tsa-btn--ghost .msr-a { font-size: 14px; } /* compare band */ .tsarena .tsa-compare { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 12px; padding: 18px 24px; } .tsarena .tsa-compare__stats { display: flex; gap: 32px; } .tsarena .tsa-compare__stats > div { display: flex; flex-direction: column; gap: 3px; } .tsarena .tsa-compare__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; } .tsarena .tsa-compare__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-compare .tsa-btn { font-size: 13.5px; padding: 11px 20px; gap: 7px; } .tsarena .tsa-compare .tsa-btn .msr-a { font-size: 16px; } /* ============================== How it works ============================== */ .tsarena .tsa-steps { position: relative; } .tsarena .tsa-steps__rail { position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--a-brand-soft), var(--a-brand) 22%, var(--a-brand) 78%, var(--a-brand-soft)); opacity: .45; } .tsarena .tsa-steps__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tsarena .tsa-step { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 40px 24px 26px; margin-top: 26px; position: relative; box-shadow: var(--a-card-shadow); } .tsarena .tsa-step__num { position: absolute; top: -26px; left: 24px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--a-brand); color: var(--a-brand-fg); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; border: 4px solid var(--a-bg); box-shadow: 0 10px 24px rgba(36, 71, 240, .34); } .tsarena .tsa-step__icon { position: absolute; top: 18px; right: 20px; font-size: 22px; color: var(--a-brand-ink); opacity: .5; } .tsarena .tsa-step__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; text-transform: uppercase; margin: 14px 0 8px; } .tsarena .tsa-step__text { font-size: 14px; color: var(--a-muted); line-height: 1.6; text-wrap: pretty; } .tsarena .tsa-assure { display: flex; gap: 28px; justify-content: center; margin-top: 40px; font-size: 13px; color: var(--a-faint); } .tsarena .tsa-assure span { display: inline-flex; align-items: center; gap: 8px; } .tsarena .tsa-assure .msr-a { font-size: 16px; color: var(--a-muted); } /* ============================== Pricing ============================== */ .tsarena .tsa-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .tsarena .tsa-plan { background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 16px; padding: 32px 30px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-plan--featured { background: var(--a-panel-bg); border: 1px solid var(--a-brand); padding: 40px 30px 32px; margin: -12px 0; position: relative; box-shadow: 0 26px 60px rgba(20, 35, 90, .34); color: #fff; } .tsarena .tsa-plan__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--a-brand); color: var(--a-brand-fg); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .14em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .tsarena .tsa-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .tsarena .tsa-plan__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; } .tsarena .tsa-plan__tag { font-size: 13px; color: var(--a-faint); } .tsarena .tsa-plan--featured .tsa-plan__tag { color: rgba(255, 255, 255, .62); } .tsarena .tsa-plan__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--a-brand-soft); color: var(--a-brand-ink); } .tsarena .tsa-plan--featured .tsa-plan__icon { background: rgba(255, 255, 255, .1); color: #fff; } .tsarena .tsa-plan__icon .msr-a { font-size: 19px; } .tsarena .tsa-plan__price { display: flex; align-items: baseline; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-plan--featured .tsa-plan__price { border-bottom-color: rgba(255, 255, 255, .16); } .tsarena .tsa-plan__amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -.02em; } .tsarena .tsa-plan__per { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-faint); } .tsarena .tsa-plan--featured .tsa-plan__per { color: rgba(255, 255, 255, .62); } .tsarena .tsa-plan__features { display: flex; flex-direction: column; gap: 13px; flex: 1; font-size: 14px; color: var(--a-muted); } .tsarena .tsa-plan--featured .tsa-plan__features { color: rgba(255, 255, 255, .88); } .tsarena .tsa-plan__feature { display: flex; align-items: center; gap: 11px; } .tsarena .tsa-plan__check { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--a-brand-soft); color: var(--a-brand-ink); } .tsarena .tsa-plan--featured .tsa-plan__check { background: #C9F231; color: #0A0C0B; } .tsarena .tsa-plan__check .msr-a { font-size: 12px; } .tsarena .tsa-plan__cta { display: flex; align-items: center; justify-content: center; width: 100%; background: none; color: inherit; font-family: inherit; border: 1px solid var(--a-line2); font-weight: 700; font-size: 14px; padding: 13px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-plan__cta[disabled] { opacity: .6; cursor: default; } .tsarena .tsa-plan--featured .tsa-plan__cta { background: #fff; color: #0C1220; border: 0; } .tsarena .tsa-plan__note { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--a-faint); } .tsarena .tsa-plan--featured .tsa-plan__note { color: rgba(255, 255, 255, .5); } /* ============================== Testimonials ============================== */ .tsarena .tsa-reviews__aggr { display: flex; justify-content: center; gap: 44px; margin: 36px 0 40px; } .tsarena .tsa-reviews__aggr > div { display: flex; flex-direction: column; align-items: center; gap: 4px; } .tsarena .tsa-reviews__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; color: var(--a-brand-ink); } .tsarena .tsa-reviews__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tsarena .tsa-review { background: var(--a-surface); border: 1px solid var(--a-line); border-top: 3px solid var(--a-brand); border-radius: 16px; padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-review__top { display: flex; align-items: center; gap: 10px; } .tsarena .tsa-sechead--voices { margin-bottom: 28px; } .tsarena .tsa-sechead--voices .tsa-h2 { font-size: 38px; margin-bottom: 0; } .tsarena .tsa-sechead__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--a-brand-ink); flex: none; } .tsarena .tsa-sechead__link .msr-a { font-size: 17px; } .tsarena .tsa-reviews__grid--voices { gap: 20px; } .tsarena .tsa-review--voice { border-top: 1px solid var(--a-line); padding: 26px; } .tsarena .tsa-review--voice .tsa-review__text { font-size: 16px; line-height: 1.6; } .tsarena .tsa-review--voice .tsa-review__avatar { width: 38px; height: 38px; border: 2px solid var(--a-brand); } .tsarena .tsa-review--voice .tsa-review__name { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 14px; text-transform: none; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-review--voice .tsa-review__since { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .tsarena .tsa-review__id { min-width: 0; flex: 1; } .tsarena .tsa-review__stat { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-review__stars { color: var(--a-brand-ink); font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .2em; } .tsarena .tsa-review__verified { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-pos); background: var(--a-pos-soft); border-radius: 999px; padding: 3px 9px; } .tsarena .tsa-review__verified .msr-a { font-size: 11px; } .tsarena .tsa-review__plan { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); border: 1px solid var(--a-line); border-radius: 999px; padding: 3px 9px; } .tsarena .tsa-review__text { margin: 0; font-size: 15px; line-height: 1.62; flex: 1; text-wrap: pretty; } .tsarena .tsa-review__who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--a-line); padding-top: 16px; } .tsarena .tsa-review__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .tsarena .tsa-review__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; line-height: 1.15; } .tsarena .tsa-review__since { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); } /* ============================== Featured tipster band ============================== */ .tsarena .tsa-featband-wrap { padding-bottom: 76px; } .tsarena .tsa-featband { background: var(--a-panel-bg); border-radius: 16px; padding: 48px 52px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(12, 18, 32, .3); color: #fff; } .tsarena .tsa-featband__glow { position: absolute; inset: 0; background: var(--a-panel-glow); pointer-events: none; } .tsarena .tsa-featband__left { position: relative; } .tsarena .tsa-featband__flag { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-gold); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px 12px; margin-bottom: 20px; } .dark .tsarena .tsa-featband__flag { color: var(--a-gold); } .tsarena .tsa-featband__flag .msr-a { font-size: 14px; } .tsarena .tsa-featband__who { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } .tsarena .tsa-featband__avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; } .tsarena .tsa-featband__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; text-transform: uppercase; line-height: 1; } .tsarena .tsa-featband__role { display: flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255, 255, 255, .66); margin-top: 5px; } .tsarena .tsa-featband__role .msr-a { font-size: 15px; color: var(--a-panel-hot); } .tsarena .tsa-featband__bio { margin: 0; max-width: 440px; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.62; text-wrap: pretty; } .tsarena .tsa-featband__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 18px 4px; } .tsarena .tsa-featband__stats > div { display: flex; flex-direction: column; gap: 5px; padding: 0 14px; } .tsarena .tsa-featband__stats > div + div { border-left: 1px solid rgba(255, 255, 255, .14); } .tsarena .tsa-featband__statnum { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 24px; line-height: 1; color: #fff; } .tsarena .tsa-featband__statnum--hot { color: var(--a-panel-hot); } .tsarena .tsa-featband__statlabel { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } /* ============================== Plan selects (multi-plan tipsters) ============================== */ /* 4+ plans in the featured band: the pill row becomes this styled select. */ /* compact variant beside the price on the tipster cards */ /* ============================== Single prediction ============================== */ /* Transcribed 1:1 from `Portal Demo Single Prediction.dc.html`. Core renders the open state; an extending plugin restyles what it hooks into from its own file. */ .tsarena .tsa-phero { position: relative; overflow: hidden; background: #0C1220; color: #fff; } .tsarena .tsa-phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .5; } .tsarena .tsa-phero__scrim { position: absolute; inset: 0; background: var(--a-fixture-scrim); } .tsarena .tsa-phero__glow { position: absolute; inset: 0; background: var(--a-fixture-glow); } .tsarena .tsa-phero__inner { position: relative; z-index: 1; padding-top: 32px; padding-bottom: 34px; } .tsarena .tsa-phero__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 24px; } .tsarena .tsa-phero__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-phero__crumbhere { color: var(--a-panel-hot); } .tsarena .tsa-phero__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .tsarena .tsa-phero__badges { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-ptier { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #0C1220; background: var(--a-gold); border-radius: 4px; padding: 5px 10px; } .tsarena .tsa-ptier .msr-a { font-size: 14px; } .tsarena .tsa-ptier--free { color: #fff; background: var(--a-pos); } .dark .tsarena .tsa-ptier--free { color: var(--a-pos-fg); } .tsarena .tsa-phero__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .66); } .tsarena .tsa-pclock { display: inline-flex; align-items: center; gap: 10px; flex: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 8px 16px; } .tsarena .tsa-pclock .msr-a { font-size: 17px; color: var(--a-panel-hot); } .tsarena .tsa-pclock__time { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .tsarena .tsa-pclock__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .58); } .tsarena .tsa-pteams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; } .tsarena .tsa-pside { display: flex; align-items: center; gap: 16px; min-width: 0; } .tsarena .tsa-pside--home { justify-content: flex-end; text-align: right; } .tsarena .tsa-pside__body { min-width: 0; } .tsarena .tsa-pside__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-pside__role { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-top: 6px; } .tsarena .tsa-pcrest { width: 56px; height: 56px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; } .tsarena .tsa-pmid { text-align: center; } .tsarena .tsa-pmid__date { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .58); } .tsarena .tsa-pmid__time { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--a-panel-hot); } .tsarena .tsa-pmid__venue { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .58); } /* combo picks and hidden-team sites get one headline instead of the fixture grid */ .tsarena .tsa-ptitle { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.05; text-transform: uppercase; } /* layout */ .tsarena .tsa-play { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-top: 36px; padding-bottom: 80px; } .tsarena .tsa-play__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .tsarena .tsa-play__aside { display: flex; flex-direction: column; gap: 16px; } .tsarena .tsa-pcard { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 24px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-pkicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-brand-ink); margin-bottom: 16px; } /* the selection */ .tsarena .tsa-psel { position: relative; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-brand); border-radius: 16px; padding: 30px; box-shadow: var(--a-glow); } .tsarena .tsa-psel__glow { position: absolute; inset: 0; background: var(--a-lock-glow); pointer-events: none; } .tsarena .tsa-psel > * { position: relative; } .tsarena .tsa-psel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .tsarena .tsa-psel__head .tsa-pkicker { margin-bottom: 0; color: var(--a-gold); } .tsarena .tsa-psel__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .tsarena .tsa-psel__pick { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 38px; line-height: 1.05; text-transform: uppercase; } .tsarena .tsa-psel__note { font-size: 14px; color: var(--a-muted); margin-top: 12px; } .tsarena .tsa-psel__oddswrap { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; } .tsarena .tsa-psel__odds { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 34px; background: var(--a-brand); color: var(--a-brand-fg); border-radius: 10px; padding: 12px 22px; } .tsarena .tsa-psel__oddsnote { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-pstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; border-top: 1px solid var(--a-line); margin-top: 24px; padding-top: 20px; } .tsarena .tsa-pstat__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; } .tsarena .tsa-pstat__num--hot { color: var(--a-brand-ink); } .tsarena .tsa-pstat__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } /* analysis */ .tsarena .tsa-panalysis__body { font-size: 16px; line-height: 1.7; color: var(--a-muted); } .tsarena .tsa-panalysis__body p { margin: 0 0 18px; } .tsarena .tsa-panalysis__body p:last-child { margin-bottom: 0; } /* sidebar — published by */ .tsarena .tsa-ptipster { display: flex; flex-direction: column; gap: 16px; } .tsarena .tsa-ptipster .tsa-pkicker { margin-bottom: 0; } .tsarena .tsa-ptipster__head { display: flex; align-items: center; gap: 14px; } .tsarena .tsa-ptipster__avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--a-brand); } .tsarena .tsa-ptipster__body { flex: 1; min-width: 0; } .tsarena .tsa-ptipster__nameline { display: flex; align-items: center; gap: 7px; } .tsarena .tsa-ptipster__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-ptipster__pro { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--a-gold); background: var(--a-gold-soft); border-radius: 4px; padding: 3px 7px; flex: none; } .tsarena .tsa-ptipster__free { color: var(--a-pos); background: var(--a-pos-soft); } .tsarena .tsa-ptipster__role { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-ptipster__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); padding: 14px 0; } .tsarena .tsa-ptipster__stats > div + div { padding-left: 12px; border-left: 1px solid var(--a-line); } .tsarena .tsa-ptipster__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; } .tsarena .tsa-ptipster__num--hot { color: var(--a-brand-ink); } .tsarena .tsa-ptipster__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); margin-top: 3px; } .tsarena .tsa-ptipster__record { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--a-line2); border-radius: 8px; font-weight: 700; font-size: 13.5px; padding: 11px; cursor: pointer; } .tsarena .tsa-ptipster__record .msr-a { font-size: 16px; } /* sidebar — access panel */ .tsarena .tsa-paccess { position: relative; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-pos); border-radius: 16px; padding: 24px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-paccess__inner { position: relative; } .tsarena .tsa-paccess .tsa-pkicker { color: var(--a-pos); margin-bottom: 10px; } .tsarena .tsa-paccess__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.05; text-transform: uppercase; } .tsarena .tsa-paccess__body { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--a-muted); } .tsarena .tsa-paccess__items { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; } .tsarena .tsa-paccess__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--a-muted); } .tsarena .tsa-paccess__item .msr-a { font-size: 16px; flex: none; color: var(--a-pos); } .tsarena .tsa-paccess__cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--a-brand); color: var(--a-brand-fg); font-weight: 700; font-size: 14.5px; padding: 13px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-paccess__cta .msr-a { font-size: 17px; } .tsarena .tsa-paccess__note { margin-top: 12px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--a-faint); } /* sidebar — settlement */ .tsarena .tsa-psettle { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--a-muted); line-height: 1.5; } .tsarena .tsa-psettle__row { display: flex; gap: 10px; } .tsarena .tsa-psettle__row .msr-a { font-size: 17px; color: var(--a-pos); flex: none; } /* sidebar — other picks */ .tsarena .tsa-pother { display: flex; flex-direction: column; gap: 14px; } .tsarena .tsa-pother__row { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-pother__tile { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--a-pos-soft); color: var(--a-pos); } .tsarena .tsa-pother__tile .msr-a { font-size: 16px; } .tsarena .tsa-pother__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tsarena .tsa-pother__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-pother__sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-faint); } .tsarena .tsa-pother__odds { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; } .tsarena .tsa-pempty { font-size: 13px; color: var(--a-faint); } /* ============================== Picks archive ============================== */ /* Transcribed 1:1 from `Portal Demo Picks.dc.html`. The grid cards reuse the home feed's .tsa-pickcard vocabulary; everything specific to the archive — the photo band, the filter rail, the list rows, the pager and the settled table — lives here. */ .tsarena .tsa-picksband { position: relative; overflow: hidden; background: var(--a-surface); } .tsarena .tsa-picksband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; } .tsarena .tsa-picksband__scrim { position: absolute; inset: 0; background: var(--a-band-scrim); } .tsarena .tsa-picksband__glow { position: absolute; inset: 0; background: var(--a-band-glow); } .tsarena .tsa-picksband__inner { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 44px; } .tsarena .tsa-picksband__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 16px; } .tsarena .tsa-picksband__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-picksband__here { color: var(--a-brand-ink); } .tsarena .tsa-picksband__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-picksband__sub { margin: 12px 0 0; max-width: 520px; color: var(--a-muted); font-size: 17px; } /* the navy strip is the home page's, one notch smaller here */ .tsarena .tsa-picks .tsa-strip__grid { padding-top: 30px; padding-bottom: 30px; } .tsarena .tsa-picks .tsa-strip__icon { width: 40px; height: 40px; } .tsarena .tsa-picks .tsa-strip__icon .msr-a { font-size: 19px; } .tsarena .tsa-picks .tsa-strip__num { font-size: 26px; } .tsarena .tsa-picks__layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; padding-top: 36px; padding-bottom: 80px; } .tsarena .tsa-picks__aside { display: flex; flex-direction: column; gap: 20px; } .tsarena .tsa-picks__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* filter rail */ .tsarena .tsa-pfilters { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 6px 20px 16px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-pfilters__head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 0 4px; } /* the panel's own controls: a button in the toolbar and a close in its head, both only there on the widths where the rail becomes a panel */ .tsarena .tsa-picks__filtersbtn { display: none; align-items: center; gap: 7px; border: 1px solid var(--a-line2); background: var(--a-surface); color: inherit; font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 999px; cursor: pointer; } .tsarena .tsa-picks__filtersbtn .msr-a { font-size: 16px; } .tsarena .tsa-pfilters__close { display: none; place-items: center; width: 30px; height: 30px; flex: none; margin-left: auto; border: 1px solid var(--a-line); border-radius: 50%; background: none; color: var(--a-muted); cursor: pointer; } .tsarena .tsa-pfilters__close .msr-a { font-size: 17px; } .tsarena .tsa-pfilters__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; } .tsarena .tsa-pfilters__reset { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--a-brand-ink); background: none; border: 0; padding: 0; cursor: pointer; } .tsarena .tsa-pfilters__group { border-bottom: 1px solid var(--a-line); padding: 14px 0; } .tsarena .tsa-pfilters__group:last-child { border-bottom: 0; padding: 14px 0 4px; } .tsarena .tsa-pfilters__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 10px; } .tsarena .tsa-pfilters__list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .tsarena .tsa-popt { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--a-muted); } .tsarena .tsa-popt.is-active { color: var(--a-ink); } .tsarena .tsa-popt__box { width: 16px; height: 16px; flex: none; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; transition: all .12s; border: 1px solid var(--a-line2); background: transparent; color: transparent; } .tsarena .tsa-popt.is-active .tsa-popt__box { border-color: var(--a-brand); background: var(--a-brand); color: var(--a-brand-fg); } .tsarena .tsa-popt__name { flex: 1; } .tsarena .tsa-popt__count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); } .tsarena .tsa-podds { display: flex; gap: 8px; } .tsarena .tsa-podds input { flex: 1; width: 100%; min-width: 0; border: 1px solid var(--a-line2); border-radius: 8px; padding: 9px 12px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--a-ink); background: transparent; } .tsarena .tsa-podds input::placeholder { color: var(--a-faint); } .tsarena .tsa-podds input:focus { outline: none; border-color: var(--a-brand); } /* top this month */ .tsarena .tsa-ptop__list { display: flex; flex-direction: column; gap: 14px; } .tsarena .tsa-ptop__row { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-ptop__rank { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-faint); width: 14px; } .tsarena .tsa-ptop__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; } .tsarena .tsa-ptop__body { flex: 1; min-width: 0; } .tsarena .tsa-ptop__name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-ptop__yield { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); } .tsarena .tsa-ptop__spark polyline { stroke: var(--a-faint); } .tsarena .tsa-ptop__cta { display: flex; align-items: center; justify-content: center; margin-top: 16px; border: 1px solid var(--a-line2); border-radius: 8px; font-weight: 700; font-size: 13px; padding: 10px; cursor: pointer; } /* tabs + toolbar */ .tsarena .tsa-ptabs { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-ptab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 4px; margin-bottom: -1px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); } .tsarena .tsa-ptab.is-active { border-bottom-color: var(--a-brand); color: var(--a-brand-ink); } .tsarena .tsa-ptoolbar { display: flex; align-items: center; gap: 10px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 10px 14px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-ptoolbar .tsa-chip { padding: 8px 15px; border: 0; font-family: 'Barlow Condensed', sans-serif; } .tsarena .tsa-ptoolbar .tsa-chip:not(.is-active) { border: 1px solid var(--a-line); } .tsarena .tsa-ptoolbar__spacer { flex: 1; } .tsarena .tsa-ptoolbar__count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-psort { appearance: none; -webkit-appearance: none; border: 1px solid var(--a-line2); border-radius: 8px; padding: 7px 30px 7px 12px; font-family: inherit; font-size: 13px; color: var(--a-muted); background-color: transparent; cursor: pointer; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7689' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .tsarena .tsa-psort:focus { outline: none; border-color: var(--a-brand); } .tsarena .tsa-pviews { display: flex; gap: 4px; background: var(--a-raised); border: 1px solid var(--a-line); border-radius: 8px; padding: 3px; } .tsarena .tsa-pview { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 5px; cursor: pointer; background: transparent; color: var(--a-faint); transition: all .12s; } .tsarena .tsa-pview.is-active { background: var(--a-brand); color: var(--a-brand-fg); } .tsarena .tsa-pview .msr-a { font-size: 15px; } /* list rows */ .tsarena .tsa-prows { display: flex; flex-direction: column; gap: 10px; } .tsarena .tsa-prow { display: grid; grid-template-columns: 76px minmax(180px, 1.7fr) minmax(0, 1.1fr) 74px minmax(160px, 1.5fr) 112px; align-items: center; gap: 14px; background: var(--a-surface); border: 1px solid var(--a-line); border-left: 1px solid var(--a-line); border-radius: 12px; padding: 15px 18px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-prow--featured { border-left: 3px solid var(--a-brand); } .tsarena .tsa-prow--live { border-left: 3px solid var(--a-live); } .tsarena .tsa-prow__when { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tsarena .tsa-prow__country { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-prow__rel { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-muted); white-space: nowrap; } .tsarena .tsa-prow__rel--live { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--a-live); border-radius: 4px; padding: 3px 7px; } .tsarena .tsa-prow__matchwrap, .tsarena .tsa-prow__pickwrap { min-width: 0; overflow: hidden; } /* the match and tipster names are links; inline elements ignore the ellipsis */ .tsarena .tsa-prow__match, .tsarena .tsa-prow__name, .tsarena .tsa-ptable__match, .tsarena .tsa-pgrid .tsa-pickcard__match { display: block; } .tsarena .tsa-prow__match { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 19px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prow__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prow__picklabel { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-prow__pick { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prow__pick .msr-a { font-size: 15px; flex: none; } .tsarena .tsa-prow__odds { justify-self: start; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; background: var(--a-brand-soft); border: 1px solid var(--a-brand); color: var(--a-brand-ink); border-radius: 6px; padding: 6px 10px; } .tsarena .tsa-prow__tipster { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; } .tsarena .tsa-prow__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); } .tsarena .tsa-prow__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prow__tipmeta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prow__cta { display: flex; justify-content: flex-end; } .tsarena .tsa-prow__cta .tsa-btn, .tsarena .tsa-prow__cta .tsa-btn--ghost { font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 8px; white-space: nowrap; gap: 5px; } .tsarena .tsa-prow__cta .tsa-btn .msr-a { font-size: 14px; } /* grid view — the home feed's pick cards, laid out for a full page */ .tsarena .tsa-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } /* empty state */ .tsarena .tsa-pempty { border: 1px dashed var(--a-line2); border-radius: 16px; padding: 56px 24px; text-align: center; color: var(--a-faint); } .tsarena .tsa-pempty .msr-a { font-size: 26px; } .tsarena .tsa-pempty__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 21px; text-transform: uppercase; color: var(--a-muted); margin-top: 12px; } .tsarena .tsa-pempty__text { font-size: 14px; margin-top: 6px; } /* pagination */ .tsarena .tsa-ppager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; } .tsarena .tsa-ppager__info { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-ppager__pages { display: flex; gap: 6px; align-items: center; } .tsarena .tsa-ppage { min-width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-raised); color: var(--a-muted); font-family: 'JetBrains Mono', monospace; font-size: 13px; cursor: pointer; padding: 0; } .tsarena .tsa-ppage.is-active { border-color: var(--a-brand); background: var(--a-brand-soft); color: var(--a-brand-ink); } .tsarena .tsa-ppage--arrow { width: 32px; background: var(--a-surface); color: var(--a-muted); } .tsarena .tsa-ppage--arrow[disabled] { color: var(--a-faint); opacity: .5; cursor: default; } .tsarena .tsa-ppage .msr-a { font-size: 16px; } .tsarena .tsa-ppager__gap { min-width: 32px; height: 32px; display: grid; place-items: center; color: var(--a-faint); font-family: 'JetBrains Mono', monospace; font-size: 13px; } /* settled tab */ .tsarena .tsa-psummary { display: flex; gap: 28px; align-items: center; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 20px 24px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-psummary__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; } .tsarena .tsa-psummary__num--hot { color: var(--a-brand-ink); } .tsarena .tsa-psummary__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-psummary__spark { margin-left: auto; } .tsarena .tsa-psummary__spark polyline { stroke: var(--a-brand-ink); } .tsarena .tsa-ptable { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-ptable__head, .tsarena .tsa-ptable__row { display: grid; grid-template-columns: 62px minmax(180px, 2fr) minmax(0, 1.4fr) 62px 84px 92px; gap: 14px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-ptable__head { padding: 12px 20px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--a-faint); } .tsarena .tsa-ptable__head > span:last-child { text-align: right; } .tsarena .tsa-ptable__row { padding: 14px 20px; align-items: center; } .tsarena .tsa-ptable__row:last-child { border-bottom: 0; } .tsarena .tsa-ptable__date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-ptable__match { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-ptable__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-ptable__pick { font-size: 13px; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tsarena .tsa-ptable__odds { font-family: 'JetBrains Mono', monospace; font-size: 14px; } .tsarena .tsa-pbadge { display: inline-flex; align-items: center; justify-self: start; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .06em; border-radius: 4px; padding: 4px 9px; color: var(--a-faint); background: rgba(110, 118, 131, .15); } .tsarena .tsa-pbadge--won { color: var(--a-pos); background: var(--a-pos-soft); } .tsarena .tsa-pbadge--lost { color: var(--a-live); background: rgba(225, 29, 46, .11); } .tsarena .tsa-ptable__profit { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; text-align: right; color: var(--a-faint); } .tsarena .tsa-ptable__profit--won { color: var(--a-pos); } .tsarena .tsa-ptable__profit--lost { color: var(--a-live); } /* the status chips and the view toggle mean nothing on the settled tab */ .tsarena .tsa-picks[data-tsa-tab="settled"] .tsa-ptoolbar .tsa-chip, .tsarena .tsa-picks[data-tsa-tab="settled"] .tsa-pviews { display: none; } /* the results region dims while a filter request is in flight */ .tsarena .tsa-picks__results.is-busy { opacity: .5; transition: opacity .12s; } /* ============================== Tipsters roster ============================== */ /* Transcribed 1:1 from `Portal Demo Tipsters.dc.html`. The photo band is the picks page's (identical scrim and glow values), so only what is specific to the roster lives here: the podium, the leaderboard table, the directory cards and the join panel. */ /* this page's panel glow sits top-right rather than bottom-right */ .tsarena .tsa-roster .tsa-strip__glow { background: radial-gradient(620px 320px at 88% 8%, rgba(36, 71, 240, .55), transparent 70%); } .dark .tsarena .tsa-roster .tsa-strip__glow { background: radial-gradient(620px 320px at 88% 8%, rgba(201, 242, 49, .12), transparent 70%); } .tsarena .tsa-roster .tsa-strip__grid { padding-top: 30px; padding-bottom: 30px; } .tsarena .tsa-roster .tsa-strip__icon { width: 40px; height: 40px; } .tsarena .tsa-roster .tsa-strip__icon .msr-a { font-size: 19px; } .tsarena .tsa-roster .tsa-strip__num { font-size: 26px; } .tsarena .tsa-rossec { padding-top: 44px; } .tsarena .tsa-rossec--lb { padding-top: 56px; } .tsarena .tsa-rossec--dir { padding-top: 80px; } .tsarena .tsa-rossec--join { padding-top: 80px; padding-bottom: 0; } .tsarena .tsa-roskicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 18px; } /* podium */ .tsarena .tsa-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tsarena .tsa-podcard { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-podcard--first { border-color: var(--a-gold); box-shadow: 0 0 0 1px rgba(154, 106, 0, .24), 0 18px 44px rgba(20, 35, 90, .16); } .tsarena .tsa-podcard__rank { position: absolute; top: 18px; right: 24px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 44px; line-height: 1; pointer-events: none; color: var(--a-faint); opacity: .35; } .tsarena .tsa-podcard--first .tsa-podcard__rank { color: var(--a-gold); opacity: .3; } .tsarena .tsa-podcard__head { display: flex; align-items: center; gap: 14px; padding-right: 56px; } .tsarena .tsa-podcard__avatar { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); border: 2px solid var(--a-line2); } .tsarena .tsa-podcard__avatar--gold { border-color: var(--a-gold); } .tsarena .tsa-podcard__avatar--silver { border-color: #C7CFC9; } .tsarena .tsa-podcard__avatar--bronze { border-color: #B07C4A; } .tsarena .tsa-podcard__body { min-width: 0; } .tsarena .tsa-podcard__nameline { display: flex; align-items: center; gap: 6px; } .tsarena .tsa-podcard__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-rostick { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--a-pos-soft); color: var(--a-pos); display: grid; place-items: center; font-size: 10px; font-weight: 700; } .tsarena .tsa-podcard__spec { font-size: 13px; color: var(--a-faint); } .tsarena .tsa-podcard__yieldbox { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 8px; padding: 12px 14px; } .tsarena .tsa-podcard__yield { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; color: var(--a-brand-ink); } .tsarena .tsa-roslabel { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-podcard__spark polyline { stroke: var(--a-faint); } .tsarena .tsa-podcard--first .tsa-podcard__spark polyline { stroke: var(--a-gold); } .tsarena .tsa-podcard__stats { display: flex; justify-content: space-between; gap: 12px; } .tsarena .tsa-podcard__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; } .tsarena .tsa-podcard__stats .tsa-roslabel { margin-top: 3px; } .tsarena .tsa-podcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--a-line); padding-top: 14px; margin-top: auto; } .tsarena .tsa-rosform { display: flex; gap: 4px; } .tsarena .tsa-rosform .tsa-wl { width: 14px; height: 14px; font-size: 8px; } .tsarena .tsa-rosform--sm { gap: 3px; } .tsarena .tsa-rosform--sm .tsa-wl { width: 12px; height: 12px; font-size: 7px; } .tsarena .tsa-roscta { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--a-line2); background: none; color: inherit; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; white-space: nowrap; } /* leaderboard */ .tsarena .tsa-rossechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .tsarena .tsa-rossechead .tsa-roskicker { margin-bottom: 10px; } .tsarena .tsa-rossechead__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-roschips { display: flex; gap: 8px; flex-wrap: wrap; } .tsarena .tsa-roschips .tsa-chip { padding: 8px 15px; white-space: nowrap; } .tsarena .tsa-lb { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-lb__head, .tsarena .tsa-lb__row { display: grid; grid-template-columns: 36px minmax(190px, 1.8fr) minmax(96px, 1fr) 84px 78px 66px 104px; gap: 14px; border-bottom: 1px solid var(--a-line); align-items: center; } .tsarena .tsa-lb__head { padding: 12px 20px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--a-faint); } .tsarena .tsa-lb__head > span:last-child { text-align: right; } .tsarena .tsa-lb__row { padding: 14px 20px; } .tsarena .tsa-lb__row:last-child { border-bottom: 0; } .tsarena .tsa-lb__rank { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--a-faint); } .tsarena .tsa-lb__rank--top { color: var(--a-brand-ink); } .tsarena .tsa-lb__who { display: flex; align-items: center; gap: 12px; min-width: 0; } .tsarena .tsa-lb__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); } .tsarena .tsa-lb__name { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-lb__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-lb__form { display: flex; gap: 3px; min-width: 0; overflow: hidden; } .tsarena .tsa-lb__yield { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--a-brand-ink); } .tsarena .tsa-lb__num { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--a-muted); } .tsarena .tsa-lb__plan { display: flex; justify-content: flex-end; } .tsarena .tsa-rosplan { display: inline-flex; align-items: center; background: var(--a-brand); color: var(--a-brand-fg); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 8px; white-space: nowrap; } .tsarena .tsa-rosplan--free { color: var(--a-pos); background: var(--a-pos-soft); font-size: 11px; letter-spacing: .06em; padding: 5px 10px; border-radius: 4px; } /* directory */ .tsarena .tsa-rosdirhead { margin-bottom: 28px; } .tsarena .tsa-rosdirhead .tsa-roskicker { margin-bottom: 10px; } .tsarena .tsa-rosdirhead__title { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-rosdirhead__sub { font-size: 15px; color: var(--a-muted); margin: 0; max-width: 520px; } .tsarena .tsa-rostoolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; } .tsarena .tsa-rostoolbar__sep { width: 1px; height: 22px; background: var(--a-line2); margin: 0 4px; } .tsarena .tsa-rostoolbar__spacer { flex: 1; } .tsarena .tsa-rossearch { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--a-line2); border-radius: 8px; padding: 8px 12px; width: 200px; } .tsarena .tsa-rossearch .msr-a { font-size: 16px; color: var(--a-faint); } .tsarena .tsa-rossearch input { flex: 1; min-width: 0; border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--a-ink); } .tsarena .tsa-rossearch input::placeholder { color: var(--a-faint); } .tsarena .tsa-rossearch input:focus { outline: none; } .tsarena .tsa-rossort { appearance: none; -webkit-appearance: none; border: 1px solid var(--a-line2); border-radius: 8px; padding: 8px 30px 8px 12px; font-family: inherit; font-size: 13px; color: var(--a-muted); background-color: transparent; cursor: pointer; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7689' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .tsarena .tsa-rossort:focus { outline: none; border-color: var(--a-brand); } .tsarena .tsa-rosgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tsarena .tsa-roscard { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-card-shadow); } .tsarena .tsa-roscard__cover { position: relative; height: 100px; flex: none; } .tsarena .tsa-roscard__cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tsarena .tsa-roscard__cscrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 18, 32, .05), rgba(12, 18, 32, .62)); } .tsarena .tsa-roscard__spec { position: absolute; bottom: 11px; left: 15px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .88); } .tsarena .tsa-rostag { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--a-pos); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; } .tsarena .tsa-roscard__body { padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .tsarena .tsa-roscard__head { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-roscard__avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); } .tsarena .tsa-roscard__who { flex: 1; min-width: 0; } .tsarena .tsa-roscard__nameline { display: flex; align-items: center; gap: 6px; } .tsarena .tsa-roscard__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-roscard__nameline .msr-a { font-size: 15px; color: var(--a-brand-ink); flex: none; } .tsarena .tsa-roscard__form { margin-top: 6px; } .tsarena .tsa-roscard__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); padding: 12px 0; } .tsarena .tsa-roscard__stats > div { display: flex; flex-direction: column; gap: 3px; } .tsarena .tsa-roscard__stats > div + div { padding-left: 10px; border-left: 1px solid var(--a-line); } .tsarena .tsa-roscard__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; } .tsarena .tsa-roscard__num--hot { color: var(--a-brand-ink); } .tsarena .tsa-roscard__statlabel { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-roscard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; } .tsarena .tsa-roscard__price { display: flex; align-items: baseline; gap: 5px; } .tsarena .tsa-roscard__amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; } .tsarena .tsa-roscard__amount--free { color: var(--a-pos); } .tsarena .tsa-roscard__per { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-faint); } .tsarena .tsa-rosempty { border: 1px dashed var(--a-line2); border-radius: 16px; padding: 56px 24px; text-align: center; color: var(--a-faint); } .tsarena .tsa-rosempty .msr-a { font-size: 26px; } .tsarena .tsa-rosempty__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 21px; text-transform: uppercase; color: var(--a-muted); margin-top: 12px; } /* become a tipster */ .tsarena .tsa-rosjoin { background: var(--a-panel-bg); border-radius: 16px; padding: 48px 52px; color: #fff; box-shadow: 0 30px 70px rgba(12, 18, 32, .3); display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; position: relative; overflow: hidden; } .tsarena .tsa-rosjoin__glow { position: absolute; inset: 0; background: radial-gradient(620px 320px at 88% 8%, rgba(36, 71, 240, .55), transparent 70%); pointer-events: none; } .dark .tsarena .tsa-rosjoin__glow { background: radial-gradient(620px 320px at 88% 8%, rgba(201, 242, 49, .12), transparent 70%); } .tsarena .tsa-rosjoin__left { position: relative; } .tsarena .tsa-rosjoin__kicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--a-panel-hot); margin-bottom: 14px; } .tsarena .tsa-rosjoin__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; margin: 0; } .tsarena .tsa-rosjoin__text { margin: 18px 0 0; max-width: 440px; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6; } .tsarena .tsa-rosjoin__ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } .tsarena .tsa-rosjoin__cta { display: inline-flex; align-items: center; background: #fff; color: #0C1220; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-rosjoin__cta--ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); color: #fff; } .tsarena .tsa-rosjoin__stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 28px; } .tsarena .tsa-rosjoin__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; line-height: 1; color: #fff; } .tsarena .tsa-rosjoin__num--hot { color: var(--a-panel-hot); } .tsarena .tsa-rosjoin__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-top: 5px; } /* the swapped regions dim while a filter request is in flight */ .tsarena .tsa-roster__lb.is-busy, .tsarena .tsa-roster__dir.is-busy { opacity: .5; transition: opacity .12s; } /* ============================== Tipster profile ============================== */ /* Transcribed 1:1 from `Portal Demo Tipster Profile.dc.html`. The header band shares the hero's scrim and glow; the open picks reuse the pick cards and the "other tipsters" reuse the roster card's stat block, so only this page's own pieces live here: the header, the record cards, the tabs, the history table, the method cards, the reviews and the compare cards. */ .tsarena .tsa-prof__head { position: relative; overflow: hidden; background: var(--a-surface); } .tsarena .tsa-prof__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .tsarena .tsa-prof__scrim { position: absolute; inset: 0; background: var(--a-hero-scrim); } .tsarena .tsa-prof__glow { position: absolute; inset: 0; background: var(--a-hero-glow); } .tsarena .tsa-prof__inner { position: relative; z-index: 1; padding-top: 36px; padding-bottom: 40px; } .tsarena .tsa-prof__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--a-faint); margin-bottom: 24px; } .tsarena .tsa-prof__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-prof__crumbhere { color: var(--a-brand-ink); } .tsarena .tsa-prof__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; } .tsarena .tsa-prof__grid--solo { grid-template-columns: minmax(0, 1fr); } .tsarena .tsa-prof__main { min-width: 0; } .tsarena .tsa-prof__who { display: flex; align-items: center; gap: 20px; } .tsarena .tsa-prof__avatar { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 2px solid var(--a-brand); background-color: var(--a-raised); background-size: cover; background-position: center; } .tsarena .tsa-prof__ident { min-width: 0; } .tsarena .tsa-prof__nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tsarena .tsa-prof__name { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; color: inherit; } .tsarena .tsa-prof__verified { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--a-pos); background: var(--a-pos-soft); border-radius: 4px; padding: 5px 10px; } .tsarena .tsa-prof__verified .msr-a { font-size: 13px; } .tsarena .tsa-prof__spec { font-size: 15px; color: var(--a-muted); margin-top: 8px; } .tsarena .tsa-prof__bio { margin: 22px 0 0; max-width: 600px; font-size: 15px; line-height: 1.65; color: var(--a-muted); } .tsarena .tsa-prof__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .tsarena .tsa-prof__social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: var(--a-muted); background: var(--a-raised); border: 1px solid var(--a-line); text-decoration: none; transition: color .15s, border-color .15s; } .tsarena .tsa-prof__social:hover { color: var(--a-gold); border-color: var(--a-gold); } .tsarena .tsa-prof__social .msr-a { font-size: 17px; } .tsarena .tsa-prof__stats { display: flex; gap: 36px; margin-top: 26px; flex-wrap: wrap; } .tsarena .tsa-prof__statnum { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; line-height: 1; } .tsarena .tsa-prof__statnum--hot { color: var(--a-brand-ink); } .tsarena .tsa-prof__statlabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 6px; } .tsarena .tsa-prof__meta { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; } .tsarena .tsa-prof__formcol { display: flex; flex-direction: column; gap: 6px; } .tsarena .tsa-prof__formcol .tsa-rosform--sm { gap: 4px; } .tsarena .tsa-prof__formlabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--a-faint); } .tsarena .tsa-prof__metasep { width: 1px; height: 32px; background: var(--a-line2); } .tsarena .tsa-prof__metaitem { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--a-faint); } .tsarena .tsa-prof__metaitem .msr-a { font-size: 16px; } .tsarena .tsa-prof__side { min-width: 0; } /* record + breakdown */ .tsarena .tsa-prof-record { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; padding-top: 40px; align-items: start; } .tsarena .tsa-prof-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 26px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-prof-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-brand-ink); margin-bottom: 18px; } .tsarena .tsa-prof-chart__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .tsarena .tsa-prof-chart__head .tsa-prof-kicker { margin-bottom: 8px; } .tsarena .tsa-prof-chart__total { display: flex; align-items: baseline; gap: 10px; } .tsarena .tsa-prof-chart__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 36px; line-height: 1; } .tsarena .tsa-prof-chart__meta { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--a-faint); } .tsarena .tsa-prof-chart__ranges { display: flex; gap: 8px; } .tsarena .tsa-prof-chart__ranges .tsa-chip { padding: 7px 14px; font-size: 13.5px; white-space: nowrap; } .tsarena .tsa-prof-chart__plot { position: relative; height: 240px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-prof-chart__plot svg { width: 100%; height: 100%; display: block; } .tsarena .tsa-prof-chart__plot line { stroke: var(--a-line); stroke-width: 1; } .tsarena .tsa-prof-chart__area { fill: var(--a-brand-soft); } .tsarena .tsa-prof-chart__line { fill: none; stroke: var(--a-brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .tsarena .tsa-prof-chart__axis { display: flex; justify-content: space-between; margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--a-faint); } .tsarena .tsa-prof-chart__foot { display: flex; gap: 36px; border-top: 1px solid var(--a-line); margin-top: 20px; padding-top: 20px; flex-wrap: wrap; } .tsarena .tsa-prof-chart__fnum { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; } .tsarena .tsa-prof-chart__fnum--hot { color: var(--a-brand-ink); } .tsarena .tsa-prof-chart__flabel { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-prof-comp__head { display: grid; grid-template-columns: minmax(0, 1fr) 74px 58px; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--a-line); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--a-faint); } .tsarena .tsa-prof-comp__right { text-align: right; } .tsarena .tsa-prof-comp__row { display: grid; grid-template-columns: minmax(0, 1fr) 74px 58px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--a-line); align-items: center; } .tsarena .tsa-prof-comp__name { font-size: 14px; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prof-comp__picks { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--a-faint); } .tsarena .tsa-prof-comp__profit { font-family: 'JetBrains Mono', monospace; font-size: 14px; white-space: nowrap; } .tsarena .tsa-prof-comp__hit { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--a-muted); text-align: right; white-space: nowrap; } .tsarena .tsa-prof-comp__empty { padding: 16px 0 4px; font-size: 14px; color: var(--a-faint); } /* tabs */ .tsarena .tsa-prof-tabs { padding-top: 56px; } .tsarena .tsa-prof-tabs__bar { display: flex; gap: 28px; border-bottom: 1px solid var(--a-line); margin-bottom: 28px; } .tsarena .tsa-prof-tab { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 2px; margin-bottom: -1px; cursor: pointer; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--a-faint); border-radius: 0; } .tsarena .tsa-prof-tab.is-active { border-bottom-color: var(--a-brand); color: var(--a-brand-ink); } .tsarena .tsa-prof-grid { gap: 20px; } /* graded history */ .tsarena .tsa-prof-hist { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-prof-hist__head, .tsarena .tsa-prof-hist__row { display: grid; grid-template-columns: 58px minmax(180px, 2fr) minmax(0, 1.3fr) 58px 52px 84px 88px; gap: 12px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-prof-hist__head { padding: 13px 22px; background: var(--a-raised); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--a-faint); } .tsarena .tsa-prof-hist__right { text-align: right; } .tsarena .tsa-prof-hist__row { padding: 14px 22px; align-items: center; } .tsarena .tsa-prof-hist__date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-prof-hist__match { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prof-hist__league { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prof-hist__pick, .tsarena .tsa-prof-hist .tsa-ptable__pick { font-size: 13px; color: var(--a-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-prof-hist__odds { font-family: 'JetBrains Mono', monospace; font-size: 13px; } .tsarena .tsa-prof-hist__stake { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--a-faint); } .tsarena .tsa-prof-hist__profit { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 14px; text-align: right; color: var(--a-faint); } .tsarena .tsa-prof-hist__profit--won { color: var(--a-pos); } .tsarena .tsa-prof-hist__profit--lost { color: var(--a-live); } .tsarena .tsa-prof-hist__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; } .tsarena .tsa-prof-hist__count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-prof-hist__more { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--a-line2); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-prof-hist__more .msr-a { font-size: 16px; } /* method */ .tsarena .tsa-prof-method { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; } .tsarena .tsa-prof-method .tsa-prof-kicker { margin-bottom: 16px; } .tsarena .tsa-prof-method__text p { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--a-muted); } .tsarena .tsa-prof-method__text p:last-child { margin-bottom: 22px; } .tsarena .tsa-prof-method__tags { display: flex; gap: 8px; flex-wrap: wrap; } .tsarena .tsa-prof-method__tag { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--a-raised); border: 1px solid var(--a-line); font-size: 13px; font-weight: 600; color: var(--a-muted); } .tsarena .tsa-prof-pattern { display: flex; flex-direction: column; gap: 14px; } .tsarena .tsa-prof-pattern > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--a-line); padding-bottom: 10px; } .tsarena .tsa-prof-pattern > div:last-child { border-bottom: 0; padding-bottom: 0; } .tsarena .tsa-prof-pattern > div > span:first-child { font-size: 14px; color: var(--a-faint); } .tsarena .tsa-prof-pattern > div > span:last-child { font-family: 'JetBrains Mono', monospace; font-size: 15px; } /* reviews + other tipsters */ .tsarena .tsa-prof-reviews, .tsarena .tsa-prof-others { padding-top: 80px; } .tsarena .tsa-prof-others { padding-bottom: 8px; } /* the profile's footer gap is 88, not 80 */ .tsarena .tsa-prof-sechead { margin-bottom: 28px; } .tsarena .tsa-prof-sechead--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .tsarena .tsa-prof-sechead__kicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 10px; } .tsarena .tsa-prof-sechead__title { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; text-transform: uppercase; color: inherit; } .tsarena .tsa-prof-sechead__sub { font-size: 15px; color: var(--a-muted); margin: 0; } .tsarena .tsa-prof-sechead__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--a-brand-ink); cursor: pointer; white-space: nowrap; } .tsarena .tsa-prof-sechead__link .msr-a { font-size: 17px; } .tsarena .tsa-prof-reviews__grid, .tsarena .tsa-prof-others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tsarena .tsa-prof-review { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-prof-review__stars { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .16em; color: var(--a-gold); } .tsarena .tsa-prof-review__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--a-muted); flex: 1; } .tsarena .tsa-prof-review__who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--a-line); padding-top: 14px; } .tsarena .tsa-prof-review__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background-color: var(--a-raised); background-size: cover; background-position: center; } .tsarena .tsa-prof-review__name { font-size: 13px; font-weight: 600; } .tsarena .tsa-prof-review__since { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--a-faint); } .tsarena .tsa-procard { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-procard__head { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-procard__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); } .tsarena .tsa-procard__who { flex: 1; min-width: 0; } .tsarena .tsa-procard__nameline { display: flex; align-items: center; gap: 6px; } .tsarena .tsa-procard__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-procard__nameline .msr-a { font-size: 15px; color: var(--a-brand-ink); flex: none; } .tsarena .tsa-procard__sport { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-procard__head .tsa-free { flex: none; } .tsarena .tsa-procard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; } .tsarena .tsa-procard .tsa-roscard__amount { font-size: 19px; } .tsarena .tsa-procard .tsa-roscta { font-size: 12px; padding: 9px 15px; } /* ============================== Live feed ============================== */ /* Transcribed 1:1 from `Portal Demo Live Feed.dc.html`. The head band is the picks page's, with this design's own scrim (its stops match neither the hero nor the band token) and its glow, which is byte-identical to --a-band-glow. The strip is the shared one at this page's sizes. Everything below the strip is this page's own. */ .tsarena .tsa-live__band .tsa-picksband__scrim { background: var(--a-live-scrim); } .tsarena .tsa-live__band .tsa-picksband__glow { background: var(--a-band-glow); } .tsarena .tsa-live__band .tsa-picksband__inner { padding-top: 40px; padding-bottom: 44px; } .tsarena .tsa-live__band .tsa-picksband__sub { max-width: 540px; } .tsarena .tsa-live__titlerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .tsarena .tsa-live__pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--a-live); border-radius: 999px; padding: 6px 12px; } .tsarena .tsa-live__pill .tsa-dot { background: #fff; } .tsarena .tsa-live__meta { display: flex; align-items: center; gap: 18px; margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-live__refresh { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .tsarena .tsa-live__refresh .msr-a { font-size: 15px; color: var(--a-brand-ink); } /* the strip at this page's sizes */ .tsarena .tsa-live .tsa-strip__grid { padding-top: 30px; padding-bottom: 30px; } .tsarena .tsa-live .tsa-strip__icon { width: 40px; height: 40px; } .tsarena .tsa-live .tsa-strip__icon .msr-a { font-size: 19px; } .tsarena .tsa-live .tsa-strip__num { font-size: 26px; } .tsarena .tsa-strip__icon--live { background: var(--a-live); color: #fff; border: 0; } /* layout */ .tsarena .tsa-live__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding-top: 36px; align-items: start; } .tsarena .tsa-live__feed { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .tsarena .tsa-live__side { display: flex; flex-direction: column; gap: 16px; } /* key points */ .tsarena .tsa-live-key { background: var(--a-raised); border: 1px solid var(--a-line); border-left: 3px solid var(--a-brand); border-radius: 0 16px 16px 0; padding: 20px 24px; } .tsarena .tsa-live-key__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .tsarena .tsa-live-key__head .msr-a { font-size: 14px; color: var(--a-brand-ink); } .tsarena .tsa-live-key__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--a-brand-ink); } .tsarena .tsa-live-key__updated { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--a-faint); } .tsarena .tsa-live-key__list { display: flex; flex-direction: column; gap: 10px; } .tsarena .tsa-live-key__row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.55; } .tsarena .tsa-live-key__num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-brand-ink); padding-top: 4px; } /* filter bar */ .tsarena .tsa-live-bar { display: flex; align-items: center; gap: 10px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 10px 14px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-live-bar .tsa-chip { padding: 8px 15px; font-size: 14px; white-space: nowrap; } .tsarena .tsa-live-bar__spacer { flex: 1; } .tsarena .tsa-live-bar__count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; } /* status strip */ .tsarena .tsa-live-status { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--a-surface); border: 1px dashed var(--a-line2); border-radius: 16px; } .tsarena .tsa-live-status .tsa-dot { width: 8px; height: 8px; } .tsarena .tsa-live-status__text { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--a-muted); } .tsarena .tsa-live-status__spacer { flex: 1; } .tsarena .tsa-live-status__refresh { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--a-line2); background: none; color: inherit; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .tsarena .tsa-live-status__refresh .msr-a { font-size: 15px; } /* timeline */ .tsarena .tsa-live-tl { position: relative; padding-left: 33px; } .tsarena .tsa-live-tl__rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--a-line); } .tsarena .tsa-live-ev { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--a-line); } .tsarena .tsa-live-ev__left { position: relative; padding-top: 2px; } .tsarena .tsa-live-ev__time { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: var(--a-ink); } .tsarena .tsa-live-ev--first .tsa-live-ev__time { color: var(--a-brand-ink); } .tsarena .tsa-live-ev__ago { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-live-ev__dot { position: absolute; left: -37px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--a-line2); box-shadow: 0 0 0 3px var(--a-bg); } .tsarena .tsa-live-ev--first .tsa-live-ev__dot--live { background: var(--a-live); } .tsarena .tsa-live-ev--first .tsa-live-ev__dot--settled { background: var(--a-pos); } .tsarena .tsa-live-ev--first .tsa-live-ev__dot--published { background: var(--a-brand-ink); } .tsarena .tsa-live-ev__body { min-width: 0; } .tsarena .tsa-live-ev__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .tsarena .tsa-live-ev__kind { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; border-radius: 4px; padding: 4px 9px; white-space: nowrap; } .tsarena .tsa-live-ev__kind .msr-a { font-size: 14px; } .tsarena .tsa-live-ev__kind--live { color: var(--a-live); background: rgba(225, 29, 46, .11); } .dark .tsarena .tsa-live-ev__kind--live { background: rgba(242, 86, 77, .12); } .tsarena .tsa-live-ev__kind--settled { color: var(--a-pos); background: var(--a-pos-soft); } .tsarena .tsa-live-ev__kind--published { color: var(--a-brand-ink); background: var(--a-brand-soft); } .tsarena .tsa-live-ev__avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); } .tsarena .tsa-live-ev__tipster { font-size: 13px; font-weight: 600; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-live-ev__spacer { flex: 1; } .tsarena .tsa-live-ev__league { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); white-space: nowrap; } .tsarena .tsa-live-ev__match { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; line-height: 1.05; } .tsarena .tsa-live-ev__scoreline { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .tsarena .tsa-live-ev__score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--a-ink); } .tsarena .tsa-live-ev__clock { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--a-faint); } .tsarena .tsa-live-ev__clock--live { color: var(--a-live); } /* the pick panel inside an event */ .tsarena .tsa-live-pick { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: var(--a-raised); border: 1px solid var(--a-line); border-radius: 12px; padding: 16px 18px; } .tsarena .tsa-live-pick__main { flex: 1 1 200px; min-width: 0; } .tsarena .tsa-live-pick__label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 7px; } .tsarena .tsa-live-pick__sel { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--a-ink); } .tsarena .tsa-live-pick__stake { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); margin-top: 6px; } .tsarena .tsa-live-pick__odds { flex: none; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; background: var(--a-brand); color: var(--a-brand-fg); border-radius: 8px; padding: 10px 16px; } .tsarena .tsa-live-pick__right { flex: 0 0 auto; margin-left: auto; text-align: right; } .tsarena .tsa-live-pick__profit { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; color: var(--a-ink); } .tsarena .tsa-live-pick__profit--won { color: var(--a-pos); } .tsarena .tsa-live-pick__profit--lost { color: var(--a-live); } .tsarena .tsa-live-pick__result { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; color: var(--a-faint); } .tsarena .tsa-live-pick__result--won { color: var(--a-pos); } .tsarena .tsa-live-pick__result--lost { color: var(--a-live); } /* empty state's second line, and the pager */ .tsarena .tsa-rosempty__sub { font-size: 14px; margin-top: 6px; } .tsarena .tsa-live__morewrap { display: flex; justify-content: center; padding-top: 4px; } .tsarena .tsa-live__more { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--a-line2); background: var(--a-surface); color: inherit; font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 12px 22px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-live__more .msr-a { font-size: 17px; } /* sidebar cards */ .tsarena .tsa-live-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 20px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-live-card__kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-brand-ink); margin-bottom: 14px; } .tsarena .tsa-live-scores { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-live-scores__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-live-scores__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; text-transform: uppercase; } .tsarena .tsa-live-scores__live { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--a-live); } .tsarena .tsa-live-scores__live .tsa-dot { width: 6px; height: 6px; } .tsarena .tsa-live-scores__body { padding: 6px 18px 14px; } .tsarena .tsa-live-scores__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-live-scores__row:last-child { border-bottom: 0; } .tsarena .tsa-live-scores__who { min-width: 0; } .tsarena .tsa-live-scores__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-live-scores__league { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-faint); } .tsarena .tsa-live-scores__right { text-align: right; flex: none; } .tsarena .tsa-live-scores__score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; } .tsarena .tsa-live-scores__clock { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-live); } .tsarena .tsa-live-movers { display: flex; flex-direction: column; gap: 14px; } .tsarena .tsa-live-movers__row { display: flex; align-items: center; gap: 12px; } .tsarena .tsa-live-movers__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; background: var(--a-raised); } .tsarena .tsa-live-movers__who { flex: 1; min-width: 0; } .tsarena .tsa-live-movers__name { display: block; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-live-movers__meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-faint); } .tsarena .tsa-live-movers__units { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; } .tsarena .tsa-live-movers__units--up { color: var(--a-pos); } .tsarena .tsa-live-movers__units--down { color: var(--a-live); } .tsarena .tsa-live-how { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--a-muted); line-height: 1.5; } .tsarena .tsa-live-how__row { display: flex; gap: 10px; } .tsarena .tsa-live-how__row .msr-a { font-size: 17px; color: var(--a-pos); flex: none; } /* the swapped regions dim while a request is in flight */ .tsarena .tsa-live [data-tsa-region].is-busy { opacity: .5; transition: opacity .12s; } /* ============================== Become a tipster ============================== */ /* Transcribed 1:1 from `Portal Demo Become a Tipster.dc.html`. The dark panel here is the *lock* gradient (160deg, 100%), not the panel one (150deg, 62%) — this page and the picks paywall share a look the home page does not. Only the hero's scrim and glow are this page's own tokens. */ .tsarena .tsa-join__hero { position: relative; overflow: hidden; background: var(--a-surface); } .tsarena .tsa-join__heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; } .tsarena .tsa-join__scrim { position: absolute; inset: 0; background: var(--a-join-scrim); } .tsarena .tsa-join__glow { position: absolute; inset: 0; background: var(--a-join-glow); } .tsarena .tsa-join__heroinner { position: relative; z-index: 1; padding-top: 44px; padding-bottom: 46px; } .tsarena .tsa-join__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--a-faint); margin-bottom: 20px; } .tsarena .tsa-join__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-join__here { color: var(--a-brand-ink); } .tsarena .tsa-join__herogrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; } .tsarena .tsa-join__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 56px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-join__lead { margin: 20px 0 0; max-width: 520px; color: var(--a-muted); font-size: 17px; line-height: 1.6; } .tsarena .tsa-join__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .tsarena .tsa-join__cta { display: inline-flex; align-items: center; background: var(--a-brand); color: var(--a-brand-fg); font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-join__cta2 { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--a-line2); background: var(--a-surface); font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-join__cta2 .msr-a { font-size: 17px; } .tsarena .tsa-join__tiles { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; } .tsarena .tsa-join__tilenum { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; line-height: 1; } .tsarena .tsa-join__tilenum--hot { color: var(--a-brand-ink); } .tsarena .tsa-join__tilelabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 6px; } .tsarena .tsa-join__shot { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-join__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* shared section scaffolding */ .tsarena .tsa-join__sec { padding-top: 80px; } .tsarena .tsa-join__sechead { margin-bottom: 32px; } .tsarena .tsa-join__sechead--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .tsarena .tsa-join__sechead--center { text-align: center; margin-bottom: 36px; } .tsarena .tsa-join__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 10px; } .tsarena .tsa-join__h2 { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 38px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-join__h2--tight { margin-bottom: 0; } .tsarena .tsa-join__sub { font-size: 15px; color: var(--a-muted); margin: 0; max-width: 560px; } .tsarena .tsa-join__seclink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--a-brand-ink); cursor: pointer; white-space: nowrap; } .tsarena .tsa-join__seclink .msr-a { font-size: 17px; } .tsarena .tsa-join__kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-brand-ink); margin-bottom: 20px; } .tsarena .tsa-join-card { background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-card-shadow); border-radius: 16px; padding: 26px; } .tsarena .tsa-join-card--pad { padding: 30px; } /* calculator */ .tsarena .tsa-join-calc { width: 100%; } .tsarena .tsa-join__calc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .tsarena .tsa-join-calc__controls { padding: 30px; display: flex; flex-direction: column; gap: 28px; } .tsarena .tsa-join-calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .tsarena .tsa-join-calc__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-join-calc__value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; } .tsarena .tsa-join-calc__ends { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-faint); margin-top: 8px; } .tsarena .tsa-join-calc__presets { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--a-line); padding-top: 20px; } .tsarena .tsa-join-calc__presetlabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--a-faint); width: 100%; margin-bottom: 2px; } .tsarena .tsa-join-calc__presets .tsa-chip { padding: 7px 14px; font-size: 13.5px; } /* The design's own range styling, verbatim - the WebKit thumb is 18px, Firefox's 14px. Scoped to the calculator itself: the wrapper these once hung off died with the monolithic join shortcode. */ .tsarena .tsa-join-calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; margin: 2px; height: 4px; border-radius: 999px; background: var(--a-line2); outline: none; } .tsarena .tsa-join-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--a-brand); border: 3px solid var(--a-surface); box-shadow: 0 2px 8px rgba(20, 35, 90, .3); cursor: pointer; } .tsarena .tsa-join-calc input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--a-brand); border: 3px solid var(--a-surface); cursor: pointer; } .tsarena .tsa-join-panel { position: relative; overflow: hidden; background: var(--a-lock-bg); color: #fff; box-shadow: 0 26px 60px rgba(20, 35, 90, .3); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 20px; } .tsarena .tsa-join-panel__glow { position: absolute; inset: 0; background: var(--a-lock-glow); pointer-events: none; } .tsarena .tsa-join-panel > *:not(.tsa-join-panel__glow) { position: relative; } .tsarena .tsa-join-panel__kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-panel-hot); } .tsarena .tsa-join-panel__figure { display: flex; align-items: baseline; gap: 8px; } .tsarena .tsa-join-panel__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.02em; } .tsarena .tsa-join-panel__per { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgba(255, 255, 255, .62); } .tsarena .tsa-join-panel__year { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, .58); margin-top: 8px; } .tsarena .tsa-join-panel__rows { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 20px; } .tsarena .tsa-join-panel__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; color: rgba(255, 255, 255, .72); } .tsarena .tsa-join-panel__val { font-family: 'JetBrains Mono', monospace; font-size: 15px; white-space: nowrap; color: #fff; } .tsarena .tsa-join-panel__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; background: #fff; color: #0C1220; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 8px; cursor: pointer; } /* process */ .tsarena .tsa-join__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tsarena .tsa-join-step { display: flex; flex-direction: column; gap: 12px; } .tsarena .tsa-join-step__num { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--a-brand); color: var(--a-brand-ink); display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; } .tsarena .tsa-join-step__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 21px; text-transform: uppercase; } .tsarena .tsa-join-step__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--a-muted); } /* requirements + terms */ .tsarena .tsa-join__two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .tsarena .tsa-join-terms { display: flex; flex-direction: column; } .tsarena .tsa-join-terms__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-join-terms__row:last-child { border-bottom: 0; } .tsarena .tsa-join-terms__label { font-size: 14px; color: var(--a-faint); } .tsarena .tsa-join-terms__value { font-family: 'JetBrains Mono', monospace; font-size: 15px; white-space: nowrap; } .tsarena .tsa-join-terms__value--hot { color: var(--a-brand-ink); } /* voices */ .tsarena .tsa-join__voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tsarena .tsa-join-voice { display: flex; flex-direction: column; gap: 16px; } .tsarena .tsa-join-voice__text { margin: 0; font-size: 16px; line-height: 1.6; flex: 1; } .tsarena .tsa-join-voice__who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--a-line); padding-top: 16px; } .tsarena .tsa-join-voice__avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid var(--a-brand); background-color: var(--a-raised); background-size: cover; background-position: center; } .tsarena .tsa-join-voice__ident { min-width: 0; flex: 1; } .tsarena .tsa-join-voice__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-join-voice__role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-join-voice__stat { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); white-space: nowrap; } /* application */ .tsarena .tsa-join__app { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .tsarena .tsa-join__apptitle { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-join__applead { margin: 18px 0 0; max-width: 440px; color: var(--a-muted); font-size: 15px; line-height: 1.7; } .tsarena .tsa-join__points { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; } .tsarena .tsa-join__point { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--a-muted); } .tsarena .tsa-join__point .msr-a { font-size: 16px; color: var(--a-pos); } /* faq */ .tsarena .tsa-join__faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .tsarena .tsa-join-faq { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; } .tsarena .tsa-join-faq.is-open { border-color: var(--a-line2); } .tsarena .tsa-join-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 20px; cursor: pointer; background: none; border: 0; text-align: left; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--a-muted); } .tsarena .tsa-join-faq.is-open .tsa-join-faq__q { color: var(--a-ink); } .tsarena .tsa-join-faq__icon { font-size: 19px; flex: none; color: var(--a-faint); } .tsarena .tsa-join-faq.is-open .tsa-join-faq__icon { color: var(--a-brand-ink); } .tsarena .tsa-join-faq__a { padding: 0 20px 20px; font-size: 14.5px; line-height: 1.65; color: var(--a-muted); } /* the application form: the site's own contact form, in this page's clothes. Scoped to .tsa-join__form so no other placement of [tss_contact_form] moves. */ /* the plain card caps itself at 518px; in these layouts the column decides */ .tsscf--arena { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; font-family: 'Barlow', sans-serif; } .tsscf--arena .tsscf__form { margin: 0; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-card-shadow); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 18px; } .tsscf--arena .tsscf__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .tsscf--arena .tsscf__field { display: flex; flex-direction: column; } .tsscf--arena .tsscf__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 7px; } .tsscf--arena .tsscf__optional { text-transform: none; letter-spacing: 0; } .tsscf--arena .tsscf__input { width: 100%; margin: 0; border: 1px solid var(--a-line2); border-radius: 8px; padding: 11px 13px; font-family: inherit; font-size: 14px; line-height: 1.2; color: var(--a-ink); background: transparent; } .tsscf--arena .tsscf__input::placeholder { color: var(--a-faint); } .tsscf--arena .tsscf__input:focus { outline: none; border-color: var(--a-brand); } .tsscf--arena .tsscf__textarea { min-height: 96px; resize: vertical; } .tsscf--arena .tsscf__selectwrap { position: relative; display: block; } .tsscf--arena .tsscf__select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; } .tsscf--arena .tsscf__selecticon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--a-faint); pointer-events: none; } .tsscf--arena .tsscf__hint { font-size: 12px; color: var(--a-faint); margin-top: 6px; } .tsscf--arena .tsscf__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--a-faint); line-height: normal; } .tsscf--arena .tsscf__consent input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--a-brand); } .tsscf--arena .tsscf__submit { display: flex; align-items: center; justify-content: center; gap: 8px; line-height: normal; width: 100%; background: var(--a-brand); color: var(--a-brand-fg); border: 0; font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 8px; cursor: pointer; } .tsscf--arena .tsscf__note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--a-faint); } .tsscf--arena .tsscf__note:empty, .tsscf--arena .tsscf__hp { display: none; } /* ---- The Contact page's message card -------------------------------------- The same fields as the application form in a card of its own: a kicker and a condensed heading at the top, the topic picked from chips rather than a dropdown, and a footer row that puts the button beside the reply time. */ .tsscf--contact .tsscf__form { padding: 32px; gap: 20px; } .tsscf--contact .tsscf__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-brand-ink); margin-bottom: 10px; } .tsscf--contact .tsscf__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.02; text-transform: uppercase; color: var(--a-ink); } .tsscf--contact .tsscf__chips { display: flex; flex-wrap: wrap; gap: 8px; } .tsscf--contact .tsscf__chip { display: inline-flex; } .tsscf--contact .tsscf__chip input { position: absolute; opacity: 0; width: 0; height: 0; } .tsscf--contact .tsscf__chip span { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; background: var(--a-raised); color: var(--a-muted); border: 1px solid var(--a-line); transition: all .12s; } .tsscf--contact .tsscf__chip input:checked + span { background: var(--a-brand); color: var(--a-brand-fg); border-color: var(--a-brand); } .tsscf--contact .tsscf__chip input:focus-visible + span { outline: 2px solid var(--a-brand); outline-offset: 2px; } /* the topic field is a row of chips, so its label sits a little further off */ .tsscf--contact .tsscf__field:has(.tsscf__chips) .tsscf__label { margin-bottom: 9px; } .tsscf--contact .tsscf__textarea { min-height: 140px; } .tsscf--contact .tsscf__consentlink { color: var(--a-brand-ink); font-weight: 600; } .tsscf--contact .tsscf__foot { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--a-line); padding-top: 20px; } .tsscf--contact .tsscf__foot .tsscf__submit { width: auto; flex: none; padding: 14px 26px; } .tsscf--contact .tsscf__note { margin: 0; font-size: 13px; color: var(--a-faint); } .tsscf--contact .tsscf__note .msr-a { font-size: 16px; } .tsscf--contact .tsscf__noticetitle { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--a-ink); } /* ---- The column beside it ------------------------------------------------- The desks, the company panel and the note stack in one Elementor column; each carries the gap to the next, as the design's 16px flex gap does. */ .tsarena .tsa-contact__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-brand-ink); margin-bottom: 18px; } .tsarena .tsa-contact-ch { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 24px; box-shadow: var(--a-card-shadow); margin-bottom: 16px; } .tsarena .tsa-contact-ch__list { display: flex; flex-direction: column; gap: 18px; } .tsarena .tsa-contact-ch__row { display: flex; gap: 14px; align-items: flex-start; } .tsarena .tsa-contact-ch__row + .tsa-contact-ch__row { border-top: 1px solid var(--a-line); padding-top: 18px; } .tsarena .tsa-contact-ch__ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--a-brand-soft); color: var(--a-brand-ink); display: grid; place-items: center; } .tsarena .tsa-contact-ch__ic .msr-a { font-size: 19px; } .tsarena .tsa-contact-ch__body { min-width: 0; } .tsarena .tsa-contact-ch__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; } .tsarena .tsa-contact-ch__text { font-size: 13.5px; color: var(--a-muted); margin-top: 3px; line-height: 1.55; } .tsarena .tsa-contact-ch__mail { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-brand-ink); margin-top: 7px; } .tsarena .tsa-contact-ch__when { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-contact-co { position: relative; overflow: hidden; background: var(--a-panel-bg); border-radius: 16px; padding: 24px; color: #fff; box-shadow: 0 22px 50px rgba(20, 35, 90, .28); margin-bottom: 16px; } .tsarena .tsa-contact-co__glow { position: absolute; inset: 0; background: var(--a-panel-glow); pointer-events: none; } .tsarena .tsa-contact-co__inner { position: relative; } .tsarena .tsa-contact-co__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-panel-hot); margin-bottom: 16px; } .tsarena .tsa-contact-co__list { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; } .tsarena .tsa-contact-co__row { display: flex; gap: 10px; color: rgba(255, 255, 255, .8); } .tsarena .tsa-contact-co__row .msr-a { font-size: 17px; color: var(--a-panel-hot); flex: none; } .tsarena .tsa-contact-note { background: var(--a-surface); border: 1px solid var(--a-line); border-left: 3px solid var(--a-live); border-radius: 0 16px 16px 0; padding: 20px 22px; } .tsarena .tsa-contact-note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .tsarena .tsa-contact-note__head .msr-a { font-size: 17px; color: var(--a-live); } .tsarena .tsa-contact-note__kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--a-live); } .tsarena .tsa-contact-note__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--a-muted); } .tsscf--arena .tsscf__notice { display: flex; align-items: flex-start; gap: 12px; background: var(--a-surface); border: 1px solid var(--a-brand); border-radius: 16px; padding: 56px 40px; text-align: center; flex-direction: column; align-items: center; font-size: 15px; line-height: 1.6; color: var(--a-muted); } .tsscf--arena .tsscf__notice .msr-a { font-size: 36px; color: var(--a-brand-ink); } .tsscf--arena .tsscf__notice--err { border-color: var(--a-live); padding: 18px 20px; flex-direction: row; text-align: left; } .tsscf--arena .tsscf__notice--err .msr-a { font-size: 20px; color: var(--a-live); } /* The process, in this page's flatter form: an outlined number, no rail, no icon. `[tipster_arena_steps style="join"]`. */ .tsarena .tsa-steps--join .tsa-steps__grid { gap: 20px; } .tsarena .tsa-steps--join .tsa-step { padding: 26px; margin-top: 0; display: flex; flex-direction: column; gap: 12px; } .tsarena .tsa-steps--join .tsa-step__num { position: static; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--a-brand); background: none; color: var(--a-brand-ink); box-shadow: none; font-size: 14px; } .tsarena .tsa-steps--join .tsa-step__title { font-size: 21px; margin: 0; } .tsarena .tsa-steps--join .tsa-step__text { margin: 0; } .tsarena .tsa-steps--arena .tsa-sechead { margin-bottom: 56px; } .tsarena .tsa-steps--join .tsa-sechead { text-align: left; margin-bottom: 32px; } .tsarena .tsa-steps--join .tsa-h2 { font-size: 38px; } .tsarena .tsa-steps--join .tsa-sechead--center { display: block; } /* ---- Elementor's own widgets, dressed for this design ------------------- The page uses the builder's native Accordion for the questions and its native Icon Box for "what we look for", so an editor adds, removes and reorders them with the tools they already know. These rules only reach them inside the arena token scope the theme puts around page content. */ /* ---- The builder's own layout, at the design's rhythm --------------------- Elementor pads every column 10px on all four sides and puts 20px under every widget. Neither exists in the designs: their sections carry their own 80px top padding, edge-to-edge bands touch, and a heading stack is 10 / 8 / 32. Measured against a static render of the design file, this was the whole of the vertical drift - every section read 100 instead of 80, the hero sat 10px in from the edge with a 20px gap under it. Weight matters here: each rule is one class heavier than the Elementor default it replaces and no heavier, so it wins over the default and still loses to anything an editor sets on a particular column or widget, which Elementor writes as `.elementor- .elementor-element.elementor-element-` in a stylesheet printed after this one. */ .tsarena-scope .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0 10px; } .tsarena-scope .elementor-section-full_width .elementor-column > .elementor-element-populated { padding: 0; } /* Elementor's column gaps come in 20 or 30; a design that asks for 24 gets it from a class, and the boxed container widens by the same amount so the content still lands on the 1200 column. */ .tsarena-scope .elementor-section-boxed:has(.tsa-gap-24) > .elementor-container { max-width: 1224px; } .tsarena-scope .elementor-section:has(.tsa-gap-24) .elementor-column > .elementor-element-populated { padding: 0 12px; } .tsarena-scope .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px; } .tsarena-scope .elementor-widget.tsa-eyebrow { margin-bottom: 10px; } .tsarena-scope .elementor-widget.tsa-h2 { margin-bottom: 8px; } /* a heading with no subline under it leads straight into the section's content */ .tsarena-scope :where(.elementor-widget).tsa-h2:not(:has(+ .tsa-sub)) { margin-bottom: 32px; } /* a subline placed as its own widget runs the width of its column; the short measure the shortcodes draw belongs to their own heads, not to every one */ .tsarena-scope .elementor-widget.tsa-sub { margin-bottom: 32px; max-width: none; } .tsarena-scope .elementor-widget.tsa-sub p { margin: 0; } /* The application block: a bigger heading than a section title, its eyebrow set a little further off it, and the note and assurances under it. */ body.tsarena-scope .tsa-h2.tsa-h2--lg .elementor-heading-title { font-size: 44px; } .tsarena-scope .elementor-widget.tsa-eyebrow:has(+ .tsa-h2--lg) { margin-bottom: 14px; } .tsarena-scope .elementor-widget.tsa-h2--lg { margin-bottom: 18px; } .tsarena-scope .elementor-widget.tsa-note { margin-bottom: 26px; } .tsarena-scope .tsa-note { font-size: 15px; line-height: 1.7; color: var(--a-muted); max-width: 440px; } .tsarena-scope .tsa-note p { margin: 0; } .tsarena-scope .tsa-checks .elementor-icon-list-items { display: flex; flex-direction: column; gap: 12px; } .tsarena-scope .tsa-checks .elementor-icon-list-item { font-size: 14px; color: var(--a-muted); } .tsarena-scope .tsa-checks .elementor-icon-list-icon { color: var(--a-pos); } .tsarena-scope .tsa-checks .elementor-icon-list-icon svg { width: 16px; height: 16px; fill: currentColor; } /* The column holding the requirement rows is the card the design draws around them; Elementor renders no class of its own on a column, so the rows it contains are what identifies it. */ .tsarena-scope .elementor-column > .elementor-element-populated:has(> .tsa-req) { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; box-shadow: var(--a-card-shadow); padding: 30px; margin: 0 10px; } /* The requirements list: the column itself is the card, so the rows only need the design's own 18px between them and 20px under the kicker. */ body.tsarena-scope .tsa-join__kicker .elementor-heading-title { line-height: normal; } .tsarena-scope .elementor-widget.tsa-join__kicker { margin-bottom: 20px; } .tsarena-scope .elementor-widget-icon-box.tsa-req { margin-bottom: 18px; } .tsarena-scope .elementor-widget-icon-box.tsa-req:last-child { margin-bottom: 0; } /* A heading widget given the class tsa-eyebrow or tsa-h2 wears the design's own type. The class lands on the widget wrapper, so the rule reaches through to Elementor's heading element, and body.tsarena-scope outranks the kit. */ /* The design puts every page on a centred 1200px column, which .tsa-shell gives our own elements. A boxed Elementor section adds 10px of column padding inside its container, so its container has to be 20px wider for the builder's own widgets to land on exactly the same line as ours. Without this the headings and cards sit a few pixels inside the band above them, whatever the kit's content width happens to be. */ body.tsarena-scope .elementor-section-boxed > .elementor-container { max-width: 1220px; } body.tsarena-scope .tsa-eyebrow .elementor-heading-title { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; line-height: normal; color: var(--a-brand-ink); } body.tsarena-scope .tsa-h2 .elementor-heading-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 38px; line-height: 1; text-transform: uppercase; color: var(--a-ink); } body.tsarena-scope .tsa-join__kicker .elementor-heading-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: .12em; color: var(--a-brand-ink); text-transform: none; } body.tsarena-scope .elementor-widget-icon-box .elementor-position-left .elementor-icon-box-wrapper, body.tsarena-scope .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper { display: flex; gap: 14px; align-items: flex-start; text-align: left; } body.tsarena-scope .elementor-widget-icon-box .elementor-icon-box-icon { margin: 2px 0 0; flex: none; } body.tsarena-scope .elementor-widget-icon-box .elementor-icon { font-size: 18px; color: var(--a-pos); background: none; } body.tsarena-scope .elementor-widget-icon-box .elementor-icon svg { width: 18px; height: 18px; fill: currentColor; } body.tsarena-scope .elementor-widget-icon-box .elementor-icon-box-title { margin: 0; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 15px; line-height: normal; color: var(--a-ink); } body.tsarena-scope .elementor-widget-icon-box .elementor-icon-box-title a { color: inherit; } body.tsarena-scope .elementor-widget-icon-box .elementor-icon-box-description { font-size: 14px; color: var(--a-muted); margin-top: 3px; line-height: 1.55; } /* a deal-breaker row: give the widget the CSS class tsa-no */ body.tsarena-scope .elementor-widget-icon-box.tsa-no .elementor-icon { color: var(--a-live); } /* The four rules are Elementor icon boxes given the class tsa-rule: the design's card, its 22px brand glyph and its condensed title. */ body.tsarena-scope .elementor-widget-icon-box.tsa-rule { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 26px; box-shadow: var(--a-card-shadow); height: 100%; } body.tsarena-scope .elementor-widget-icon-box.tsa-rule .elementor-icon-box-wrapper { text-align: left; display: flex; flex-direction: column; gap: 12px; } body.tsarena-scope .elementor-widget-icon-box.tsa-rule .elementor-icon-box-icon { margin: 0; } body.tsarena-scope .elementor-widget-icon-box.tsa-rule .elementor-icon { font-size: 22px; color: var(--a-brand-ink); } body.tsarena-scope .elementor-widget-icon-box.tsa-rule .elementor-icon svg { width: 22px; height: 22px; } body.tsarena-scope .elementor-widget-icon-box.tsa-rule .elementor-icon-box-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--a-ink); } body.tsarena-scope .elementor-widget-icon-box.tsa-rule .elementor-icon-box-description { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--a-muted); } body.tsarena-scope .elementor-widget-accordion .elementor-accordion { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } body.tsarena-scope .elementor-widget-accordion .elementor-accordion-item { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; } body.tsarena-scope .tsa-faq--raised .elementor-accordion-item { box-shadow: var(--a-card-shadow); } body.tsarena-scope .elementor-widget-accordion .elementor-tab-title { padding: 18px 20px; border: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; line-height: normal; text-transform: uppercase; letter-spacing: .04em; color: var(--a-muted); background: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.tsarena-scope .elementor-widget-accordion .elementor-tab-title.elementor-active { color: var(--a-ink); } body.tsarena-scope .elementor-widget-accordion .elementor-accordion-item:has(.elementor-active) { border-color: var(--a-line2); } /* Elementor prints the icon before the title; the design has it after. */ body.tsarena-scope .elementor-widget-accordion .elementor-accordion-icon { order: 2; margin-left: auto; color: var(--a-faint); font-size: 19px; width: auto; float: none; } body.tsarena-scope .elementor-widget-accordion .elementor-accordion-title { flex: 1; text-align: left; } body.tsarena-scope .elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { color: var(--a-brand-ink); } body.tsarena-scope .elementor-widget-accordion .elementor-tab-content { padding: 0 20px 20px; border: 0; font-size: 14.5px; line-height: 1.65; color: var(--a-muted); background: none; text-align: left; } body.tsarena-scope .elementor-widget-accordion .elementor-tab-title a, body.tsarena-scope .elementor-widget-accordion .elementor-accordion-title { color: inherit; font: inherit; letter-spacing: inherit; text-align: left; } /* ========================================================================== * A legal document (Portal Demo Legal.dc.html) * * The theme's "Legal page" template renders the page's own content, the table * of contents it builds from the h2s and its scroll-spy; this is what that * looks like under the arena chrome. The document itself stays ordinary * WordPress content - a heading is a heading, a quote is the plain-terms note, * a list is the chevron list, a table is the key/value card - so whoever writes * the policy writes it in the editor, not in markup. * ======================================================================= */ .tsarena .tsa-doc__head { border-bottom: 1px solid var(--a-line); background: var(--a-doc-glow); } .tsarena .tsa-doc__headinner { padding-top: 44px; padding-bottom: 40px; } .tsarena .tsa-doc__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 20px; } .tsarena .tsa-doc__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-doc__here { color: var(--a-brand-ink); } .tsarena .tsa-doc__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-doc__intro { margin: 18px 0 0; max-width: 640px; color: var(--a-muted); font-size: 17px; line-height: 1.6; } .tsarena .tsa-doc__meta { display: flex; gap: 28px; margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-doc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding-top: 44px; align-items: start; } .tsarena .tsa-doc__body { min-width: 0; max-width: 720px; } /* ---- the document itself, written as ordinary content ---- */ .tsarena .tsa-doc__content { counter-reset: tsa-doc; } .tsarena .tsa-doc__content > *:first-child { margin-top: 0; } .tsarena .tsa-doc__content h2 { counter-increment: tsa-doc; display: flex; gap: 14px; align-items: baseline; margin: 40px 0 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--a-ink); scroll-margin-top: 100px; } .tsarena .tsa-doc__content h2::before { content: counter(tsa-doc, decimal-leading-zero); font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 14px; color: var(--a-brand-ink); flex: none; } .tsarena .tsa-doc__content p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; color: var(--a-muted); text-wrap: pretty; } .tsarena .tsa-doc__content a { color: var(--a-brand-ink); } /* a quote is the design's "in plain terms" note; its citation is the kicker */ .tsarena .tsa-doc__content blockquote { display: flex; flex-direction: column-reverse; align-items: flex-start; border-left: 3px solid var(--a-brand); background: var(--a-raised); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 0 0 20px; } .tsarena .tsa-doc__content blockquote p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--a-ink); } .tsarena .tsa-doc__content blockquote cite { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-brand-ink); margin-bottom: 6px; } .tsarena .tsa-doc__content ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .tsarena .tsa-doc__content ul li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.65; color: var(--a-muted); } .tsarena .tsa-doc__content ul li::before { content: 'chevron_right'; position: absolute; left: 0; top: 4px; width: 18px; font-family: 'Material Symbols Rounded'; font-size: 16px; line-height: 1; color: var(--a-brand-ink); font-feature-settings: 'liga'; } /* the last row's own rule is the card's bottom edge - a border there too would make the card a pixel taller than the design's */ .tsarena .tsa-doc__content figure.wp-block-table { border: 1px solid var(--a-line); border-bottom: 0; border-radius: 12px; overflow: hidden; margin: 0 0 22px; } .tsarena .tsa-doc__content figure.wp-block-table table { width: 100%; border-collapse: collapse; } .tsarena .tsa-doc__content figure.wp-block-table tr { background: transparent; } .tsarena .tsa-doc__content figure.wp-block-table tbody tr:nth-child(odd) { background: var(--a-raised); } .tsarena .tsa-doc__content figure.wp-block-table th, .tsarena .tsa-doc__content figure.wp-block-table td { border-bottom: 1px solid var(--a-line); padding: 13px 18px; text-align: left; vertical-align: top; } .tsarena .tsa-doc__content figure.wp-block-table th:first-child, .tsarena .tsa-doc__content figure.wp-block-table td:first-child { width: 41.67%; padding-right: 2px; font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--a-faint); } .tsarena .tsa-doc__content figure.wp-block-table th:last-child, .tsarena .tsa-doc__content figure.wp-block-table td:last-child { padding-left: 16px; font-size: 14px; font-weight: 400; color: var(--a-muted); line-height: 1.55; } /* ---- the card under the document, and the rail beside it ---- */ .tsarena .tsa-doc__kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-brand-ink); } /* the design's last section keeps its 40 before this card, whatever block the document happens to end on */ .tsarena .tsa-doc__ask { margin-top: 40px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 26px; margin-bottom: 20px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-doc__ask .tsa-doc__kicker { margin-bottom: 10px; } .tsarena .tsa-doc__asktext { margin: 0 0 16px; font-size: 15px; color: var(--a-muted); line-height: 1.65; } .tsarena .tsa-doc__askrow { display: flex; gap: 12px; align-items: center; } .tsarena .tsa-doc__askbtn { display: inline-flex; align-items: center; border: 1px solid var(--a-line2); font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-doc__askmail { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--a-brand-ink); } .tsarena .tsa-doc__rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; } .tsarena .tsa-doc__card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 20px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-doc__card .tsa-doc__kicker { margin-bottom: 12px; } .tsarena .tsa-doc__toc { display: flex; flex-direction: column; gap: 2px; } /* the link class is the theme's, so the scroll-spy script drives this rail unchanged; the default design's pill around the active row is not part of this one */ .tsarena .tsa-doc__toc .sspage-toc__link { display: block; padding: 8px 0; border: 0; border-radius: 0; background: none; font-size: 13.5px; font-weight: 400; color: var(--a-muted); cursor: pointer; } .tsarena .tsa-doc__toc .sspage-toc__link.is-active { background: none; border-color: transparent; font-weight: 600; color: var(--a-brand-ink); } .tsarena .tsa-doc__tocnum { font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-right: 8px; opacity: .7; } .tsarena .tsa-doc__policies { display: flex; flex-direction: column; gap: 2px; } .tsarena .tsa-doc__policy { padding: 8px 0; font-size: 14px; font-weight: 400; color: var(--a-muted); } .tsarena .tsa-doc__policy.is-current { font-weight: 600; color: var(--a-brand-ink); } .tsarena .tsa-doc__note { background: var(--a-surface); border: 1px solid var(--a-line); border-left: 3px solid var(--a-live); border-radius: 0 16px 16px 0; padding: 18px 20px; } .tsarena .tsa-doc__notehead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .tsarena .tsa-doc__notehead .msr-a { font-size: 16px; color: var(--a-live); } .tsarena .tsa-doc__notekicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--a-live); } .tsarena .tsa-doc__notetext { margin: 0; font-size: 13px; line-height: 1.6; color: var(--a-muted); } /* a document ends further off its footer than any other page */ body.tsa-doc-page .tsa-footer { margin-top: 88px; } body:has(.tsa-featband-wrap) .tsa-footer { margin-top: 0; } /* ========================================================================== * The news desk (Portal Demo News.dc.html) * * The theme's blog listing, drawn to this design: a headed band, a lead story * beside two smaller ones, a category filter, a card grid and a sidebar. The * posts, the query and the pagination are WordPress's own. * ======================================================================= */ .tsarena .tsa-news__head { position: relative; overflow: hidden; background: var(--a-surface); } .tsarena .tsa-news__headimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } .tsarena .tsa-news__scrim { position: absolute; inset: 0; background: var(--a-news-scrim); } .tsarena .tsa-news__glow { position: absolute; inset: 0; background: var(--a-news-glow); } .tsarena .tsa-news__headinner { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 44px; } .tsarena .tsa-news__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 16px; } .tsarena .tsa-news__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-news__here { color: var(--a-brand-ink); } .tsarena .tsa-news__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-news__lead { margin: 12px 0 0; max-width: 540px; color: var(--a-muted); font-size: 17px; line-height: 1.6; } /* ---- the lead story and the two beside it ---- */ .tsarena .tsa-news__top { padding-top: 44px; } .tsarena .tsa-news__topgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; } .tsarena .tsa-news-lead { display: flex; flex-direction: column; gap: 20px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 20px; box-shadow: var(--a-card-shadow); color: inherit; } .tsarena .tsa-news-lead__cover { position: relative; aspect-ratio: 16 / 8; border-radius: 12px; overflow: hidden; background: var(--a-raised); } .tsarena .tsa-news-lead__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tsarena .tsa-news-lead__body { display: flex; flex-direction: column; gap: 14px; padding: 0 6px 6px; } .tsarena .tsa-news-lead__top { display: flex; align-items: center; gap: 10px; } .tsarena .tsa-news__cat { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-brand-ink); } .tsarena .tsa-news__cat--sm { font-size: 10px; } .tsarena .tsa-news-lead__flag { display: inline-flex; align-items: center; white-space: nowrap; flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); background: var(--a-raised); border: 1px solid var(--a-line); border-radius: 4px; padding: 4px 9px; } .tsarena .tsa-news-lead__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 42px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-news-lead__text { margin: 0; color: var(--a-muted); font-size: 17px; line-height: 1.6; max-width: 640px; } .tsarena .tsa-news-lead__who { display: flex; align-items: center; gap: 12px; padding-top: 4px; } .tsarena .tsa-news-lead__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; background: var(--a-raised); display: block; } .tsarena .tsa-news-lead__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .tsarena .tsa-news-lead__author { font-size: 13px; font-weight: 600; } .tsarena .tsa-news-lead__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); } .tsarena .tsa-news__stack { display: flex; flex-direction: column; gap: 20px; } /* ---- a card, in the stack and in the grid ---- */ .tsarena .tsa-news-card { display: flex; flex-direction: column; gap: 16px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 16px; color: inherit; transition: transform .15s ease-out, border-color .15s ease-out, box-shadow .28s ease-out; } .tsarena .tsa-news-card:hover { transform: translateY(-4px); border-color: var(--a-line2); box-shadow: var(--a-card-shadow); } .tsarena .tsa-news-card--side { flex: 1; } .tsarena .tsa-news-card__cover { aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; border: 1px solid var(--a-line); overflow: hidden; background: var(--a-raised); position: relative; } .tsarena .tsa-news-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .tsarena .tsa-news-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; } .tsarena .tsa-news-card__top { display: flex; align-items: center; gap: 8px; } .tsarena .tsa-news-card__live { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; background: var(--a-live); color: #fff; border-radius: 4px; padding: 3px 8px; } .tsarena .tsa-news-card__live .tsa-dot { background: #fff; } .tsarena .tsa-news-card__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 23px; line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; } .tsarena .tsa-news-card__text { margin: 0; font-size: 14px; color: var(--a-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tsarena .tsa-news-card__meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); } .tsarena .tsa-news__dot { opacity: .5; } /* ---- the listing itself ---- */ .tsarena .tsa-news { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding-top: 44px; align-items: start; } .tsarena .tsa-news--full { grid-template-columns: minmax(0, 1fr); } .tsarena .tsa-news__main { min-width: 0; } .tsarena .tsa-news__filter { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 10px 14px; box-shadow: var(--a-card-shadow); } .tsarena .tsa-news__chip { display: inline-flex; align-items: center; line-height: normal; padding: 8px 15px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--a-raised); color: var(--a-muted); border: 1px solid var(--a-line); transition: all .12s; } /* the picked chip drops its border, as the design draws it */ .tsarena .tsa-news__chip.is-active { background: var(--a-brand); color: var(--a-brand-fg); border: 0; } .tsarena .tsa-news__count { margin-left: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 100px; background: var(--a-line); color: var(--a-faint); } .tsarena .tsa-news__chip.is-active .tsa-news__count { background: rgba(255, 255, 255, .22); color: var(--a-brand-fg); } .tsarena .tsa-news__filterspace { flex: 1; } .tsarena .tsa-news__sort { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--a-line2); border-radius: 8px; padding: 7px 12px; font-size: 13px; color: var(--a-muted); white-space: nowrap; } .tsarena .tsa-news__sort .msr-a { font-size: 16px; } .tsarena .tsa-news__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .tsarena .tsa-news__empty { border: 1px dashed var(--a-line2); border-radius: 16px; padding: 56px 24px; text-align: center; color: var(--a-faint); } .tsarena .tsa-news__empty .msr-a { font-size: 26px; } .tsarena .tsa-news__emptytxt { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 21px; text-transform: uppercase; color: var(--a-muted); margin-top: 12px; } .tsarena .tsa-news__more { display: flex; justify-content: center; margin-top: 28px; } .tsarena .tsa-news__morebtn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--a-line2); background: var(--a-surface); font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 8px; white-space: nowrap; color: inherit; cursor: pointer; } .tsarena .tsa-news__morebtn[disabled] { opacity: .6; cursor: default; } .tsarena .tsa-news__morebtn .msr-a { font-size: 18px; } /* ---- the rail ---- */ .tsarena .tsa-news__aside { display: flex; flex-direction: column; gap: 16px; } .tsarena .tsa-news__aside .tsa-pcard { padding: 20px; } .tsarena .tsa-news__aside .tsa-pkicker { margin-bottom: 14px; } .tsarena .tsa-news-latest { display: flex; flex-direction: column; } .tsarena .tsa-news-latest__row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; color: inherit; } .tsarena .tsa-news-latest__row + .tsa-news-latest__row { border-top: 1px solid var(--a-line); } .tsarena .tsa-news-latest__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--a-line2); flex: none; } .tsarena .tsa-news-latest__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; } .tsarena .tsa-news-nl { position: relative; overflow: hidden; background: var(--a-panel-bg); border-radius: 16px; padding: 22px; color: #fff; box-shadow: 0 22px 50px rgba(20, 35, 90, .28); } .tsarena .tsa-news-nl__glow { position: absolute; inset: 0; background: var(--a-panel-glow); pointer-events: none; } .tsarena .tsa-news-nl__inner { position: relative; } .tsarena .tsa-news-nl__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); } .tsarena .tsa-news-nl__ic .msr-a { font-size: 19px; color: var(--a-gold); } .tsarena .tsa-news-nl__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 23px; text-transform: uppercase; margin: 14px 0 8px; line-height: 1.05; } .tsarena .tsa-news-nl__text { font-size: 13px; color: rgba(255, 255, 255, .72); margin-bottom: 16px; line-height: 1.55; } .tsarena .tsa-news-nl__input { display: block; width: 100%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 11px 13px; font-family: inherit; font-size: 13px; line-height: normal; color: #fff; margin: 0 0 10px; } .tsarena .tsa-news-nl__input::placeholder { color: rgba(255, 255, 255, .6); } .tsarena .tsa-news-nl__btn { display: flex; align-items: center; justify-content: center; width: 100%; background: #fff; color: #0C1220; border: 0; font-family: inherit; font-weight: 700; font-size: 13.5px; line-height: normal; padding: 11px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-news-nl__msg { font-size: 12px; color: rgba(255, 255, 255, .8); margin-top: 10px; } .tsarena .tsa-news-board { display: flex; flex-direction: column; gap: 12px; } .tsarena .tsa-news-board__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tsarena .tsa-news-board__game { min-width: 0; } .tsarena .tsa-news-board__teams { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-news-board__league { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--a-faint); } .tsarena .tsa-news-board__time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-muted); flex: none; } .tsarena .tsa-news-board__live { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--a-live); flex: none; } .tsarena .tsa-news-board__cta { display: flex; align-items: center; justify-content: center; margin-top: 14px; border: 1px solid var(--a-line2); font-weight: 700; font-size: 13px; padding: 10px; border-radius: 8px; white-space: nowrap; color: inherit; } /* ========================================================================== * A news article (Portal Demo Single Post.dc.html) * * The theme's own single post: its content, its table of contents, its share * buttons and its scroll-spy, drawn as this design draws them. The body is * ordinary WordPress content, so a writer keeps writing in the editor. * ======================================================================= */ /* the nav pins itself while you read, with the rail under it */ body.tsa-post-page .tsarena .tsa-nav { position: sticky; top: 0; z-index: 50; } .tsarena .tsa-nav__progress { position: sticky; top: 68px; z-index: 50; height: 2px; background: var(--a-line); } .tsarena .tsa-nav__progressbar { display: block; height: 100%; width: 0; background: var(--a-brand); transition: width 120ms linear; } .tsarena .tsa-post__head { position: relative; overflow: hidden; } .tsarena .tsa-post__glow { position: absolute; inset: 0; background: var(--a-post-glow); pointer-events: none; } .tsarena .tsa-post__headinner { position: relative; z-index: 1; padding-top: 40px; } .tsarena .tsa-post__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 22px; } .tsarena .tsa-post__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-post__here { color: var(--a-brand-ink); } .tsarena .tsa-post__headtxt { max-width: 860px; } .tsarena .tsa-post__top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .tsarena .tsa-post__cat { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-brand-ink); } .tsarena .tsa-post__flag { display: inline-flex; align-items: center; white-space: nowrap; flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); background: var(--a-raised); border: 1px solid var(--a-line); border-radius: 4px; padding: 4px 9px; } .tsarena .tsa-post__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; text-transform: uppercase; text-wrap: balance; } .tsarena .tsa-post__lead { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--a-muted); max-width: 720px; } .tsarena .tsa-post__byline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 28px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--a-line); } .tsarena .tsa-post__who { display: flex; align-items: center; gap: 14px; } .tsarena .tsa-post__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--a-brand); overflow: hidden; display: block; background: var(--a-raised); } .tsarena .tsa-post__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .tsarena .tsa-post__whoname { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .tsarena .tsa-post__whometa { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); margin-top: 3px; } .tsarena .tsa-post__share { display: flex; align-items: center; gap: 8px; } .tsarena .tsa-post__sharelabel { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--a-faint); margin-right: 4px; } .tsarena .tsa-post__sharebtn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-muted); } .tsarena .tsa-post__sharebtn .msr-a { font-size: 17px; } .tsarena .tsa-post__herobox { aspect-ratio: 16 / 7; width: 100%; border-radius: 16px; border: 1px solid var(--a-line); overflow: hidden; background: var(--a-raised); } .tsarena .tsa-post__herobox img { width: 100%; height: 100%; object-fit: cover; display: block; } .tsarena .tsa-post__herocap { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; color: var(--a-faint); margin-top: 10px; } /* ---- the article and its rail ---- */ .tsarena .tsa-post { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-top: 40px; align-items: start; } .tsarena .tsa-post__body { min-width: 0; max-width: 720px; } .tsarena .tsa-post__aside { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: 20px; } .tsarena .tsa-post__aside .tsa-pcard { padding: 20px; } .tsarena .tsa-post__aside .tsa-pcard:first-child .tsa-pkicker { margin-bottom: 12px; } .tsarena .tsa-post__aside .tsa-pkicker { margin-bottom: 14px; } .tsarena .tsa-post__toc { display: flex; flex-direction: column; gap: 2px; } .tsarena .tsa-post__toc .sspost-toc__link { display: block; padding: 9px 0; border: 0; border-radius: 0; background: none; font-size: 13.5px; line-height: 1.35; font-weight: 400; color: var(--a-muted); } .tsarena .tsa-post__toc .sspost-toc__link.is-active { background: none; font-weight: 600; color: var(--a-brand-ink); } /* ---- the body, written as ordinary content ---- */ .tsarena .tsa-post__content > *:first-child { margin-top: 0; } .tsarena .tsa-post__content p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--a-muted); } .tsarena .tsa-post__content p.tsa-post__leadin { font-size: 19px; color: var(--a-ink); } .tsarena .tsa-post__content strong { color: var(--a-ink); font-weight: 600; } .tsarena .tsa-post__content a { color: var(--a-brand-ink); font-weight: 600; } .tsarena .tsa-post__content h2 { margin: 44px 0 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.06; text-transform: uppercase; color: var(--a-ink); scroll-margin-top: 100px; } .tsarena .tsa-post__content blockquote { border-left: 3px solid var(--a-brand); padding: 0 0 0 24px; margin: 32px 0; display: flex; flex-direction: column; } .tsarena .tsa-post__content blockquote p { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--a-ink); text-wrap: pretty; } .tsarena .tsa-post__content blockquote cite { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); margin-top: 12px; } .tsarena .tsa-post__content ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tsarena .tsa-post__content ul li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.65; color: var(--a-muted); } .tsarena .tsa-post__content ul li::before { content: 'chevron_right'; position: absolute; left: 0; top: 4px; width: 20px; font-family: 'Material Symbols Rounded'; font-size: 17px; line-height: 1; color: var(--a-brand-ink); font-feature-settings: 'liga'; } .tsarena .tsa-post__content figure.wp-block-image { margin: 32px 0; } .tsarena .tsa-post__content figure.wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-raised); } .tsarena .tsa-post__content figure.wp-block-image figcaption { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; color: var(--a-faint); margin-top: 10px; } /* ---- the pick the article refers to ---- */ .tsarena .tsa-pickref { margin: 32px 0; } .tsarena .tsa-pickref__kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--a-faint); margin-bottom: 12px; } .tsarena .tsa-pickref .tsa-pickcard { border-color: var(--a-brand); box-shadow: 0 0 0 1px rgba(36, 71, 240, .28), 0 18px 44px rgba(36, 71, 240, .22); } .dark .tsarena .tsa-pickref .tsa-pickcard { box-shadow: 0 0 0 1px rgba(201, 242, 49, .28), 0 18px 44px rgba(201, 242, 49, .16); } /* the same card as the picks archive, at the sizes this article draws it */ .tsarena .tsa-pickref .tsa-pickcard__match { display: block; font-size: 24px; line-height: 1.05; margin-bottom: 0; } .tsarena .tsa-pickref .tsa-pickcard__when { margin-top: 4px; } .tsarena .tsa-pickref .tsa-pickbox { padding: 10px 13px; } .tsarena .tsa-pickref .tsa-odds { min-width: 84px; padding: 10px 16px; } .tsarena .tsa-pickref .tsa-odds__value { font-size: 22px; } .tsarena .tsa-pickref .tsa-tipsterrow .tsa-btn { font-size: 12.5px; padding: 9px 15px; } .tsarena .tsa-pickref .tsa-tipsterrow { gap: 11px; } .tsarena .tsa-pickref .tsa-tipsterrow__avatar { width: 32px; height: 32px; } .tsarena .tsa-pickref__stats .tsa-pstat__num { font-size: 17px; } .tsarena .tsa-pickref__stats { display: grid; grid-template-columns: repeat(var(--tsa-figs, 3), 1fr); gap: 16px; margin-top: 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; padding: 18px 20px; } /* ---- tags and the author ---- */ .tsarena .tsa-post__tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--a-line); } .tsarena .tsa-post__tag { display: inline-flex; align-items: center; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--a-raised); border: 1px solid var(--a-line); font-size: 13px; font-weight: 600; color: var(--a-muted); } .tsarena .tsa-post-author { margin-top: 32px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 26px; box-shadow: var(--a-card-shadow); display: flex; gap: 20px; align-items: flex-start; } .tsarena .tsa-post-author__avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 2px solid var(--a-brand); overflow: hidden; display: block; background: var(--a-raised); } .tsarena .tsa-post-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .tsarena .tsa-post-author__body { flex: 1; min-width: 0; } .tsarena .tsa-post-author__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; } .tsarena .tsa-post-author__desk { font-size: 13px; color: var(--a-faint); margin-bottom: 12px; } .tsarena .tsa-post-author__bio { margin: 0 0 16px; font-size: 14px; color: var(--a-muted); line-height: 1.6; max-width: 420px; } .tsarena .tsa-post-author__stats { display: flex; gap: 28px; } .tsarena .tsa-post-author__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; } .tsarena .tsa-post-author__num--hot { color: var(--a-brand-ink); } .tsarena .tsa-post-author__lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); margin-top: 4px; } .tsarena .tsa-post-author__cta { display: flex; flex-direction: column; gap: 10px; width: 180px; flex: none; } .tsarena .tsa-post-author__cta > * { display: flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 8px; } .tsarena .tsa-post-author__link { border: 1px solid var(--a-line2); color: inherit; } .tsarena .tsa-post-author__buy { background: var(--a-brand); color: var(--a-brand-fg); } /* ---- the desk's other stories ---- */ .tsarena .tsa-post__more { padding-top: 76px; } .tsarena .tsa-post__more .tsa-sechead { margin-bottom: 24px; } .tsarena .tsa-post__moreh2 { font-size: 34px; margin-bottom: 0; } .tsarena .tsa-post__moregrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ============================== About us ============================== */ /* Transcribed 1:1 from `Portal Demo About Us.dc.html`. The dark cards here are the panel gradient (150deg, 62%), as the home page uses — not the lock one. Only the hero's scrim and glow are this page's own values. */ .tsarena .tsa-about__hero { position: relative; overflow: hidden; background: var(--a-surface); } .tsarena .tsa-about__heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; } .tsarena .tsa-about__scrim { position: absolute; inset: 0; background: var(--a-about-scrim); } /* The Contact page opens with the same band at its own height: no photo card under the lead, so the head is shorter and the type a size down. */ .tsarena .tsa-about__hero--contact .tsa-about__heroimg { object-position: 50% 45%; } .tsarena .tsa-about__hero--contact .tsa-about__scrim { background: var(--a-contact-scrim); } .tsarena .tsa-about__hero--contact .tsa-about__glow { background: var(--a-contact-glow); } .tsarena .tsa-about__hero--contact .tsa-about__heroinner { padding-bottom: 44px; } .tsarena .tsa-about__hero--contact .tsa-about__title { font-size: 52px; line-height: 1; } .tsarena .tsa-about__hero--contact .tsa-about__lead { margin-top: 14px; max-width: 540px; } /* on the contact band only the lead is held short - the title runs full width */ .tsarena .tsa-about__hero--contact .tsa-about__head { max-width: none; } .tsarena .tsa-about__glow { position: absolute; inset: 0; background: var(--a-about-glow); } .tsarena .tsa-about__heroinner { position: relative; z-index: 1; padding-top: 44px; padding-bottom: 40px; } .tsarena .tsa-about__crumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--a-faint); margin-bottom: 20px; } .tsarena .tsa-about__crumbsep { opacity: .5; margin: 0 4px; } .tsarena .tsa-about__here { color: var(--a-brand-ink); } .tsarena .tsa-about__head { max-width: 900px; } .tsarena .tsa-about__title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: .98; text-transform: uppercase; } .tsarena .tsa-about__lead { margin: 22px 0 0; max-width: 620px; color: var(--a-muted); font-size: 17px; line-height: 1.6; } .tsarena .tsa-about__shot { margin-top: 36px; position: relative; aspect-ratio: 21/8; border-radius: 16px; overflow: hidden; box-shadow: var(--a-card-shadow); } .tsarena .tsa-about__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tsarena .tsa-about__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 14px; } /* the numbers band: this page states four figures and shows no icons */ .tsarena .tsa-about-strip__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 30px; padding-bottom: 30px; } .tsarena .tsa-about-strip__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 28px; line-height: 1; color: #fff; } .tsarena .tsa-about-strip__num--hot { color: var(--a-panel-hot); } .tsarena .tsa-about-strip__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-top: 6px; } /* The Contact page's reply times: as many cells as there are rows, each one ruled off from the last. */ .tsarena .tsa-about-strip--sla .tsa-about-strip__grid { grid-template-columns: repeat(var(--tsa-cells, 3), 1fr); gap: 0; padding-top: 28px; padding-bottom: 28px; } .tsarena .tsa-about-strip--sla .tsa-about-strip__grid > div + div { padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, .14); } .tsarena .tsa-about-strip--sla .tsa-about-strip__num { font-size: 26px; } /* the settlement chain */ .tsarena .tsa-about-chain { background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-card-shadow); border-radius: 16px; padding: 44px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .tsarena .tsa-about-chain__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; } .tsarena .tsa-about-chain__text { margin: 18px 0 0; max-width: 440px; color: var(--a-muted); font-size: 15px; line-height: 1.7; } .tsarena .tsa-about-chain__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; border: 1px solid var(--a-line2); font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-about-chain__cta .msr-a { font-size: 16px; } .tsarena .tsa-about-chain__right { display: flex; flex-direction: column; } .tsarena .tsa-about-chain__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; } .tsarena .tsa-about-chain__row--last { padding-bottom: 0; } .tsarena .tsa-about-chain__rail { display: flex; flex-direction: column; align-items: center; } .tsarena .tsa-about-chain__num { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--a-brand); color: var(--a-brand-ink); display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; } .tsarena .tsa-about-chain__line { flex: 1; width: 1px; background: var(--a-line2); margin-top: 6px; } .tsarena .tsa-about-chain__body { min-width: 0; padding-top: 4px; } .tsarena .tsa-about-chain__steptitle { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; } .tsarena .tsa-about-chain__steptext { font-size: 14px; color: var(--a-muted); margin-top: 4px; } /* the timeline */ .tsarena .tsa-about-time__row { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--a-line); margin-bottom: 28px; } .tsarena .tsa-about-time__row--last { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .tsarena .tsa-about-time__when { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; color: var(--a-brand-ink); white-space: nowrap; padding-top: 4px; } .tsarena .tsa-about-time__body { min-width: 0; } .tsarena .tsa-about-time__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; text-transform: uppercase; } .tsarena .tsa-about-time__text { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: var(--a-muted); max-width: 640px; } /* the team */ .tsarena .tsa-about-team { display: grid; grid-template-columns: repeat(var(--tsa-about-cols, 3), 1fr); gap: 20px; } .tsarena .tsa-about-team__card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 22px; box-shadow: var(--a-card-shadow); display: flex; align-items: flex-start; gap: 14px; } .tsarena .tsa-about-team__avatar { width: 56px; height: 56px; flex: none; border-radius: 14px; background-color: var(--a-raised); background-size: cover; background-position: center; } .tsarena .tsa-about-team__body { min-width: 0; } .tsarena .tsa-about-team__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1; } .tsarena .tsa-about-team__role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-brand-ink); margin-top: 6px; } .tsarena .tsa-about-team__bio { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--a-muted); } /* the two call-to-action cards */ .tsarena .tsa-about-cta { position: relative; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 40px; box-shadow: var(--a-card-shadow); height: 100%; } /* the dark panel keeps the light card's 1px border as transparent, so a pair of cards side by side are the same height, as in the design */ .tsarena .tsa-about-cta--panel { background: var(--a-panel-bg); border-color: transparent; color: #fff; box-shadow: 0 26px 60px rgba(20, 35, 90, .3); } .tsarena .tsa-about-cta__glow { position: absolute; inset: 0; background: var(--a-panel-glow); pointer-events: none; } .tsarena .tsa-about-cta__inner { position: relative; } .tsarena .tsa-about-cta__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--a-brand-ink); margin-bottom: 12px; } .tsarena .tsa-about-cta--panel .tsa-about-cta__eyebrow { color: var(--a-panel-hot); } .tsarena .tsa-about-cta__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.02; text-transform: uppercase; } .tsarena .tsa-about-cta__text { margin: 14px 0 24px; font-size: 14.5px; line-height: 1.6; color: var(--a-muted); max-width: 380px; } .tsarena .tsa-about-cta--panel .tsa-about-cta__text { color: rgba(255, 255, 255, .75); } .tsarena .tsa-about-cta__btn { display: inline-flex; align-items: center; gap: 7px; background: var(--a-brand); color: var(--a-brand-fg); font-weight: 700; font-size: 14.5px; padding: 13px 22px; border-radius: 8px; cursor: pointer; } .tsarena .tsa-about-cta--panel .tsa-about-cta__btn { background: #fff; color: #0C1220; } .tsarena .tsa-about-cta__btn .msr-a { font-size: 16px; } /* ============================== Footer ============================== */ /* The designs all put the gap on the footer: 80px on every page, 88px on the tipster profile (which adds the extra 8 on its own last section). */ .tsarena .tsa-footer { border-top: 1px solid var(--a-line); background: var(--a-surface); padding-top: 56px; margin-top: 80px; } .tsarena .tsa-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; } .tsarena .tsa-footer__about { margin: 14px 0 0; max-width: 300px; font-size: 14px; color: var(--a-faint); } .tsarena .tsa-footer__coltitle { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-faint); margin-bottom: 14px; } .tsarena .tsa-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--a-muted); } .tsarena .tsa-footer__bar { border-top: 1px solid var(--a-line); display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--a-faint); } .tsarena .tsa-footer__18 { border: 1px solid var(--a-line2); border-radius: 4px; padding: 1px 6px; font-weight: 700; } .tsarena .tsa-footer__bar > span:last-child { display: inline-flex; align-items: center; gap: 8px; } /* ============================== Responsive adaptation ============================== */ /* The design is authored at >=1180px; below that everything stacks in design language. */ @media (max-width: 1100px) { .tsarena .tsa-join__herogrid, .tsarena .tsa-join__calc, .tsarena .tsa-join__two, .tsarena .tsa-join__app { grid-template-columns: 1fr; } .tsarena .tsa-join__steps { grid-template-columns: 1fr 1fr; } .tsarena .tsa-join__voices { grid-template-columns: 1fr 1fr; } .tsarena .tsa-join__title { font-size: 44px; } .tsarena .tsa-live__layout { grid-template-columns: 1fr; } .tsarena .tsa-live__band .tsa-picksband__title { font-size: 42px; } .tsarena .tsa-prof__grid, .tsarena .tsa-prof-record, .tsarena .tsa-prof-method { grid-template-columns: 1fr; } .tsarena .tsa-prof-reviews__grid, .tsarena .tsa-prof-others__grid { grid-template-columns: 1fr 1fr; } .tsarena .tsa-prof__name { font-size: 36px; } .tsarena .tsa-prof-hist__head, .tsarena .tsa-prof-hist__row { grid-template-columns: 52px minmax(140px, 2fr) minmax(0, 1.2fr) 52px 48px 76px 76px; } .tsarena .tsa-hero__grid { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 56px; } .tsarena .tsa-hero__title { font-size: 52px; } .tsarena .tsa-strip__grid { grid-template-columns: 1fr 1fr; row-gap: 24px; } .tsarena .tsa-strip__cell:nth-child(3) { padding-left: 0; border-left: 0; } .tsarena .tsa-featpick { grid-template-columns: 1fr; } .tsarena .tsa-featpick__media { min-height: 260px; } .tsarena .tsa-pickgrid, .tsarena .tsa-tipgrid, .tsarena .tsa-reviews__grid { grid-template-columns: 1fr 1fr; } .tsarena .tsa-steps__grid, .tsarena .tsa-plans { grid-template-columns: 1fr 1fr; } .tsarena .tsa-steps__rail { display: none; } .tsarena .tsa-plan--featured { margin: 0; } .tsarena .tsa-featband { grid-template-columns: 1fr; gap: 36px; padding: 36px 32px; } .tsarena .tsa-nav__menu { display: none; } /* the links move into the drawer, and the bar keeps logo | CTA + burger */ .tsarena .tsa-nav { justify-content: space-between; gap: 16px; } .tsarena .tsa-nav__burger { display: inline-flex; } .tsarena .tsa-nav__login { display: none; } .tsarena .tsa-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the three page layouts whose fixed sidebar had no collapse at all */ .tsarena .tsa-news, .tsarena .tsa-post, .tsarena .tsa-doc { grid-template-columns: 1fr; gap: 40px; } .tsarena .tsa-news__grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } /* the history table gets its scroll container here, not 380px later */ .tsarena .tsa-prof-hist { overflow-x: auto; } .tsarena .tsa-prof-hist__head, .tsarena .tsa-prof-hist__row { min-width: 640px; } .tsarena .tsa-play { grid-template-columns: 1fr; } .tsarena .tsa-pstats { grid-template-columns: repeat(3, 1fr); row-gap: 16px; } .tsarena .tsa-picks__layout { grid-template-columns: 1fr; } .tsarena .tsa-picksband__title { font-size: 42px; } .tsarena .tsa-prow { grid-template-columns: 76px minmax(0, 1.6fr) minmax(0, 1.1fr) 74px; row-gap: 12px; } .tsarena .tsa-prow__tipster { grid-column: 2 / 4; } .tsarena .tsa-prow__cta { grid-column: 4; } .tsarena .tsa-podium { grid-template-columns: 1fr; } .tsarena .tsa-rosgrid { grid-template-columns: 1fr 1fr; } .tsarena .tsa-rosjoin { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px; } .tsarena .tsa-lb__head, .tsarena .tsa-lb__row { grid-template-columns: 30px minmax(0, 1.6fr) 84px 78px 104px; } .tsarena .tsa-lb__form, .tsarena .tsa-lb__hit { display: none; } /* ---- about us: these rules used to sit above the base ones they override ---- */ .tsarena .tsa-about-chain { grid-template-columns: 1fr; gap: 32px; padding: 32px; } .tsarena .tsa-about-team { grid-template-columns: 1fr 1fr; } .tsarena .tsa-about-strip__grid { grid-template-columns: 1fr 1fr; row-gap: 24px; } .tsarena .tsa-about__title { font-size: 46px; } body.tsarena-scope .elementor-widget-accordion .elementor-accordion { grid-template-columns: 1fr; } /* ---- the picks rail becomes a panel: the results come first, filters on ask ---- */ .tsarena .tsa-picks__filtersbtn { display: inline-flex; } .tsarena .tsa-pfilters__close { display: grid; } .tsarena .tsa-picks__aside { display: none; position: fixed; top: 0; right: 0; z-index: 999; width: 100%; max-width: 320px; height: 100dvh; padding: 20px; overflow-y: auto; background: var(--a-bg); border-left: 1px solid var(--a-line); box-shadow: -24px 0 60px rgba(12, 18, 32, .28); } .tsarena .tsa-picks__aside.is-open { display: flex; } .tsarena .tsa-picks__scrim { position: fixed; inset: 0; z-index: 998; background: var(--a-backdrop, rgba(12, 18, 32, .55)); } .admin-bar .tsarena .tsa-picks__aside { top: 46px; height: calc(100dvh - 46px); } } @media (max-width: 720px) { .tsarena .tsa-shell { padding-left: 20px; padding-right: 20px; } .tsarena .tsa-nav__cta { display: none; } /* it is in the drawer; the bar keeps logo | burger */ .tsarena .tsa-hero__title { font-size: 42px; } .tsarena .tsa-hero__ctas { flex-wrap: wrap; } .tsarena .tsa-hero__trust { flex-wrap: wrap; gap: 12px; } .tsarena .tsa-strip__grid { grid-template-columns: 1fr; } .tsarena .tsa-strip__cell + .tsa-strip__cell { padding-left: 0; border-left: 0; } .tsarena .tsa-pickgrid, .tsarena .tsa-tipgrid, .tsarena .tsa-reviews__grid, .tsarena .tsa-steps__grid, .tsarena .tsa-plans { grid-template-columns: 1fr; } .tsarena .tsa-filterbar { flex-direction: column; border-radius: 16px; } .tsarena .tsa-chips { flex-wrap: wrap; justify-content: center; } .tsarena .tsa-compare { flex-direction: column; align-items: flex-start; } .tsarena .tsa-compare__stats { flex-wrap: wrap; gap: 20px; } .tsarena .tsa-sechead { flex-direction: column; align-items: flex-start; } .tsarena .tsa-footer__grid { grid-template-columns: 1fr; gap: 28px; } .tsarena .tsa-footer__bar { flex-direction: column; gap: 8px; text-align: center; } .tsarena .tsa-reviews__aggr { gap: 28px; flex-wrap: wrap; } .tsarena .tsa-nextpick__match, .tsarena .tsa-pickcard__match { font-size: 20px; } /* ---- strips that were fixed at 3 or 4 columns and floored at min-content ---- */ .tsarena .tsa-featband__stats, .tsarena .tsa-tipcard__stats, .tsarena .tsa-roscard__stats { grid-template-columns: 1fr 1fr; row-gap: 18px; } .tsarena .tsa-featband__stats > div, .tsarena .tsa-tipcard__stats > div, .tsarena .tsa-roscard__stats > div { padding: 0; border-left: 0; } .tsarena .tsa-featband__statnum { font-size: 20px; } .tsarena .tsa-featstats, .tsarena .tsa-ptipster__stats { grid-template-columns: 1fr 1fr; row-gap: 16px; } .tsarena .tsa-featstats > div + div, .tsarena .tsa-ptipster__stats > div + div { padding-left: 0; border-left: 0; } .tsarena .tsa-hero__minis { grid-template-columns: 1fr; } .tsarena .tsa-pstats { grid-template-columns: 1fr 1fr; } /* ---- news desk ---- */ .tsarena .tsa-news__topgrid { grid-template-columns: 1fr; gap: 24px; } /* the chip bar is a pill on a desktop; wrapped over three lines it needs to be a card */ .tsarena .tsa-news__filter { flex-wrap: wrap; border-radius: 16px; padding: 14px; row-gap: 10px; } .tsarena .tsa-news__filterspace { display: none; } /* the spacer would force a line of its own */ .tsarena .tsa-news__sort { margin-left: auto; } .tsarena .tsa-news__morebtn, .tsarena .tsa-news-board__cta { white-space: normal; } /* ---- article ---- */ .tsarena .tsa-post__moregrid { grid-template-columns: 1fr; } .tsarena .tsa-post__title { font-size: 34px; } /* byline: the author on one line, the share row under it and full width */ .tsarena .tsa-post__byline { flex-direction: column; align-items: stretch; gap: 16px; } .tsarena .tsa-post__who { flex-wrap: wrap; row-gap: 10px; } .tsarena .tsa-post__whometa { line-height: 1.6; } .tsarena .tsa-post__share { width: 100%; flex-wrap: wrap; gap: 10px; } .tsarena .tsa-post__sharelabel { width: 100%; margin-right: 0; } .tsarena .tsa-post-author { flex-direction: column; align-items: center; text-align: center; } .tsarena .tsa-post-author__cta { width: 100%; } .tsarena .tsa-post-author__cta > * { white-space: normal; } /* ---- legal ---- */ .tsarena .tsa-doc__title { font-size: 34px; } /* ---- tipster profile head ---- */ .tsarena .tsa-prof__avatar { width: 56px; height: 56px; } .tsarena .tsa-prof__name { font-size: 28px; } .tsarena .tsa-prof__stats { gap: 18px 24px; } .tsarena .tsa-prof__meta { flex-wrap: wrap; row-gap: 8px; } /* ---- odds and label strays that set a floor with nowrap ---- */ .tsarena .tsa-prow__cta .tsa-btn { padding: 8px 12px; } .tsarena .tsa-plan__flag { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-phero__top { flex-direction: column; align-items: flex-start; gap: 14px; } .tsarena .tsa-pteams { grid-template-columns: 1fr; gap: 18px; text-align: center; } .tsarena .tsa-pside, .tsarena .tsa-pside--home { justify-content: center; text-align: center; } .tsarena .tsa-pside__name { font-size: 26px; } .tsarena .tsa-psel { padding: 22px; } .tsarena .tsa-psel__body { flex-direction: column; } .tsarena .tsa-psel__oddswrap { align-items: flex-start; } .tsarena .tsa-psel__pick { font-size: 30px; } .tsarena .tsa-pstats { grid-template-columns: repeat(2, 1fr); } .tsarena .tsa-picksband__title { font-size: 34px; } .tsarena .tsa-ptoolbar { flex-wrap: wrap; border-radius: 16px; } .tsarena .tsa-ptoolbar__spacer { display: none; } .tsarena .tsa-prow { grid-template-columns: 1fr auto; row-gap: 10px; } .tsarena .tsa-prow__when, .tsarena .tsa-prow__match, .tsarena .tsa-prow__pickwrap, .tsarena .tsa-prow__tipster, .tsarena .tsa-prow__cta { grid-column: auto; } .tsarena .tsa-prow__matchwrap { grid-column: 1 / 3; } .tsarena .tsa-psummary { flex-wrap: wrap; gap: 20px; } .tsarena .tsa-psummary__spark { display: none; } .tsarena .tsa-ptable__head { display: none; } .tsarena .tsa-ptable__row { grid-template-columns: 1fr auto; row-gap: 8px; } .tsarena .tsa-ppager { flex-direction: column; align-items: flex-start; gap: 12px; } .tsarena .tsa-rosgrid { grid-template-columns: 1fr; } .tsarena .tsa-rossechead { flex-direction: column; align-items: flex-start; } .tsarena .tsa-rossearch { width: 100%; } .tsarena .tsa-rostoolbar__spacer { display: none; } .tsarena .tsa-lb__head, .tsarena .tsa-lb__row { grid-template-columns: 26px minmax(0, 1fr) 78px; } .tsarena .tsa-lb__profit { display: none; } .tsarena .tsa-lb__plan { grid-column: 2 / 4; justify-content: flex-start; } .tsarena .tsa-rosjoin { padding: 28px 22px; } .tsarena .tsa-rosjoin__title { font-size: 32px; } .tsarena .tsa-rosjoin__stats { grid-template-columns: 1fr 1fr; padding: 20px; } } @media (max-width: 720px) { .tsarena .tsa-prof-reviews__grid, .tsarena .tsa-prof-others__grid { grid-template-columns: 1fr; } .tsarena .tsa-prof__stats { gap: 24px; } .tsarena .tsa-prof-chart__head { flex-direction: column; align-items: flex-start; } .tsarena .tsa-prof-hist { overflow-x: auto; } .tsarena .tsa-prof-hist__head, .tsarena .tsa-prof-hist__row { min-width: 640px; } } @media (max-width: 720px) { .tsarena .tsa-live-ev { grid-template-columns: 1fr; gap: 12px; } .tsarena .tsa-live-ev__league { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tsarena .tsa-live-ev__dot { display: none; } .tsarena .tsa-live-tl { padding-left: 0; } .tsarena .tsa-live-tl__rail { display: none; } .tsarena .tsa-live-bar { border-radius: 16px; flex-wrap: wrap; } .tsarena .tsa-live-pick__right { margin-left: 0; text-align: left; } } @media (max-width: 720px) { .tsarena .tsa-join__steps, .tsarena .tsa-join__voices, .tsarena .tsa-join__faq { grid-template-columns: 1fr; } .tsarena .tsa-join__app { gap: 36px; } .tsscf--arena .tsscf__row2 { grid-template-columns: 1fr; } .tsarena .tsa-join__title { font-size: 34px; } .tsarena .tsa-join__apptitle { font-size: 32px; } .tsarena .tsa-join__tiles { gap: 24px; } } @media (max-width: 720px) { .tsarena .tsa-about-team { grid-template-columns: 1fr; } /* the SLA variant is 0-3-0, so the collapse has to match it or never wins */ .tsarena .tsa-about-strip--sla .tsa-about-strip__grid { grid-template-columns: 1fr; } .tsarena .tsa-about-strip--sla .tsa-about-strip__grid > div + div { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--a-line); } .tsarena .tsa-about-time__row { grid-template-columns: 1fr; gap: 8px; } .tsarena .tsa-about__title { font-size: 34px; } .tsarena .tsa-about-chain { padding: 24px; gap: 24px; } .tsarena .tsa-about-chain__title { font-size: 32px; } .tsarena .tsa-about-chain__row { gap: 12px; padding-bottom: 18px; } .tsarena .tsa-about-cta { padding: 28px 24px; } .tsarena .tsa-about-cta__title { font-size: 28px; } } /* Elementor stacks its columns at 767px and leaves no gap between them, so whatever they hold ends up touching the next column — the principle cards on the About page, the two calls to action under them, the application form sitting on the checklist it belongs to. One row of air, once, for all of it. */ @media (max-width: 767px) { body.tsarena-scope .elementor-top-section > .elementor-container > .elementor-column:not(:last-child) { margin-bottom: 24px; } }