body { background: #ffffff; color: #09090b; /* Crisper text on macOS (make-interfaces-feel-better #8) */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Avoid orphans in body copy (#10) — headings override to balance below */ text-wrap: pretty; } /* Balanced, non-lopsided headings (#10) */ h1, h2, h3, h4 { text-wrap: balance; } /* Buttons/nav inherit text-wrap:pretty from body, which can rebalance short labels onto two lines — reset interactive controls to normal wrapping site-wide. */ button, .hover-btn, .nav-link { text-wrap: wrap; } /* Ken 2026-06-28: front-page hero CTAs — keep their original (heavier, default) text rendering AND never wrap the label (the tight hero flex row was breaking "Explore rankings" onto two lines). */ #page-home .hover-btn { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; white-space: nowrap; } .nav-active { color: #09090b; background: rgba(0,0,0,0.04); } .page { display: none; } .page.active { display: block; } /* ====== Nav links (unified) ====== */ .nav-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; background: transparent; border: none; transition: background-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); } .nav-link:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .nav-link:hover { color: #0f172a; background: #f1f5f9; } } .nav-link.nav-active { color: #0f172a; background: rgba(0,0,0,0.05); } /* ====== Nav "More ▾" dropdown ====== */ /* static (not relative) so the megamenu box anchors to the sticky
, letting it sit flush on the RIGHT side of the screen instead of hanging left off the More button. */ .nav-more-wrap { position: static; } .nav-more-btn .nav-more-caret { transition: transform 200ms cubic-bezier(0.23,1,0.32,1); color: #94a3b8; } .nav-more-wrap.open .nav-more-caret { transform: rotate(180deg); } .nav-more-dropdown { /* Box megamenu: every category visible at once across 3 columns, no scroll. */ display: grid; grid-template-columns: repeat(3, minmax(168px, 1fr)); gap: 2px 14px; align-items: start; } .nav-more-col { min-width: 0; } .nav-more-col .nav-more-header { margin-top: 0; } .nav-more-dropdown { position: absolute; top: calc(100% + 8px); right: 140px; left: auto; min-width: 580px; max-width: calc(100vw - 32px); background: white; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.10); padding: 14px 16px; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.97); transform-origin: top right; transition: opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1); } .nav-more-wrap.open .nav-more-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .nav-more-header { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; padding: 8px 12px 2px; margin-top: 4px; } .nav-more-header:first-child { margin-top: 0; } .mb-nav-header { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; padding: 10px 12px 2px; } .nav-more-item { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #475569; font-weight: 500; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } @media (hover: hover) and (pointer: fine) { .nav-more-item:hover { background: #f1f5f9; color: #0f172a; } } .nav-more-item:active { background: #e2e8f0; } .nav-more-item.nav-active { background: rgba(0,0,0,0.05); color: #0f172a; font-weight: 600; } /* ====== Selection Sunday banner ====== */ .ss-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 16px; font-size: 12px; font-weight: 500; background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); color: white; position: relative; overflow: hidden; min-height: 32px; } .ss-banner strong { font-weight: 700; color: #fb923c; } .ss-banner .ss-cta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: rgba(251,146,60,0.15); color: #fb923c; font-size: 11px; font-weight: 600; text-decoration: none; transition: background-color 200ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); } .ss-banner .ss-cta:active { transform: scale(0.96); } @media (hover: hover) and (pointer: fine) { .ss-banner .ss-cta:hover { background: rgba(251,146,60,0.25); } } @media (max-width: 640px) { .ss-banner { font-size: 11px; padding: 6px 10px; gap: 6px; } } /* SS banner — single countdown sweeping left -> right (compositor-only transform) */ .ss-marquee { position: absolute; left: 0; top: 50%; transform: translate(-100%, -50%); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; will-change: transform; animation: ssMarchLR 26s linear infinite; } .ss-marquee .ss-ic { width: 14px; height: 14px; color: #fb923c; flex: none; } @keyframes ssMarchLR { from { transform: translate(-100%, -50%); } to { transform: translate(100vw, -50%); } } @media (prefers-reduced-motion: reduce) { .ss-marquee { animation: none; } .ss-marquee:first-of-type { left: 50%; transform: translate(-50%, -50%); } .ss-marquee:not(:first-of-type) { display: none; } } /* Phones: the 3-item parade is spaced by thirds of the sweep distance, which shrinks with viewport width — under ~640px the items physically overlap ("crumpled"). Show only the countdown; it sweeps alone with room to spare. */ @media (max-width: 640px) { .ss-marquee:not(:first-of-type) { display: none; } } /* Mobile hamburger menu: 27 items run ~1000px tall — taller than a phone screen — and the menu sits inside the sticky header, so without its own scroll the bottom items are unreachable. Cap to the space below the 56px header bar and scroll within. dvh tracks the real visible height as the mobile browser chrome collapses (vh fallback for older WebKit). */ #mobile-nav { /* 88px = 32px SS banner + 56px header bar (the menu's top edge at page top). After the banner scrolls away the menu is merely 32px shorter than the space available — still fully scrollable, never cut off. */ max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ====== Global search button + modal ====== */ .global-search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 8px; border: 1px solid #e5e7eb; background: white; font-size: 12px; color: #6b7280; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); } .global-search-btn:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .global-search-btn:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; } } .global-search-shortcut { padding: 1px 5px; border-radius: 4px; background: #f1f5f9; color: #64748b; font-size: 10px; font-family: ui-monospace, monospace; margin-left: 4px; } .gs-overlay { display: none; position: fixed; inset: 0; z-index: 205; /* above page modals (200) so ⌘K always paints on top */ background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); align-items: flex-start; justify-content: center; /* Scrollable + bottom padding: at 375x812 the results list runs past the fold, and with overflow visible there is no way to reach the last rows. Bottom padding also keeps the final result clear of the iOS keyboard. */ padding: 12vh 16px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .gs-overlay.open { display: flex; animation: gs-fade-in 200ms cubic-bezier(0.23,1,0.32,1); } @keyframes gs-fade-in { from { opacity: 0; } to { opacity: 1; } } .gs-modal { background: white; border-radius: 16px; width: 100%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); overflow: hidden; animation: gs-pop 280ms cubic-bezier(0.23,1,0.32,1); } @keyframes gs-pop { from { opacity: 0; transform: scale(0.96) translateY(-8px); filter: blur(4px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } .gs-input-row { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; } .gs-input-row input { flex: 1; border: none; outline: none; font-size: 16px; color: #0f172a; background: transparent; } .gs-input-row input::placeholder { color: #94a3b8; } .gs-results { max-height: 50vh; overflow-y: auto; padding: 8px 8px 12px; } .gs-result { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background-color 150ms ease; } .gs-result.gs-active { background: #f1f5f9; } @media (hover: hover) and (pointer: fine) { .gs-result:hover { background: #f1f5f9; } } .gs-result:active { background: #e2e8f0; } .gs-result img { width: 24px; height: 24px; object-fit: contain; } .gs-result-name { font-size: 14px; font-weight: 600; color: #0f172a; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-result-meta { font-size: 11px; color: #94a3b8; flex-shrink: 0; } .gs-user-avatar { width: 24px; height: 24px; border-radius: 50%; background: #0f172a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; } .take-author-link { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .take-author-link:hover { text-decoration: underline; } } .take-del.is-admin { color: #dc2626; } .gs-empty { padding: 24px; text-align: center; font-size: 13px; color: #94a3b8; } .gs-hint { padding: 8px 16px; border-top: 1px solid #f1f5f9; font-size: 11px; color: #94a3b8; display: flex; align-items: center; justify-content: space-between; } .gs-hint kbd { padding: 1px 5px; background: #f1f5f9; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 10px; color: #64748b; } /* ====== Accounts + Favorites (UI shell) ====== */ /* overflow-y:auto is load-bearing, not polish (iPhone audit 2026-07-26): the card is ~541px tall, so at 844x390 landscape its bottom 194px — submit button AND the Turnstile widget — sat below the fold with scrollTop pinned at 0. Portrait fits until the ~336px iOS keyboard opens and covers the same controls. The bottom padding gives the card room to clear the keyboard once it can scroll. */ .auth-overlay { display:none; position:fixed; inset:0; z-index:210; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); align-items:flex-start; justify-content:center; padding:10vh 16px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .auth-overlay.open { display:flex; animation: gs-fade-in 200ms cubic-bezier(0.23,1,0.32,1); } /* Auth card — ported from the SignIn2 component (boss 2026-07-25): soft top-down tint, 24px radius, centered icon badge + heading, icon-prefixed inputs, dashed "or" rule. Accent stays Bracketverse orange rather than the component's blue so the modal matches the rest of the site. */ .auth-modal { background:linear-gradient(180deg,#fff7ed 0%,#ffffff 42%); border:1px solid #fed7aa; border-radius:24px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,0.2); overflow:hidden; animation: gs-pop 280ms cubic-bezier(0.23,1,0.32,1); } /* The component drops visible labels for placeholders; keep them for screen readers. Defined here rather than relying on Tailwind — tw.css is a precompiled subset and does not currently include sr-only. */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .auth-head { padding:30px 30px 4px; display:flex; flex-direction:column; align-items:center; text-align:center; } .auth-badge { width:54px; height:54px; border-radius:16px; background:#fff; color:#0f172a; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 6px 18px rgba(15,23,42,0.10); } .auth-title { font-size:21px; font-weight:700; color:#0f172a; letter-spacing:-0.02em; margin-bottom:6px; } .auth-sub { font-size:13px; color:#64748b; line-height:1.5; } .auth-body { padding:18px 30px 24px; } .auth-field { margin-top:12px; position:relative; } .auth-field-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#94a3b8; display:flex; pointer-events:none; } .auth-field input { width:100%; padding:11px 13px 11px 38px; border:1px solid #e5e7eb; border-radius:12px; background:#f9fafb; font-size:14px; color:#0f172a; outline:none; transition:border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .auth-field input::placeholder { color:#9ca3af; } .auth-field input:focus { background:#fff; border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,0.12); } /* Neutral gradient button from the SignIn2 component — no hue, shading only (its from-gray-700 -> to-gray-900 ramp + hover:brightness-105). Shadow is neutral black too, so nothing tints the button. */ .auth-submit { width:100%; margin-top:18px; padding:12px; border:none; border-radius:12px; background:linear-gradient(180deg,#374151,#111827); color:#fff; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(17,24,39,0.22); transition:transform 150ms cubic-bezier(0.23,1,0.32,1), box-shadow 150ms ease, filter 150ms ease; } @media (hover:hover) and (pointer:fine){ .auth-submit:hover { filter:brightness(1.05); box-shadow:0 6px 20px rgba(17,24,39,0.30); } } .auth-submit:active { transform:scale(0.98); } /* ---- approved state (boss 2026-07-30) ---- Login success is a RARE moment (once a session, often once a device for months), which is the one frequency band that earns motion — a nav toggle at 100x/day would not. Transitions, not keyframes, so an Escape mid-state retargets instead of restarting. The button's label blurs out UNDERNEATH while the green layer scales in on top: an unmasked crossfade would read as two words overlapping, and 2px of blur bridges them into one transformation. */ .auth-submit-wrap { position:relative; margin-top:18px; } .auth-submit-wrap > .auth-submit { margin-top:0; transition:transform 150ms cubic-bezier(0.23,1,0.32,1), box-shadow 150ms ease, filter 160ms cubic-bezier(0.23,1,0.32,1), opacity 160ms cubic-bezier(0.23,1,0.32,1); } .auth-submit-wrap.is-approved > .auth-submit { filter:blur(2px); opacity:0; pointer-events:none; } .auth-approved { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; background:linear-gradient(180deg,#16a34a,#15803d); color:#fff; font-size:14px; font-weight:600; letter-spacing:.01em; box-shadow:0 4px 14px rgba(21,128,61,0.28); opacity:0; transform:scale(0.96); pointer-events:none; transition:opacity 160ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1); } .auth-submit-wrap.is-approved > .auth-approved { opacity:1; transform:scale(1); } /* 30 is comfortably longer than the tick path, so it starts fully retracted. */ .auth-approved-tick { stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset 260ms cubic-bezier(0.23,1,0.32,1) 90ms; } .auth-submit-wrap.is-approved .auth-approved-tick { stroke-dashoffset:0; } /* Reduced motion = fewer and gentler, not zero: the color and the label still change (they carry the meaning), only the movement, the blur and the draw are dropped. */ @media (prefers-reduced-motion: reduce){ .auth-submit-wrap > .auth-submit, .auth-approved { transition:opacity 140ms ease; } .auth-submit-wrap.is-approved > .auth-submit { filter:none; } .auth-approved { transform:none; } .auth-submit-wrap.is-approved > .auth-approved { transform:none; } .auth-approved-tick { transition:none; stroke-dashoffset:0; } } .bv-reduce-motion .auth-submit-wrap > .auth-submit, .bv-reduce-motion .auth-approved { transition:opacity 140ms ease; } .bv-reduce-motion .auth-submit-wrap.is-approved > .auth-submit { filter:none; } .bv-reduce-motion .auth-approved, .bv-reduce-motion .auth-submit-wrap.is-approved > .auth-approved { transform:none; } .bv-reduce-motion .auth-approved-tick { transition:none; stroke-dashoffset:0; } .auth-google { width:100%; margin-top:10px; padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#0f172a; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:background-color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1); } @media (hover:hover) and (pointer:fine){ .auth-google:hover { background:#f3f4f6; } } .auth-google:active { transform:scale(0.98); } /* Turnstile renders a fixed ~300px iframe; the card's content column is wider, so centre it or it sits visibly short of the inputs' right edge. */ .auth-captcha:not(:empty) { display:flex; justify-content:center; } .auth-divider { display:flex; align-items:center; gap:10px; margin:20px 0 2px; color:#9ca3af; font-size:11px; font-weight:600; letter-spacing:0.02em; } .auth-divider::before, .auth-divider::after { content:""; flex:1; border-top:1px dashed #e5e7eb; } .auth-toggle { margin-top:16px; text-align:center; font-size:13px; color:#64748b; } .auth-toggle button { background:none; border:none; color:#F97316; font-weight:700; cursor:pointer; font-size:13px; transition:color 150ms ease, transform 140ms cubic-bezier(0.23,1,0.32,1); } @media (hover:hover) and (pointer:fine){ .auth-toggle button:hover { color:#ea580c; } } .auth-toggle button:active { transform:scale(0.97); } .auth-nudge { margin-top:14px; text-align:center; font-size:11px; color:#cbd5e1; } .am-x { position:absolute; top:15px; right:16px; background:none; border:none; cursor:pointer; color:#94a3b8; font-size:22px; line-height:1; padding:4px; border-radius:7px; transition:color 150ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1); } .am-x::before { content:""; position:absolute; inset:-7px; } @media (hover:hover) and (pointer:fine){ .am-x:hover { color:#0f172a; } } .am-x:active { transform:scale(0.97); } .auth-msg { margin-top:12px; font-size:12.5px; padding:9px 12px; border-radius:9px; display:none; } .auth-msg.show { display:block; } .auth-msg.info { background:#eff6ff; color:#1d4ed8; } .auth-msg.err { background:#fef2f2; color:#dc2626; } .auth-msg.ok { background:#f0fdf4; color:#15803d; } /* account chip + menu */ .account-chip { display:flex; align-items:center; gap:6px; padding:2px; border:none; background:none; cursor:pointer; } .account-avatar { width:30px; height:30px; border-radius:999px; background:linear-gradient(180deg,#F97316,#EA580C); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(249,115,22,0.35); transition:transform 150ms cubic-bezier(0.23,1,0.32,1); } .account-chip:active .account-avatar { transform:scale(0.97); } .account-menu { position:absolute; right:0; top:42px; min-width:200px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.12); padding:6px; display:none; z-index:60; } .account-menu.open { display:block; animation: gs-pop 200ms cubic-bezier(0.23,1,0.32,1); transform-origin:top right; } .account-menu-email { font-size:12px; color:#94a3b8; padding:8px 10px 7px; border-bottom:1px solid #f1f5f9; margin-bottom:4px; word-break:break-all; } .account-menu-item:active { background: #e2e8f0; } .account-menu-item { display:block; width:100%; text-align:left; padding:8px 10px; border:none; background:none; border-radius:8px; font-size:13px; font-weight:600; color:#0f172a; cursor:pointer; transition:background-color 120ms ease; } @media (hover:hover) and (pointer:fine){ .account-menu-item:hover { background:#f8fafc; } } /* favorite star */ /* Follow + Share sit side-by-side (row), not stacked (boss 2026-06-14). Wrapper takes the align-self/margin so the buttons themselves stay simple inline-flex pills. */ /* Even vertical rhythm under the rank pills: pills → Follow/Share → Automatic Bid, equal gaps (boss 2026-06-14: swapped the badge below the buttons + tidied spacing). */ .team-hero-actions { display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; margin-top:0; } .team-autobid-row { align-self:flex-start; } .team-autobid-row:not(:empty) { margin-top:0; } /* Follow + Share ARE the house hover-btn filter pills (boss 2026-06-14) — `hover-btn hover-btn-light hover-btn-sm`, same as the Most Cursed "All / Power 5 / Mid Bluebloods" filters, so they get the cool hover-circle ripple. These rules only size the icon + force equal width; the pill look + ripple come from the .hover-btn component itself. */ .team-hero-action { min-width:98px; justify-content:center; } .team-hero-action svg { width:14px; height:14px; } .team-hero-action.is-faved { background:linear-gradient(180deg,#F97316,#EA580C); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,0.3); } .team-hero-action.is-faved svg { fill:#fff; stroke:#fff; } .fav-star.is-faved svg { fill:#fff; stroke:#fff; } /* Your Teams home strip */ .your-teams { max-width:72rem; margin:0 auto; padding:22px 16px 0; } .your-teams-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .your-teams-head h2 { font-size:15px; font-weight:800; color:#0f172a; letter-spacing:-0.01em; } .your-teams-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; } .yt-card { flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:9px 15px 9px 10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; cursor:pointer; transition:transform 150ms cubic-bezier(0.23,1,0.32,1), box-shadow 150ms ease; } @media (hover:hover) and (pointer:fine){ .yt-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.07); } } .yt-card:active { transform: scale(0.97); } .yt-card img { width:30px; height:30px; object-fit:contain; } .yt-card .yt-name { font-size:13px; font-weight:700; color:#0f172a; } .yt-card .yt-rec { font-size:11px; color:#94a3b8; } /* favorite nudge toast */ .fav-nudge { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(8px); background:#0f172a; color:#fff; font-size:13px; font-weight:600; padding:11px 16px 11px 18px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity 220ms ease, transform 220ms cubic-bezier(0.23,1,0.32,1); z-index:205; display:flex; align-items:center; } /* below auth-overlay (210) so the toast never floats over the modal */ .fav-nudge.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } .fav-nudge button { background:#F97316; color:#fff; border:none; border-radius:999px; padding:5px 13px; font-weight:700; font-size:12px; margin-left:11px; cursor:pointer; transition:background-color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1); } @media (hover:hover) and (pointer:fine){ .fav-nudge button:hover { background:#ea580c; } } .fav-nudge button:active { transform:scale(0.97); } @media (prefers-reduced-motion: reduce){ .fav-nudge { transition:opacity 200ms ease; } .auth-modal, .account-menu.open, .gs-modal, .take-post-card { animation:none; } } /* ====== Profile page ====== */ .pf-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; } .pf-id { display:flex; align-items:center; gap:16px; padding:22px; margin-bottom:20px; } .pf-avatar { width:60px; height:60px; border-radius:999px; background:linear-gradient(180deg,#F97316,#EA580C); color:#fff; font-weight:800; font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(249,115,22,0.3); flex:none; } .pf-name { font-size:20px; font-weight:800; color:#0f172a; letter-spacing:-0.01em; } .pf-email { font-size:13px; color:#64748b; margin-top:2px; } .pf-since { font-size:12px; color:#94a3b8; margin-top:4px; } /* "Founding Member" badge — launch-era accounts; click opens a popup */ .pf-founding-badge { display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:4px 10px; border:none; border-radius:999px; background:linear-gradient(135deg,#F97316,#fb923c); color:#fff; font-size:11px; font-weight:700; cursor:pointer; box-shadow:0 1px 3px rgba(249,115,22,0.35); transition:transform 150ms cubic-bezier(0.23,1,0.32,1), box-shadow 150ms ease; } .pf-founding-badge svg { width:12px; height:12px; } .pf-founding-badge:active { transform:scale(0.96); } @media (hover:hover) and (pointer:fine){ .pf-founding-badge:hover { box-shadow:0 3px 10px rgba(249,115,22,0.40); } } .pf-founding-badge:focus-visible { outline:2px solid #0f172a; outline-offset:2px; } /* Founding Member popup (centered modal) */ /* align-items:center + no overflow clips BOTH ends when the card is taller than the viewport, and neither end can be scrolled to. flex-start + margin:auto on the card keeps it optically centred while it fits, and degrades to a normal scroll when it does not. Same treatment as .auth-overlay (fixed 2026-07-26). */ .fm-overlay { position:fixed; inset:0; z-index:2000; display:none; align-items:flex-start; justify-content:center; background:rgba(15,23,42,0.5); padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .fm-overlay.open { display:flex; animation:gs-fade-in 180ms cubic-bezier(0.23,1,0.32,1); } .fm-card { margin:auto; position:relative; background:#fff; border-radius:18px; padding:30px 28px 24px; max-width:340px; width:100%; text-align:center; box-shadow:0 24px 60px rgba(15,23,42,0.28); animation:fm-pop 200ms cubic-bezier(0.23,1,0.32,1); } @keyframes fm-pop { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } } .fm-x { position:absolute; top:12px; right:14px; border:none; background:none; font-size:22px; line-height:1; color:#cbd5e1; cursor:pointer; transition:color 150ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1); } .fm-x::before { content:""; position:absolute; inset:-9px; } @media (hover:hover) and (pointer:fine){ .fm-x:hover { color:#0f172a; } } .fm-x:active { transform:scale(0.97); } .fm-emoji { font-size:44px; line-height:1; margin-bottom:8px; } .fm-card h3 { font-size:20px; font-weight:800; margin-bottom:8px; background:linear-gradient(135deg,#F97316,#fb923c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .fm-card p { font-size:14px; color:#475569; line-height:1.5; } .fm-card .fm-sub { font-size:12.5px; color:#94a3b8; margin-top:8px; } .fm-ok { margin-top:18px; padding:10px 28px; border:none; border-radius:10px; background:linear-gradient(135deg,#F97316,#fb923c); color:#fff; font-weight:700; font-size:13px; cursor:pointer; transition:transform 150ms cubic-bezier(0.23,1,0.32,1); } .fm-ok:active { transform:scale(0.97); } @media (prefers-reduced-motion: reduce){ .pf-founding-badge { transition:none; } .fm-overlay.open, .fm-card { animation:none; } } /* ===== SUPERFAN TEST (quiz modal + tier badges) ===== */ /* Tallest modal on the site (12-question quiz) — see the .fm-overlay note above. */ .sf-overlay { position:fixed; inset:0; z-index:2000; display:none; align-items:flex-start; justify-content:center; background:rgba(15,23,42,0.55); padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .sf-overlay.open { display:flex; animation:gs-fade-in 180ms cubic-bezier(0.23,1,0.32,1); } .sf-card { margin:auto; position:relative; background:#fff; border-radius:18px; padding:26px 24px 22px; max-width:420px; width:100%; box-shadow:0 24px 60px rgba(15,23,42,0.30); animation:fm-pop 200ms cubic-bezier(0.23,1,0.32,1); } .sf-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; } .sf-head img { width:34px; height:34px; object-fit:contain; } .sf-head-title { font-size:15px; font-weight:800; color:#0f172a; line-height:1.2; } .sf-head-sub { font-size:11px; color:#94a3b8; font-weight:600; } .sf-progress { display:flex; gap:4px; margin-bottom:16px; } .sf-dot { flex:1; height:4px; border-radius:999px; background:#e5e7eb; transition:background 200ms ease; } .sf-dot.is-done { background:#0f172a; } .sf-dot.is-right { background:#16a34a; } .sf-dot.is-wrong { background:#dc2626; } .sf-q { font-size:16px; font-weight:700; color:#0f172a; line-height:1.4; margin-bottom:14px; min-height:44px; } .sf-diff { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; border-radius:999px; padding:2px 8px; margin-bottom:8px; } .sf-diff.is-easy { background:#dcfce7; color:#166534; } .sf-diff.is-med { background:#fef3c7; color:#92400e; } .sf-diff.is-hard { background:#fee2e2; color:#991b1b; } .sf-choices { display:flex; flex-direction:column; gap:8px; } .sf-choice { text-align:left; padding:11px 14px; border:1.5px solid #e5e7eb; border-radius:11px; background:#fff; font-size:14px; font-weight:600; color:#0f172a; cursor:pointer; transition:border-color 120ms ease, background 120ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1); } .sf-choice:active { transform:scale(0.98); } @media (hover:hover) and (pointer:fine){ .sf-choice:hover:not(:disabled) { border-color:#94a3b8; background:#f8fafc; } } .sf-choice:disabled { cursor:default; } .sf-choice.is-right { border-color:#16a34a; background:#f0fdf4; color:#166534; } .sf-choice.is-wrong { border-color:#dc2626; background:#fef2f2; color:#991b1b; } .sf-choice.is-dim { opacity:0.45; } .sf-end { text-align:center; padding:8px 0 2px; } .sf-end-emoji { font-size:52px; line-height:1; margin-bottom:10px; } .sf-end h3 { font-size:21px; font-weight:800; color:#0f172a; margin-bottom:6px; } .sf-end p { font-size:13.5px; color:#475569; line-height:1.5; } .sf-end .sf-score { font-size:13px; font-weight:700; color:#94a3b8; margin-top:6px; } .sf-end .sf-save-msg { font-size:12px; margin-top:10px; font-weight:600; } .sf-start-btn, .sf-next-btn { margin-top:18px; width:100%; padding:12px; border:none; border-radius:11px; background:#0f172a; color:#fff; font-weight:700; font-size:14px; cursor:pointer; transition:transform 150ms cubic-bezier(0.23,1,0.32,1); } .sf-start-btn:active, .sf-next-btn:active { transform:scale(0.97); } .sf-badge { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:3px 9px; font-size:10px; font-weight:800; letter-spacing:0.02em; white-space:nowrap; } .sf-badge.is-1 { background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; } .sf-badge.is-2 { background:linear-gradient(135deg,#F97316,#fb923c); color:#fff; box-shadow:0 1px 3px rgba(249,115,22,0.35); } .sf-badge.is-3 { background:linear-gradient(135deg,#b45309,#f59e0b 55%,#fbbf24); color:#fff; box-shadow:0 1px 4px rgba(245,158,11,0.45); } .pf-team-badges { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } @keyframes sf-badge-in { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } } .pf-team-badges .sf-badge { animation:sf-badge-in 220ms cubic-bezier(0.23,1,0.32,1) both; } .sf-test-btn { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; border:1px solid #e2e8f0; background:none; padding:7px 10px; border-radius:9px; font-size:11px; font-weight:700; color:#475569; cursor:pointer; white-space:nowrap; transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1); } @media (hover:hover) and (pointer:fine){ .sf-test-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#1e293b; } } .sf-test-btn:active { transform:scale(0.97); } @media (prefers-reduced-motion: reduce){ .sf-overlay.open, .sf-card { animation:none; } .sf-choice, .sf-start-btn, .sf-next-btn { transition:none; } .pf-team-badges .sf-badge { animation:none; } .pf-team:has(.pf-team-main:active), .sf-test-btn:active, .pf-unfollow:active { transform:none; } } .pf-section { margin-bottom:22px; } .pf-section-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .pf-section-head h2 { font-size:15px; font-weight:800; color:#0f172a; } .pf-section-head svg { width:16px; height:16px; } .pf-count { font-size:12px; font-weight:700; color:#94a3b8; background:#f1f5f9; border-radius:999px; padding:1px 9px; } .pf-teams { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; } .pf-team { position:relative; display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:12px; background:#fff; transition:box-shadow 150ms ease, border-color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1); } .pf-team:has(.pf-team-main:active) { transform:scale(0.99); } .pf-team-foot { width:100%; padding:0 12px 11px; } .pf-team-foot:empty { display:none; } @media (hover:hover) and (pointer:fine){ .pf-team:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); border-color:#e2e8f0; } } .pf-team-main { display:flex; align-items:center; gap:10px; padding:12px 40px 8px 12px; background:none; border:none; cursor:pointer; text-align:left; width:100%; } .pf-team-main img { width:32px; height:32px; object-fit:contain; flex:none; } .pf-team-name { font-size:13px; font-weight:700; color:#0f172a; display:block; } .pf-team-rec { font-size:11px; color:#94a3b8; } .pf-unfollow { position:absolute; top:8px; right:8px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:#cbd5e1; font-size:17px; line-height:1; cursor:pointer; border-radius:7px; transition:opacity 160ms cubic-bezier(0.23,1,0.32,1), color 150ms ease, background-color 150ms ease, transform 140ms cubic-bezier(0.23,1,0.32,1); } /* Extend the 24px visible × to a 40x40 hit target (#16) without resizing the glyph. */ .pf-unfollow::before { content:''; position:absolute; inset:-8px; } @media (hover:hover) and (pointer:fine){ .pf-unfollow { opacity:0; } .pf-team:hover .pf-unfollow, .pf-team:focus-within .pf-unfollow { opacity:1; } .pf-unfollow:hover { color:#dc2626; background:#fef2f2; } } .pf-unfollow:active { transform:scale(0.97); } .pf-empty-teams { font-size:13px; color:#94a3b8; padding:18px; border:1px dashed #e5e7eb; border-radius:12px; text-align:center; grid-column:1/-1; } .pf-field { margin-bottom:16px; } .pf-field label { display:block; font-size:12px; font-weight:600; color:#475569; margin-bottom:6px; } .pf-name-edit { display:flex; gap:8px; } .pf-name-edit input { flex:1; padding:10px 13px; border:1px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; transition:border-color 150ms ease, box-shadow 150ms ease; } .pf-name-edit input:focus { border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,0.12); } .pf-save { padding:10px 18px; border:none; border-radius:10px; background:#0f172a; color:#fff; font-weight:700; font-size:13px; cursor:pointer; transition:transform 150ms cubic-bezier(0.23,1,0.32,1); } .pf-save:active { transform:scale(0.97); } .pf-name-msg { font-size:12px; margin-top:6px; min-height:14px; } .pf-name-msg.ok { color:#16a34a; } .pf-name-msg.err { color:#dc2626; } .pf-logout { margin-top:4px; padding:10px 18px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#dc2626; font-weight:700; font-size:13px; cursor:pointer; transition:background-color 150ms ease; } @media (hover:hover) and (pointer:fine){ .pf-logout:hover { background:#fef2f2; } } .profile-empty { text-align:center; padding:60px 20px; } .profile-empty svg { width:46px; height:46px; color:#cbd5e1; margin:0 auto 16px; display:block; } .profile-empty h2 { font-size:19px; font-weight:800; color:#0f172a; margin-bottom:6px; } .profile-empty p { font-size:14px; color:#64748b; margin-bottom:20px; } .take-del { border:none; background:none; color:#cbd5e1; font-size:16px; line-height:1; cursor:pointer; padding:0 2px; transition:color 150ms ease; } /* Two-step delete: first click arms ("Delete?"), second confirms. */ .take-del.armed { color:#fff; background:#dc2626; border-radius:8px; font-size:10px; font-weight:700; padding:3px 7px; } @media (hover:hover) and (pointer:fine){ .take-del:hover { color:#dc2626; } } .pf-takes { display:grid; gap:10px; } /* Game results posted to a profile */ .pf-game-results { display:grid; gap:10px; } .gr-card { border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:12px 14px; } .gr-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .gr-game { font-size:13px; font-weight:800; color:#0f172a; } .gr-when { font-size:11px; color:#94a3b8; margin-right:auto; } .gr-summary { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.5; color:#334155; white-space:pre-wrap; word-break:break-word; margin:0; } /* ====== Profile settings (device-local prefs, bv_settings) ====== */ .pf-set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #f1f5f9; } .pf-set-row:last-child { border-bottom:none; } .pf-set-info { min-width:0; } .pf-set-title { font-size:13.5px; font-weight:700; color:#0f172a; } .pf-set-desc { font-size:12px; color:#64748b; margin-top:2px; line-height:1.45; } .bv-seg { display:inline-flex; background:#f1f5f9; border-radius:10px; padding:3px; gap:2px; flex:none; } .bv-seg button { padding:6px 12px; border:none; border-radius:8px; background:transparent; font-size:12.5px; font-weight:600; color:#64748b; cursor:pointer; transition:background-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1); } .bv-seg button:active { transform:scale(0.96); } @media (hover:hover) and (pointer:fine){ .bv-seg button:hover { color:#0f172a; } } .bv-seg button[aria-pressed="true"] { background:#fff; color:#0f172a; box-shadow:0 1px 3px rgba(15,23,42,0.12); } .bv-switch { position:relative; width:42px; height:24px; flex:none; border:none; border-radius:999px; background:#cbd5e1; cursor:pointer; transition:background-color 180ms ease; } .bv-switch::before { content:''; position:absolute; inset:-8px 0; border-radius:inherit; } .bv-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,0.25); transition:transform 180ms cubic-bezier(0.23,1,0.32,1); } .bv-switch[aria-checked="true"] { background:#F97316; } .bv-switch[aria-checked="true"]::after { transform:translateX(18px); } .pf-select { padding:8px 30px 8px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/12px; font-size:13px; font-weight:600; color:#0f172a; cursor:pointer; appearance:none; -webkit-appearance:none; flex:none; } .pf-action { padding:8px 14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#0f172a; font-weight:700; font-size:12.5px; cursor:pointer; flex:none; transition:background-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1); } .pf-action:active { transform:scale(0.97); } @media (hover:hover) and (pointer:fine){ .pf-action:hover { background:#f8fafc; } } .pf-action.is-danger { color:#dc2626; } @media (hover:hover) and (pointer:fine){ .pf-action.is-danger:hover { background:#fef2f2; } } .pf-action.is-armed { background:#dc2626; border-color:#dc2626; color:#fff; } .bv-switch:focus-visible, .bv-seg button:focus-visible, .pf-select:focus-visible, .pf-action:focus-visible { outline:2px solid #F97316; outline-offset:2px; } @media (prefers-reduced-motion: reduce){ .bv-seg button, .bv-switch, .bv-switch::after, .pf-action { transition:none; } } /* ====== Dark mode (Beta) — inversion-filter approach ====== The whole UI inverts; hue-rotate(180deg) flips hue back so brand colors keep roughly the right hue while lightness flips. Photographic/branded media (logos, headshots, skylines) re-inverts back to normal. The filter MUST sit on html — the root element is spec-exempt from filter's containing-block side effect; anywhere else it would break every position:fixed modal and the sticky nav. A token-based real dark theme is the someday upgrade. */ html.bv-dark { filter: invert(1) hue-rotate(180deg); background:#fff; } html.bv-dark img, html.bv-dark video, html.bv-dark canvas, html.bv-dark iframe { filter: invert(1) hue-rotate(180deg); } /* ====== Manual reduce-motion (settings toggle) ====== Same blunt guarantee as the OS-level media query: animations and transitions collapse to a single frame site-wide. */ html.bv-reduce-motion *, html.bv-reduce-motion *::before, html.bv-reduce-motion *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } /* ====== Live Scoreboard strip ====== */ .live-scoreboard { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 16px; scroll-behavior: smooth; } .live-scoreboard::-webkit-scrollbar { height: 6px; } .live-scoreboard::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; } .ls-card { flex: 0 0 240px; border-radius: 12px; border: 1px solid #e5e7eb; background: white; padding: 12px 14px; cursor: pointer; transition: border-color 200ms ease, transform 200ms cubic-bezier(0.23,1,0.32,1), box-shadow 200ms ease; } @media (hover: hover) and (pointer: fine) { .ls-card:hover { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); } } .ls-card:active { transform: scale(0.99); } .ls-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ls-badge-live { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; background: rgba(220,38,38,0.1); color: #dc2626; letter-spacing: 0.04em; text-transform: uppercase; } .ls-badge-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #dc2626; animation: ls-pulse 1.6s infinite; } @keyframes ls-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .ls-badge-time { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; } .ls-team { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .ls-team img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .ls-team .name { font-size: 13px; font-weight: 600; color: #0f172a; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-team .score { font-size: 16px; font-weight: 800; color: #0f172a; flex-shrink: 0; } .ls-team .score.winning { color: #16a34a; } .ls-meta { margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f5f9; font-size: 10px; color: #94a3b8; } /* ====== Compare Teams page ====== */ .cmp-picker-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 24px; } @media (max-width: 768px) { .cmp-picker-row { grid-template-columns: 1fr; } } .cmp-picker { border-radius: 14px; border: 1px solid #e5e7eb; background: white; padding: 16px 18px; cursor: pointer; min-height: 80px; display: flex; align-items: center; gap: 12px; transition: border-color 200ms ease, background-color 200ms ease, transform 200ms cubic-bezier(0.23,1,0.32,1); } .cmp-picker:active { transform: scale(0.99); } @media (hover: hover) and (pointer: fine) { .cmp-picker:hover { border-color: #cbd5e1; background: #fafbfc; } } .cmp-picker.empty { border-style: dashed; color: #94a3b8; justify-content: center; } .cmp-picker img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } .cmp-picker .pname { font-size: 17px; font-weight: 700; color: #0f172a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp-picker .pmeta { font-size: 11px; color: #64748b; } .cmp-vs { width: 44px; height: 44px; border-radius: 50%; background: #0f172a; color: white; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.04em; } .cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 10px; transition: background-color 150ms ease; } @media (hover: hover) and (pointer: fine) { .cmp-row:hover { background: #fafbfc; } } .cmp-row:not(:last-child) { border-bottom: 1px solid #f1f5f9; } .cmp-val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .cmp-val.left { text-align: right; } .cmp-val.right { text-align: left; } .cmp-val.winner { color: #16a34a; } .cmp-val.loser { color: #94a3b8; } .cmp-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; white-space: nowrap; } @media (max-width: 480px) { .cmp-row { gap: 8px; padding: 10px 10px; } .cmp-val { font-size: 15px; } .cmp-label { font-size: 10px; white-space: normal; } } /* ====== Conference Tournament page ====== */ .ct-conf-card { border-radius: 14px; border: 1px solid #e5e7eb; background: white; overflow: hidden; } .ct-conf-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; background: linear-gradient(180deg, #f9fafb, #ffffff); flex-wrap: wrap; gap: 4px 12px; } .ct-conf-head h3 { font-size: 15px; font-weight: 700; color: #0f172a; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ct-conf-head .meta { font-size: 11px; color: #94a3b8; flex-shrink: 0; white-space: nowrap; } .ct-tier-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .ct-tier-chip.is-power { background: #dbeafe; color: #1e40af; } .ct-tier-chip.is-mid { background: #ecfccb; color: #3f6212; } .ct-tier-chip.is-low { background: #f1f5f9; color: #64748b; } .ct-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .ct-filter-chip { padding: 6px 12px; border-radius: 999px; background: white; border: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; transition: background-color 180ms cubic-bezier(0.23,1,0.32,1), border-color 180ms cubic-bezier(0.23,1,0.32,1), color 180ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1); } @media (hover: hover) and (pointer: fine) { .ct-filter-chip:hover { border-color: #cbd5e1; background: #f8fafc; } } .ct-filter-chip:active { transform: scale(0.97); } .ct-filter-chip.is-active { background: #0f172a; color: white; border-color: #0f172a; } .ct-filter-chip .count { opacity: 0.6; margin-left: 4px; font-weight: 500; } /* ==================== CONFERENCE TOURNAMENT BRACKET (TREE) ==================== */ .bk-conf { padding: 24px 0; background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* Bracket-tree wrapper — single consolidated declaration. inline-block + min-width lets the bracket grow wider than .bk-conf when columns hit their readable minimum, which activates .bk-conf's overflow-x:auto for horizontal scroll on narrow viewports. Position relative so the SVG line layer can absolute-position. */ .bk-bracket-tree { position: relative; display: inline-block; min-width: 100%; padding: 12px; box-sizing: border-box; } /* Round-name header strip — chip-style labels that visually own their column. Each header sits inside its grid column slot and centers itself horizontally via flex; the inner pill is the visual anchor that makes the column ownership feel obvious even when the games below sit at different vertical positions. */ .bk-bracket-tree .bk-grid-headers { display: grid; margin-bottom: 14px; } .bk-bracket-tree .bk-round-header { display: flex; align-items: center; justify-content: center; min-width: 0; } .bk-bracket-tree .bk-round-header > span { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #475569; text-align: center; line-height: 1; padding: 5px 10px; background: #f1f5f9; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Final column: gold pill mirrors the champion cell below */ .bk-bracket-tree .bk-round-header.is-champ-header > span { color: #92400e; background: linear-gradient(135deg, #fef3c7, #fde68a); } @media (prefers-reduced-motion: reduce) { .bk-bracket-tree .bk-round-header > span { transition: none; } } /* CSS Grid: columns = rounds, rows = bracket slots (2^(depth-1)). Every game in the same round shares the same grid column → perfect vertical alignment. */ .bk-bracket-tree .bk-grid { display: grid; column-gap: 20px; /* was 32 — tighter columns */ row-gap: 0; position: relative; } .bk-bracket-tree .bk-grid-cell { display: flex; align-items: center; justify-content: stretch; min-width: 0; } .bk-bracket-tree .bk-grid-cell > .bk-game { width: 100%; } /* Connector lines are drawn as SVG paths AFTER layout (see _drawBracketLines). SVG sits behind the cells so it doesn't intercept hover/click. */ .bk-bracket-tree .bk-lines { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; } .bk-bracket-tree .bk-game, .bk-bracket-tree .bk-bye { flex-shrink: 0; width: 100%; /* fill the 1fr grid column — bracket spans the conf box */ position: relative; z-index: 1; /* stay above the SVG line layer */ } .bk-bracket-tree .bk-children-single { gap: 0; } .bk-bracket-tree .bk-children-single::before { display: none; } /* Invisible spacer for bye sides — preserves column alignment without showing a cell. Kept compact so the bracket doesn't get stretched vertically by deep bye chains. */ .bk-bracket-tree .bk-spacer { width: 150px; flex-shrink: 0; visibility: hidden; pointer-events: none; min-height: 20px; } .bk-bracket-tree .bk-game { display: block; /* override the .bk-game{display:flex} from the March Madness rule */ background: white; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: border-color 180ms cubic-bezier(0.23,1,0.32,1), box-shadow 180ms cubic-bezier(0.23,1,0.32,1); cursor: default; } @media (hover: hover) and (pointer: fine) { .bk-bracket-tree .bk-game:hover { border-color: #cbd5e1; box-shadow: 0 3px 8px rgba(0,0,0,0.06); } } .bk-bracket-tree .bk-game-meta { display: flex; justify-content: space-between; align-items: center; padding: 1px 5px; font-size: 7px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: #f8fafc; border-bottom: 1px solid #f1f5f9; line-height: 1.1; } .bk-bracket-tree .bk-round-tag { color: #475569; } .bk-bracket-tree .bk-date-tag { color: #94a3b8; font-weight: 700; } .bk-bracket-tree .bk-team { display: flex; align-items: center; gap: 6px; /* tighter so condensed brackets still breathe */ padding: 5px 8px; /* condensed — was 6px 10px */ font-size: 11.5px; /* condensed — was 12.5px */ border-bottom: 1px solid #f1f5f9; line-height: 1.2; min-width: 0; /* allow long names to ellipsize cleanly */ } .bk-bracket-tree .bk-team:last-child { border-bottom: none; } /* Clickable bracket team row — Emil interaction stack: - specific properties only (never transition:all) - cubic-bezier(0.23,1,0.32,1) custom ease-out, sub-300ms - hover gated to fine-pointer devices (no false touch-hover) - press feedback via scale(0.97) on :active - prefers-reduced-motion fallback drops transform + transitions */ .bk-bracket-tree .bk-team.is-clickable { cursor: pointer; transition: background-color 180ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1); } @media (hover: hover) and (pointer: fine) { .bk-bracket-tree .bk-team.is-clickable:hover { background-color: #eff6ff; } .bk-bracket-tree .bk-team.is-clickable.is-winner:hover { background-color: #dcfce7; } .bk-bracket-tree .bk-game.is-champ-game .bk-team.is-clickable.is-winner:hover { background: linear-gradient(135deg, #fde68a, #fcd34d); } } .bk-bracket-tree .bk-team.is-clickable:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .bk-bracket-tree .bk-team.is-clickable, .bk-bracket-tree .bk-team.is-clickable:active { transition: none; transform: none; } } /* Same stack applied to bye cells (clickable to that team's page) */ .bk-bracket-tree .bk-bye.is-clickable { cursor: pointer; transition: background-color 180ms cubic-bezier(0.23,1,0.32,1), border-color 180ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1); } @media (hover: hover) and (pointer: fine) { .bk-bracket-tree .bk-bye.is-clickable:hover { background-color: #eff6ff; border-color: #bfdbfe; } } .bk-bracket-tree .bk-bye.is-clickable:active { transform: scale(0.97); } .bk-bracket-tree .bk-team.is-clickable:focus-visible, .bk-bracket-tree .bk-bye.is-clickable:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bk-bracket-tree .bk-bye.is-clickable, .bk-bracket-tree .bk-bye.is-clickable:active { transition: none; transform: none; } } .bk-bracket-tree .bk-team .seed { font-size: 9.5px; font-weight: 800; color: #94a3b8; min-width: 17px; text-align: center; } .bk-bracket-tree .bk-team img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .bk-bracket-tree .bk-team .name { flex: 1; color: #94a3b8; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-bracket-tree .bk-team .score { font-size: 12px; font-weight: 700; color: #475569; min-width: 24px; text-align: right; } .bk-bracket-tree .bk-team.is-winner { background: #f0fdf4; } .bk-bracket-tree .bk-team.is-winner .name { color: #0f172a; font-weight: 700; } .bk-bracket-tree .bk-team.is-winner .score { color: #16a34a; } .bk-bracket-tree .bk-team.is-winner .seed { color: #15803d; } .bk-bracket-tree .bk-game.is-champ-game { border-color: #fcd34d; box-shadow: 0 6px 24px rgba(251, 191, 36, 0.22); } .bk-bracket-tree .bk-game.is-champ-game .bk-game-meta { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; } .bk-bracket-tree .bk-game.is-champ-game .bk-team.is-winner { background: linear-gradient(135deg, #fef3c7, #fde68a); } .bk-bracket-tree .bk-game.is-champ-game .bk-team.is-winner .name { color: #422006; } .bk-bracket-tree .bk-game.is-champ-game .bk-team.is-winner .score { color: #92400e; } .bk-bracket-tree .bk-game.is-champ-game .bk-team.is-winner .seed { color: #92400e; } /* Bye placeholder — single team box, marked as BYE */ .bk-bracket-tree .bk-bye { background: #fafbfc; border: 1px dashed #d1d5db; border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; } .bk-bracket-tree .bk-bye .seed { font-size: 9.5px; font-weight: 800; color: #94a3b8; min-width: 18px; text-align: center; } .bk-bracket-tree .bk-bye img { width: 18px; height: 18px; object-fit: contain; opacity: 0.75; flex-shrink: 0; } .bk-bracket-tree .bk-bye .name { flex: 1; color: #475569; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-empty { font-size: 12px; color: #94a3b8; text-align: center; padding: 24px 8px; font-style: italic; } /* ==================== CBB.COM RANKINGS BRAND ==================== */ /* Proprietary identity treatment — distinct from AP / NET / KenPom */ .cbb-badge { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; font-weight: 800; letter-spacing: 0.04em; } .cbb-methodology-link { color: #3b82f6; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 10px; font-size: 18px; transition: color 180ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .cbb-methodology-link:hover { color: #1d4ed8; text-decoration: underline; } } /* ==================== ABSURD STATS ==================== */ .absurd-hero { position: relative; overflow: hidden; display: block; border-radius: 20px; padding: 28px 28px 30px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%); color: #fff; cursor: pointer; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1); } .absurd-hero::after { content: ''; position: absolute; top: -45%; right: -8%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.28), transparent 70%); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .absurd-hero:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -20px rgba(15,23,42,0.55); } } .absurd-hero:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; } .absurd-hero-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #bae6fd; background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3); border-radius: 999px; padding: 5px 12px; } .absurd-hero-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; margin-top: 18px; flex-wrap: wrap; } .absurd-hero-num { font-size: clamp(3.5rem, 1.8rem + 8vw, 7rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; background: linear-gradient(180deg, #ffffff, #bae6fd); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .absurd-hero-body { flex: 1; min-width: 240px; } .absurd-hero-head { font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .absurd-hero-blurb { color: #cbd5e1; margin-top: 8px; font-size: 14px; line-height: 1.5; max-width: 46ch; } .absurd-hero-logos { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .absurd-hero-detail { color: #94a3b8; font-size: 12px; font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; } .absurd-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; padding: 18px 18px 18px 22px; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .absurd-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--absurd-accent, #3b82f6); } @media (hover: hover) and (pointer: fine) { .absurd-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(15,23,42,0.28); border-color: var(--absurd-accent, #3b82f6); } } .absurd-card:focus-visible { outline: 2px solid var(--absurd-accent, #3b82f6); outline-offset: 2px; } .absurd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .absurd-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--absurd-accent, #3b82f6); } .absurd-icon { font-size: 15px; line-height: 1; } .absurd-num { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #0f172a; font-variant-numeric: tabular-nums; } .absurd-unit { font-size: 12px; font-weight: 600; color: #94a3b8; letter-spacing: 0; text-transform: none; margin-left: 2px; } .absurd-head { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.25; } .absurd-detail { font-size: 12px; color: #6b7280; margin-top: 3px; font-variant-numeric: tabular-nums; } /* ==================== RIVALRIES ==================== */ .rivalry-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 13px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; padding: 18px 18px 18px 22px; transition: transform 200ms cubic-bezier(0.23,1,0.32,1), box-shadow 200ms cubic-bezier(0.23,1,0.32,1), border-color 200ms cubic-bezier(0.23,1,0.32,1); } .rivalry-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rivalry-accent, #ef4444); } @media (hover: hover) and (pointer: fine) { .rivalry-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(15,23,42,0.28); border-color: var(--rivalry-accent, #ef4444); } } .rivalry-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rivalry-accent, #ef4444); } .rivalry-name { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.2; margin-top: 4px; } .rivalry-tagline { font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.35; } .rivalry-vs { display: flex; align-items: stretch; gap: 8px; } .rivalry-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; border-radius: 12px; padding: 12px 6px; background: #f8fafc; border: 1px solid #eef2f7; transition: background 160ms cubic-bezier(0.23,1,0.32,1), border-color 160ms cubic-bezier(0.23,1,0.32,1); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .rivalry-side:hover { background: #f1f5f9; border-color: #e2e8f0; } } .rivalry-side:focus-visible { outline: 2px solid var(--rivalry-accent, #ef4444); outline-offset: 2px; } .rivalry-side.is-winner { background: #fff7ed; border-color: #fed7aa; } .rivalry-side-logo { width: 38px; height: 38px; object-fit: contain; } .rivalry-side-name { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rivalry-side-rating { font-size: 10px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .rivalry-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 50px; } .rivalry-series { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: #0f172a; font-variant-numeric: tabular-nums; line-height: 1; } .rivalry-series-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; } .rivalry-scores { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; } .rivalry-scores .rs-w { color: #16a34a; font-weight: 700; } .rivalry-edge { font-size: 11px; color: #6b7280; border-top: 1px dashed #e5e7eb; padding-top: 8px; } .rivalry-edge strong { color: #0f172a; } .rivalry-empty { font-size: 11px; color: #94a3b8; font-style: italic; } @media (prefers-reduced-motion: reduce) { .absurd-hero, .absurd-card { transition: none; } .absurd-hero:hover, .absurd-card:hover { transform: none; } } /* CBB tier chips — color-coded by quality */ .cbb-tier { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; line-height: 1; } .cbb-tier.is-elite { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; } .cbb-tier.is-strong { background: #dbeafe; color: #1e40af; } .cbb-tier.is-solid { background: #ecfdf5; color: #047857; } .cbb-tier.is-bubble { background: #fef2f2; color: #b91c1c; } /* CBB Rating cell — prominent number treatment */ .cbb-rating-cell { font-weight: 800; font-size: 14px; color: #0f172a; letter-spacing: -0.01em; } /* Row entrance — staggered blur-up when CBB slide activates (Emil curve, 40ms stagger) */ @keyframes cbb-row-enter { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } .cbb-row-anim { animation: cbb-row-enter 260ms cubic-bezier(0.23, 1, 0.32, 1) both; } @media (prefers-reduced-motion: reduce) { .cbb-row-anim { animation: none; opacity: 1; filter: none; transform: none; } } /* ==================== AUTO-BID TRACKER (redesign) ==================== */ /* Emil principles: subtle hover (no scale on list cards), staggered entrance, custom cubic-bezier, beauty as leverage — colored chips + seed prominence. */ /* Auto-Bid Tracker — March Madness "ticket punched" cards. Each conference champion gets a tear-off ticket: team-colored stub w/ vertical conf name + year, a perforated seam (dashed line + punched notches), and a body with logo, seed, and punch status. Bg behind is white (#fff) — notches match. */ .ab-tracker { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 14px; } .ab-card { /* ticket root */ --tc: 100,100,100; /* champion team color (r,g,b), set inline */ position: relative; display: grid; grid-template-columns: 54px 1fr; min-height: 106px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; /* clip the colored stub to the radius */ /* Specific properties only — never transition:all */ transition: border-color 200ms cubic-bezier(0.23,1,0.32,1), box-shadow 200ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1); } /* Punched notches straddling the stub seam, top + bottom edge */ .ab-card::before, .ab-card::after { content: ''; position: absolute; left: 54px; width: 12px; height: 12px; background: #fff; border-radius: 50%; transform: translateX(-50%); box-shadow: inset 0 0 0 1px #e5e7eb; z-index: 2; } .ab-card::before { top: -6px; } .ab-card::after { bottom: -6px; } /* Hover gated by hover-capable pointer (Emil rule: no false touch-hover) */ @media (hover: hover) and (pointer: fine) { .ab-card:hover { border-color: rgb(var(--tc)); box-shadow: 0 6px 20px rgba(15,23,42,0.10); } } /* Press feedback only when the card is clickable */ .ab-card.is-clickable { cursor: pointer; } .ab-card.is-clickable:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .ab-card, .ab-card.is-clickable:active { transition: none; transform: none; } } /* Colored tear-off stub (left). Gradient overlay keeps white ink readable on light team colors; luminance-aware --stub-ink flips to dark when needed. */ .ab-stub { --stub-ink: #fff; position: relative; display: flex; align-items: center; justify-content: center; color: var(--stub-ink); background: linear-gradient(155deg, rgba(255,255,255,0.18), rgba(0,0,0,0.22)), rgb(var(--tc)); border-right: 2px dashed rgba(255,255,255,0.55); } .ab-stub-conf { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; white-space: nowrap; max-height: 78px; /* leaves room for the year at the bottom */ overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.28); } /* Longest conference names (12+ chars, e.g. "Mountain West") shrink to fit vertically */ .ab-stub-conf.is-long { font-size: 7.5px; letter-spacing: 0.03em; } .ab-stub-year { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 7.5px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.85; } /* Ticket body (right) */ .ab-body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 11px 18px; min-width: 0; } .ab-eyebrow { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--tc)); } .ab-eyebrow.is-proj { color: #b45309; } .ab-team { display: flex; align-items: center; gap: 10px; min-width: 0; } .ab-team-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; } .ab-team-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ab-team-seed { font-size: 9px; font-weight: 800; color: #94a3b8; letter-spacing: 0.06em; text-transform: uppercase; } .ab-team-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; align-self: flex-start; line-height: 1; } .ab-status.is-final { background: #ecfdf5; color: #047857; } .ab-status.is-final::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #10b981; } .ab-status.is-proj { background: #fffbeb; color: #92400e; } .ab-status.is-proj::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #f59e0b; animation: ab-pulse 2200ms cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes ab-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .ab-status.is-proj::before { animation: none; } } .ct-champ-card { padding: 14px 18px; background: linear-gradient(135deg, #fef3c7, #fde68a); border-top: 1px solid #fcd34d; /* Specific properties only; will transform on press if clickable */ transition: filter 200ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1); } .ct-champ-card .label { font-size: 10px; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: 0.08em; } .ct-champ-card .name { font-size: 15px; font-weight: 800; color: #422006; margin-top: 2px; display: flex; align-items: center; gap: 8px; } .ct-champ-card .name img { width: 22px; height: 22px; object-fit: contain; } /* Clickable champion card — feel pressable, slight warm-glow on hover */ .ct-champ-card.is-clickable { cursor: pointer; } @media (hover: hover) and (pointer: fine) { .ct-champ-card.is-clickable:hover { filter: brightness(1.04); } } .ct-champ-card.is-clickable:active { transform: scale(0.98); } .ct-champ-card.is-clickable:focus-visible { outline: 2px solid #ca8a04; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ct-champ-card, .ct-champ-card.is-clickable:active { transition: none; transform: none; filter: none; } } /* ====== Takes interactivity ====== */ .take-card { border-radius: 12px; border: 1px solid #e5e7eb; background: white; padding: 16px 18px; cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(0.23,1,0.32,1); } @media (hover: hover) and (pointer: fine) { .take-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.04); } } .take-vote-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); } .take-vote-btn:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .take-vote-btn:hover { background: #f1f5f9; color: #0f172a; } } .take-vote-btn.voted { background: rgba(22,163,74,0.1); color: #16a34a; } .take-vote-btn.voted svg { color: #16a34a; } .takes-filter-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .takes-team-filter { padding: 4px 10px; border-radius: 16px; border: 1px solid #e5e7eb; background: white; color: #64748b; font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); } .takes-team-filter:active { transform: scale(0.96); } .takes-team-filter.active { background: #0f172a; color: white; border-color: #0f172a; } .take-post-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); align-items: center; justify-content: center; } .take-post-modal.open { display: flex; animation: gs-fade-in 200ms cubic-bezier(0.23,1,0.32,1); } .take-post-card { background: white; border-radius: 16px; padding: 24px 28px; width: 92%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); animation: gs-pop 280ms cubic-bezier(0.23,1,0.32,1); } .take-post-card h3 { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 12px; } .take-post-card textarea { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 14px; resize: none; outline: none; transition: border-color 200ms ease; } .take-post-card textarea:focus { border-color: #0f172a; } .take-post-card .tag-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .take-post-card .tag-chip { padding: 3px 9px; border-radius: 14px; border: 1px solid #e5e7eb; background: none; font-family: inherit; /* chips are real