/* ============================================================================= Explore Hub — the /explore analytics + media hub. "Athlete asset terminal": market-data density (ticker tape, tabular numerals, sparklines, Δ pills) on the site's established dark chrome. Scoped under .xh; the hero brand/search styles stay in explore-v2.css. ============================================================================= */ .xh { --xh-line: rgba(255, 255, 255, 0.06); --xh-line-strong: rgba(255, 255, 255, 0.1); --xh-card: rgba(255, 255, 255, 0.014); --xh-strip: rgba(255, 255, 255, 0.024); --xh-ink: rgba(255, 255, 255, 0.92); --xh-ink-2: rgba(255, 255, 255, 0.55); --xh-ink-3: rgba(255, 255, 255, 0.35); --xh-accent: #00a8ff; --xh-pos: #4ade80; --xh-neg: #f87171; font-variant-numeric: tabular-nums; } /* Fluid width: the content tracks the viewport (with breathing room) instead of stopping at a fixed max — Pico's .container cap is lifted for this page. */ .page-explore main.container { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; } .xh .xh-section { max-width: none; margin: 0 0 28px; padding: 0 32px; } /* Staggered load-in */ @keyframes xhFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .xh .xh-in { animation: xhFadeUp 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; } /* ---- Ticker tape — part of the chrome: fixed full-width strip pinned directly below the global nav at all times (fixed, not sticky, so no ancestor overflow rule can unstick it). .xh-has-ticker pads the page so the hero isn't covered. */ .xh-ticker { position: fixed; top: var(--xh-nav-h, 54px); left: 0; right: 0; z-index: 900; height: 36px; display: flex; align-items: stretch; border-bottom: 1px solid var(--xh-line); /* Mirrors the global nav on this page: transparent at the top of the page, solid + blurred once the hero search scrolls away (.hero-search-hidden is toggled on by the same observer the nav uses). */ background: transparent; transition: background 0.3s, backdrop-filter 0.3s; overflow: hidden; } .page-explore.hero-search-hidden .xh-ticker { background: rgba(20, 23, 27, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .xh.xh-has-ticker { padding-top: 36px; } .xh-ticker-label { display: flex; align-items: center; padding: 8px 14px; flex: none; font-size: 0.62rem; font-weight: 800; font-style: italic; letter-spacing: 0.12em; color: #fff; border-right: 1px solid var(--xh-line); } .xh-ticker-viewport { overflow: hidden; flex: 1; display: flex; align-items: center; } @keyframes xhTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .xh-ticker-track { display: inline-flex; align-items: center; gap: 22px; padding-left: 22px; white-space: nowrap; width: max-content; animation: xhTicker 55s linear infinite; } .xh-ticker:hover .xh-ticker-track { animation-play-state: paused; } .xh-tick { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; } .xh-tick-name { font-size: 0.74rem; font-weight: 700; color: var(--xh-ink); } .xh-tick-val { font-size: 0.7rem; font-weight: 600; color: var(--xh-ink-2); } .xh-tick-val.up { color: var(--xh-pos); } .xh-tick-sep { color: var(--xh-ink-3); } /* ---- Analytics row — wide rotator (Most Covered ⇄ AI Briefing) beside the Stat Leaders card, on the Index-table surface; news strip beneath. --------- */ .xh-panels { display: block; } .xh-combo { display: grid; grid-template-columns: 2.5fr 1.1fr; gap: 14px; align-items: stretch; } /* Left column: the Headlines card on top (grows to fill), two small chart cards beneath. */ .xh-combo-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .xh-combo-left .xh-ai { flex: 1; } .xh-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .xh-card-head .xh-more-link { margin-left: 10px; font-style: normal; text-transform: none; letter-spacing: 0; } /* Right column: one card rotating Stat Leaders ⇄ Most Covered. Panes stack in the same grid cell and crossfade (compound selector beats .xh-card's flex). */ .xh-card.xh-rot-card { position: relative; display: grid; } .xh-rot-pane { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .xh-rot-pane.on { opacity: 1; pointer-events: auto; } .xh-rot-dots { position: absolute; bottom: 12px; right: 14px; display: flex; gap: 5px; z-index: 2; } .xh-rot-dot { appearance: none; margin: 0; padding: 0; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; cursor: pointer; transition: background 0.15s ease; } .xh-rot-dot.on { background: rgba(255, 255, 255, 0.65); border-color: transparent; } /* Influence Score preview chart (small card) */ .xh-infl-chart { width: 100%; flex: 1; min-height: 62px; } .xh-infl-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; } .xh-infl-axis { fill: rgba(255, 255, 255, 0.35); font-size: 10px; } .xh-infl-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; padding-top: 9px; } .xh-infl-key { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 0.66rem; font-weight: 600; color: var(--xh-ink-2); white-space: nowrap; } .xh-infl-key:hover { color: #fff; } .xh-infl-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; } /* Coverage Volume mini chart — weekly bars stacked by school */ .xh-cov-chart { flex: 1; display: flex; align-items: flex-end; gap: 3px; min-height: 62px; padding-top: 6px; } .xh-cov-col { flex: 1; height: 100%; min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-start; } .xh-cov-seg { width: 100%; opacity: 0.85; transition: opacity 0.14s ease; } .xh-cov-seg:last-child { border-radius: 2px 2px 0 0; } .xh-cov-col:hover .xh-cov-seg { opacity: 1; } .xh-cov-axis { display: flex; justify-content: space-between; padding-top: 7px; font-size: 0.62rem; color: var(--xh-ink-3); } .xh-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 14px 16px; border: 1px solid var(--xh-line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .xh-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; font-size: 0.7rem; font-weight: 700; font-style: italic; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .xh-panel-rows { flex: 1; display: flex; flex-direction: column; } .xh-panel-note { margin-left: auto; font-size: 0.62rem; font-weight: 600; color: var(--xh-ink-3); letter-spacing: 0.04em; } /* Headlines — mock cited summaries (athlete links + citation markers live), led by the primary topic's image, with topic pills beneath. */ .xh-ai-item { flex: 1; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid rgba(255, 255, 255, 0.035); } .xh-ai-item:first-child { border-top: none; } .xh-ai-img { display: block; } .xh-ai-headshot, .xh-ai-img .xh-headshot-empty { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.06); display: block; } .xh-ai-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .xh-ai-headline { font-size: 0.82rem; font-weight: 700; color: var(--xh-ink); line-height: 1.4; } .xh-ai-headline a { color: #fff; text-decoration: none; } .xh-ai-headline a:hover { color: var(--xh-accent); } .xh-ai-desc { font-size: 0.72rem; color: var(--xh-ink-2); line-height: 1.5; } .xh-ai-cite a { color: var(--xh-accent); text-decoration: none; font-size: 0.62rem; font-weight: 700; margin-left: 2px; } .xh-ai-cite a:hover { text-decoration: underline; } /* News card strip below the analytics row */ .xh-news-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; } .xh-prow { flex: 1; min-height: 52px; display: grid; grid-template-columns: 18px 38px 1fr auto; align-items: center; gap: 10px; padding: 9px 4px; text-decoration: none; border-top: 1px solid rgba(255, 255, 255, 0.035); transition: background 0.12s ease; } .xh-prow:first-of-type { border-top: none; } .xh-prow:hover { background: rgba(255, 255, 255, 0.03); } .xh-prow-rank { font-size: 0.68rem; font-weight: 700; color: var(--xh-ink-3); text-align: center; } .xh-prow-img, .xh-headshot-empty { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.06); display: inline-block; flex: none; } .xh-prow-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .xh-prow-name { font-size: 0.82rem; font-weight: 600; color: var(--xh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xh-prow-sub { font-size: 0.64rem; color: var(--xh-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xh-prow-val { display: flex; align-items: center; } .xh-prow-num { font-size: 0.84rem; font-weight: 700; color: var(--xh-ink); } /* Category tabs: always one row — overflow scrolls horizontally (scrollbar hidden) */ .xh-ptabs { display: flex; flex-wrap: nowrap; gap: 4px; padding: 0 0 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .xh-ptabs::-webkit-scrollbar { display: none; } /* ---- News cards ------------------------------------------------------------- */ .xh-news-src { font-size: 0.68rem; color: var(--xh-ink-3); } .xh-news-card { display: flex; flex-direction: column; gap: 7px; text-decoration: none; min-width: 0; cursor: pointer; } /* Topic pills — same look as the News & Media tab's .ce-news-grid-tag */ .xh-news-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .xh-news-tag { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; } .xh-news-tag:hover { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); } .xh-news-card-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.04); } .xh-news-card-title { font-size: 0.72rem; font-weight: 700; color: var(--xh-ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xh-news-card:hover .xh-news-card-title { text-decoration: underline; text-underline-offset: 3px; } .xh-story-row-title { font-size: 0.78rem; font-weight: 600; color: var(--xh-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xh-story-row-sub { font-size: 0.62rem; color: var(--xh-ink-3); } .xh-ptab { appearance: none; margin: 0; width: auto; cursor: pointer; flex: none; padding: 4px 9px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--xh-ink-3); font-size: 0.64rem; font-weight: 600; font-family: inherit; letter-spacing: 0.02em; white-space: nowrap; transition: all 0.12s ease; } .xh-ptab:hover { color: rgba(255, 255, 255, 0.8); } .xh-ptab.on { background: rgba(255, 255, 255, 0.07); color: #fff; } /* ---- Section headers ----------------------------------------------------------- */ .xh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; } .xh-section-title h2 { margin: 0; font-size: 1.02rem; font-weight: 800; font-style: italic; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xh-ink); } .xh-section-sub { font-size: 0.7rem; color: var(--xh-ink-3); } .xh-more-link { font-size: 0.74rem; font-weight: 600; color: var(--xh-ink-2); text-decoration: none; white-space: nowrap; } .xh-more-link:hover { color: var(--xh-accent); } /* ---- Market table ---------------------------------------------------------------- */ .xh-market-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Same flat surface as /leaderboard's .lb-table-wrap — no opaque header strip */ .xh-table-wrap { border: 1px solid var(--xh-line); border-radius: 12px; overflow-x: auto; background: rgba(255, 255, 255, 0.02); } .xh-table { width: 100%; min-width: 820px; margin: 0; border-collapse: collapse; font-size: 0.85rem; } .xh-table thead th { background: transparent; text-align: right; padding: 13px 14px; font-size: 0.66rem; font-weight: 600; font-style: italic; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); white-space: nowrap; border-bottom: 1px solid var(--xh-line-strong); } .xh-table thead th.xh-col-rank, .xh-table thead th.xh-col-athlete, .xh-table thead th.xh-col-school, .xh-table thead th.xh-col-pos, .xh-table thead th.xh-col-spark { text-align: left; } .xh-sortable { cursor: pointer; user-select: none; transition: color 0.12s ease; } .xh-sortable:hover { color: rgba(255, 255, 255, 0.85); } .xh-sort-active { color: var(--xh-accent) !important; } .xh-table tbody td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--xh-ink-2); white-space: nowrap; vertical-align: middle; text-align: right; /* Pico paints td with its blue-dark --pico-background-color; the leaderboard resets it the same way. */ background: transparent; } .xh-table tbody td.xh-col-rank, .xh-table tbody td.xh-col-athlete, .xh-table tbody td.xh-col-school, .xh-table tbody td.xh-col-pos, .xh-table tbody td.xh-col-spark { text-align: left; } .xh-table tbody tr { cursor: pointer; transition: background 0.12s ease; } .xh-table tbody tr:hover { background: rgba(0, 168, 255, 0.045); } .xh-table tbody tr:last-child td { border-bottom: none; } .xh-col-rank { width: 40px; color: var(--xh-ink-3); font-weight: 700; } .xh-cell-athlete { display: inline-flex; align-items: center; gap: 10px; } .xh-athlete-meta { display: inline-flex; flex-direction: column; } /* Socials under the name — same treatment as .lb-athlete-socials */ .xh-athlete-socials { display: flex; gap: 8px; margin-top: 4px; } .xh-social-link { display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.2s ease; } .xh-social-link:hover { color: var(--xh-accent); } .xh-social-link svg { display: block; } .xh-row-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.06); } .xh-cell-name { font-weight: 700; color: var(--xh-ink); } /* School cell mirrors the /leaderboard one: 28px logo + stacked name/conference. img.xh-school-logo (not just the class) so the transparent background outranks the global img[loading=lazy] placeholder bg (#0c0c0e) — same override leaderboard.css needs for its logos. */ .xh-cell-school { display: inline-flex; align-items: center; gap: 10px; } .xh-school-logo, .xh img.xh-school-logo { width: 28px; height: 28px; object-fit: contain; background: transparent; flex-shrink: 0; } .xh-school-logo-empty { display: inline-block; } .xh-school-text { display: inline-flex; flex-direction: column; line-height: 1.25; } .xh-school-name { color: var(--xh-ink-2); } .xh-school-conf { font-size: 0.72rem; color: var(--xh-ink-3); } .xh-pos-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; color: var(--xh-ink-2); background: rgba(255, 255, 255, 0.05); } .xh-cell-total { font-weight: 800; color: var(--xh-ink); } .xh-delta { font-size: 0.72rem; font-weight: 700; } .xh-delta.up { color: var(--xh-pos); } .xh-delta.down { color: var(--xh-neg); } .xh-delta.flat { color: var(--xh-ink-3); font-weight: 500; } .xh-col-spark { width: 120px; } .xh-spark { width: 104px; height: 28px; display: block; } .xh-spark.up polyline { stroke: var(--xh-pos); } .xh-spark.down polyline { stroke: var(--xh-neg); } .xh-spark.flat polyline { stroke: rgba(255, 255, 255, 0.35); } .xh-spark-flat { color: var(--xh-ink-3); font-size: 0.72rem; } .xh-loading { text-align: center !important; padding: 28px !important; color: var(--xh-ink-3) !important; font-size: 0.8rem; } /* ---- Media hub --------------------------------------------------------------------- */ .xh-mediahub { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; } .xh-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .xh-media-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--xh-line); border-radius: 12px; overflow: hidden; background: var(--xh-card); transition: transform 0.16s ease, border-color 0.16s ease; } .xh-media-card:hover { transform: translateY(-2px); border-color: var(--xh-line-strong); } .xh-media-thumb { display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.04); } .xh-media-meta { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 13px; } .xh-media-title { font-size: 0.8rem; font-weight: 600; color: var(--xh-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xh-media-sub { font-size: 0.64rem; color: var(--xh-ink-3); } .xh-wire { border: 1px solid var(--xh-line); border-radius: 12px; background: var(--xh-card); overflow: hidden; } .xh-wire-row { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px; text-decoration: none; border-top: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.12s ease; } .xh-wire-row:first-child { border-top: none; } .xh-wire-row:hover { background: rgba(255, 255, 255, 0.03); } .xh-wire-src { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--xh-accent); } .xh-wire-title { font-size: 0.8rem; font-weight: 600; color: var(--xh-ink); line-height: 1.4; } .xh-wire-time { font-size: 0.62rem; color: var(--xh-ink-3); } /* ---- Hero search dropdown ------------------------------------------------------------ */ .xh-search-dropdown { padding: 0 !important; } .xh-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .xh-search-item:last-child { border-bottom: none; } .xh-search-item:hover { background: rgba(255, 255, 255, 0.05); } .xh-search-item img, .xh-search-thumb-empty { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.06); flex: none; display: inline-block; } .xh-search-name { font-size: 0.84rem; font-weight: 600; color: var(--xh-ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xh-search-type { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xh-ink-3); } .xh-search-empty { padding: 14px; text-align: center; font-size: 0.76rem; color: var(--xh-ink-3); } /* ---- Responsive ------------------------------------------------------------------------ */ @media (max-width: 1000px) { .xh-stats { grid-template-columns: repeat(2, 1fr); } .xh-panels { grid-template-columns: 1fr; } .xh-combo { grid-template-columns: 1fr; } .xh-mini-row { grid-template-columns: 1fr; } .xh-news-strip { grid-template-columns: repeat(2, 1fr); } .xh-mediahub { grid-template-columns: 1fr; } .xh-media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .xh-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .xh-stat-v { font-size: 1.5rem; } .xh-media-grid { grid-template-columns: 1fr; } .xh-ticker-label { display: none; } }