/* ───────────────────────────────────────────────────────────── TrendingRepo — Terminal Shell · v6 redesign Dark Void + Liquid Lava · Bloomberg-density · sharp 2px radii Source of truth: src/app/globals.css (Dark Void palette) ───────────────────────────────────────────────────────────── */ :root { /* Surfaces — 6-stop luminance ramp */ --bg: #08090a; --shell: #0b0d0f; --surface: #101418; --surface-2: #151a20; --surface-3: #1d242b; --surface-4: #2a323a; --graphite: #0c0c12; --charcoal: #14141c; /* Borders — hairline first */ --border: #222a32; --border-subtle: #1a2026; --border-strong: #2f3942; --border-hover: #4d5865; /* Text — 5-stop slate ramp (Revive 2026-05-23) */ --fg: #f1f5f9; --fg-bright: #ffffff; --fg-muted: #98a2b3; --fg-subtle: #6b7785; --fg-faint: #4a5562; --fg-disabled: #3c444d; --bg-overlay: rgba(8, 9, 10, 0.85); /* Brand — Liquid Lava */ --accent: #ff6b35; --accent-hover: #ff8458; --accent-dim: #c44a1f; --accent-soft: rgba(255, 107, 53, 0.14); --accent-wash: rgba(255, 107, 53, 0.06); --accent-glow: rgba(255, 107, 53, 0.45); --accent-line: rgba(255, 107, 53, 0.32); /* Comment reactions — explicit on-state hues (brief-mandated additions) */ --heart: #ff4d6d; /* Comment reaction: heart on-state */ --unicorn: #a78bfa; /* Comment reaction: unicorn on-state */ /* Heat scale — velocity badges + breakout pills (Revive) */ --heat-explosive: #ff6b35; --heat-hot: #ffb547; --heat-steady: #60a5fa; --heat-cool: #6b7785; /* Signals */ --up: #22c55e; --up-soft: rgba(34, 197, 94, 0.10); --up-glow: rgba(34, 197, 94, 0.18); --down: #ff4d4d; --down-soft: rgba(255, 77, 77, 0.14); --warning: #ffb547; --warning-soft: rgba(255, 181, 71, 0.10); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.10); --cyan: #3ad6c5; --violet: #a78bfa; --pink: #f472b6; --gold: #ffd24d; --silver: #c0c5cc; --bronze: #cd7f32; /* Chart series */ --series-1: var(--accent); --series-2: var(--up); --series-3: var(--cyan); --series-4: var(--warning); --series-5: var(--down); --series-6: var(--violet); --series-7: var(--pink); /* Source brand */ --src-github: #c8d3df; --src-hackernews: #ff7a3d; --src-x: #7aa7ff; --src-reddit: #ff5a4a; --src-producthunt: #da552f; --src-bluesky: #3aa4ff; --src-dev: #b08bff; --src-openai: #5cd6c0; --src-claude: #ffb547; --src-huggingface: #FFD21E; --src-arxiv: #5cd6c0; --src-npm: #ff4d4d; --src-lobsters: #ac130d; --src-funding: #22c55e; /* Type — chain through next/font CSS variables (set on by layout.tsx) */ --font-sans: var(--font-geist), "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: var(--font-geist-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; --font-display: var(--font-space-grotesk), var(--font-geist), "Inter", ui-sans-serif, system-ui, sans-serif; /* Letter-spacing — pair with caps text per Revive contract */ --t-data: 0.04em; --t-meta: 0.10em; --t-control: 0.14em; /* Radii — sharp (Revive aliases r-xs..r-xl preserved alongside r-1..r-4 for back-compat) */ --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 6px; --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px; --r-pill: 99px; --r-round: 9999px; /* Layout */ --sidebar-w: 232px; --sidebar-w-collapsed: 64px; --rail-w: 320px; --topbar-h: 56px; --ticker-h: 32px; --statusbar-h: 26px; /* Motion — Revive aliases motion-fast / motion-base alongside d-fast / d-base */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --d-fast: 120ms; --d-base: 180ms; --d-slow: 260ms; --motion-fast: 120ms; --motion-base: 180ms; --duration-pulse: 1.6s; --duration-ticker: 60s; /* Shadows — luminance not elevation */ --glow-orange: 0 0 0 1px rgba(255,107,53,0.4), 0 0 16px rgba(255,107,53,0.35); --glow-green: 0 0 0 1px rgba(34,197,94,0.35), 0 0 12px rgba(34,197,94,0.25); --ring-live: 0 0 0 3px rgba(34, 197, 94, 0.18); --ring-focus: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); --overlay: 0 24px 48px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); --accent-glow-wide: 0 0 0 1px rgba(255,107,53,0.4), 0 0 24px rgba(255,107,53,0.28); /* ─── Standalone-template token aliases (Profile - standalone.html) ─── The profile-page rebuild adopts the standalone's token names verbatim so its pf-* CSS can be copied without rewrites. These map onto the existing Dark Void ramp; the existing names remain canonical for the rest of the app. */ --bg-canvas: #08090a; --bg-shell: #0b0d0f; --bg-raised: #101418; --bg-muted: #151a20; --bg-fill: #1d242b; --bg-strong: #2a323a; --border-default: #222a32; --text: #f1f5f9; --text-muted: #98a2b3; --text-soft: #6b7785; --text-dim: #4a5562; /* Reaction on-state hues — also used outside profile (see comment threads) */ --unicorn-soft: rgba(167, 139, 250, 0.10); --unicorn-line: rgba(167, 139, 250, 0.40); --heart-soft: rgba(255, 77, 109, 0.10); --heart-line: rgba(255, 77, 109, 0.40); /* Signal aliases mirroring the standalone naming (--success → --up etc.). Lets standalone-verbatim CSS reference the same hue without rewrites. */ --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.12); --danger: #ff4d4d; --danger-soft: rgba(255, 77, 77, 0.12); } /* ───────────────────────────────────────────────────────────── Reset + base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--fg); /* Body atmosphere — radial accent glows + settled gradient + canvas base */ background: radial-gradient(900px 600px at 12% -8%, rgba(255, 107, 53, 0.07), transparent 60%), radial-gradient(700px 500px at 92% 4%, rgba(60, 130, 246, 0.05), transparent 60%), linear-gradient(180deg, #0a0c0e 0%, #08090a 380px), var(--bg); font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: clip; position: relative; } /* Body atmosphere — layer 2: 48px grid texture, radial-masked at edges */ body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); } /* Body atmosphere — layer 3: 3px scanlines, near-invisible CRT depth */ body::after { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 100% 3px; pointer-events: none; z-index: 0; opacity: 0.6; } /* Keep all app content above the atmosphere overlays */ .app, #root, [data-app-root] { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } ::selection { background: var(--accent-soft); color: var(--fg-bright); } /* mono numerics — use anywhere a number is shown */ .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* ───────────────────────────────────────────────────────────── App shell — sidebar + topbar + ticker + main + status bar ───────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) var(--ticker-h) 1fr var(--statusbar-h); grid-template-areas: "sidebar topbar" "sidebar ticker" "sidebar main" "sidebar status"; min-height: 100vh; width: 100%; max-width: 100vw; overflow-x: clip; } /* SIDEBAR */ .sidebar { grid-area: sidebar; background: var(--shell); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.015em; text-decoration: none; color: var(--fg); flex-shrink: 0; } /* Image-backed brand mark — used by the Revive TrendingRepo lockup. Override of .brand-mark: drops the radial-gradient bg, adds glow ring. */ .brand-mark--image { background: transparent !important; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,107,53,0.35), 0 0 14px rgba(255,107,53,0.35); } .brand-mark--image img, .brand-mark--image svg { display: block; width: 100%; height: 100%; } /* Wordmark — "trending.repo" lowercase with orange dot separator */ .brand-name .dot { color: var(--accent); } .brand-mark { width: 24px; height: 24px; border-radius: var(--r-1); background: radial-gradient(circle at 30% 30%, var(--accent-hover), var(--accent) 60%, var(--accent-dim) 100%); display: grid; place-items: center; color: #1a0e08; font-family: var(--font-mono); font-size: 12px; font-weight: 800; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); } .brand-name { line-height: 1; } .brand-name b { color: var(--accent); font-weight: 700; } .nav-group { padding: 14px 10px 6px; } .nav-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); padding: 0 8px 8px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-1); color: var(--fg-muted); font-size: 13px; position: relative; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .nav-link:hover { background: var(--surface-2); color: var(--fg); } .nav-link.active { background: var(--surface-2); color: var(--fg-bright); } .nav-link.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient( to bottom, transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100% ); pointer-events: none; } .nav-link .nav-icon { width: 18px; height: 18px; display: grid; place-items: center; color: var(--fg-subtle); flex-shrink: 0; } .nav-link.active .nav-icon { color: var(--accent); } .nav-link .nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); font-variant-numeric: tabular-nums; } .nav-link .nav-pill { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; padding: 2px 5px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft); } .nav-link .nav-sub { margin-left: 14px; padding-left: 12px; border-left: 1px solid var(--border-subtle); } .sidebar-drop { margin: 14px 12px 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-2); background: linear-gradient(135deg, transparent, var(--accent-wash)); color: var(--fg-muted); display: flex; align-items: center; gap: 10px; font-size: 12px; transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease); } .sidebar-drop:hover { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-wash), var(--accent-soft)); color: var(--fg-bright); } .sidebar-drop b { color: var(--accent); font-weight: 600; } .sidebar-drop svg { color: var(--accent); flex-shrink: 0; } .sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--fg-faint); display: grid; gap: 6px; } .sidebar-footer .row { display: flex; justify-content: space-between; align-items: center; } .sidebar-footer .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: var(--ring-live); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* TOPBAR */ .topbar { grid-area: topbar; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--border-subtle); background: var(--shell); position: sticky; top: 0; z-index: 30; min-width: 0; max-width: 100%; overflow: hidden; } .crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; } .crumbs .sep { color: var(--border-strong); } .crumbs b { color: var(--fg-bright); font-weight: 600; } .searchbar { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; width: auto; max-width: clamp(220px, 36vw, 520px); min-width: 180px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .searchbar:focus-within { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 3px var(--accent-wash); } .searchbar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 12px; font-family: var(--font-sans); } .searchbar input::placeholder { color: var(--fg-subtle); } .searchbar kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 5px; background: var(--surface-3); color: var(--fg-faint); border-radius: var(--r-1); border: 1px solid var(--border); } .searchbar svg { color: var(--fg-subtle); flex-shrink: 0; } .topbar-actions { display: flex; align-items: center; gap: 6px; } .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--r-1); color: var(--fg-muted); transition: all var(--d-fast) var(--ease); position: relative; } .icon-btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--border); } .icon-btn.dot::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 2px var(--shell); } .avatar-btn { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--fg); font-size: 12px; transition: border-color var(--d-fast) var(--ease); } .avatar-btn:hover { border-color: var(--accent); } .avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--violet) 0%, var(--accent) 60%, var(--down) 100%); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: #1a0e08; } .tier-pill { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; padding: 1px 5px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); font-weight: 600; } /* TICKER */ .ticker { grid-area: ticker; background: var(--graphite); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; overflow: hidden; position: relative; min-width: 0; } .ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, var(--graphite), transparent); } .ticker::after { right: 0; background: linear-gradient(-90deg, var(--graphite), transparent); } .ticker-tape { display: flex; align-items: center; gap: 28px; white-space: nowrap; animation: tape 70s linear infinite; padding: 0 28px; font-family: var(--font-mono); font-size: 11px; } .ticker:hover .ticker-tape { animation-play-state: paused; } @keyframes tape { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .tick { display: flex; align-items: center; gap: 8px; letter-spacing: 0.02em; } .tick .tick-tag { font-size: 9px; letter-spacing: 0.12em; color: var(--fg-faint); padding: 1px 4px; background: var(--surface); border-radius: var(--r-1); } .tick b { color: var(--fg-bright); font-weight: 500; } .tick .delta-up { color: var(--up); } .tick .delta-dn { color: var(--down); } .tick .delta-fl { color: var(--fg-faint); } /* MAIN */ .main { grid-area: main; padding: 16px 22px 32px; min-width: 0; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); } .page-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--fg-bright); } .page-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 4px; } .page-eyebrow .dot { color: var(--accent); } .page-sub { color: var(--fg-subtle); font-size: 13px; max-width: 56ch; line-height: 1.55; margin: 6px 0 0; } /* Single inline stat on the right side of .page-head — replaces the multi-cell KpiStrip on the trending hub. Operator wants the eye on the hero title, not on five competing KPIs. Treated like a mini liquid-lava readout: accent gradient text, subtle radial wash, hairline accent rail on the left edge, corner-bracket atmosphere mirroring .hero / .id-hero. */ .page-head-stat { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 16px 10px 22px; text-align: right; flex-shrink: 0; background: radial-gradient(180px 100px at 90% 110%, var(--accent-wash), transparent 70%), linear-gradient(180deg, transparent, rgba(255, 107, 53, 0.04)); border-radius: var(--r-md); isolation: isolate; } .page-head-stat::before { /* Accent rail — gradient lava bar on the left edge */ content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); border-radius: 1px; box-shadow: 0 0 8px rgba(255, 107, 53, 0.45); } .page-head-stat::after { /* Top-right corner bracket — atmospheric detail */ content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-top: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); pointer-events: none; } .page-head-stat-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--up); font-weight: 500; } .page-head-stat-eyebrow .live-dot { width: 6px; height: 6px; } .page-head-stat-value { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 1; /* Gradient lava fill on the numeric — falls back to solid accent */ color: var(--accent); background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 55%, var(--accent-dim) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 18px rgba(255, 107, 53, 0.25); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)); } .page-head-stat-arrow { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--accent); -webkit-text-fill-color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); line-height: 1; transform: translateY(-2px); } .page-head-stat-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); } @media (max-width: 700px) { .page-head-stat { align-items: flex-start; text-align: left; margin-top: 10px; } .page-head-stat::before { top: 4px; bottom: 4px; } .page-head-stat-value { font-size: 26px; } } /* STATUS BAR */ .statusbar { grid-area: status; background: var(--shell); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 16px; gap: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--fg-faint); text-transform: uppercase; min-width: 0; } .statusbar .seg { display: flex; align-items: center; gap: 6px; } .statusbar .seg b { color: var(--fg); font-weight: 500; } .statusbar .dot { width: 6px; height: 6px; border-radius: 50%; } .statusbar .dot.up { background: var(--up); box-shadow: 0 0 6px var(--up-glow); } .statusbar .dot.warn { background: var(--warning); } .statusbar .dot.down { background: var(--down); } .statusbar .grow { margin-left: auto; } /* ───────────────────────────────────────────────────────────── Primitives ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .card-head { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; } .card-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin: 0; } .card-title b { color: var(--fg); font-weight: 600; } .card-body { padding: 14px; } /* Pills + chips */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.02em; } .chip.up { color: var(--up); background: var(--up-soft); border-color: rgba(34,197,94,0.25); } .chip.dn { color: var(--down); background: var(--down-soft); border-color: rgba(255,77,77,0.28); } .chip.warn { color: var(--warning); background: var(--warning-soft); border-color: rgba(255,181,71,0.30); } .chip.info { color: var(--info); background: var(--info-soft); border-color: rgba(96,165,250,0.25); } .chip.accent { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .chip.solid { background: var(--fg); color: var(--bg); border-color: transparent; } .chip svg { width: 11px; height: 11px; } /* Tag chip — uppercase mono label */ .tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg-subtle); } .tag.brand { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-wash); } .tag.up { color: var(--up); border-color: rgba(34,197,94,0.25); background: var(--up-soft); } /* Mention cell — pips + count co-located (sources ARE mentions) */ .mention-cell { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; white-space: nowrap; } .mention-cell .source-pips { flex-shrink: 0; } .mention-cell .mc-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); font-size: 13px; } .mention-cell .mc-count .mc-unit { color: var(--fg-subtle); font-size: 10px; margin-left: 2px; text-transform: uppercase; letter-spacing: 0.06em; } /* Mention source pip — colored dot (one pip per channel that has mentions) */ .spip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .spip.github { background: var(--src-github); } .spip.hn { background: var(--src-hackernews); } .spip.x { background: var(--src-x); } .spip.reddit { background: var(--src-reddit); } .spip.ph { background: var(--src-producthunt); } .spip.bsky { background: var(--src-bluesky); } .spip.devto { background: var(--src-dev); } .spip.hf { background: var(--src-huggingface); } .spip.arxiv { background: var(--src-arxiv); } .spip.npm { background: var(--src-npm); } /* Scoped variant: when .spip lives inside .source-pips strip and contains a brand-mark SVG, render as a square logo container instead of a dot. Density ramp via [data-density] — 0..3 maps to opacity 0.25..1. */ .source-pips .spip { width: 14px; height: 14px; border-radius: 2px; background: transparent; display: inline-grid; place-items: center; overflow: hidden; opacity: 0.25; transition: opacity var(--d-fast) var(--ease); } .source-pips .spip[data-density="1"] { opacity: 0.55; } .source-pips .spip[data-density="2"] { opacity: 0.85; } .source-pips .spip[data-density="3"] { opacity: 1; } .source-pips .spip svg, .source-pips .spip img { display: block; width: 100%; height: 100%; } /* Letter fallback — used when a source has no brand logo in /brand/sources/ (currently only Lobsters). Renders the source's initial centered. */ .source-pips .spip .spip-letter, .smark .smark-letter { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0; color: currentColor; background: currentColor; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: var(--bg); border-radius: 2px; text-transform: uppercase; } /* Color drives SVG currentColor fills inside the source-pips strip */ .source-pips .spip.github { color: var(--src-github); } .source-pips .spip.hn { color: var(--src-hackernews); } .source-pips .spip.x { color: var(--src-x); } .source-pips .spip.reddit { color: var(--src-reddit); } .source-pips .spip.bsky { color: var(--src-bluesky); } .source-pips .spip.ph { color: var(--src-producthunt); } .source-pips .spip.hf { color: var(--src-huggingface); } .source-pips .spip.arxiv { color: var(--src-arxiv); } .source-pips .spip.npm { color: var(--src-npm); } .source-pips .spip.lobsters { color: var(--src-lobsters); } .source-pips .spip-more, .source-pips .spip-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--fg-muted); padding: 0 4px; display: inline-grid; place-items: center; min-height: 18px; } .source-pips .spip-more { border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); } .source-pips .spip-count { font-weight: 600; color: var(--fg-bright); } /* Source mark — uniform tile pattern: brand-color tile + white SVG glyph. * 2026-05-24 operator fix: previous look mixed dark-bg tiles (github, x) * with naked colored glyphs (hn = orange Y on transparent), giving an * inconsistent visual rhythm. Unified to "brand-tile with contrast glyph" * so the mention column reads as a coherent badge strip instead of * mismatched marks. */ .smark { width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: var(--r-1); background: var(--surface-3); border: 1px solid color-mix(in srgb, currentColor 15%, transparent); color: #fff; flex-shrink: 0; overflow: hidden; } .smark svg { display: block; width: 12px; height: 12px; } /* X / Twitter mark is geometrically thin (two crossed strokes); scale up * slightly so it doesn't read as an empty black tile inside the 16px chip. */ .smark.x svg { width: 13px; height: 13px; } .smark.github { background: #161b22; color: #f0f6fc; } .smark.x { background: #000; color: #fff; } .smark.hn { background: var(--src-hackernews); color: #fff; } .smark.reddit { background: var(--src-reddit); color: #fff; } .smark.bsky { background: var(--src-bluesky); color: #fff; } .smark.ph { background: var(--src-producthunt); color: #fff; } /* HuggingFace yellow needs a dark glyph for contrast */ .smark.hf { background: var(--src-huggingface); color: #1a1a1a; } .smark.arxiv { background: var(--src-arxiv); color: #0b1117; } .smark.npm { background: var(--src-npm); color: #fff; } .smark.lobsters { background: var(--src-lobsters); color: #fff; } .smark.devto { background: #0a0a0a; color: #fff; } /* AISO anchor pip — the mark is a full-bleed app icon (orange rect + ring + * italic 'a'), so fill the chip edge-to-edge rather than floating a small * glyph inside the neutral tile. Same treatment as the X / Dev.to filled * tiles. Always full opacity in the .source-pips strip variant. */ .smark.aiso { background: transparent; border-color: transparent; } .smark.aiso img { width: 100%; height: 100%; border-radius: var(--r-1); } .source-pips .spip.aiso { opacity: 1; background: transparent; } .source-pips .spip.aiso img { border-radius: 2px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg); font-size: 12px; font-weight: 500; font-family: var(--font-sans); transition: all var(--d-fast) var(--ease); } .btn:hover { background: var(--surface-3); border-color: var(--border-hover); } .btn.primary { background: var(--accent); color: #1a0e08; border-color: transparent; font-weight: 600; } .btn.primary:hover { background: var(--accent-hover); box-shadow: var(--glow-orange); } .btn.ghost { background: transparent; border-color: var(--border); } .btn.sm { padding: 4px 9px; font-size: 11px; } .btn.lg { padding: 10px 18px; font-size: 13px; } .btn svg { width: 14px; height: 14px; } /* Tabs */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 9px 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--fg-subtle); font-size: 12px; font-weight: 500; font-family: var(--font-sans); white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .tab:hover { color: var(--fg); } .tab.active { color: var(--fg-bright); border-bottom-color: var(--accent); } .tab .tab-count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); font-variant-numeric: tabular-nums; } .tab.active .tab-count { color: var(--accent); } /* Segmented control — for time range etc. */ .segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); padding: 2px; font-family: var(--font-mono); } .segmented button, .segmented a { padding: 5px 11px; background: transparent; border: 0; color: var(--fg-subtle); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 1px; transition: all var(--d-fast) var(--ease); text-decoration: none; } .segmented button:hover, .segmented a:hover { color: var(--fg); } .segmented button.on, .segmented a.on { background: var(--surface-3); color: var(--fg-bright); } /* Stats strip */ .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 16px 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-1); overflow: hidden; } .kpi { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .kpi-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); } .kpi-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-bright); letter-spacing: -0.01em; } .kpi-value.kpi-empty { color: var(--fg-faint); font-weight: 500; } .kpi-value-sub { color: var(--fg-faint); font-size: 16px; font-weight: 500; } .kpi-delta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; } .kpi-delta svg { width: 11px; height: 11px; flex: 0 0 auto; } .kpi-delta .live-dot { flex: 0 0 auto; } .kpi-delta.up { color: var(--up); } .kpi-delta.dn { color: var(--down); } .kpi-delta.fl { color: var(--fg-faint); } /* Freshness pip — traffic lights */ .fresh { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); } .fresh .pip { width: 6px; height: 6px; border-radius: 50%; } .fresh.fresh-live .pip { background: var(--up); box-shadow: 0 0 5px var(--up); animation: pulse 2s ease-in-out infinite; } .fresh.fresh-warm .pip { background: var(--warning); } .fresh.fresh-cool .pip { background: var(--warning); } .fresh.fresh-cold .pip { background: var(--down); } .fresh b { color: var(--fg); font-weight: 500; } /* Table — terminal density */ .tdata { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tdata thead th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--fg-faint); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; } .tdata thead th.num { text-align: right; } .tdata tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .tdata tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .tdata tbody tr { transition: background var(--d-fast) var(--ease); } .tdata tbody tr:hover { background: var(--surface-2); } .tdata tbody tr:hover td:first-child { color: var(--fg-bright); background: linear-gradient( to bottom, transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100% ) left center / 3px 100% no-repeat, var(--surface-2); } /* Repo identity cell — avatar + text */ .repo-id { display: flex; align-items: center; gap: 10px; min-width: 0; } .repo-avatar { width: 28px; height: 28px; border-radius: var(--r-1); background: var(--surface-3); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 11px; flex-shrink: 0; text-transform: uppercase; color: var(--fg-muted); overflow: hidden; position: relative; text-decoration: none; } .repo-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } a.repo-avatar:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .repo-avatar.lg { width: 56px; height: 56px; font-size: 22px; border-radius: var(--r-2); } .repo-avatar.xl { width: 80px; height: 80px; font-size: 32px; border-radius: var(--r-2); } .repo-text { min-width: 0; } .repo-name { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; letter-spacing: -0.01em; } .repo-owner { color: var(--fg-subtle); } .repo-desc { color: var(--fg-subtle); font-size: 11.5px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Rank */ .rank { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--fg-faint); font-variant-numeric: tabular-nums; min-width: 32px; display: inline-block; text-align: center; padding: 2px 6px; border-radius: var(--r-1); letter-spacing: 0.03em; } .rank.top { font-weight: 800; } .rank.top-1 { color: #0a0e15; background: linear-gradient(180deg, #ffb347 0%, #ff7a18 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 12px -2px color-mix(in srgb, var(--accent) 70%, transparent); text-shadow: 0 1px 0 rgba(255, 220, 180, 0.4); } .rank.top-2 { color: #ffd9a8; background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); } .rank.top-3 { color: #ff9d5c; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } /* Velocity bar */ .velocity { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); } .velocity-bar { flex: 1; height: 4px; min-width: 60px; background: var(--surface-3); border-radius: var(--r-1); position: relative; overflow: hidden; } .velocity-bar::after { content: ''; position: absolute; inset: 0; width: var(--v, 50%); background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: var(--r-1); } .velocity.up .velocity-bar::after { background: linear-gradient(90deg, var(--up) 0%, var(--cyan) 100%); } .velocity.dn .velocity-bar::after { background: linear-gradient(90deg, var(--warning) 0%, var(--down) 100%); } /* ───────────────────────────────────────────────────────────── Sparkline — Recharts wrapper. ───────────────────────────────────────────────────────────── */ .spark { display: inline-block; height: 24px; width: 80px; position: relative; --spark-stroke: var(--accent); --spark-fill: var(--accent-soft); } .spark.up { --spark-stroke: var(--up); --spark-fill: var(--up-soft); } .spark.dn { --spark-stroke: var(--down); --spark-fill: var(--down-soft); } .spark.muted { --spark-stroke: var(--fg-subtle); --spark-fill: transparent; } .spark svg { width: 100%; height: 100%; display: block; overflow: visible; } /* ───────────────────────────────────────────────────────────── Chart shell — for hero star-history etc. ───────────────────────────────────────────────────────────── */ .chart-shell { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); padding: 16px; position: relative; } .chart-shell .axis { font-family: var(--font-mono); font-size: 10px; fill: var(--fg-faint); } .chart-shell .gridline { stroke: var(--border-subtle); stroke-dasharray: 2 4; stroke-width: 1; } .chart-shell .baseline { stroke: var(--border); stroke-width: 1; } .chart-shell .area { fill: url(#area-grad); opacity: 0.7; } .chart-shell .line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; } .chart-shell .marker { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; } .chart-shell .marker.up { stroke: var(--up); } .chart-shell .marker.event { stroke: var(--accent); } .chart-shell .marker-label { font-family: var(--font-mono); font-size: 10px; fill: var(--fg-muted); } /* Annotation markers on chart */ .chart-mark { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; } .chart-mark .stem { width: 1px; background: var(--border-strong); height: 18px; } .chart-mark .lbl { font-family: var(--font-mono); font-size: 9.5px; padding: 2px 6px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg); white-space: nowrap; } /* ───────────────────────────────────────────────────────────── Responsive — sidebar collapses below 1024, drawer below 768 ───────────────────────────────────────────────────────────── */ .hamburger { display: none; } @media (max-width: 1280px) { :root { --sidebar-w: 220px; } .main { padding: 14px 16px 28px; } } @media (max-width: 1024px) { .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); } .sidebar .brand-name, .sidebar .nav-link span:not(.nav-icon), .sidebar .nav-link .nav-count, .sidebar .nav-link .nav-pill, .sidebar-drop > div, .sidebar-footer, .nav-label { display: none; } .sidebar .nav-link { justify-content: center; padding: 9px 0; } .sidebar-drop { padding: 8px; justify-content: center; } .brand { justify-content: center; padding: 0; } } @media (max-width: 768px) { :root { --topbar-h: 52px; --ticker-h: 30px; } .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "ticker" "main" "status"; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: 280px; max-width: 80vw; transform: translateX(-100%); transition: transform var(--d-base) var(--ease); z-index: 50; border-right: 1px solid var(--border); } .sidebar.open { transform: translateX(0); box-shadow: var(--overlay); } .sidebar .brand-name, .sidebar .nav-link span:not(.nav-icon), .sidebar .nav-link .nav-count, .sidebar .nav-link .nav-pill, .sidebar-drop > div, .sidebar-footer, .nav-label { display: revert; } .sidebar .nav-link { justify-content: flex-start; padding: 8px 12px; } .sidebar .brand { justify-content: flex-start; padding: 0 16px; } .sidebar-drop { padding: 12px; justify-content: flex-start; } .hamburger { display: grid; place-items: center; width: 32px; height: 32px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg); } .crumbs { font-size: 10px; } .crumbs .crumb-sub { display: none; } .searchbar { display: none; } .main { padding: 12px 14px 24px; } .statusbar { font-size: 9px; gap: 12px; overflow-x: auto; } } /* helpers */ .row { display: flex; align-items: center; gap: 10px; } .col { display: flex; flex-direction: column; gap: 6px; } .between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .grow { flex: 1; } .gap-2 { gap: 6px; } .gap-3 { gap: 10px; } .gap-4 { gap: 14px; } .gap-6 { gap: 22px; } .muted { color: var(--fg-subtle); } .faint { color: var(--fg-faint); } .bright { color: var(--fg-bright); } .up-text { color: var(--up); } .dn-text { color: var(--down); } .warn-text { color: var(--warning); } .accent-text { color: var(--accent); } .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); } .divider { height: 1px; background: var(--border-subtle); margin: 14px 0; } .divider.v { width: 1px; height: 1em; background: var(--border-subtle); margin: 0 8px; } /* Empty state */ .empty { padding: 28px; text-align: center; color: var(--fg-subtle); font-size: 12px; border: 1px dashed var(--border); border-radius: var(--r-1); background: var(--surface); } /* utility grid */ .grid { display: grid; } .g-2 { grid-template-columns: repeat(2, 1fr); gap: 14px; } .g-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; } .g-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; } .g-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } @media (max-width: 900px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } } @media (max-width: 1200px) and (min-width: 901px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .trending-grid { grid-template-columns: 1fr !important; } } /* live dot */ .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--down); } .live-dot.live { background: var(--up); box-shadow: var(--ring-live); animation: pulse 2s ease-in-out infinite; } .live-dot.warn { background: var(--warning); } .live-dot.cold { background: var(--down); } /* ═════════════════════════════════════════════════════════════ v6.1 ENHANCEMENTS — sidebar dropdown · mention strip · PRO gating action overlay · feed item · animations · alert config inline ═════════════════════════════════════════════════════════════ */ /* ─── Sidebar dropdown — Trending children visible inline ─── */ .nav-parent { position: relative; } .nav-parent .nav-link { padding-right: 28px; } .nav-parent .nav-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--fg-faint); transition: transform var(--d-base) var(--ease), color var(--d-fast) var(--ease); pointer-events: none; } .nav-parent.open .nav-caret { transform: translateY(-50%) rotate(180deg); color: var(--accent); } .nav-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--ease); } .nav-parent.open .nav-children { grid-template-rows: 1fr; } .nav-children > div { overflow: hidden; } .nav-child { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 32px; color: var(--fg-subtle); font-size: 12px; border-radius: var(--r-1); position: relative; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .nav-child::before { content: ''; position: absolute; left: 22px; top: 50%; width: 6px; height: 1px; background: var(--border); transform: translateY(-50%); } .nav-child:hover { background: var(--surface-2); color: var(--fg); } .nav-child.active { color: var(--accent); } .nav-child .child-icon { width: 13px; height: 13px; display: grid; place-items: center; color: var(--fg-faint); flex-shrink: 0; } .nav-child.active .child-icon { color: var(--accent); } .nav-child .child-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); font-variant-numeric: tabular-nums; } /* ─── PRO / paid-tier gating treatment ─── */ .pro-lock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.10em; padding: 2px 6px 2px 5px; background: linear-gradient(135deg, var(--accent-soft), var(--warning-soft)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-1); font-weight: 600; text-transform: uppercase; } .pro-lock svg { width: 9px; height: 9px; } .pro-lock.team { background: linear-gradient(135deg, rgba(96,165,250,0.16), rgba(167,139,250,0.16)); color: var(--info); border-color: rgba(96,165,250,0.35); } .pro-row { position: relative; } .pro-row::after { content: 'PRO'; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.10em; padding: 2px 5px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-1); font-weight: 700; } .pro-blur { position: relative; filter: blur(3px); pointer-events: none; opacity: 0.6; } .pro-overlay { position: relative; } .pro-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,9,10,0.92) 92%); pointer-events: none; } .pro-unlock { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--accent); color: #1a0e08; border-radius: var(--r-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase; z-index: 2; cursor: pointer; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 24px rgba(0,0,0,0.5); transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } .pro-unlock:hover { transform: translateX(-50%) translateY(-1px); box-shadow: var(--glow-orange), 0 16px 28px rgba(0,0,0,0.55); } .pro-unlock svg { width: 12px; height: 12px; } /* ─── Mention preview strip — for table rows + cards ─── */ .mstrip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); white-space: nowrap; } .mstrip .ms-pips { display: inline-flex; gap: 2px; } .mstrip .ms-pips .smark { width: 13px; height: 13px; font-size: 8px; } .mstrip .ms-count { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; } .mstrip .ms-fresh { color: var(--up); display: inline-flex; align-items: center; gap: 3px; } .mstrip .ms-fresh::before { content: ''; width: 5px; height: 5px; background: var(--up); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; } /* Mention preview chip — hover-revealed snippet */ .mpreview { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-size: 10.5px; color: var(--fg-muted); font-family: var(--font-mono); cursor: pointer; transition: all var(--d-fast) var(--ease); max-width: 240px; } .mpreview:hover { background: var(--surface-3); border-color: var(--accent-soft); color: var(--fg-bright); } .mpreview .mp-src { width: 12px; height: 12px; border-radius: 2px; display: grid; place-items: center; font-size: 8px; font-weight: 700; flex-shrink: 0; } .mpreview .mp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Row action overlay (table rows) ─── */ .tdata tbody tr { position: relative; } .row-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) translateX(8px); display: flex; gap: 4px; opacity: 0; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); pointer-events: none; z-index: 2; } .tdata tbody tr:hover .row-actions { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; } .row-act { width: 26px; height: 26px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg-muted); transition: all var(--d-fast) var(--ease); } .row-act:hover { background: var(--surface-4); color: var(--accent); border-color: var(--accent-soft); transform: translateY(-1px); } .row-act svg { width: 13px; height: 13px; } .row-act.watched { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); } /* ─── Watch heart toggle ─── */ .watch-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg); font-size: 12px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; position: relative; transition: all var(--d-fast) var(--ease); } .watch-btn:hover { border-color: var(--accent); } .watch-btn .heart { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill var(--d-base) var(--ease), stroke var(--d-base) var(--ease), transform var(--d-base) var(--ease); } .watch-btn.on { background: var(--accent); border-color: var(--accent); color: #1a0e08; font-weight: 600; } .watch-btn.on .heart { fill: #1a0e08; stroke: #1a0e08; animation: heart-pop 0.45s var(--ease); } @keyframes heart-pop { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } } /* ─── Alert config inline (the "alert me when…" row) ─── */ .alert-config { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); font-size: 12px; } .alert-config .ac-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); } .alert-config .ac-token { padding: 4px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg); font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all var(--d-fast) var(--ease); } .alert-config .ac-token:hover { border-color: var(--accent-soft); color: var(--accent); } .alert-config .ac-token .arr { color: var(--fg-faint); font-size: 8px; margin-left: 4px; } /* ─── Feed item — the unified repo activity stream ─── */ .feed-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); align-items: flex-start; position: relative; transition: background var(--d-fast) var(--ease); } .feed-item:hover { background: var(--surface-2); } .feed-item:last-child { border-bottom: 0; } .feed-item.is-fresh::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--up); box-shadow: 0 0 4px var(--up); } .feed-item.is-pop { animation: feed-pop 0.6s var(--ease); } @keyframes feed-pop { 0% { background: var(--accent-wash); } 100% { background: transparent; } } .feed-icon { width: 24px; height: 24px; border-radius: var(--r-1); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; flex-shrink: 0; } .feed-icon.f-mention { background: var(--src-hackernews); color: #1a0a02; } .feed-icon.f-release { background: var(--up); color: #0a1a06; } .feed-icon.f-fund { background: var(--accent); color: #1a0e08; } .feed-icon.f-breakout { background: var(--info); color: #02132a; } .feed-icon.f-arxiv { background: var(--src-arxiv); color: #fce0e0; } .feed-icon.f-npm { background: var(--src-npm); color: #fce0e0; } .feed-icon.f-star { background: var(--warning); color: #2a1c00; } .feed-icon.f-discuss { background: var(--violet); color: #16093a; } .feed-body { min-width: 0; } .feed-kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 3px; } .feed-kind .k-tag { color: var(--accent); } .feed-title { font-size: 13px; color: var(--fg); line-height: 1.45; font-weight: 500; } .feed-title b { color: var(--fg-bright); } .feed-title a:hover { color: var(--accent); text-decoration: underline; } .feed-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; letter-spacing: 0.02em; } .feed-meta .score { color: var(--up); } .feed-meta .author { color: var(--fg-subtle); } .feed-meta b { color: var(--fg-muted); font-weight: 500; } .feed-time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); white-space: nowrap; } /* Feed filter chips */ .feed-filter { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--graphite); } .feed-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); cursor: pointer; transition: all var(--d-fast) var(--ease); } .feed-chip:hover { color: var(--fg); border-color: var(--border-hover); } .feed-chip.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .feed-chip .ct { font-size: 9px; padding: 1px 5px; background: rgba(0,0,0,0.3); border-radius: var(--r-pill); color: var(--fg-faint); } .feed-chip.on .ct { background: var(--surface-3); color: var(--fg-bright); } /* ─── Upgrade card (sidebar / footer) ─── */ .upgrade-card { margin: 12px; padding: 12px; background: linear-gradient(135deg, var(--graphite), var(--accent-wash)); border: 1px solid var(--accent-soft); border-radius: var(--r-2); font-size: 11px; color: var(--fg-muted); display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .upgrade-card::before { content: ''; position: absolute; top: -20%; right: -20%; width: 100px; height: 100px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); pointer-events: none; } .upgrade-card .uc-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .upgrade-card .uc-pitch { color: var(--fg); font-size: 12px; line-height: 1.4; } .upgrade-card .uc-pitch b { color: var(--fg-bright); font-weight: 600; } .upgrade-card .uc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; background: var(--accent); color: #1a0e08; border-radius: var(--r-1); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; text-align: center; } .upgrade-card .uc-price { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-align: center; } /* ─── Compare slot picker ─── */ .compare-tray { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); flex-wrap: wrap; } .compare-slot { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-1); font-family: var(--font-mono); font-size: 11px; color: var(--fg); } .compare-slot.empty { color: var(--fg-faint); background: transparent; border-style: dashed; } .compare-slot .cs-x { margin-left: 4px; color: var(--fg-faint); cursor: pointer; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 2px; } .compare-slot .cs-x:hover { background: var(--down-soft); color: var(--down); } /* ─── Count-up + fade-in animations ─── */ @keyframes count-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } [data-counter] { animation: count-up 0.6s var(--ease); } @keyframes slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .slide-in { animation: slide-in 0.4s var(--ease) both; } .slide-in-d1 { animation-delay: 80ms; } .slide-in-d2 { animation-delay: 160ms; } .slide-in-d3 { animation-delay: 240ms; } .slide-in-d4 { animation-delay: 320ms; } .slide-in-d5 { animation-delay: 400ms; } @keyframes pip-flash { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow); } 50% { transform: scale(1.4); box-shadow: 0 0 0 8px transparent; } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } .spip.just-lit { animation: pip-flash 1.4s var(--ease); } /* Hover lift utility */ .hover-lift { transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .hover-lift:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: 0 6px 14px rgba(0,0,0,0.3); } /* ─── Value-prop strip (paid features inline) ─── */ .value-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-1); overflow: hidden; margin: 14px 0; } @media (max-width: 900px) { .value-strip { grid-template-columns: repeat(2, 1fr); } } .value-cell { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; } .value-cell .v-icon { width: 20px; height: 20px; display: grid; place-items: center; color: var(--accent); margin-bottom: 2px; } .value-cell .v-title { font-size: 12.5px; color: var(--fg-bright); font-weight: 500; } .value-cell .v-desc { font-size: 11px; color: var(--fg-subtle); line-height: 1.4; } .value-cell .v-tag { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.10em; padding: 1px 5px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-1); font-weight: 700; } .value-cell .v-tag.free { background: var(--up-soft); color: var(--up); } /* Stagger entry — base rule + keyframes live in the v3 block below. nth-child delay ladder removed (P1): inline style={{ animationDelay }} in TrendingTable.tsx is the SINGLE source of stagger timing. */ /* Numeric flash — when a value updates */ @keyframes num-flash { 0% { background: var(--accent-soft); color: var(--accent); } 100% { background: transparent; color: inherit; } } .num-flash { animation: num-flash 1.4s var(--ease); border-radius: var(--r-1); padding: 1px 3px; } /* ═══════════════════════════════════════════════════════════════ V1.6 — Share menu · Shimmer · Fade-up (Repo hover preview removed 2026-05-24) ═══════════════════════════════════════════════════════════════ */ /* Repo-name elements feel clickable */ .repo-name:hover, .fr-co .name:hover, .rev-row .name:hover, .tracked-card .tc-repo:hover, .act-card .repo:hover { color: var(--accent); transition: color var(--d-fast) var(--ease); } /* ─── Share menu ─── */ .share-wrap { position: relative; display: inline-block; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg); cursor: pointer; transition: all var(--d-fast) var(--ease); } .share-btn:hover { border-color: var(--border-hover); color: var(--accent); } .share-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px; min-width: 220px; z-index: 4000; box-shadow: 0 12px 32px rgba(0,0,0,0.55); display: none; flex-direction: column; gap: 2px; font-family: var(--font-mono); } .share-menu.open { display: flex; animation: count-up 160ms var(--ease); } .share-menu .item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; font-size: 11px; color: var(--fg); border-radius: 3px; cursor: pointer; transition: background var(--d-fast) var(--ease); } .share-menu .item:hover { background: var(--surface-3); } .share-menu .item .sm-ico { width: 16px; height: 16px; display: grid; place-items: center; font-size: 10px; color: var(--fg-muted); font-weight: 700; } .share-menu .item.x .sm-ico { color: #fff; background: #000; border-radius: 2px; } .share-menu .item.li .sm-ico { color: #fff; background: #0a66c2; border-radius: 2px; } .share-menu .item.rd .sm-ico { color: #fff; background: #ff4500; border-radius: 50%; } .share-menu .item.bs .sm-ico { color: #1185fe; } .share-menu .item.cp .sm-ico { color: var(--fg-faint); } .share-menu .item.em .sm-ico { color: var(--accent); } .share-menu .divider { height: 1px; background: var(--border-subtle); margin: 4px 0; } .share-menu .pro-tag { margin-left: auto; font-size: 8.5px; letter-spacing: 0.10em; color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 2px; font-weight: 700; } /* ─── Toast — confirmations ─── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 9px 16px; background: var(--surface-2); border: 1px solid var(--up); border-left-width: 3px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright); z-index: 9000; opacity: 0; pointer-events: none; transition: all 220ms var(--ease); box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast .check { color: var(--up); margin-right: 6px; } /* ─── Shimmer / skeleton loaders ─── */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skel { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.6s infinite linear; border-radius: 3px; display: block; color: transparent; } .skel.line { height: 11px; } .skel.line.long { width: 100%; } .skel.line.mid { width: 60%; } .skel.line.short { width: 30%; } .skel.card { height: 140px; width: 100%; } .skel.spark { height: 30px; width: 100%; } /* ─── Ring-pulse for hot items ─── */ @keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 14px transparent; } } .ring-pulse { animation: ring-pulse 2.4s ease-out infinite; border-radius: 3px; } /* ─── Glow pulse — single beat ─── */ @keyframes glow-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .glow-pulse { animation: glow-pulse 1.2s var(--ease); } /* ─── Fade-up on scroll-in (intersection observer) ─── */ .fade-up { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .fade-up.in { opacity: 1; transform: translateY(0); } /* ─── Tap pulse — primary CTAs on click ─── */ @keyframes tap-pulse { 0% { transform: scale(1); } 50% { transform: scale(0.96); } 100% { transform: scale(1); } } .tap-pulse { animation: tap-pulse 220ms var(--ease); } /* ─── Tools hub — rich tool cards ─── */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; } .tool-card { background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; position: relative; cursor: pointer; transition: background var(--d-fast) var(--ease); min-height: 220px; } .tool-card:hover { background: var(--surface-2); } .tool-card .tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .tool-card .tc-num { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.10em; } .tool-card .tc-route { font-family: var(--font-mono); font-size: 8.5px; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 2px; letter-spacing: 0.12em; font-weight: 700; } .tool-card .tc-title { font-size: 17px; color: var(--fg-bright); font-weight: 500; letter-spacing: -0.01em; } .tool-card .tc-desc { font-size: 12px; color: var(--fg-subtle); line-height: 1.5; } .tool-card .tc-preview { height: 80px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 3px; padding: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .tool-card .tc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); } .tool-card .tc-foot .lava { color: var(--accent); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .tool-card .tc-foot .pro-tag { font-size: 8.5px; letter-spacing: 0.10em; color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 2px; font-weight: 700; } /* ─── Funding live tape — Bloomberg-style ─── */ .fund-tape { display: flex; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--surface); overflow: hidden; position: relative; height: 36px; align-items: center; } .fund-tape::before, .fund-tape::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .fund-tape::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); } .fund-tape::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); } .fund-tape .lane { display: flex; gap: 28px; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; animation: ticker-scroll 90s linear infinite; padding-left: 16px; } .fund-tape .ft-item { display: inline-flex; gap: 8px; align-items: center; } .fund-tape .ft-item .co { color: var(--fg-bright); font-weight: 500; } .fund-tape .ft-item .amt { color: var(--accent); font-weight: 600; } .fund-tape .ft-item .rnd { color: var(--fg-muted); } .fund-tape .ft-item .ago { color: var(--fg-faint); font-size: 10px; } /* ─── Funding mover row — top rounds ─── */ .fund-row { display: grid; grid-template-columns: 24px 32px 1fr 90px 100px 90px 60px; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; transition: background var(--d-fast) var(--ease); cursor: pointer; } .fund-row:hover { background: var(--surface-2); } .fund-row .fr-rank { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); text-align: right; } .fund-row .fr-logo { width: 32px; height: 32px; background: var(--surface-3); border: 1px solid var(--border-subtle); border-radius: 4px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); } .fund-row .fr-co { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fund-row .fr-co .name { color: var(--fg-bright); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fund-row .fr-co .desc { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); } .fund-row .fr-round { font-family: var(--font-mono); font-size: 10px; color: var(--cyan); background: rgba(77,212,255,0.08); border: 1px solid rgba(77,212,255,0.22); padding: 3px 7px; border-radius: 2px; text-align: center; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .fund-row .fr-amt { font-family: var(--font-mono); font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; } .fund-row .fr-source { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); text-align: right; } .fund-row .fr-age { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-align: right; } /* ─── Sector heatmap ─── */ .sector-heat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; } .sector-tile { background: var(--surface); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; position: relative; min-height: 80px; cursor: pointer; transition: transform var(--d-fast) var(--ease); } .sector-tile:hover { z-index: 2; outline: 1px solid var(--accent); } .sector-tile .sec-name { font-size: 11px; color: var(--fg); font-family: var(--font-mono); } .sector-tile .sec-amt { font-family: var(--font-mono); font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 500; } .sector-tile .sec-ct { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-faint); letter-spacing: 0.10em; text-transform: uppercase; } .sector-tile.tier-hot { background: linear-gradient(135deg, var(--surface), var(--accent-wash)); } .sector-tile.tier-warm { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 4%, transparent)); } /* ─── Token chip — agent commerce ─── */ .token-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; color: var(--fg); } .token-chip .sym { color: var(--cyan); font-weight: 600; } .token-chip .pr { color: var(--fg-bright); } .token-chip .d { font-variant-numeric: tabular-nums; } .token-chip .d.up { color: var(--up); } .token-chip .d.down { color: var(--down); } /* ─── Protocol pulse cells ─── */ .proto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; } @media (max-width: 900px) { .proto-grid { grid-template-columns: 1fr; } } .proto-cell { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .proto-cell .pc-head { display: flex; justify-content: space-between; align-items: center; } .proto-cell .pc-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); } .proto-cell .pc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: live-pulse 1.8s infinite; } .proto-cell .pc-num { font-family: var(--font-mono); font-size: 28px; color: var(--fg-bright); font-variant-numeric: tabular-nums; font-weight: 500; } .proto-cell .pc-sub { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); } .proto-cell .pc-bar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; } .proto-cell .pc-bar .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); } /* ─── Revenue (TrustMRR) leaderboard row ─── */ .rev-row { display: grid; grid-template-columns: 32px 36px 1fr 100px 90px 80px 60px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; transition: background var(--d-fast) var(--ease); cursor: pointer; } .rev-row:hover { background: var(--surface-2); } .rev-row .rr-rank { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); text-align: right; } .rev-row .rr-logo { width: 36px; height: 36px; background: var(--surface-3); border: 1px solid var(--border-subtle); border-radius: 4px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--up); } .rev-row .rr-co { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rev-row .rr-co .name { color: var(--fg-bright); font-weight: 500; } .rev-row .rr-co .desc { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rev-row .rr-mrr { font-family: var(--font-mono); font-size: 14px; color: var(--up); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; } .rev-row .rr-30d { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; } .rev-row .rr-growth { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; } .rev-row .rr-growth.up { color: var(--up); } .rev-row .rr-growth.down { color: var(--down); } .rev-row .rr-pp { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-muted); text-align: right; letter-spacing: 0.06em; text-transform: uppercase; } .rev-row .rr-verified { color: var(--up); font-size: 13px; } /* ─── Founders CTA strip ─── */ .founders-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: linear-gradient(135deg, var(--surface-2), rgba(74,222,128,0.04)); border: 1px solid var(--up-soft); border-left: 3px solid var(--up); border-radius: 3px; margin: 14px 0; } .founders-cta .fc-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; color: var(--up); text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } .founders-cta .fc-tag::before { content: '✓'; font-size: 11px; } .founders-cta .fc-msg { font-size: 12px; color: var(--fg-subtle); } .founders-cta .fc-cta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--fg-bright); letter-spacing: 0.04em; } .founders-cta .fc-cta:hover { color: var(--up); } /* ─── Mention pip pulse — random-time activity hint ─── */ @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* ─── Velocity period switcher (24h / 7d / 30d) ─── */ .period-switcher { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--surface); font-family: var(--font-mono); font-size: 11px; } .period-switcher .period-label { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; } .period-tab { padding: 5px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; transition: all var(--d-fast) var(--ease); white-space: nowrap; } .period-tab:hover { color: var(--fg-bright); border-color: var(--border-strong, var(--accent-soft)); background: var(--surface-2); } .period-tab.active { background: var(--accent); border-color: var(--accent); color: #0a0e15; } .period-switcher .period-hint { margin-left: auto; color: var(--fg-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } /* ─── Consolidated Mentions cell — chips + count co-located, replaces dot pips column ─── */ .mention-pack-cell { white-space: nowrap; text-align: left; } .mention-pack { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; } .mention-pack .ms-pips { display: inline-flex; gap: 2px; flex-shrink: 0; } .mention-pack .ms-pips .smark { width: 18px; height: 18px; border-radius: 3px; display: inline-grid; place-items: center; overflow: hidden; } .mention-pack .ms-pips .smark svg { display: block; width: 100%; height: 100%; } .mention-pack .ms-pips .ms-more { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; color: var(--fg-muted); padding: 0 4px; min-height: 18px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); } .mention-pack .ms-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg-bright); font-size: 12.5px; } .mention-pack .ms-top { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); letter-spacing: 0.02em; display: none; } @media (min-width: 1280px) { .mention-pack .ms-top { display: inline; } } /* ─── Visible inline Actions column at row end ─── */ .col-actions { width: 132px; text-align: right; } .row-actions-cell { text-align: right; vertical-align: middle; } .row-actions-cell .row-acts { display: inline-flex; gap: 4px; align-items: center; opacity: 0.72; transition: opacity var(--d-fast) var(--ease); } .tdata tbody tr:hover .row-actions-cell .row-acts { opacity: 1; } .row-actions-cell .row-act { width: 30px; height: 30px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg-muted); cursor: pointer; transition: all var(--d-fast) var(--ease); position: relative; } .row-actions-cell .row-act:hover { background: var(--surface-4); color: var(--accent); border-color: var(--accent-soft); transform: translateY(-1px); } .row-actions-cell .row-act svg { width: 14px; height: 14px; } .row-actions-cell .row-act.watched { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); } .row-actions-cell .row-act.watched svg path { fill: var(--accent); } /* Tap pulse — fires for ~280ms on click */ .row-actions-cell .row-act.tap::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-1); border: 1.5px solid var(--accent); animation: tap-pulse 0.28s var(--ease-out) forwards; pointer-events: none; } @keyframes tap-pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } } /* Stagger fade-in on first paint — single source of truth. nth-child delay ladder removed (P1): inline style={{ animationDelay }} in TrendingTable.tsx drives per-row delays. */ .stagger-row { animation: stagger-in 0.34s var(--ease-out) backwards; } @keyframes stagger-in { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } /* Make the new 30d spark column behave like 7d, slightly slimmer */ .tdata th.col-spark, .tdata td[data-label="Trend"] { width: 108px; } @media (max-width: 1200px) { .col-actions { width: 110px; } .row-actions-cell .row-act { width: 28px; height: 28px; } .row-actions-cell .row-act svg { width: 13px; height: 13px; } } @media (max-width: 980px) { .tdata th.col-spark { display: none; } /* hide sparkline on narrow screens */ .tdata td[data-label="Trend"] { display: none; } } /* ───────────────────────────────────────────────────────────── PREMIUM REFINEMENT — v7 polish pass 4 hero pillars · sidebar accents · card gradients · search polish ───────────────────────────────────────────────────────────── */ :root { --hero-trending: #ff6b35; --hero-trending-2: #ff8e5b; --hero-trending-soft: rgba(255, 107, 53, 0.14); --hero-trending-wash: rgba(255, 107, 53, 0.06); --hero-ideas: #ffb547; --hero-ideas-2: #ffd06b; --hero-ideas-soft: rgba(255, 181, 71, 0.14); --hero-ideas-wash: rgba(255, 181, 71, 0.06); --hero-build: #4ade80; --hero-build-2: #6df3a3; --hero-build-soft: rgba(74, 222, 128, 0.14); --hero-build-wash: rgba(74, 222, 128, 0.06); --hero-signals: #4dd4ff; --hero-signals-2: #7ae5ff; --hero-signals-soft: rgba(77, 212, 255, 0.14); --hero-signals-wash: rgba(77, 212, 255, 0.06); --card-grad-top: rgba(255, 255, 255, 0.024); --card-grad-bottom: rgba(255, 255, 255, 0); } /* ─── TOPBAR HERO TABS ─── */ .topbar-tabs { display: flex; align-items: center; flex: 0 1 auto; gap: 4px; margin-left: 18px; padding: 4px; background: var(--graphite); border: 1px solid var(--border-subtle); border-radius: 10px; min-width: 0; } .topbar-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 0; border-radius: 7px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg-muted); cursor: pointer; text-decoration: none; transition: all 180ms var(--ease); position: relative; white-space: nowrap; } .topbar-tab .tab-glyph { width: 16px; height: 16px; display: grid; place-items: center; color: var(--fg-faint); transition: color 180ms var(--ease), transform 220ms var(--ease); } .topbar-tab:hover { color: var(--fg-bright); background: var(--surface); transform: translateY(-0.5px); } .topbar-tab:hover .tab-glyph { transform: scale(1.08); } .topbar-tab.is-trending:hover .tab-glyph { color: var(--hero-trending); } .topbar-tab.is-trending.active { background: linear-gradient(135deg, var(--hero-trending), var(--hero-trending-2)); color: #1a0e08; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent); } .topbar-tab.is-trending.active .tab-glyph { color: #1a0e08; } .topbar-tab.is-ideas:hover .tab-glyph { color: var(--hero-ideas); } .topbar-tab.is-ideas.active { background: linear-gradient(135deg, var(--hero-ideas), var(--hero-ideas-2)); color: #1a1408; box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.35), 0 6px 18px -6px rgba(255, 181, 71, 0.55); } .topbar-tab.is-ideas.active .tab-glyph { color: #1a1408; } .topbar-tab.is-build:hover .tab-glyph { color: var(--hero-build); } .topbar-tab.is-build.active { background: linear-gradient(135deg, var(--hero-build), var(--hero-build-2)); color: #08180e; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.32), 0 6px 18px -6px rgba(74, 222, 128, 0.55); } .topbar-tab.is-build.active .tab-glyph { color: #08180e; } .topbar-tab.is-signals:hover .tab-glyph { color: var(--hero-signals); } .topbar-tab.is-signals.active { background: linear-gradient(135deg, var(--hero-signals), var(--hero-signals-2)); color: #061520; box-shadow: 0 0 0 1px rgba(77, 212, 255, 0.34), 0 6px 18px -6px rgba(77, 212, 255, 0.55); } .topbar-tab.is-signals.active .tab-glyph { color: #061520; } .topbar .crumbs { flex-shrink: 0; } .topbar .searchbar { margin-left: auto; } /* ─── SIDEBAR REFINEMENT ─── */ .sidebar { background: linear-gradient(180deg, var(--shell) 0%, #0a0c0e 100%); } .nav-group { margin-bottom: 14px; } .nav-group + .nav-group { position: relative; padding-top: 14px; } .nav-group + .nav-group::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 18%, var(--border-subtle) 82%, transparent 100%); } .nav-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); padding: 4px 16px 8px; } .nav-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 8px; border-radius: 6px; color: var(--fg-muted); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 160ms var(--ease), color 160ms var(--ease); border-left: 2px solid transparent; } .nav-link::before { content: ''; position: absolute; left: -8px; top: 50%; width: 2px; height: 0; background: var(--accent); border-radius: 0 2px 2px 0; transform: translateY(-50%); transition: height 180ms var(--ease); } .nav-link:hover { background: var(--surface); color: var(--fg-bright); } .nav-link:hover::before { height: 14px; } .nav-link.active { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); color: var(--fg-bright); font-weight: 600; } .nav-link.active::before { height: 18px; } .nav-link .nav-icon { width: 18px; height: 18px; display: grid; place-items: center; color: var(--fg-faint); transition: color 160ms var(--ease); flex-shrink: 0; } .nav-link:hover .nav-icon, .nav-link.active .nav-icon { color: var(--accent); } .nav-link .nav-pill, .nav-link .nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 1.5px 6px; background: var(--surface-2); color: var(--fg-faint); border-radius: var(--r-pill); transition: background 160ms var(--ease), color 160ms var(--ease); } .nav-link:hover .nav-pill, .nav-link:hover .nav-count { background: var(--surface-3); color: var(--fg-muted); } .nav-link.active .nav-pill, .nav-link.active .nav-count { background: var(--accent-soft); color: var(--accent); } .nav-children { overflow: hidden; max-height: 0; transition: max-height 240ms var(--ease); } .nav-parent.open .nav-children { max-height: 320px; } .nav-children > div { display: flex; flex-direction: column; padding: 4px 0 8px; } .nav-child { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 38px; margin: 0 8px; font-size: 12.5px; color: var(--fg-subtle); text-decoration: none; border-radius: 5px; transition: color 140ms var(--ease), background 140ms var(--ease); position: relative; } .nav-child::before { content: ''; position: absolute; left: 24px; top: 50%; width: 4px; height: 4px; background: var(--border-strong); border-radius: 50%; transform: translateY(-50%); transition: background 140ms var(--ease), transform 140ms var(--ease); } .nav-child:hover { color: var(--fg); background: var(--surface); } .nav-child:hover::before { background: var(--fg-muted); } .nav-child.active { color: var(--fg-bright); font-weight: 600; } .nav-child.active::before { background: var(--accent); transform: translateY(-50%) scale(1.4); } .nav-child .child-icon { display: none; } .nav-child .child-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); } .nav-caret { width: 10px; height: 10px; margin-left: 4px; color: var(--fg-faint); transition: transform 200ms var(--ease); } .nav-parent.open .nav-caret { transform: rotate(180deg); } /* ─── PREMIUM CARDS ─── */ .card { background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom)), var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 240ms var(--ease); position: relative; } .card:hover { border-color: var(--border-hover); } .card.elevated:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); } .card.featured { border-color: var(--accent-soft); background: linear-gradient(180deg, var(--accent-wash), transparent 30%), linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom)), var(--surface); } .card.featured::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: 0.35; } /* ─── PREMIUM SEARCH ─── */ .searchbar { background: linear-gradient(180deg, var(--surface), var(--graphite)); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; transition: all 180ms var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .searchbar:hover { border-color: var(--border-hover); } .searchbar:focus-within { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 3px var(--accent-wash), inset 0 1px 0 rgba(255,255,255,0.04); } .searchbar input { font-size: 12.5px; letter-spacing: -0.005em; } .searchbar kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--surface-3); color: var(--fg-muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; font-weight: 600; } /* ─── PREMIUM BUTTONS ─── */ .btn { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 6px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; transition: all 160ms var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .btn:hover { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border-color: var(--border-hover); transform: translateY(-0.5px); } .btn:active { transform: translateY(0); } .btn.primary { background: linear-gradient(180deg, var(--accent-hover), var(--accent)); border-color: var(--accent); color: #1a0e08; font-weight: 600; box-shadow: 0 0 0 1px var(--accent), 0 6px 16px -6px var(--accent-glow); } .btn.primary:hover { background: linear-gradient(180deg, #ffa074, var(--accent-hover)); box-shadow: 0 0 0 1px var(--accent-hover), 0 8px 22px -6px var(--accent-glow); } .btn.hero-ideas { background: linear-gradient(180deg, var(--hero-ideas-2), var(--hero-ideas)); border-color: var(--hero-ideas); color: #1a1408; box-shadow: 0 6px 16px -6px rgba(255, 181, 71, 0.5); } .btn.hero-build { background: linear-gradient(180deg, var(--hero-build-2), var(--hero-build)); border-color: var(--hero-build); color: #08180e; box-shadow: 0 6px 16px -6px rgba(74, 222, 128, 0.5); } .btn.hero-signals { background: linear-gradient(180deg, var(--hero-signals-2), var(--hero-signals)); border-color: var(--hero-signals); color: #061520; box-shadow: 0 6px 16px -6px rgba(77, 212, 255, 0.5); } /* ─── TYPOGRAPHY ─── */ .page-title { letter-spacing: -0.025em; line-height: 1.1; } .page-sub { color: var(--fg-muted); font-size: 14px; line-height: 1.55; max-width: 60ch; } .page-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); } /* ─── MICRO-ANIMATIONS ─── */ @keyframes fade-in-up { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } .main > * { animation: fade-in-up 360ms var(--ease) backwards; } .main > *:nth-child(1) { animation-delay: 0ms; } .main > *:nth-child(2) { animation-delay: 60ms; } .main > *:nth-child(3) { animation-delay: 120ms; } .main > *:nth-child(4) { animation-delay: 180ms; } .main > *:nth-child(5) { animation-delay: 220ms; } .main > *:nth-child(n+6) { animation-delay: 260ms; } /* ─── RESPONSIVE — topbar tabs ─── */ @media (max-width: 1280px) { .topbar-tab { padding: 7px 11px; font-size: 12.5px; } .topbar-tab .tab-glyph { width: 14px; height: 14px; } } @media (max-width: 1100px) { .topbar-tabs { gap: 2px; padding: 3px; } .topbar-tab span:not(.tab-glyph) { display: none; } .topbar-tab { padding: 8px 10px; } } @media (max-width: 768px) { .topbar-tabs { display: none; } } /* Trending hub v6 page sections */ .route-shell { padding: 16px 22px 32px; max-width: 1400px; margin: 0 auto; } .switcher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 16px 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-2); overflow: hidden; } .switcher a, .switcher button { min-height: 46px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 0; color: var(--fg-muted); font-size: 12px; font-weight: 600; text-decoration: none; } .switcher a:hover, .switcher button:hover { background: var(--surface-2); color: var(--fg); } .switcher a.on, .switcher button.on { background: linear-gradient(180deg, var(--accent-wash), transparent), var(--surface-2); color: var(--fg-bright); } .switcher a > span:first-child, .switcher button > span:first-child { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--accent); background: var(--surface-3); font-family: var(--font-mono); font-size: 10px; } .sw-count { margin-left: auto; color: var(--accent); font-family: var(--font-mono); font-size: 11px; } .trending-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 8px; } .right-rail { display: flex; flex-direction: column; gap: 14px; } .rail-skeleton { min-height: 220px; } .featured-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; } .feat { background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom)), var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); min-height: 236px; padding: 14px; display: flex; flex-direction: column; gap: 13px; position: relative; overflow: hidden; } .feat::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); opacity: 0.6; } .feat.hot { border-color: var(--accent-soft); background: linear-gradient(180deg, var(--accent-wash), transparent 54%), var(--surface); } .feat.trend { border-color: var(--up-soft); background: linear-gradient(180deg, var(--up-soft), transparent 54%), var(--surface); } .feat.cool { border-color: var(--info-soft); background: linear-gradient(180deg, var(--info-soft), transparent 54%), var(--surface); } .feat-head, .feat-meta, .filter-strip, .filter-actions { display: flex; align-items: center; } .feat-head { gap: 10px; min-width: 0; } .feat-rank { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--accent); background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .feat-tags { margin-top: 4px; flex-wrap: wrap; } .feat-body { display: flex; flex-direction: column; gap: 10px; flex: 1; } .feat-desc { margin: 0; color: var(--fg-muted); font-size: 12.5px; line-height: 1.55; min-height: 58px; } .feat-meta { gap: 8px; flex-wrap: wrap; } /* Featured-card foot: 4-column grid so stats split the card width evenly no matter how many cards are in the row. Old flex + min-width:74px approach overflowed and clipped "LATENCY" / wrapped "PRICE · 1M TOK" onto two lines awkwardly when the card was < ~332px wide. */ .feat-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); } .feat-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .feat-stat-label { color: var(--fg-muted); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feat-stat-value { color: var(--fg-bright); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feat-foot .spark { width: 100%; } .filter-strip { justify-content: space-between; gap: 12px; margin: 12px 0; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); } .filter-langs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; } .lang-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface-2); color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; text-decoration: none; } .lang-pill:hover, .lang-pill.on { color: var(--fg-bright); border-color: var(--accent-soft); background: var(--accent-wash); } .lang-pill.more { pointer-events: none; } .lang-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-muted); } .tone-accent { background: var(--accent); } .tone-0 { background: var(--accent); } .tone-1 { background: var(--up); } .tone-2 { background: var(--info); } .tone-3 { background: var(--violet); } .tone-4 { background: var(--warn); } .tone-5 { background: var(--fg-muted); } .tone-more { background: var(--surface-4); } .filter-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .filter-actions .btn.on { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-wash); } .trending-table-card { overflow: hidden; } .trending-table-card .tdata { table-layout: fixed; font-size: 11.5px; position: relative; } .trending-table-card .tdata th, .trending-table-card .tdata td { padding-left: 8px; padding-right: 8px; } /* Sticky thead w/ subtle hairline as scroll shadow */ .trending-table-card .tdata thead { position: sticky; top: 0; z-index: 1; background: var(--surface); } .trending-table-card .tdata thead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-subtle); pointer-events: none; } .trending-table-card .col-rank { width: 52px; } .trending-table-card .tdata th:nth-child(2) { width: auto; } /* repository */ .trending-table-card .tdata th:nth-child(3) { width: 96px; } /* stars */ .trending-table-card .tdata th:nth-child(4), .trending-table-card .tdata th:nth-child(5), .trending-table-card .tdata th:nth-child(6) { width: 88px; } /* 24h / 7d / 30d */ .trending-table-card .tdata th:nth-child(7) { width: 112px; } /* trend (sparkline) */ .trending-table-card .tdata th:nth-child(8) { width: 130px; } /* mentions (logos + count) */ .trending-table-card .col-actions { width: 86px; } /* Stars column — orange star icon + value */ .col-stars-cell { white-space: nowrap; } .star-icon { display: inline-block; margin-right: 6px; vertical-align: -2px; filter: drop-shadow(0 0 3px var(--accent-glow)); } .star-value { vertical-align: middle; color: var(--fg-bright); font-weight: 600; } /* Period cells (24h / 7d / 30d) — DELTA stars prominent on top, % subtle below */ .trending-table-card .tdata tbody td.period-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; } .period-cell .period-delta { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .period-cell .period-pct { display: block; font-size: 10.5px; color: var(--fg-subtle); font-weight: 500; margin-top: 1px; } .period-up .period-delta { color: var(--up, #4ade80); } .period-dn .period-delta { color: var(--dn, #f87171); } .period-flat .period-delta { color: var(--fg-faint); } .period-active { background: linear-gradient(180deg, var(--accent-soft), transparent); box-shadow: inset 0 -2px 0 var(--accent); } .period-active .period-delta { /* WCAG 1.4.1 — base period-delta is 700; bump active to 800 so the active state has a non-color cue alongside the accent fill/bar. */ font-weight: 800; } /* Sparkline column */ .col-spark-cell { padding: 4px 8px !important; } /* Mentions cell — entire pack is now a click target to the repo profile */ .mention-link { display: inline-block; text-decoration: none; color: inherit; border-radius: var(--r-1); padding: 2px 4px; margin: -2px -4px; transition: background var(--d-fast) var(--ease); } .mention-link:hover { background: var(--surface-2); } .mention-link:hover .ms-count { color: var(--accent); } .mention-link .smark { transition: transform var(--d-fast) var(--ease); } .mention-link:hover .smark { transform: scale(1.08); } /* Empty state for mention cell when total24h is 0 and no active sources */ .mention-pack-empty { display: inline-flex; align-items: center; justify-content: flex-end; width: 100%; } .mp-empty { font-family: var(--font-mono); color: var(--fg-faint); font-size: 13px; letter-spacing: 0.02em; } .trending-table-card .repo-desc { max-width: 100%; } .trending-table-card .repo-name, .trending-table-card .repo-desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trending-table-card .repo-owner { display: inline; } /* Trend column sparkline — fills the column horizontally so there's no dead band between the chart and the next column, but keeps the compact 24px height so the row doesn't stretch. The smoothed monotone curve shape lives in JS (smoothSeries 7-tap kernel + Area type="monotone" + slice(-30) data window) and is independent of canvas size. */ .trending-table-card .spark { display: block; width: 100%; height: 24px; } .trending-table-card .mention-pack { gap: 5px; } .trending-table-card .mention-pack .ms-pips { gap: 2px; } .trending-table-card .mention-pack .ms-pips { gap: 4px; } .trending-table-card .mention-pack .ms-pips .smark { width: 18px; height: 18px; overflow: hidden; font-size: 0; border-radius: 3px; } .trending-table-card .mention-pack .ms-count { font-size: 11px; } .trending-table-card .mention-pack .ms-top { display: none; } .trending-table-card .fresh { font-size: 8.5px; letter-spacing: 0.08em; } .trending-table-card .row-actions-cell .row-acts { gap: 3px; } .trending-table-card .row-actions-cell .row-act { width: 23px; height: 23px; } .trending-table-card .row-actions-cell .row-act svg { width: 12px; height: 12px; } /* P3 — disable hover transform inside the trending table so dense rows don't jitter on mouse-over. Other tables keep the lift. */ .trending-table-card .row-actions-cell .row-act:hover { transform: none; } /* (removed B10 1400px-collapse rule: it hid 30d at common laptop widths) */ /* ─── B8 (P0): Mobile touch targets at < 768px ─── */ @media (max-width: 768px) { /* P0: PRODUCT.md mandates 44x44 minimum tap targets */ .trending-table-card .row-actions-cell .row-act, .row-actions-cell .row-act, .row-act { width: 36px; height: 36px; padding: 6px; /* gives ~44x44 hit-box via box-sizing border-box */ } .trending-table-card .row-actions-cell .row-act svg, .row-act svg { width: 16px; height: 16px; } /* Period tabs become full-width pill buttons */ .period-switcher { flex-wrap: wrap; gap: 6px; } .period-switcher .period-tab { flex: 1 1 calc(33.333% - 6px); min-height: 44px; padding: 12px; font-size: 13px; text-align: center; } .period-switcher .period-label, .period-switcher .period-hint { flex-basis: 100%; } } /* ─── B9 (P2): Mobile table card-stack reflow at < 640px ─── */ @media (max-width: 640px) { /* P2: Convert table to card-stack using data-label attrs already on each */ .trending-table-card .tdata, .trending-table-card .tdata tbody, .trending-table-card .tdata tr, .trending-table-card .tdata td { display: block; width: 100%; } .trending-table-card .tdata thead { position: absolute; left: -9999px; } .trending-table-card .tdata tr { border-bottom: 1px solid var(--border-subtle); padding: 12px 0; } .trending-table-card .tdata td { padding: 6px 12px; text-align: left; border: none; } .trending-table-card .tdata td::before { content: attr(data-label) ": "; color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 8px; display: inline-block; min-width: 60px; } /* Drop the "::before" label on Rank and Repo cells - those are the visual identity */ .trending-table-card .tdata td[data-label="Rank"]::before, .trending-table-card .tdata td[data-label="Repo"]::before { display: none; } /* Hide 7d + 30d columns on phones - leave Rank/Repo/Stars/24h/Trend/Mentions/Actions */ .trending-table-card .tdata td[data-label="7d"], .trending-table-card .tdata td[data-label="30d"] { display: none; } } .avatar-token { background: linear-gradient(135deg, var(--surface-4), var(--surface-2)); color: var(--accent); font-size: 11px; } .repo-avatar.mini { width: 22px; height: 22px; font-size: 9px; } .table-foot { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--border-subtle); } .table-foot .muted { font-size: 11px; } .table-message { padding: 30px; text-align: center; color: var(--fg-muted); } .side-list { display: flex; flex-direction: column; gap: 10px; } .side-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--border-subtle); color: inherit; text-decoration: none; } .side-row:last-child { border-bottom: 0; padding-bottom: 0; } .side-copy, .cross-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .side-name { color: var(--fg); font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-delta { font-family: var(--font-mono); font-size: 11px; } .mover-row .spark { width: 96px; height: 22px; } .cross-row { grid-template-columns: 28px minmax(0, 1fr); } .cross-row .spark { grid-column: 1 / -1; width: 100%; height: 24px; } .side-rank { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--accent); font-family: var(--font-mono); font-size: 10px; } .category-signal-panel { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .category-hero { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .category-hero h2 { margin: 5px 0 6px; color: var(--fg-bright); font-size: 24px; } .category-hero p { margin: 0; color: var(--fg-muted); max-width: 680px; line-height: 1.5; } .category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .category-cell { min-height: 160px; padding: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 8px; } .category-cell:hover { border-color: var(--accent-soft); background: var(--surface-2); } .category-mark { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .category-name { color: var(--fg-bright); font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .category-desc { color: var(--fg-muted); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .category-metric { margin-top: auto; color: var(--up); font-family: var(--font-mono); font-size: 10.5px; } @media (max-width: 1200px) { .featured-row { grid-template-columns: 1fr; } .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .trending-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .route-shell { padding: 12px; } .filter-strip, .category-hero, .table-foot { align-items: stretch; flex-direction: column; } .filter-actions { justify-content: flex-start; } .category-grid { grid-template-columns: 1fr; } } /* Repo detail v6 */ .repo-detail-shell { padding: 16px 22px 32px; max-width: 1400px; margin: 0 auto; } .repo-detail-shell svg { max-width: 100%; } .repo-detail-shell .btn svg, .repo-detail-shell .share-btn svg, .repo-detail-shell .watch-btn svg, .repo-detail-shell .v-icon svg, .repo-detail-shell .why-icon { width: 14px; height: 14px; flex: 0 0 auto; } .repo-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr); gap: 14px; margin-bottom: 14px; } .hero-card { background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom)), var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 14px; overflow: hidden; } .hero-row { display: flex; align-items: flex-start; gap: 16px; } .hero-meta { flex: 1; min-width: 0; } .hero-handle { color: var(--fg-muted); font-family: var(--font-mono); font-size: 12px; } .hero-handle .name, .hero-handle .owner { color: var(--fg-bright); } .hero-name { margin: 4px 0 6px; color: var(--fg-bright); font-size: 34px; line-height: 1.05; } .hero-desc { margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 1.45; max-width: 78ch; } .hero-tags, .hero-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .hero-tags { margin-top: 10px; } .hero-actions { margin-top: 14px; } .alert-config { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-2); } .ac-label { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .ac-token { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 5px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg); font-family: var(--font-mono); font-size: 11px; } .ac-token .arr { color: var(--fg-faint); } .why-panel { display: flex; flex-direction: column; gap: 10px; } .why-label { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .why-score { color: var(--accent); font-family: var(--font-mono); font-size: 58px; font-weight: 800; line-height: 1; } .why-score .max { color: var(--fg-faint); font-size: 18px; margin-left: 4px; } .why-reasons { display: flex; flex-direction: column; gap: 9px; } .why-reason { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--fg-muted); font-size: 12px; line-height: 1.45; } .why-icon { color: var(--accent); margin-top: 2px; } .stat-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 14px 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-2); overflow: hidden; } .stat-cell { min-height: 118px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; } .stat-label { color: var(--fg-faint); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; } .stat-value { color: var(--fg-bright); font-family: var(--font-mono); font-size: 20px; font-weight: 700; } .stat-sub { min-height: 14px; font-family: var(--font-mono); font-size: 10px; } .stat-cell .spark { margin-top: auto; width: 100%; height: 26px; } .hero-chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); overflow: hidden; margin-bottom: 14px; } .hero-chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } .hero-chart-title { margin: 0; color: var(--fg); font-size: 13px; font-weight: 500; } .legend-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lg { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-muted); font-family: var(--font-mono); font-size: 10px; } .lg-sw { width: 14px; height: 3px; border-radius: 2px; } .hero-chart-body { height: 330px; padding: 10px 14px 0; } .hero-chart-body svg { width: 100%; height: 100%; } .hero-chart-grid line { stroke: var(--border-subtle); } .hero-chart-axis text { fill: var(--fg-faint); font-family: var(--font-mono); font-size: 9px; } .hero-chart-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); } .event-card { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px; background: var(--surface-2); } .event-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-1); font-family: var(--font-mono); font-size: 10px; } .event-title { color: var(--fg-bright); font-family: var(--font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-meta { color: var(--fg-muted); font-size: 10px; } .source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .src-card { min-height: 158px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); display: flex; flex-direction: column; gap: 8px; } .src-card-head { display: flex; align-items: center; gap: 8px; } .src-card-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--accent); font-family: var(--font-mono); font-size: 10px; background: var(--surface-2); } .src-card-title { color: var(--fg-bright); font-weight: 700; font-size: 12px; } .src-card-value { color: var(--fg-bright); font-family: var(--font-mono); font-size: 26px; font-weight: 800; } .src-card-spark { width: 100%; height: 28px; } .src-card-foot, .src-card-delta { color: var(--fg-muted); font-size: 11px; } .timeline-strip { display: grid; grid-template-columns: repeat(30, minmax(6px, 1fr)); align-items: end; gap: 3px; min-height: 76px; padding: 12px; border-top: 1px solid var(--border-subtle); } .tl-day { display: flex; align-items: flex-end; min-height: 60px; } .tl-stack { width: 100%; display: flex; flex-direction: column-reverse; gap: 1px; } .tl-bar { min-height: 2px; border-radius: 1px; } .tl-bar.gh, .tl-bar.github { background: var(--src-github); } .tl-bar.hn { background: var(--src-hackernews); } .tl-bar.reddit { background: var(--src-reddit); } .tl-bar.x { background: var(--src-x); } .tl-bar.bsky { background: var(--src-bluesky); } .tl-axis { display: flex; justify-content: space-between; padding: 0 12px 12px; color: var(--fg-muted); font-family: var(--font-mono); font-size: 10px; } .body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; margin-top: 14px; align-items: start; } .repo-detail-shell .value-strip { margin: 14px 0; } .repo-detail-shell .value-cell { min-height: 138px; } .contrib-row { display: flex; align-items: center; padding: 12px; gap: 8px; flex-wrap: wrap; } .contrib-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-1); border: 1px solid var(--border); color: var(--fg-bright); font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .contrib-row .more { color: var(--fg-muted); font-size: 12px; margin-left: 4px; } .related-list { display: flex; flex-direction: column; } .related-row, .funding-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--border-subtle); color: inherit; text-decoration: none; } .related-name, .funding-event { color: var(--fg-bright); font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .related-desc, .funding-date { color: var(--fg-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .funding-amt { color: var(--accent); font-family: var(--font-mono); font-size: 11px; } @media (max-width: 1180px) { .repo-hero, .body-grid { grid-template-columns: 1fr; } .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .repo-detail-shell { padding: 12px; } .hero-row, .hero-chart-head { flex-direction: column; align-items: stretch; } .stat-strip, .source-grid, .hero-chart-foot { grid-template-columns: 1fr; } } /* === LAUNCHER & TILE PREVIEW COMPOSITIONS (2026-05-20 — lifted from * index.html mockup). Used by /preview and any future "screen catalog" * surface. Scoped to .lnch-*, .scrn-*, .mp*, .pv-*, .step-* selectors so * the rules can't leak into the main app shell. */ /* Launcher hero */ .lnch-hero { padding: 60px 22px 30px; text-align: center; max-width: 1100px; margin: 0 auto; position: relative; } .lnch-hero::before { content: ""; position: absolute; inset: 30px 10% auto 10%; height: 200px; background: radial-gradient( ellipse at center, var(--accent-wash) 0%, transparent 70% ); pointer-events: none; z-index: 0; } .lnch-hero > * { position: relative; z-index: 1; } .lnch-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding: 4px 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-pill); margin-bottom: 18px; } .lnch-eyebrow .live-dot { width: 6px; height: 6px; background: var(--up); border-radius: 50%; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); animation: pulse 2s ease-in-out infinite; } .lnch-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 16px; color: var(--fg-bright); } .lnch-title .accent { color: var(--accent); font-weight: 700; letter-spacing: -0.02em; } .lnch-sub { font-size: 16px; color: var(--fg-muted); line-height: 1.6; max-width: 64ch; margin: 0 auto 24px; } .lnch-stats { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint); letter-spacing: 0.04em; } .lnch-stats b { color: var(--accent); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; } .lnch-stats .seg { display: flex; align-items: center; gap: 8px; } /* Tile grid */ .lnch-grid { max-width: 1280px; margin: 0 auto; padding: 30px 22px 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 1100px) { .lnch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .lnch-grid { grid-template-columns: 1fr; padding: 20px 14px 40px; } } /* Screen card */ .scrn-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease); text-decoration: none; color: inherit; cursor: pointer; position: relative; } .scrn-card:hover { transform: translateY(-2px); border-color: var(--accent); } .scrn-card:hover .scrn-preview { background: var(--bg); } .scrn-preview { height: 200px; background: var(--graphite); border-bottom: 1px solid var(--border-subtle); position: relative; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: background var(--d-base) var(--ease); } .scrn-body { padding: 16px 18px; } .scrn-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px; } .scrn-meta .badge { background: var(--accent-soft); color: var(--accent); padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; } .scrn-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: -0.015em; color: var(--fg-bright); margin: 0 0 6px; } .scrn-desc { font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .scrn-foot { padding: 10px 18px; border-top: 1px solid var(--border-subtle); background: var(--graphite); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); } .scrn-foot .open { color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 6px; } .scrn-foot .open svg { transition: transform var(--d-fast) var(--ease); } .scrn-card:hover .scrn-foot .open svg { transform: translateX(2px); } /* Mini-preview primitives — abstract terminal-vibe miniatures */ .mp { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 2px; padding: 6px 8px; display: flex; gap: 6px; align-items: center; } .mp.head { padding: 4px 6px; gap: 8px; } .mp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); } .mp-dot.up { background: var(--up); box-shadow: 0 0 4px var(--up); } .mp-line { height: 5px; background: var(--border-strong); border-radius: 1px; flex: 1; } .mp-line.short { flex: 0 0 30%; } .mp-line.mid { flex: 0 0 60%; } .mp-line.accent { background: var(--accent); } .mp-line.up { background: var(--up); } .mp-bar { height: 8px; background: var(--accent-soft); border-radius: 1px; flex: 1; } .mp-grid { display: grid; gap: 4px; grid-template-columns: repeat(4, 1fr); flex: 1; } .mp-mini { background: var(--surface-2); border-radius: 2px; height: 100%; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; } .mp-num { font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint); } .mp-sm { font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright); font-weight: 600; line-height: 1; } .mp-spark-mini { height: 14px; background: linear-gradient( 90deg, transparent 0%, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent, black 5%, black 95%, transparent ); position: relative; } .mp-spark-mini::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--accent); transform: translateY(-50%); clip-path: polygon( 0 60%, 14% 50%, 28% 45%, 42% 38%, 56% 30%, 70% 24%, 84% 16%, 100% 8% ); } /* Per-screen preview compositions */ .pv-trending .mp-grid { grid-template-columns: repeat(5, 1fr); } .pv-trending .mp-bar { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); } .pv-breakout .mp-bubble { position: absolute; border-radius: 50%; box-shadow: 0 0 8px currentColor; } .pv-breakout .bub1 { top: 30px; right: 26px; width: 36px; height: 36px; background: var(--accent); } .pv-breakout .bub2 { top: 70px; right: 70px; width: 26px; height: 26px; background: var(--warning); } .pv-breakout .bub3 { top: 110px; right: 50px; width: 18px; height: 18px; background: #878787; } .pv-breakout .bub4 { top: 60px; right: 130px; width: 22px; height: 22px; background: var(--info); } .pv-breakout .bub5 { top: 130px; right: 100px; width: 14px; height: 14px; background: var(--info); } .pv-signals .mp-area-chart { flex: 1; background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70% ); position: relative; border-radius: 2px; overflow: hidden; } .pv-signals .mp-area-chart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--src-github) 60%, transparent 62%), linear-gradient(180deg, transparent 0%, transparent 75%, var(--src-x) 75%, transparent 77%); } .pv-detail .mp-hero-chart { flex: 1; background: radial-gradient(ellipse at right 30%, var(--accent-soft) 0%, transparent 60%), linear-gradient(180deg, transparent 60%, rgba(34, 197, 94, 0.08)); position: relative; border-radius: 2px; } .pv-detail .mp-hero-chart::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: var(--accent); clip-path: polygon( 0 70%, 10% 65%, 20% 60%, 30% 52%, 40% 45%, 50% 38%, 60% 30%, 70% 22%, 80% 16%, 90% 10%, 100% 6% ); } .pv-detail .mp-hero-chart .ep1 { position: absolute; right: 10%; top: 7%; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 6px var(--accent); } .pv-account .mp-id { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--accent)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); } .pv-drop .step-line { flex: 1; height: 1px; background: var(--border-subtle); align-self: center; } .pv-drop .step-line.on { background: var(--accent); } .pv-drop .step-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-mono); font-size: 8px; color: var(--fg-faint); font-weight: 700; border: 1px solid var(--border); } .pv-drop .step-dot.on { background: var(--accent); color: #1a0e08; border-color: var(--accent); } .pv-drop .step-dot.done { background: var(--up); color: #0a1a06; border-color: var(--up); } /* ===== UI v6: Ideas board + workspace ===== */ .ideas-shell, .idea-detail-shell { padding: 16px 22px 32px; max-width: 1500px; margin: 0 auto; } .ideas-tape { overflow: hidden; border-bottom: 1px solid var(--border-subtle); background: var(--surface); } .ideas-tape .lane { display: flex; gap: 8px; width: max-content; padding: 8px 0; } .ideas-tape .it-item { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 4px 9px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; } .ideas-tape .ttl { color: var(--fg-bright); font-weight: 800; } .ideas-tape .rp, .ideas-tape .st { color: var(--accent); } .ideas-head, .product-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .ideas-head .page-sub { max-width: 820px; } .ideas-kpi, .idea-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-2); overflow: hidden; margin-bottom: 14px; } .ideas-kpi .kpi-cell, .idea-snapshot .snap-cell { min-height: 88px; padding: 12px; background: var(--surface); } .ideas-kpi .kpi-label, .idea-snapshot .snap-label { color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0; } .ideas-kpi .kpi-value, .idea-snapshot .snap-value { margin-top: 8px; color: var(--fg-bright); font-family: var(--font-mono); font-size: 24px; font-weight: 800; } .ideas-kpi .kpi-cell:first-child .kpi-value, .idea-snapshot .snap-cell:first-child .snap-value { color: var(--accent); } .ideas-kpi .kpi-hint, .idea-snapshot .snap-hint { margin-top: 7px; color: var(--fg-muted); font-size: 11.5px; } .ideas-toolbar { position: sticky; top: var(--topbar-h, 52px); z-index: 12; display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; padding: 10px; margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-2); } .ideas-filter { grid-column: 1 / -1; } .ideas-search-input, .row-composer-input, .trend-draft input, .trend-draft textarea, .idea-submit-modal input, .idea-submit-modal textarea, .composer-row input { width: 100%; min-width: 0; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); padding: 9px 10px; font: inherit; } .ideas-search-go, .cta-primary, .cta-secondary, .row-action, .small-btn, .row-composer-post { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 7px 10px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; } .cta-primary, .ideas-search-go, .row-composer-post { color: var(--bg); background: var(--accent); border-color: var(--accent); } .cta-secondary:hover, .row-action:hover, .small-btn:hover, .ideas-search-go:hover { border-color: var(--border-hover); background: var(--surface-3); color: var(--fg-bright); } .ideas-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .ideas-list { display: grid; gap: 10px; } .ideas-match-note { padding: 10px 12px; color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-2); font-size: 12px; } .ideas-rail, .idea-side { position: sticky; top: calc(var(--topbar-h, 52px) + 14px); } .idea-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-2); overflow: hidden; } .idea-row:hover, .idea-row.selected { background: var(--surface-2); border-color: var(--border-hover); } .idea-row-main { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 13px; } .idea-row-content { min-width: 0; } .idea-title-line, .idea-summary-eyebrow, .idea-meta-badges, .idea-signals, .row-actions-inline, .summary-actions, .side-actions, .brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .idea-title { color: var(--fg-bright); font-size: 15px; font-weight: 800; text-decoration: none; } .idea-pitch, .idea-preview-copy, .idea-summary-pitch { color: var(--fg-muted); font-size: 13px; line-height: 1.55; } .idea-pill, .idea-cat, .idea-age, .signal-pill, .chip-sm, .tab-count, .pill, .tag-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; text-decoration: none; } .idea-pill.pill-live, .signal-hot, .chip-sm.on, .tab.on, .option-chip.active, .pill.hot { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .pill-ok, .pill.good { color: var(--up); background: var(--up-soft); border-color: color-mix(in srgb, var(--up) 45%, var(--border)); } .pill-warn, .pill.warn { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); } .pill-bad { color: var(--down); background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 45%, var(--border)); } .idea-row-cols { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(130px, .55fr) minmax(180px, .75fr) 150px; gap: 1px; background: var(--border-subtle); border-top: 1px solid var(--border-subtle); } .idea-col { min-width: 0; padding: 11px 12px; background: var(--surface); } .col-label, .section-label, .tiny-label { color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0; } .col-value { margin-top: 5px; color: var(--fg-bright); font-weight: 800; font-size: 12.5px; } .col-hint { margin-top: 5px; color: var(--fg-muted); font-size: 11px; } .idea-col-actions { display: grid; grid-template-columns: repeat(2, minmax(72px, 1fr)); gap: 6px; } .idea-col-actions .row-action { min-width: 72px; min-height: 36px; } .idea-mark-mini, .idea-mark-lg, .row-comment-avatar, .contribution-avatar, .you-avatar { display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 900; } .idea-mark-mini { width: 34px; height: 34px; } .idea-mark-lg { width: 84px; height: 84px; } .idea-mark-mini.tone-a, .idea-mark-lg.tone-a, .contribution-avatar.b1 { background: linear-gradient(135deg, var(--accent), var(--warning)); } .idea-mark-mini.tone-b, .idea-mark-lg.tone-b, .contribution-avatar.b2 { background: linear-gradient(135deg, var(--info), var(--cyan)); } .idea-mark-mini.tone-c, .idea-mark-lg.tone-c, .contribution-avatar.b3 { background: linear-gradient(135deg, var(--up), var(--lime)); } .idea-mark-mini.tone-d, .idea-mark-lg.tone-d, .contribution-avatar.b4 { background: linear-gradient(135deg, var(--violet), var(--pink)); } .idea-mark-mini.tone-e, .idea-mark-lg.tone-e, .contribution-avatar.b5 { background: linear-gradient(135deg, var(--warning), var(--up)); } .ireact-row, .reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .ireact, .react-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 7px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-size: 11px; cursor: pointer; } .ireact.on, .ireact:hover, .react-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .row-comments { border-top: 1px dashed var(--border-subtle); padding: 10px 13px 12px; } .row-comments-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); padding: 6px 10px; cursor: pointer; } .cmt-count { color: var(--accent); font-family: var(--font-mono); font-weight: 800; } .cmt-hint { color: var(--fg-faint); font-size: 11px; } .row-comments-body, .row-comment-list, .row-composer { display: grid; gap: 9px; } .row-comments-body { margin-top: 10px; } .row-comment { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .row-comment-avatar, .you-avatar { width: 28px; height: 28px; color: var(--fg-bright); background: var(--surface-3); } .row-comment-body { color: var(--fg); font-size: 12px; } .row-comment-meta { color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; } .row-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .row-composer-hint { color: var(--fg-faint); font-size: 11px; } .idea-preview, .idea-side-card, .tab-shell, .idea-summary, .section-block, .tab-pane, .modal, .at-menu { border: 1px solid var(--border-subtle); background: var(--surface); border-radius: var(--r-2); } .idea-preview, .idea-side-card, .section-block, .tab-pane { padding: 13px; } .idea-preview-head, .idea-summary-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; } .idea-summary-head { grid-template-columns: auto minmax(0, 1fr); } .idea-summary-head .summary-actions { grid-column: 1 / -1; } .idea-preview-eyebrow, .idea-summary-kicker { color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; } .idea-preview-title, .idea-summary-title { margin: 4px 0 0; color: var(--fg-bright); font-size: 18px; } .idea-summary-title { font-size: clamp(30px, 4vw, 56px); line-height: .96; color: var(--accent); font-weight: 700; letter-spacing: -0.02em; } .idea-preview-meta, .side-facts { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; } .idea-preview-meta li, .side-facts li { display: flex; justify-content: space-between; gap: 8px; color: var(--fg-muted); font-size: 12px; } .preview-repos, .related-cards, .side-list, .contribution-feed, .brief-blocks, .evidence-list { display: grid; gap: 8px; } .preview-repo, .side-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); font-size: 12px; } .preview-repo span:last-child, .side-row b { color: var(--fg-bright); font-family: var(--font-mono); } .preview-mvp { padding: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--r-1); font-size: 12.5px; line-height: 1.45; } .idea-preview-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 8px 10px; color: var(--bg); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-1); font-size: 12px; font-weight: 800; text-decoration: none; } .idea-preview-cta.secondary { color: var(--fg); background: var(--surface-2); border-color: var(--border-subtle); } .idea-detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .idea-detail-main { display: grid; gap: 14px; } .idea-summary { padding: 16px; } .idea-meta-badges { margin-top: 12px; } .idea-meta-badges span { padding: 5px 8px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; } .idea-tabs { padding: 8px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-2); } .idea-tabs .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 7px 10px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); font-size: 12px; font-weight: 800; text-decoration: none; } .section-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .section-title h2, .idea-side-card h3, .brief-block h3, .mini-card h3, .mvp-column h3 { margin: 0; color: var(--fg-bright); font-size: 13px; } .section-title span { color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; } .overview-body p, .mini-card p, .mvp-column li, .brief-block p, .repo-reason, .claimed-hint, .contribution-text-body { color: var(--fg-muted); font-size: 12.5px; line-height: 1.55; } .bullet-grid, .mvp-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .mini-card, .mvp-column, .evidence-row, .brief-block, .related-card, .contribution-card, .claimed-box { padding: 10px; color: inherit; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); text-decoration: none; } .evidence-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .evidence-row .signal, .rc-name { color: var(--fg-bright); font-weight: 800; } .evidence-row .note, .rc-meta { color: var(--fg-muted); font-size: 12px; } .mvp-column ul { margin: 8px 0 0; padding-left: 17px; } .contribution-composer { display: grid; gap: 10px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .contribution-options { display: flex; flex-wrap: wrap; gap: 6px; } .option-chip { min-height: 28px; padding: 6px 8px; color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-size: 11px; cursor: pointer; } .composer-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; } .contribution-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; } .contribution-avatar { width: 36px; height: 36px; } .contribution-body, .contribution-header { display: grid; gap: 7px; } .contribution-header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; } .contribution-header .who { color: var(--fg-bright); font-family: var(--font-sans); font-size: 12px; font-weight: 800; } .contribution-header .badge { color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--r-pill); padding: 3px 7px; } .contribution-actions { display: flex; flex-wrap: wrap; gap: 7px; } .related-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .related-card .repo-reason { grid-column: 2 / -1; } .rc-rank, .src-card-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--r-1); font-family: var(--font-mono); font-size: 10px; } .rc-cta { color: var(--accent); font-size: 11px; font-weight: 800; } .side-stack { display: grid; gap: 10px; } .side-actions { margin-top: 10px; } .claimed-box { display: grid; gap: 8px; } .claimed-label, .claimed-state { color: var(--fg-bright); font-weight: 800; } .claimed-link, .claimed-msg { color: var(--accent); font-size: 12px; overflow-wrap: anywhere; } .progress-line { display: grid; gap: 8px; margin-top: 12px; } .progress-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--fg-muted); font-size: 12px; } .progress-dot { display: grid; place-items: center; width: 22px; height: 22px; color: var(--fg-faint); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; } .progress-step.done .progress-dot, .progress-step.active .progress-dot { color: var(--bg); background: var(--accent); border-color: var(--accent); } .modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 78%, transparent); } .modal { width: min(760px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; } .idea-brief-modal { width: min(960px, 100%); } .modal-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 14px; background: var(--surface); border-bottom: 1px solid var(--border-subtle); } .modal-head h2 { margin: 0; color: var(--fg-bright); font-size: 17px; } .modal-close { width: 30px; height: 30px; display: grid; place-items: center; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .modal-body, .trend-draft, .trend-picker, .modal-body label { display: grid; gap: 10px; } .modal-body { padding: 14px; } .modal-body label span, .modal-hint { color: var(--fg-muted); font-size: 12px; } .trend-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trend-pick { min-height: 36px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .trend-pick.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .at-menu { position: absolute; z-index: 90; display: grid; gap: 4px; min-width: 230px; padding: 6px; } .at-item { display: flex; justify-content: space-between; gap: 8px; padding: 7px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .at-hint { color: var(--fg-faint); font-size: 11px; } @media (max-width: 1180px) { .ideas-cols, .idea-detail-cols, .idea-summary-head { grid-template-columns: 1fr; } .ideas-rail, .idea-side { position: static; } .idea-row-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .ideas-shell, .idea-detail-shell { padding: 12px; } .ideas-head, .ideas-toolbar { grid-template-columns: 1fr; } .ideas-kpi, .idea-snapshot, .bullet-grid, .mvp-columns, .idea-row-cols, .evidence-row, .related-card, .trend-picker { grid-template-columns: 1fr; } .row-comment { grid-template-columns: 28px minmax(0, 1fr); } .row-comment-meta { grid-column: 2; } .composer-row { grid-template-columns: 32px minmax(0, 1fr); } .composer-row .btn { grid-column: 1 / -1; } } /* ─── Repo ranker strip — sort/rank tabs across the trending table ─── */ .repo-ranker-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); font-family: var(--font-mono); font-size: 11px; flex-wrap: wrap; } .ranker-tab { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: all var(--d-fast) var(--ease); } .ranker-tab:hover { color: var(--fg-bright); border-color: var(--accent-soft); background: var(--surface-2); } .ranker-tab.active { background: var(--accent); border-color: var(--accent); color: #1a0e08; } .ranker-tab.active .ranker-hint { color: rgba(26, 14, 8, 0.7); } .ranker-hint { font-size: 10px; font-weight: 400; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: none; } /* ─── Category tabs — chip-style switcher for category surfaces ─── */ .category-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cat-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: all var(--d-fast) var(--ease); } .cat-tab:hover { color: var(--fg-bright); border-color: var(--accent-soft); background: var(--surface-3); } .cat-tab.active { background: var(--accent); border-color: var(--accent); color: #1a0e08; } .cat-tab.active .cat-tab-count { color: rgba(26, 14, 8, 0.75); } .cat-tab-count { font-size: 10px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } /* ─── Featured rank chip — small label on FeaturedRepos cards ─── */ .feat-rank-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-1); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-3); color: var(--fg-bright); border: 1px solid var(--border); } .feat-rank-chip.rank-top { background: var(--accent); color: #1a0e08; border-color: var(--accent); } .feat-rank-chip.rank-breakout { background: var(--teal, #14b8a6); color: #06231f; border-color: var(--teal, #14b8a6); } .feat-rank-chip.rank-trend { background: var(--violet, #8b5cf6); color: #1a0a2e; border-color: var(--violet, #8b5cf6); } /* ========================================================================= /tools hub — 6-card share-worthy grid Centrepiece of the /tools refactor 2026-05-21. Cards must read as alive, premium, screenshot-ready. Preview slots host real data, not skeletons. ========================================================================= */ .hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 28px; } @media (max-width: 1100px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .hub-grid { grid-template-columns: 1fr; } } .hub-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; min-height: 304px; position: relative; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .hub-card:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); } .hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hub-card-num { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: 0.10em; text-transform: uppercase; } .hub-card-route { font-family: var(--font-mono); font-size: 9px; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 2px; letter-spacing: 0.10em; font-weight: 700; } .hub-card-title-row { display: flex; align-items: flex-start; gap: 12px; } .hub-card-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-2); flex-shrink: 0; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .hub-card:hover .hub-card-icon { border-color: var(--accent); background: var(--accent-soft); } .hub-card-title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hub-card-title { font-size: 18px; color: var(--fg-bright); font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.15; } .hub-card-tagline { font-size: 12px; color: var(--fg-subtle); line-height: 1.45; margin: 0; } .hub-card-preview { flex: 1; min-height: 96px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 10px 12px; display: flex; align-items: stretch; overflow: hidden; } .hub-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; } .hub-card-cta { font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .hub-card-cta:hover { color: var(--fg-bright); } .hub-card-share-wrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hub-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: 0.04em; } .hub-card-meta b { color: var(--fg); font-weight: 600; } /* -------- preview: empty-state -------- */ .pv-empty { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); font-style: italic; margin: auto; } /* -------- preview: watchlist -------- */ .pv-watchlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; } .pv-watchlist-row { display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; padding: 3px 0; } .pv-watchlist-row .pv-pin { color: var(--accent); font-weight: 700; } .pv-watchlist-row .pv-repo { color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-watchlist-row .pv-stars { color: var(--fg-muted); } .pv-watchlist-row .pv-delta { font-weight: 600; } .pv-watchlist-row .pv-delta--up { color: var(--up); } .pv-watchlist-row .pv-delta--down { color: var(--down, #ef4444); } /* -------- preview: compare -------- */ .pv-compare-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 10px; align-items: stretch; width: 100%; } .pv-compare-divider { background: var(--border-subtle); } .pv-compare-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pv-compare-tag { font-family: var(--font-mono); font-size: 9px; color: var(--accent); letter-spacing: 0.10em; font-weight: 700; } .pv-compare-name { font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-compare-stat { display: inline-flex; align-items: baseline; gap: 5px; } .pv-compare-num { font-family: var(--font-mono); font-size: 17px; color: var(--fg-bright); font-weight: 600; } .pv-compare-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; } .pv-compare-delta { font-family: var(--font-mono); font-size: 10px; color: var(--up); } /* -------- preview: tier-list -------- */ .pv-tier-grid { display: flex; flex-direction: column; gap: 4px; width: 100%; } .pv-tier-row { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 6px; } .pv-tier-tag { display: inline-grid; place-items: center; width: 18px; height: 14px; font-family: var(--font-mono); font-size: 9px; color: var(--void-0, #0a0a0a); font-weight: 700; border-radius: 2px; } .pv-tier-chips { display: flex; gap: 4px; overflow: hidden; } .pv-tier-chip { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg); background: var(--surface); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; } .pv-tier-chip--placeholder { color: var(--fg-faint); } /* -------- preview: star-history -------- */ .pv-stars-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; } .pv-stars-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10.5px; } .pv-stars-name { color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .pv-stars-num { color: var(--accent); font-weight: 700; } .pv-stars-svg { flex: 1; width: 100%; height: 56px; display: block; } .pv-stars-svg polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } /* -------- preview: top-10 -------- */ .pv-top10 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; counter-reset: top10; } .pv-top10-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; padding: 2px 0; } .pv-top10-rank { color: var(--accent); font-weight: 700; } .pv-top10-name { color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-top10-delta { color: var(--up); font-weight: 600; } /* -------- preview: PRO upsell -------- */ .pv-pro { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; width: 100%; } .pv-pro-row { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg); } .pv-pro-mark { color: var(--accent); font-weight: 700; font-size: 12px; } /* ─── TrendingControlBar — single consolidated filter strip ─── */ .trending-controlbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 14px 0 12px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); font-family: var(--font-mono); } .trending-controlbar .tcb-group { display: inline-flex; align-items: center; gap: 3px; } .trending-controlbar .tcb-label { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 500; margin-right: 6px; } .trending-controlbar .tcb-divider { flex: 0 0 1px; align-self: stretch; margin: 2px 8px; background: var(--border-subtle); } .trending-controlbar .tcb-btn { display: inline-flex; align-items: center; padding: 6px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--r-1); color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .trending-controlbar .tcb-btn:hover { color: var(--fg-bright); background: var(--surface-2); } .trending-controlbar .tcb-btn.on { color: #0a0e15; background: var(--accent); border-color: var(--accent); font-weight: 700; } .trending-controlbar .tcb-btn-count { margin-left: 6px; font-size: 10px; color: var(--fg-faint); font-weight: 500; } .trending-controlbar .tcb-btn.on .tcb-btn-count { color: #0a0e15; opacity: 0.7; } @media (max-width: 640px) { .trending-controlbar { gap: 6px; padding: 8px; } .trending-controlbar .tcb-divider { flex-basis: 100%; height: 1px; align-self: auto; margin: 4px 0; } .trending-controlbar .tcb-btn { min-height: 36px; flex: 1 1 calc(25% - 3px); justify-content: center; } } /* ========================================================================= === Share panel primitives === Consumed by + + . See docs/DESIGN-SYSTEM.md §7. ========================================================================= */ /* ── Panel shell (used here because design-system §7.1 names .panel but the canonical shell.css didn't declare it yet — register here so other right-rail panels can adopt the same class). ──────────────────────── */ .panel { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 6px); overflow: hidden; display: flex; flex-direction: column; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); } .panel-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; } /* ── Share panel chrome ──────────────────────────────────────────────── */ .share-panel { width: 100%; max-width: 360px; } .share-panel.share-panel--ranking { max-width: 380px; } .share-panel-head .share-panel-title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-bright); letter-spacing: 0.10em; text-transform: uppercase; } .share-panel--ranking .share-panel-head .share-panel-title { font-family: var(--font-display, var(--font-sans)); font-size: 14px; letter-spacing: -0.01em; text-transform: none; color: var(--fg-bright); font-weight: 600; } .share-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .share-status--live { color: var(--up); background: var(--up-soft); border: 1px solid color-mix(in srgb, var(--up) 30%, transparent); } .share-status--warn { color: var(--warning); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); } .share-status--cold { color: var(--down); background: var(--down-soft); border: 1px solid color-mix(in srgb, var(--down) 28%, transparent); } .share-status .live-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } .share-panel-body { gap: 14px; } .share-section { display: flex; flex-direction: column; gap: 8px; } .share-section-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); } /* ── Size grid (2-column chips with dimensions caption) ──────────────── */ .size-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .size-chip { appearance: none; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 4px); padding: 9px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; color: var(--fg); font-family: var(--font-mono); text-align: left; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .size-chip:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg-bright); } .size-chip.on { background: var(--surface-3); border-color: var(--accent); color: var(--fg-bright); box-shadow: 0 0 0 1px var(--accent-soft); } .size-chip-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; } .size-chip-dim { font-size: 10px; color: var(--fg-subtle); letter-spacing: 0.02em; } .size-chip.on .size-chip-dim { color: var(--accent); } /* ── Theme grid (2-row chip with swatch + label) ─────────────────────── */ .theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .theme-chip { appearance: none; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 3px); padding: 6px 8px 6px 6px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--fg); font-family: var(--font-mono); font-size: 11px; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } .theme-chip:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg-bright); } .theme-chip.on { border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 1px var(--accent-soft); color: var(--fg-bright); } .theme-swatch { display: inline-block; width: 32px; height: 16px; border-radius: 2px; border: 1px solid var(--border-subtle); flex-shrink: 0; } .theme-chip-label { font-size: 11px; font-weight: 500; } /* ── Preview slot ────────────────────────────────────────────────────── */ .share-preview-wrap { gap: 6px; } .share-preview { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 4px); padding: 0; overflow: hidden; } /* ── Primary CTA (overrides .btn.lg width) ───────────────────────────── */ .share-primary-cta { width: 100%; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; padding: 11px 14px; } .share-primary-cta .share-cta-arrow { margin-left: 2px; font-weight: 700; } /* ── Secondary share actions ─────────────────────────────────────────── */ .share-secondary-row { flex-direction: row !important; gap: 6px; } .share-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-md, 4px); border: 1px solid var(--border-subtle); background: var(--surface-2); color: var(--fg); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .share-action:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg-bright); } .share-action--copy { /* same default treatment */ } .share-action--x { background: #000; border-color: #000; color: #fff; } .share-action--x:hover { background: #1a1a1a; border-color: #2a2a2a; color: #fff; } .share-action--reddit { background: color-mix(in srgb, var(--src-reddit) 18%, var(--surface-2)); border-color: color-mix(in srgb, var(--src-reddit) 35%, var(--border-subtle)); color: var(--fg-bright); } .share-action--reddit:hover { background: color-mix(in srgb, var(--src-reddit) 30%, var(--surface-3)); border-color: var(--src-reddit); color: var(--fg-bright); } /* ── URL fields ──────────────────────────────────────────────────────── */ .share-url-fields { gap: 10px; } .url-field { display: flex; flex-direction: column; gap: 4px; } .url-field-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); } .url-field-row { display: flex; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 3px); background: var(--surface); overflow: hidden; transition: border-color var(--d-fast) var(--ease); } .url-field-row:focus-within { border-color: var(--accent); } .url-field-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg); resize: none; line-height: 1.5; } .url-field-input::selection { background: var(--accent-soft); color: var(--fg-bright); } .url-field-copy { appearance: none; background: var(--surface-3); border: 0; border-left: 1px solid var(--border-subtle); padding: 0 10px; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .url-field-copy:hover { background: var(--surface-4); color: var(--fg-bright); } .url-field--multiline .url-field-input { padding: 7px 8px; } /* ── How-it-works footer ─────────────────────────────────────────────── */ .share-panel-footer { border-top: 1px solid var(--border-subtle); background: var(--surface); padding: 12px 14px 14px; } .share-footer-eyebrow { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .steps-item { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: flex-start; padding: 4px 0; } .steps-num { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; line-height: 1.5; } .steps-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .steps-label { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); line-height: 1.45; } .steps-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); line-height: 1.45; } /* ── ShareBar (compact inline action row) — was tr-share-btn ─────────── */ .tr-share-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 4px); color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .tr-share-btn:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg-bright); } /* Mega variant — used on hero-y share strips like /tools/star-history's "Grab the chart" section. Bigger hit-area + brand orange label so the actions read as a primary CTA, not chrome. */ .tr-share-btn--mega { color: var(--accent); border-color: var(--accent-border, rgba(245, 110, 15, 0.35)); font-weight: 500; letter-spacing: 0.05em; } .tr-share-btn--mega:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); } /* ── RankingPreviewCard (sits inside .share-preview) ─────────────────── */ .rank-preview { position: relative; padding: 14px 14px 12px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); color: var(--fg); overflow: hidden; display: flex; flex-direction: column; gap: 10px; } .rank-preview-glow { position: absolute; inset: -40% auto auto -20%; width: 60%; height: 60%; pointer-events: none; background: radial-gradient(circle at 30% 30%, var(--accent-soft) 0%, transparent 60%); z-index: 0; } .rank-preview > * { position: relative; z-index: 1; } .rank-preview-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); } .rank-preview-mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display, var(--font-sans)); font-size: 11.5px; font-weight: 600; color: var(--fg-bright); letter-spacing: -0.015em; } .rank-preview-mark-chip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--accent); color: #08090a; font-family: var(--font-display, var(--font-sans)); font-size: 11px; font-weight: 700; line-height: 1; } .rank-preview-mark-dot { color: #08090a; font-weight: 700; } .rank-preview-mark-name { color: var(--fg-bright); font-weight: 600; } .rank-preview-badge { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: var(--accent); color: #08090a; } .rank-preview-caption { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.10em; color: var(--fg-subtle); text-transform: uppercase; } .rank-preview-title { font-family: var(--font-display, var(--font-sans)); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg-bright); margin: 0; line-height: 1.15; } .rank-preview-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .rank-preview-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; padding: 4px 6px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border-subtle); border-radius: 2px; } .rank-preview-row:first-child { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .rank-preview-rank { font-weight: 700; color: var(--fg-bright); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .rank-preview-row:first-child .rank-preview-rank { color: var(--accent); } .rank-preview-name { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .rank-preview-row:first-child .rank-preview-name { color: var(--fg-bright); } .rank-preview-delta { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; } .rank-preview-metric { color: var(--fg-subtle); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .rank-preview-empty { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); padding: 14px 0; text-align: center; } .rank-preview-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--border-subtle); padding-top: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-subtle); letter-spacing: 0.10em; text-transform: uppercase; } .rank-preview-footer-url { font-weight: 600; } /* ── Tools-hub hero polish (.hero corner brackets + meta pairs) ──────── */ .hero.tools-hub-hero { position: relative; background: radial-gradient(620px 240px at 8% 0%, var(--accent-wash) 0%, transparent 70%), radial-gradient(420px 200px at 92% 100%, color-mix(in srgb, var(--info) 12%, transparent) 0%, transparent 70%), var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 6px); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; margin: 6px 0 18px; overflow: hidden; } .hero.tools-hub-hero::before, .hero.tools-hub-hero::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; } .hero.tools-hub-hero::before { top: 8px; left: 8px; border-top: 1px solid var(--accent-line); border-left: 1px solid var(--accent-line); } .hero.tools-hub-hero::after { bottom: 8px; right: 8px; border-bottom: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); } .tools-hub-hero .hero-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); letter-spacing: 0.10em; text-transform: uppercase; } .tools-hub-hero .hero-eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tools-hub-hero .hero-eyebrow-tag { color: var(--accent); font-weight: 700; letter-spacing: 0.14em; } .tools-hub-hero .hero-eyebrow-sep { color: var(--fg-faint); } .tools-hub-hero .hero-headline { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; } .tools-hub-hero h1 { font-family: var(--font-display, var(--font-sans)); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: var(--fg-bright); margin: 0; } .tools-hub-hero h1 .hero-accent { color: var(--accent); } .tools-hub-hero .hero-sub { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; max-width: 62ch; margin: 0; } .tools-hub-hero .hero-meta-row { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--border-subtle); } .tools-hub-hero .hero-meta-pair { display: flex; flex-direction: column; gap: 2px; min-width: 100px; } .tools-hub-hero .hero-meta-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); } .tools-hub-hero .hero-meta-value { font-family: var(--font-mono); font-size: 13px; color: var(--fg-bright); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .tools-hub-hero .hero-meta-value b { color: var(--accent); font-weight: 600; } @media (max-width: 800px) { .hero.tools-hub-hero { padding: 18px 18px 14px; } .tools-hub-hero .hero-headline { grid-template-columns: 1fr; } } /* ── Hub-card mini eyebrow + tool category polish ────────────────────── */ .hub-card-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--fg-subtle); letter-spacing: 0.14em; text-transform: uppercase; } .hub-card-eyebrow-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); flex-shrink: 0; } .hub-card-eyebrow-tag { color: var(--fg-muted); } /* ───────────────────────────────────────────────────────────── Star-history tool — 2026-05-24 rebuild (operator decree: search box, lifetime button, less fuss). Stripped pack-row, sh-kpi-card, sh-layout/sh-rail/sh-panel, sh-share-primary/formats/sec, sh-howto, sh-selected-row, sh-chip-repo, sh-picker-grid. Owns: .sh-hero (corner-bracket variant), .sh-search (form + datalist), .sh-controls + .seg-chip-row + .seg-chip + .sh-lifetime (marquee window button), .sh-chart-shell (chart card), .sh-onboard (empty state), .sh-share-strip (single inline ShareBar slot). ───────────────────────────────────────────────────────────── */ .sh-hero { position: relative; padding: 22px 24px 20px; border-radius: var(--r-lg); border: 1px solid var(--border-subtle); background: radial-gradient(600px 220px at 100% 0%, var(--accent-wash), transparent 60%), radial-gradient(420px 200px at 0% 100%, rgba(60,130,246,0.04), transparent 60%), linear-gradient(180deg, var(--surface) 0%, var(--shell) 100%); overflow: hidden; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: stretch; } .sh-hero::before, .sh-hero::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; } .sh-hero::before { top: 10px; left: 10px; border-top: 1px solid var(--accent-line); border-left: 1px solid var(--accent-line); } .sh-hero::after { bottom: 10px; right: 10px; border-bottom: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); } .sh-hero-left { min-width: 0; } .sh-hero-right { display: grid; grid-template-columns: repeat(3, minmax(124px, 1fr)); gap: 10px; align-items: stretch; } .sh-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; } .sh-controls .grow { margin-left: auto; } .seg-chip-row { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); gap: 2px; } .seg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: var(--t-data); text-transform: uppercase; color: var(--fg-subtle); background: transparent; border: 0; border-radius: var(--r-sm); text-decoration: none; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); cursor: pointer; white-space: nowrap; } .seg-chip:hover { color: var(--fg); background: var(--surface-2); } .seg-chip.on { background: var(--surface-3); color: var(--fg-bright); box-shadow: inset 0 0 0 1px var(--accent-line); } .seg-chip[disabled] { opacity: 0.5; cursor: not-allowed; } .seg-chip .swatch { width: 9px; height: 9px; border-radius: var(--r-xs); background: var(--theme-swatch, var(--accent)); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45); flex-shrink: 0; } .seg-chip.on .swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45), 0 0 6px var(--theme-swatch, var(--accent)); } /* pack-row, pack-chip, sh-kpi-grid, sh-kpi-card — removed 2026-05-24 together with the surfaces they belonged to (starter packs + bottom mini-card grid). The search box replaces both as the way to swap repos. */ .sh-chart-shell { position: relative; margin-top: 14px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; } .sh-chart-shell::before, .sh-chart-shell::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; } .sh-chart-shell::before { top: 6px; left: 6px; border-top: 1px solid var(--accent-line); border-left: 1px solid var(--accent-line); } .sh-chart-shell::after { bottom: 6px; right: 6px; border-bottom: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); } .sh-chart-head { padding: 12px 16px 10px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-chart-head .slash { color: var(--accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--t-control); text-transform: uppercase; font-weight: 600; } .sh-chart-head .title { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--fg-bright); letter-spacing: -0.01em; } .sh-chart-head .meta { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); letter-spacing: var(--t-data); } .sh-chart-head .meta b { color: var(--fg-muted); font-weight: 500; } .sh-chart-body { padding: 14px 14px 16px; } /* Theme palette overrides — applied to .sh-chart-shell via data-theme. */ .sh-chart-shell[data-theme="terminal"] { --series-1: var(--accent); --grid-line: var(--border-subtle); } .sh-chart-shell[data-theme="neon"] { --series-1: #4ade80; --grid-line: rgba(74,222,128,0.12); } .sh-chart-shell[data-theme="gradient"] { --series-1: var(--accent); --grid-line: var(--border-subtle); } .sh-chart-shell[data-theme="crt"] { --series-1: #00ff9c; --grid-line: rgba(0,255,156,0.10); } .sh-chart-shell[data-theme="poster"] { --series-1: var(--violet); --grid-line: rgba(167,139,250,0.14); } .sh-chart-shell svg .sh-line { stroke: var(--series-1); } .sh-chart-shell svg .sh-grid line { stroke: var(--grid-line, var(--border-subtle)); stroke-dasharray: 2 4; stroke-width: 1; } .sh-chart-shell svg .sh-axis text { font-family: var(--font-mono); font-size: 10px; fill: var(--fg-faint); letter-spacing: var(--t-data); } .sh-chart-shell svg .sh-baseline { stroke: var(--border); stroke-width: 1; } .sh-chart-shell svg .sh-marker-glow { fill: var(--series-1); opacity: 0.18; } .sh-chart-shell svg .sh-marker-dot { fill: var(--series-1); } /* sh-layout / sh-rail / sh-panel* / sh-share-primary / sh-share-formats / sh-share-sec / sh-howto / sh-selected-row / sh-chip-repo / sh-clear-all / sh-picker-grid / sh-picker-row — removed 2026-05-24. The right rail and the swap-repo picker are replaced by the inline search box; share is a single ShareBar strip under the chart. */ /* ─── search box ─── */ .sh-search { margin: 14px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); } .sh-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .sh-search-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; color: var(--fg-faint); border-right: 1px solid var(--border-subtle); background: var(--shell); } .sh-search:focus-within .sh-search-icon { color: var(--accent); } .sh-search-input { appearance: none; width: 100%; min-width: 0; padding: 11px 14px; background: transparent; border: 0; outline: 0; color: var(--fg-bright); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; } .sh-search-input::placeholder { color: var(--fg-faint); font-style: normal; } .sh-search-input::-webkit-search-cancel-button { appearance: none; width: 14px; height: 14px; background: linear-gradient(45deg, transparent 46%, var(--fg-faint) 46%, var(--fg-faint) 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--fg-faint) 46%, var(--fg-faint) 54%, transparent 54%); cursor: pointer; } .sh-search-submit { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; background: var(--accent); color: #0a0805; border: 0; border-left: 1px solid var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: var(--t-data); text-transform: uppercase; cursor: pointer; transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); white-space: nowrap; } .sh-search-submit:hover { background: var(--accent-bright, var(--accent-hover, var(--accent))); box-shadow: var(--accent-glow-wide); } /* ─── Series bar — sits ABOVE the chart, shows up to 4 colored repo chips (main + 3 compare) plus an inline "add repo" form. Replaces the prior CompareRow mini-tile grid; lines are now layered in the main chart. ─── */ .sh-series-bar { margin: 14px 0 0; padding: 10px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); } .sh-series-bar-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--fg-faint); flex-shrink: 0; } .sh-series-bar-label b { color: var(--accent); font-weight: 700; margin-left: 4px; } .sh-series-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11px; color: var(--fg); max-width: 240px; } .sh-series-chip.is-main { border-color: var(--accent-line); background: var(--accent-soft); } .sh-series-pip { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .sh-series-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sh-series-role { font-size: 8.5px; font-weight: 700; letter-spacing: var(--t-control); color: var(--accent); padding: 1px 4px; background: rgba(255, 107, 53, 0.18); border-radius: var(--r-xs); } .sh-series-status { font-size: 9px; text-transform: uppercase; letter-spacing: var(--t-control); color: var(--warning); background: var(--warning-soft); padding: 1px 4px; border-radius: var(--r-xs); } .sh-series-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 2px; color: var(--fg-faint); text-decoration: none; font-size: 14px; line-height: 1; border-radius: var(--r-xs); transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .sh-series-x:hover { color: var(--down); background: var(--down-soft); } .sh-series-add { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; background: var(--surface-3); border: 1px dashed var(--border); border-radius: var(--r-sm); transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .sh-series-add:focus-within { border-color: var(--accent); background: var(--surface-2); } .sh-series-add-icon { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); line-height: 1; } .sh-series-add-input { appearance: none; background: transparent; border: 0; outline: 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright); width: 180px; padding: 3px 0; } .sh-series-add-input::placeholder { color: var(--fg-faint); } .sh-series-add-submit { background: var(--accent); color: #08090a; border: 0; padding: 4px 9px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: var(--t-control); border-radius: var(--r-xs); cursor: pointer; transition: background var(--motion-fast) var(--ease); } .sh-series-add-submit:hover { background: var(--accent-hover, var(--accent)); } .sh-series-full { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: var(--t-control); color: var(--fg-faint); padding: 5px 10px; } /* ─── Mega share strip — bigger, more prominent than the prior compact inline ShareBar. This is the growth surface for the tool, deserves page weight. Sits directly under the chart so the operator's eye lands on it after reading the curve. ─── */ .sh-share-mega { margin-top: 16px; padding: 18px 20px; background: radial-gradient(120% 80% at 50% 0%, rgba(255, 107, 53, 0.10), transparent 70%), var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; } .sh-share-mega::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 107, 53, 0.04), transparent 30%); pointer-events: none; } .sh-share-mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sh-share-mega-eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: var(--t-meta); text-transform: uppercase; color: var(--accent); } .sh-share-mega-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--t-data); color: var(--fg-subtle); text-transform: uppercase; } /* Bump the inner ShareBar buttons — bigger, brand-orange label, subtle lava glow on hover. Operator decree 2026-05-24: "buttons a little bit BIGGER and orange text". */ .sh-share-mega button, .sh-share-mega a[role="button"], .sh-share-mega [data-share-action] { font-size: 14px !important; font-weight: 600 !important; padding: 11px 18px !important; min-height: 44px; color: var(--accent) !important; border-color: color-mix(in oklab, var(--accent) 35%, var(--border-subtle)) !important; transition: border-color 160ms cubic-bezier(.2, .8, .2, 1), background 160ms cubic-bezier(.2, .8, .2, 1), transform 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1); } .sh-share-mega button:hover, .sh-share-mega a[role="button"]:hover, .sh-share-mega [data-share-action]:hover { border-color: var(--accent) !important; background: color-mix(in oklab, var(--accent) 12%, transparent) !important; color: var(--accent-hover, #ff7d4d) !important; transform: translateY(-1px); box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--accent) 60%, transparent); } /* Icons inside the share buttons inherit the orange too */ .sh-share-mega button svg, .sh-share-mega a[role="button"] svg, .sh-share-mega [data-share-action] svg { color: var(--accent); } /* ─── single share strip under the chart (legacy — kept for any other caller that still passes `compact`. The /tools/star-history surface uses .sh-share-mega above.) ─── */ .sh-share-strip { margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .sh-share-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--fg-faint); flex-shrink: 0; } /* ─── Per-theme card chrome for the MAIN .sh-chart-shell. Mirrors the gallery tile chrome (.sh-tt-*) so that picking a theme in the chip row OR the gallery actually re-skins the headline chart — head bar + body background + corner brackets all adapt to the theme's paper/void. Without these rules the card stayed dark void while the ECharts canvas inside switched themes, producing a "the switcher doesn't work" misread. ─── */ /* AURORA — brand default, dark void canvas + lava accent corner brackets */ .sh-art-aurora .sh-chart-body { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 107, 53, 0.08), transparent 70%), var(--surface); } /* AISO — dark void canvas with PURPLE atmosphere + emerald accent. Purple sits in the radial glow + corner brackets; the canvas itself is dark so the green line stays the hero. (Operator decree 2026-05-24.) */ .sh-art-aiso .sh-chart-body { background: radial-gradient(110% 70% at 0% 0%, rgba(167, 139, 250, 0.18), transparent 55%), radial-gradient(100% 80% at 100% 100%, rgba(52, 211, 153, 0.10), transparent 60%), #0c0b18; } .sh-art-aiso .sh-chart-head .slash { color: #a78bfa; } .sh-art-aiso .sh-chart-head .title { color: #e9e4ff; } .sh-art-aiso .sh-chart-head .meta { color: #c4b5fd; } /* "stars total" + delta b-tag stays emerald as the single "up" hue */ .sh-art-aiso .sh-chart-head .meta b { color: #34d399; } .sh-art-aiso::before, .sh-art-aiso::after { border-color: #a78bfa !important; } /* PARCHMENT — cream paper + ink type + lava brackets */ .sh-art-parchment { background: #EAE6DC; border-color: #BFB7A4; } .sh-art-parchment .sh-chart-head { background: #DCD6C6; border-bottom-color: #BFB7A4; } .sh-art-parchment .sh-chart-head .slash { color: #FF5C1F; } .sh-art-parchment .sh-chart-head .title { color: #0A0A09; } .sh-art-parchment .sh-chart-head .meta { color: #5C5B53; } .sh-art-parchment .sh-chart-head .meta b { color: #0A0A09; } .sh-art-parchment .sh-chart-body { background: #EAE6DC; } .sh-art-parchment::before, .sh-art-parchment::after { border-color: #FF5C1F !important; } /* SKETCH — hand-drawn white paper + marker accents */ .sh-art-sketch { background: #FCFBF7; border-color: #D8D2C5; } .sh-art-sketch .sh-chart-head { background: #F2EFE6; border-bottom-color: #D8D2C5; } .sh-art-sketch .sh-chart-head .slash { color: #EA4A1F; font-family: "Comic Sans MS", "Chalkboard SE", "Patrick Hand", cursive; } .sh-art-sketch .sh-chart-head .title { color: #0A0A09; font-family: "Comic Sans MS", "Chalkboard SE", "Patrick Hand", cursive; } .sh-art-sketch .sh-chart-head .meta { color: #5C5B53; } .sh-art-sketch .sh-chart-body { background: #FCFBF7; padding: 0; } .sh-art-sketch::before, .sh-art-sketch::after { border-color: #EA4A1F !important; } /* NEWSPRINT — FT salmon paper + dark teal serif */ .sh-art-newsprint { background: #F4ECDC; border-color: #C8B898; } .sh-art-newsprint .sh-chart-head { background: #E8DDC6; border-bottom-color: #C8B898; } .sh-art-newsprint .sh-chart-head .slash { color: #A12424; } .sh-art-newsprint .sh-chart-head .title { color: #0C3B4C; font-family: Georgia, "Times New Roman", serif; } .sh-art-newsprint .sh-chart-head .meta { color: #6B6357; } .sh-art-newsprint .sh-chart-head .meta b { color: #0C3B4C; } .sh-art-newsprint .sh-chart-body { background: #F4ECDC; } .sh-art-newsprint::before, .sh-art-newsprint::after { border-color: #0C3B4C !important; } /* PHOSPHOR — CRT terminal */ .sh-art-phosphor { background: #021B0E; border-color: #0B3A22; box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.65); } .sh-art-phosphor .sh-chart-head { background: #04140A; border-bottom-color: #0B3A22; } .sh-art-phosphor .sh-chart-head .slash { color: #39FF7E; text-shadow: 0 0 6px rgba(57, 255, 126, 0.35); } .sh-art-phosphor .sh-chart-head .title { color: #39FF7E; } .sh-art-phosphor .sh-chart-head .meta { color: #5BB87A; } .sh-art-phosphor .sh-chart-head .meta b { color: #39FF7E; } .sh-art-phosphor .sh-chart-body { background: #021B0E; } .sh-art-phosphor::before, .sh-art-phosphor::after { border-color: #39FF7E !important; } /* BLUEPRINT — drafting paper navy + dotted grid */ .sh-art-blueprint { background: #0B1638; border-color: #182A55; } .sh-art-blueprint .sh-chart-head { background: #060F22; border-bottom-color: #182A55; } .sh-art-blueprint .sh-chart-head .slash { color: #4A9EFF; } .sh-art-blueprint .sh-chart-head .title { color: #FFFFFF; } .sh-art-blueprint .sh-chart-head .meta { color: #A8C9F0; } .sh-art-blueprint .sh-chart-head .meta b { color: #FFFFFF; } .sh-art-blueprint .sh-chart-body { background: repeating-linear-gradient(0deg, transparent 0 32px, rgba(255, 255, 255, 0.035) 32px 33px), repeating-linear-gradient(90deg, transparent 0 32px, rgba(255, 255, 255, 0.035) 32px 33px), #0B1638; } .sh-art-blueprint::before, .sh-art-blueprint::after { border-color: #4A9EFF !important; } /* RISO — risograph two-tone paper */ .sh-art-riso { background: #F1E6D5; border-color: #C6B698; } .sh-art-riso .sh-chart-head { background: #E5D8BF; border-bottom-color: #C6B698; } .sh-art-riso .sh-chart-head .slash { color: #FF4D17; } .sh-art-riso .sh-chart-head .title { color: #2A3FB0; } .sh-art-riso .sh-chart-head .meta { color: #5A4A30; } .sh-art-riso .sh-chart-head .meta b { color: #2A3FB0; } .sh-art-riso .sh-chart-body { background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 5px 5px, #F1E6D5; } .sh-art-riso::before, .sh-art-riso::after { border-color: #FF4D17 !important; } /* POSTER — solid lava share-card chrome */ .sh-art-poster { background: #ff6b35; border-color: #d9531f; } .sh-art-poster .sh-chart-head { background: transparent; color: #1a0e07; border-bottom-color: rgba(0, 0, 0, 0.25); } .sh-art-poster .sh-chart-head .slash { color: #1a0e07; } .sh-art-poster .sh-chart-head .title { color: #1a0e07; } .sh-art-poster .sh-chart-head .meta { color: #4a2410; } .sh-art-poster .sh-chart-body { background: transparent; } .sh-art-poster::before, .sh-art-poster::after { border-color: #1a0e07 !important; } /* ─── Theme lab — 7-tile gallery beneath the main chart. Each tile renders the same windowed payload through a different theme so the operator can pick visually rather than scrubbing through chip-row presets. ─── */ .sh-theme-lab { margin-top: 18px; } .sh-theme-lab-head { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 10px; } .sh-theme-lab-hint { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: var(--t-data); text-transform: uppercase; } .sh-theme-lab-hint b { color: var(--fg-subtle); font-weight: 600; } /* 4-col on wide screens, 3 below 1280, 2 below 900, 1 below 560 */ .sh-theme-lab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1280px) { .sh-theme-lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .sh-theme-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sh-theme-lab-grid { grid-template-columns: 1fr; } } /* Base tile — chrome that defers to per-theme overrides below */ .sh-theme-tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; will-change: transform; transition: border-color 160ms cubic-bezier(.2, .8, .2, 1), transform 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1); } .sh-theme-tile::before { /* Reactive accent glow that swells on hover */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 140% 90% at 0% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60% ); opacity: 0; transition: opacity 220ms cubic-bezier(.2, .8, .2, 1); z-index: 1; } .sh-theme-tile:hover { border-color: var(--accent); transform: translateY(-3px) scale(1.005); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); } .sh-theme-tile:hover::before { opacity: 1; } .sh-theme-tile:active { transform: translateY(-1px) scale(0.995); transition-duration: 60ms; } .sh-theme-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sh-theme-tile.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 28px -8px color-mix(in oklab, var(--accent) 30%, transparent); } .sh-theme-tile.is-active::before { opacity: 1; } .sh-theme-tile-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--border-subtle); background: var(--shell); } .sh-theme-tile-swatch { width: 14px; height: 14px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); flex-shrink: 0; } .sh-theme-tile-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: var(--t-control); color: var(--fg-bright); text-transform: uppercase; } .sh-theme-tile-active { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: var(--t-control); color: #08090a; background: var(--accent); padding: 2px 6px; border-radius: var(--r-xs); } /* Chart canvas slot — fixed height so all tiles align even if a theme bumps its padding. ECharts will fill the slot; SketchArt is responsive via viewBox. */ .sh-theme-tile-canvas { position: relative; height: 150px; background: var(--surface); overflow: hidden; } .sh-theme-tile-canvas > div, .sh-theme-tile-canvas > svg { width: 100%; height: 100%; display: block; } /* Repo-name watermark — pinned top-left of every tile's chart canvas so the gallery never loses track of WHAT it's plotting. Sits above the ECharts canvas (z-index 2) but stays click-through. */ .sh-theme-tile-repo { position: absolute; top: 7px; left: 9px; z-index: 2; pointer-events: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--fg-bright); background: color-mix(in oklab, var(--surface) 78%, transparent); padding: 2px 7px; border-radius: 4px; max-width: calc(100% - 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px var(--border-subtle); transition: transform 220ms cubic-bezier(.2, .8, .2, 1), color 220ms cubic-bezier(.2, .8, .2, 1); } /* Light theme tiles (PARCHMENT / NEWSPRINT / SKETCH-style) — invert the watermark so it reads on cream paper instead of dark ink. */ .sh-theme-tile.is-light .sh-theme-tile-repo { color: #1a1a1a; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sh-theme-tile:hover .sh-theme-tile-repo { transform: translateY(-1px); color: var(--accent); } .sh-theme-tile.is-light:hover .sh-theme-tile-repo { color: #ea4a1f; } .sh-theme-tile-foot { padding: 8px 11px 10px; border-top: 1px solid var(--border-subtle); background: var(--shell); } .sh-theme-tile-blurb { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-subtle); letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.35; } /* ─── Per-theme tile chrome ───────────────────────────────────────── Each tile tints its own card chrome so the gallery reads as 7 distinct "products" rather than 7 charts wearing the same shell. Background of the chart canvas is the theme's paper/void; head + foot bars carry a subtle desaturated tint of the theme accent so the tile feels cohesive. */ /* AURORA — brand default, dark void + lava accent */ .sh-tt-aurora .sh-theme-tile-canvas { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 107, 53, 0.10), transparent 70%), #08090a; } /* PARCHMENT — cream paper + ink (the agentic-web sister) */ .sh-tt-parchment .sh-theme-tile-head, .sh-tt-parchment .sh-theme-tile-foot { background: #DCD6C6; border-color: #BFB7A4; } .sh-tt-parchment .sh-theme-tile-label { color: #0A0A09; } .sh-tt-parchment .sh-theme-tile-blurb { color: #5C5B53; } .sh-tt-parchment .sh-theme-tile-canvas { background: #EAE6DC; } /* SKETCH — hand-drawn xkcd white paper */ .sh-tt-sketch .sh-theme-tile-head, .sh-tt-sketch .sh-theme-tile-foot { background: #F2EFE6; border-color: #D8D2C5; } .sh-tt-sketch .sh-theme-tile-label { color: #0A0A09; } .sh-tt-sketch .sh-theme-tile-blurb { color: #5C5B53; font-family: "Comic Sans MS", "Chalkboard SE", "Patrick Hand", cursive; font-size: 10.5px; text-transform: none; letter-spacing: 0; } .sh-tt-sketch .sh-theme-tile-label { font-family: "Comic Sans MS", "Chalkboard SE", "Patrick Hand", cursive; letter-spacing: 0.04em; } .sh-tt-sketch .sh-theme-tile-canvas { background: #FCFBF7; } /* NEWSPRINT — FT salmon-pink paper + dark teal */ .sh-tt-newsprint .sh-theme-tile-head, .sh-tt-newsprint .sh-theme-tile-foot { background: #E8DDC6; border-color: #C8B898; } .sh-tt-newsprint .sh-theme-tile-label { color: #0C3B4C; font-family: Georgia, "Times New Roman", serif; } .sh-tt-newsprint .sh-theme-tile-blurb { color: #6B6357; } .sh-tt-newsprint .sh-theme-tile-canvas { background: #F4ECDC; } /* PHOSPHOR — CRT terminal green-on-void */ .sh-tt-phosphor .sh-theme-tile-head, .sh-tt-phosphor .sh-theme-tile-foot { background: #04140A; border-color: #0B3A22; } .sh-tt-phosphor .sh-theme-tile-label { color: #39FF7E; text-shadow: 0 0 6px rgba(57, 255, 126, 0.35); } .sh-tt-phosphor .sh-theme-tile-blurb { color: #5BB87A; } .sh-tt-phosphor .sh-theme-tile-canvas { background: #021B0E; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.65); } /* BLUEPRINT — drafting paper navy + signal blue */ .sh-tt-blueprint .sh-theme-tile-head, .sh-tt-blueprint .sh-theme-tile-foot { background: #060F22; border-color: #182A55; } .sh-tt-blueprint .sh-theme-tile-label { color: #A8C9F0; } .sh-tt-blueprint .sh-theme-tile-blurb { color: #6E89BD; } .sh-tt-blueprint .sh-theme-tile-canvas { background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(255, 255, 255, 0.04) 24px 25px), repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 255, 255, 0.04) 24px 25px), #0B1638; } /* RISO — risograph two-tone paper + bold orange */ .sh-tt-riso .sh-theme-tile-head, .sh-tt-riso .sh-theme-tile-foot { background: #E5D8BF; border-color: #C6B698; } .sh-tt-riso .sh-theme-tile-label { color: #2A3FB0; } .sh-tt-riso .sh-theme-tile-blurb { color: #5A4A30; } .sh-tt-riso .sh-theme-tile-canvas { background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 4px 4px, #F1E6D5; } /* AISO — sister-product theme. DARK void canvas with PURPLE atmosphere + EMERALD line. Purple is the accent (head/foot tint, label glow, border) not the whole panel. The chart canvas paints its own dark-with-purple- glow background in RechartsTile. */ .sh-tt-aiso .sh-theme-tile-head, .sh-tt-aiso .sh-theme-tile-foot { background: linear-gradient(180deg, #15102a 0%, #0c0b18 100%); border-color: #2a1f3d; } .sh-tt-aiso .sh-theme-tile-label { color: #a78bfa; text-shadow: 0 0 10px rgba(167, 139, 250, 0.5); } .sh-tt-aiso .sh-theme-tile-blurb { color: #c4b5fd; } .sh-tt-aiso.is-active { border-color: #a78bfa; box-shadow: 0 0 0 1px #a78bfa, 0 10px 28px -8px rgba(167, 139, 250, 0.45); } /* ─── Compare row — up to 3 small charts beneath the main one ─── */ .sh-compare-row { margin-top: 14px; } .sh-compare-head { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px; } .sh-compare-hint { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: var(--t-data); text-transform: uppercase; } .sh-compare-hint b { color: var(--fg-subtle); font-weight: 600; } .sh-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .sh-compare-slot { position: relative; min-height: 132px; padding: 10px 12px 12px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); display: flex; flex-direction: column; overflow: hidden; } .sh-compare-slot.filled { border-color: var(--border); } .sh-compare-slot.empty { border-style: dashed; border-color: var(--border-strong); background: transparent; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; min-height: 0; height: auto; transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .sh-compare-slot.empty:hover, .sh-compare-slot.empty:focus-within { border-color: var(--accent-line); background: var(--surface); } .sh-compare-slot-head { display: flex; align-items: center; gap: 7px; min-width: 0; } .sh-compare-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sh-compare-slot-name { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sh-compare-slot-x { width: 16px; height: 16px; display: grid; place-items: center; color: var(--fg-faint); text-decoration: none; border-radius: var(--r-xs); font-size: 14px; line-height: 1; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } .sh-compare-slot-x:hover { background: var(--surface-3); color: var(--down); } .sh-compare-slot-chart { flex: 1; margin-top: 6px; min-height: 60px; display: flex; align-items: stretch; } .sh-compare-slot-empty { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: var(--t-control); text-transform: uppercase; margin: auto; } .sh-compare-slot-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .sh-compare-slot-delta { font-weight: 600; } .sh-compare-slot-delta.up { color: var(--up); } .sh-compare-slot-delta.dn { color: var(--down); } .sh-compare-slot-pct { color: var(--fg-faint); font-size: 10px; } .sh-compare-add-icon { font-family: var(--font-mono); font-size: 16px; color: var(--fg-subtle); width: 18px; text-align: center; flex-shrink: 0; } .sh-compare-slot.empty:focus-within .sh-compare-add-icon { color: var(--accent); } .sh-compare-add-input { appearance: none; flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg); font-family: var(--font-mono); font-size: 11.5px; padding: 6px 0; } .sh-compare-add-input::placeholder { color: var(--fg-faint); } .sh-compare-add-input::-webkit-search-cancel-button { display: none; } .sh-compare-add-submit { background: transparent; border: 0; font-family: var(--font-mono); font-size: 13px; color: var(--fg-faint); cursor: pointer; padding: 0 4px; transition: color var(--motion-fast) var(--ease); } .sh-compare-slot.empty:focus-within .sh-compare-add-submit { color: var(--accent); } .sh-compare-add-submit:hover { color: var(--accent); } @media (max-width: 720px) { .sh-compare-grid { grid-template-columns: 1fr; } } /* ─── LIFETIME marquee window button ─── */ .seg-chip.sh-lifetime { border-color: var(--accent-line); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); } .seg-chip.sh-lifetime:hover { background: var(--accent-soft); color: var(--fg-bright); } .seg-chip.sh-lifetime.on { background: var(--accent); color: #0a0805; box-shadow: inset 0 0 0 1px var(--accent), var(--accent-glow-wide); } .seg-chip.sh-lifetime > span:first-child { font-size: 11px; } .sh-onboard { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 36px 24px; text-align: center; } .sh-onboard .glyph { width: 56px; height: 56px; border-radius: var(--r-md); margin: 0 auto; background: var(--surface-2); border: 1px dashed var(--border-strong); display: grid; place-items: center; color: var(--accent); position: relative; } .sh-onboard .glyph::before, .sh-onboard .glyph::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; opacity: 0.7; } .sh-onboard .glyph::before { top: -3px; left: -3px; box-shadow: 0 0 8px var(--accent); } .sh-onboard .glyph::after { bottom: -3px; right: -3px; box-shadow: 0 0 8px var(--accent); } .sh-onboard h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-bright); letter-spacing: -0.01em; } .sh-onboard p { margin: 0 auto; font-size: 12.5px; color: var(--fg-muted); max-width: 48ch; line-height: 1.55; } @media (max-width: 900px) { .sh-hero { grid-template-columns: 1fr; } .sh-hero-right { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .sh-search { grid-template-columns: auto minmax(0, 1fr); } .sh-search-submit { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--accent); padding: 10px; } } @media (max-width: 560px) { .sh-hero-right { grid-template-columns: 1fr; } .sh-controls { gap: 6px; } } /* ═════════════════════════════════════════════════════════════ Tier list builder primitives — 2026-05-24 rebuild docs/DESIGN-SYSTEM.md §7. The previous block was a flat stack with no desktop grid + invisible templates (chip soup). This version is a true 2-column workbench (editor + sticky rail) with a numbered three-step workflow (search · template · rank) and large clickable template cards. Aliases below bridge v4 token names some descendant rules still reference. ═════════════════════════════════════════════════════════════ */ .tierlist-page, .tier-workbench { --bg-025: var(--shell); --bg-050: var(--surface); --bg-100: var(--surface-2); --line-100: var(--border-subtle); --line-200: var(--border); --line-300: var(--border-strong); --line-400: var(--border-hover); --ink-000: var(--fg-bright); --ink-100: var(--fg); --ink-200: var(--fg-muted); --ink-300: var(--fg-subtle); --ink-400: var(--fg-faint); --ink-500: var(--fg-disabled); --acc: var(--accent); --acc-soft: var(--accent-soft); --sig-red: var(--down); --font-size-sm: 11px; --font-size-md: 12px; --font-size-lg: 14px; --font-size-xl: 16px; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-control: 0.14em; --tracking-ui: 0.04em; --tracking-wide: 0.10em; --motion-duration-fast: 120ms; --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.4); } .tierlist-page .tool-grid { margin-bottom: 18px; } /* ── Workbench grid ──────────────────────────────────────────── */ .tier-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; } .tier-workbench--loading { display: block; } .tier-editor-panel { overflow: visible; } .tier-editor-skeleton { padding: 32px 16px; color: var(--fg-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .tier-remix-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; border: 1px solid var(--line-200); background: linear-gradient(90deg, var(--acc-soft), var(--bg-025) 70%); padding: 9px 12px; color: var(--ink-300); font-family: var(--font-mono); font-size: var(--font-size-md); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .tier-remix-banner b { color: var(--ink-000); font-weight: var(--font-weight-semibold); } /* ── Editor head ─────────────────────────────────────────────── */ .tier-editor-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); background: linear-gradient(180deg, rgba(255, 107, 53, 0.04), transparent 70%), var(--bg-050); } .tier-editor-head-info { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; } .tier-editor-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-control); text-transform: uppercase; color: var(--ink-200); } .tier-editor-head-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-400); } .tier-editor-head-meta .num { color: var(--acc); font-weight: 600; } .tier-editor-head-cta { margin-left: auto; } .tier-share-png-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; } /* ── Title shell ─────────────────────────────────────────────── */ .tier-title-shell { display: grid; gap: 6px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line-200); } .tier-title-input { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; outline: 0; background: transparent; color: var(--ink-000); font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.05; padding: 2px 0 6px; transition: border-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-title-input::placeholder { color: var(--ink-500); } .tier-title-input:hover { border-bottom-color: var(--line-200); } .tier-title-input:focus { border-bottom-color: var(--acc); } .tier-title-meta { color: var(--ink-400); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* ── Search stage (full-width hero) ──────────────────────────── */ .tier-stage { display: grid; gap: 14px; padding: 18px 18px 20px; border-bottom: 1px solid var(--line-200); background: linear-gradient(180deg, rgba(255, 107, 53, 0.05), transparent 70%), var(--bg-050); } .tier-stage--solo { /* single section — search only */ } .tier-step { display: grid; gap: 12px; padding: 16px 18px 18px; background: var(--bg-050); } .tier-step--search { background: linear-gradient(180deg, rgba(255, 107, 53, 0.05), transparent 60%), var(--bg-050); } .tier-step-head { display: flex; align-items: flex-start; gap: 12px; } .tier-step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--accent-line); letter-spacing: 0; } .tier-step-num--sm { min-width: 22px; height: 22px; font-size: 11px; } .tier-step-titles { display: grid; gap: 2px; min-width: 0; } .tier-step-title { margin: 0; color: var(--ink-000); font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .tier-step-sub { margin: 0; color: var(--ink-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; line-height: 1.4; } .tier-step-sub .num { color: var(--ink-200); } /* ── Search input (hero) ─────────────────────────────────────── */ .tier-search { position: relative; } .tier-search-input { display: flex !important; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 14px; border: 1px solid var(--line-200); background: var(--bg); transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard); } .tier-search-input:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); } .tier-search-input > span:first-child { color: var(--ink-400); } .tier-search-input:focus-within > span:first-child { color: var(--acc); } .tier-search-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-000); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; } .tier-search-input input::placeholder { color: var(--ink-500); letter-spacing: 0.02em; } .tier-search-input input::-webkit-search-cancel-button { display: none; } .tier-search-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-300); background: var(--bg-025); border: 1px solid var(--line-200); } .tier-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line-200); background: var(--bg-025); color: var(--ink-300); cursor: pointer; transition: color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-search-clear:hover { color: var(--ink-100); border-color: var(--line-400); } .tier-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: flex; max-height: 360px; flex-direction: column; overflow: auto; border: 1px solid var(--line-300); background: var(--bg-025); box-shadow: var(--overlay); } .tier-result { display: flex; align-items: center; gap: 10px; min-height: 42px; border: 0; border-top: 1px solid var(--line-100); background: transparent; color: var(--ink-100); padding: 8px 12px; font-family: var(--font-mono); font-size: 12.5px; text-align: left; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-result:first-child { border-top: 0; } .tier-result:hover:not(:disabled) { background: var(--bg-050); } .tier-result:disabled { color: var(--ink-500); cursor: not-allowed; } .tier-result-name { flex: 1; min-width: 0; color: var(--ink-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tier-result-meta { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-300); } .tier-result:disabled .tier-result-meta { color: var(--up); } .tier-result-empty { padding: 14px 12px; color: var(--ink-400); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-align: left; } /* ── Template grid (large cards) ─────────────────────────────── */ .tier-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tier-template-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; align-items: start; padding: 12px 14px 10px; background: var(--bg-100); border: 1px solid var(--line-200); text-align: left; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard); position: relative; overflow: hidden; } .tier-template-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent-line); opacity: 0; transition: opacity var(--motion-duration-fast) var(--motion-ease-standard); } .tier-template-card:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent-line); transform: translateY(-1px); } .tier-template-card:hover:not(:disabled)::before { opacity: 1; } .tier-template-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .tier-template-card:disabled { cursor: progress; } .tier-template-card.is-error { border-color: var(--sig-red); } .tier-template-card.is-error .tier-template-cta { color: var(--sig-red); } .tier-template-card.is-loaded { border-color: var(--up); background: linear-gradient(180deg, var(--up-soft), var(--bg-100) 70%); } .tier-template-card.is-loaded .tier-template-cta { color: var(--up); } .tier-template-icon { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, var(--acc-soft), transparent 80%); border: 1px solid var(--accent-line); color: var(--acc); } .tier-template-name { align-self: center; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink-000); } .tier-template-desc { grid-column: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.45; color: var(--ink-300); } .tier-template-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-100); } .tier-template-count { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); } .tier-template-count .num { color: var(--acc); font-size: 12.5px; font-weight: 700; letter-spacing: 0; } .tier-template-cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); transition: color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-template-card:hover:not(:disabled) .tier-template-cta { color: var(--acc); } /* ── Rank bar (Step 03) ──────────────────────────────────────── */ .tier-rank-bar { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line-200); background: var(--bg-025); flex-wrap: wrap; } .tier-rank-bar-step { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .tier-rank-bar-copy { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; line-height: 1.45; color: var(--ink-300); } .tier-rank-bar-copy b { color: var(--acc); font-weight: 600; letter-spacing: 0; } .tier-rank-bar-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; } .tier-rank-bar-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; } /* ── Board (tier rows + pool) ────────────────────────────────── */ .tier-board-shell { display: grid; gap: 14px; padding: 14px 14px 14px; } .tier-board { display: grid; border: 1px solid var(--line-200); background: var(--bg-025); overflow: hidden; } .tier-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); min-height: 96px; border-bottom: 1px solid var(--line-200); transition: background-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-row:last-child { border-bottom: 0; } .tier-letter { position: relative; display: flex; align-items: center; justify-content: center; color: #0a0a0a; font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; border-right: 1px solid rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.15); } .tier-letter-input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #0a0a0a; font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.15); } .tier-row-chrome { position: absolute; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0; background: rgba(0, 0, 0, 0.18); color: #0a0a0a; font-family: var(--font-mono); font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--motion-duration-fast) var(--motion-ease-standard); } .tier-letter:hover .tier-row-chrome, .tier-row-chrome:focus-visible { opacity: 1; } .tier-row-chrome:hover { background: rgba(0, 0, 0, 0.32); } .tier-row-chrome--top-left, .tier-row-chrome-top.tier-row-chrome-left { top: 5px; left: 5px; } .tier-row-chrome--top-right, .tier-row-chrome-top.tier-row-chrome-right { top: 5px; right: 5px; } .tier-row-chrome--bottom-left, .tier-row-chrome-bottom.tier-row-chrome-left { bottom: 5px; left: 5px; } .tier-row-chrome--bottom-right, .tier-row-chrome-bottom.tier-row-chrome-right { bottom: 5px; right: 5px; } .tier-color-picker { position: absolute; top: calc(100% - 4px); right: 4px; z-index: 10; display: flex; gap: 4px; padding: 6px; border: 1px solid var(--line-300); background: var(--bg-050); box-shadow: var(--overlay); } .tier-color-picker button { width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0; padding: 0; cursor: pointer; } .tier-color-picker button.is-active { border: 2px solid var(--ink-000); outline: 1px solid rgba(0, 0, 0, 0.4); } .tier-drop { display: flex; min-height: 92px; align-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px; background: var(--bg); transition: background-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-row.is-over .tier-drop { background: linear-gradient(90deg, var(--acc-soft), transparent 100%); box-shadow: inset 3px 0 0 var(--acc); } .tier-drop-empty { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-500); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; } .tier-drop-empty-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px dashed var(--line-300); color: var(--ink-400); font-size: 14px; font-weight: 500; } .tier-row.is-over .tier-drop-empty { color: var(--acc); } .tier-row.is-over .tier-drop-empty-plus { border-color: var(--acc); color: var(--acc); } /* ── Draggable item chip ─────────────────────────────────────── */ .tier-item { display: inline-flex; align-items: center; gap: 12px; height: 80px; min-width: 0; max-width: 360px; border: 1px solid var(--line-300); border-radius: var(--r-md); background: var(--bg-100); padding: 0 12px 0 8px; cursor: grab; transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), background-color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard); } .tier-item:hover { border-color: var(--line-400); background: var(--surface-3); transform: translateY(-1px); } .tier-item:active { cursor: grabbing; transform: translateY(0); } .tier-item-handle { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; padding: 0; background: transparent; cursor: inherit; pointer-events: none; } .tier-item-handle img, .tier-item-handle > span { pointer-events: none; } @media (pointer: coarse) { .tier-item { cursor: pointer; } } .tier-item-name { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-000); font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; } .tier-item-stars { padding-left: 12px; border-left: 1px solid var(--line-300); color: var(--acc); font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .tier-item-remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; margin-left: 4px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink-400); cursor: pointer; transition: color var(--motion-duration-fast) var(--motion-ease-standard), background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-item:hover .tier-item-remove { color: var(--ink-200); } .tier-item-remove:hover { color: var(--sig-red); background: var(--down-soft); border-color: var(--sig-red); } /* ── Unranked pool ───────────────────────────────────────────── */ .tier-pool { min-height: 110px; border: 1px dashed var(--line-300); background: var(--bg-025); padding: 12px 14px 14px; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-pool.is-over { background: var(--acc-soft); border-color: var(--accent-line); } .tier-pool.has-items { border-style: solid; } .tier-pool-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; color: var(--ink-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-control); text-transform: uppercase; } .tier-pool-title > span:first-child { color: var(--ink-200); } .tier-pool-hint { color: var(--ink-400); font-size: 10px; letter-spacing: 0.08em; text-transform: none; } .tier-pool-items { display: flex; flex-wrap: wrap; gap: 8px; } .tier-pool-empty { color: var(--ink-500); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; } /* ── Side rail (Share + Hint) ────────────────────────────────── */ .tier-side { display: grid; gap: 12px; position: sticky; top: 18px; } .tier-share-error { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--sig-red); background: var(--down-soft); color: var(--sig-red); font-family: var(--font-mono); font-size: 11.5px; } /* Tier-specific tweaks for the shared SharePanel */ .share-panel + .tier-share-error { margin-top: -8px; } /* ── Hint card ───────────────────────────────────────────────── */ .tier-hint { overflow: hidden; } .tier-hint-list { display: grid; gap: 10px; padding: 14px 16px 16px; margin: 0; list-style: none; } .tier-hint-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; color: var(--ink-200); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; line-height: 1.5; } .tier-hint-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--accent-line); } /* Legacy hint-body still used elsewhere */ .tier-hint-body { display: grid; gap: 6px; padding: 10px 14px; color: var(--ink-300); font-family: var(--font-mono); font-size: var(--font-size-md); line-height: 1.65; } .tier-hint-body div { display: flex; gap: 8px; } .tier-hint-body b { color: var(--acc); } /* ── Embed legacy (unused by new ShareBar but kept) ──────────── */ .tier-embed-panel { display: grid; gap: 0; border-top: 1px solid var(--line-200); background: var(--bg-025); padding: 8px 10px; } .tier-embed-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line-100); color: var(--ink-300); font-family: var(--font-mono); font-size: var(--font-size-md); } .tier-embed-row:first-child { border-top: 0; } .tier-embed-row code { overflow-wrap: anywhere; color: var(--ink-200); } .tier-embed-row button { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 1px solid var(--line-300); border-radius: 0; background: var(--bg-050); color: var(--ink-300); cursor: pointer; } /* ── Mobile tier picker (bottom sheet) ───────────────────────── */ .tier-picker-scrim { position: fixed; inset: 0; z-index: 80; background: var(--bg-overlay); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 220ms var(--motion-ease-standard); } .tier-picker-scrim.is-open { opacity: 1; pointer-events: auto; } .tier-picker-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; display: grid; gap: 0; max-height: 80vh; overflow: auto; background: var(--shell); border-top: 1px solid var(--line-300); box-shadow: var(--overlay); transform: translateY(100%); transition: transform 220ms var(--motion-ease-standard); } .tier-picker-sheet.is-open { transform: translateY(0); } .tier-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-200); } .tier-picker-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-control); text-transform: uppercase; color: var(--ink-200); } .tier-picker-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line-200); background: var(--bg-050); color: var(--ink-200); cursor: pointer; } .tier-picker-close:hover { border-color: var(--line-400); color: var(--ink-000); } .tier-picker-preview { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-200); background: var(--bg-050); } .tier-picker-preview-meta { display: grid; gap: 2px; min-width: 0; } .tier-picker-preview-name { color: var(--ink-000); font-family: var(--font-mono); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tier-picker-preview-hint { color: var(--ink-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; } .tier-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; padding: 1px; background: var(--line-100); } .tier-picker-cell { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: var(--bg-050); text-align: left; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-picker-cell:hover:not(:disabled) { background: var(--surface-3); } .tier-picker-cell:disabled { cursor: not-allowed; opacity: 0.5; } .tier-picker-cell-letter { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #0a0a0a; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .tier-picker-cell-meta { display: grid; gap: 1px; } .tier-picker-cell-label { color: var(--ink-000); font-family: var(--font-mono); font-size: 12px; font-weight: 500; } .tier-picker-cell-count { color: var(--ink-400); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; } .tier-picker-foot { display: flex; gap: 8px; padding: 12px 16px 18px; border-top: 1px solid var(--line-200); background: var(--bg-025); } .tier-picker-foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 12px; border: 1px solid var(--line-300); background: var(--bg-050); color: var(--ink-100); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-ease-standard); } .tier-picker-foot-btn:hover { border-color: var(--line-400); } .tier-picker-foot-btn.is-danger { color: var(--sig-red); } .tier-picker-foot-btn.is-danger:hover { border-color: var(--sig-red); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 1100px) { .tier-workbench { grid-template-columns: 1fr; } .tier-workbench .col-9, .tier-workbench .col-3 { grid-column: 1 / -1; } .tier-side { position: static; } } @media (max-width: 760px) { .tier-editor-head { flex-wrap: wrap; padding: 11px 14px; } .tier-editor-head-cta { margin-left: 0; } .tier-title-shell { padding: 14px 14px 12px; } .tier-title-input { font-size: 26px; } .tier-stage { padding: 14px 14px 16px; } .tier-step { padding: 14px 14px 16px; } .tier-template-grid { grid-template-columns: 1fr; } .tier-rank-bar { padding: 11px 14px; } .tier-rank-bar-actions { width: 100%; margin-left: 0; } .tier-board-shell { padding: 10px 10px 10px; } .tier-row { grid-template-columns: 64px minmax(0, 1fr); min-height: 72px; } .tier-letter, .tier-letter-input { font-size: 30px; } .tier-drop { padding: 10px 12px; min-height: 72px; } } /* --------------------------------------------------------------------------- /* --------------------------------------------------------------------------- * AA LLM leaderboard — /?cat=llms surface (2026-05-24 refocus) * * The leaderboard reuses `.card.trending-table-card` + `table.tdata` from * the repos surface, so only the additions for sortable headers + filter-chip * grouping live here. Featured row reuses `.featured-row` + `.feat`. * ------------------------------------------------------------------------- */ .aa-filter-group { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin-right: 14px; } .aa-filter-label { font-size: 10px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover .aa-th-label, th.sortable.active .aa-th-label { color: var(--fg-bright); } .aa-th-label { font-weight: 500; } .aa-th-sub { display: block; font-size: 9px; color: var(--fg-subtle); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 1px; } .aa-th-arrow { margin-left: 4px; font-size: 10px; opacity: 0.55; } th.sortable.active .aa-th-arrow { opacity: 1; color: var(--accent); } /* =========================================================================== Repo profile — Pulse panel (right column of hero) + AISO narrative section + honest empty states for the activity / maintainers / releases / org cards. All tokens reference shell.css :root variables — no inline hex. =========================================================================== */ .pulse-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; } .pulse-head { display: flex; align-items: center; justify-content: space-between; } .pulse-grade-row { display: flex; align-items: center; gap: 12px; } .pulse-grade { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--r-3); background: var(--surface-2); border: 1px solid var(--border-subtle); } .pulse-grade-letter { font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1; } .pulse-grade-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); margin-top: 2px; } .pulse-grade-up .pulse-grade-letter { color: var(--up); } .pulse-grade-up { border-color: color-mix(in srgb, var(--up) 30%, transparent); } .pulse-grade-warn .pulse-grade-letter { color: var(--warning); } .pulse-grade-warn { border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .pulse-grade-dn .pulse-grade-letter { color: var(--down); } .pulse-grade-dn { border-color: color-mix(in srgb, var(--down) 30%, transparent); } .pulse-grade-muted .pulse-grade-letter { color: var(--fg-faint); } .pulse-grade-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pulse-score { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--fg-bright); line-height: 1; } .pulse-score-max { color: var(--fg-faint); font-size: 12px; margin-left: 4px; font-weight: 500; } .pulse-grade-chips { display: flex; flex-wrap: wrap; gap: 4px; } .pulse-section { display: flex; flex-direction: column; gap: 6px; } .pulse-constellation { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .pulse-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--border-subtle); transition: border-color 0.15s ease, background 0.15s ease; } .pulse-dot.active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .pulse-dot.warm { border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .pulse-dot.dim { opacity: 0.55; } .pulse-dot-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--bg); letter-spacing: 0; } .pulse-dot-count { font-family: var(--font-mono); font-size: 10px; color: var(--fg); } .pulse-dot.dim .pulse-dot-count { color: var(--fg-faint); } .pulse-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } .pulse-date { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 0; } .pulse-date-label { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.05em; font-size: 9.5px; } .pulse-date-value { color: var(--fg-bright); } .pulse-recent { display: flex; flex-direction: column; gap: 4px; } .pulse-recent-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 11.5px; padding: 4px 0; border-top: 1px dashed var(--border-subtle); } .pulse-recent-row:first-child { border-top: 0; } .pulse-recent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 4px; } .pulse-recent-row.tone-up .pulse-recent-dot { background: var(--up); } .pulse-recent-row.tone-info .pulse-recent-dot { background: var(--info); } .pulse-recent-row.tone-warn .pulse-recent-dot { background: var(--warning); } .pulse-recent-label { color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pulse-recent-label a { color: inherit; text-decoration: none; } .pulse-recent-label a:hover { text-decoration: underline; } .pulse-recent-age { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); } /* --- KPI strip: placeholder reserve for cells without real sparklines --- */ .stat-spark-placeholder { margin-top: auto; width: 100%; height: 26px; } /* --- SourceBreakdownGrid: top mention + meta rows --- */ .src-card-top { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin-top: 4px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--fg); text-decoration: none; font-size: 11px; line-height: 1.35; } .src-card-top:hover { background: var(--surface-3); border-color: var(--border); color: var(--fg-bright); } .src-card-top-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--fg-bright); } .src-card-top-meta { color: var(--fg-faint); font-size: 10px; } .src-card-meta { font-size: 10px; padding: 4px 0; } /* --- Mention timeline legend warming chip + empty state --- */ .legend-row .lg-tag { margin-left: 4px; padding: 1px 4px; font-size: 8.5px; font-family: var(--font-mono); border-radius: var(--r-1); background: var(--warning-soft); color: var(--warning); text-transform: uppercase; letter-spacing: 0.06em; } .legend-row .lg-warming { opacity: 0.85; } .timeline-empty { padding: 22px 16px; text-align: center; font-size: 12px; color: var(--fg-faint); background: var(--surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } /* --- Star history empty state (cold-repo or warming backfill) --- */ .chart-empty { display: flex; align-items: flex-start; gap: 12px; padding: 28px 18px; background: var(--surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .chart-empty-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--accent); } .chart-empty-title { color: var(--fg-bright); font-weight: 600; font-size: 13px; } .chart-empty-sub { color: var(--fg-muted); font-size: 12px; line-height: 1.5; margin-top: 2px; max-width: 60ch; } /* --- AISO narrative section --- */ .aiso-card { margin: 14px 0; } .aiso-body { display: grid; grid-template-columns: minmax(200px, 0.7fr) minmax(0, 2fr); gap: 16px; padding: 14px; align-items: start; } .aiso-score-block { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-2); } .aiso-score-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); } .aiso-score-num { font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1; } .aiso-score-max { color: var(--fg-faint); font-size: 14px; margin-left: 4px; font-weight: 500; } .aiso-score-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--info); text-decoration: none; } .aiso-score-link:hover { text-decoration: underline; } .aiso-engines { margin-top: 4px; } .aiso-engines-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 4px; } .aiso-engines-list { display: flex; flex-wrap: wrap; gap: 4px; } .aiso-engine-pill { display: inline-flex; align-items: center; padding: 2px 6px; font-family: var(--font-mono); font-size: 10px; color: var(--up); background: var(--up-soft); border: 1px solid color-mix(in srgb, var(--up) 25%, transparent); border-radius: var(--r-1); } .aiso-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .aiso-block { display: flex; flex-direction: column; gap: 6px; } .aiso-block-head { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); } .aiso-block-head svg { color: var(--accent); } .aiso-block-rows { display: flex; flex-direction: column; gap: 8px; } .aiso-row { display: flex; flex-direction: column; gap: 3px; } .aiso-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .aiso-row-label { color: var(--fg-bright); font-size: 12px; } .aiso-row-score { color: var(--fg); font-size: 11px; } .aiso-row-bar { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .aiso-row-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--up)); border-radius: 999px; } .aiso-issue { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-2); } .aiso-issue-head { display: flex; align-items: center; gap: 6px; } .aiso-issue-title { color: var(--fg-bright); font-size: 12px; } .aiso-issue-fix { color: var(--fg-muted); font-size: 11px; line-height: 1.4; } .aiso-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--graphite); border-top: 1px solid var(--border-subtle); gap: 8px; flex-wrap: wrap; } .aiso-foot-meta { font-size: 11px; } .aiso-empty { display: flex; gap: 14px; padding: 22px 18px; align-items: flex-start; } .aiso-empty-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--accent); } .aiso-empty-title { color: var(--fg-bright); font-weight: 600; font-size: 14px; } .aiso-empty-sub { color: var(--fg-muted); font-size: 12px; line-height: 1.5; margin-top: 4px; max-width: 72ch; } .aiso-empty-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* --- AccountAisoSettings --- */ .aiso-settings-card { margin-top: 14px; } .aiso-settings-body { display: flex; flex-direction: column; gap: 12px; padding: 14px; } .aiso-settings-help { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-muted); } .aiso-settings-field { display: flex; flex-direction: column; gap: 4px; } .aiso-settings-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); } .aiso-settings-input { appearance: none; width: 100%; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--fg-bright); font-family: var(--font-mono); font-size: 12px; } .aiso-settings-input:focus { outline: none; border-color: var(--accent); } .aiso-settings-actions { display: flex; gap: 6px; } .aiso-settings-status { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); } /* --- Honest empty state shell for sidebar cards (maintainers / releases / org / related) --- */ .card-empty { padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; } .card-empty-title { font-weight: 600; color: var(--fg-bright); font-size: 13px; } .card-empty-sub { color: var(--fg-muted); font-size: 11.5px; line-height: 1.5; } .card-empty .btn { align-self: flex-start; margin-top: 4px; } /* --- Image-backed contributor avatars (real GitHub PNGs) --- */ .contrib-avatar-img { padding: 0; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; } .contrib-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Mention timeline bar palettes for new channels (devto / lobsters etc.) --- */ .tl-bar.d { background: var(--src-dev); } @media (max-width: 960px) { .aiso-body { grid-template-columns: 1fr; } .aiso-blocks { grid-template-columns: 1fr; } .pulse-constellation { grid-template-columns: repeat(3, 1fr); } .pulse-dates { grid-template-columns: 1fr; } } /* =========================================================================== Repo Comments — Wave 2D -------------------------------------------------------------------------- Discussion section on /repo/[owner]/[name]. Three islands: 1. .repo-comments-thread — server-rendered section wrapper 2. .repo-comments-composer — client textarea + Post button 3. .repo-comment-reactions — client 5-emoji toggle row Tokens-only — no inline hex anywhere in this block. =========================================================================== */ .repo-comments-thread { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; } /* ─── Composer (signed-in) ─── */ .repo-comments-composer { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .repo-comments-composer-input { width: 100%; min-height: 76px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); color: var(--fg); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; resize: vertical; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .repo-comments-composer-input::placeholder { color: var(--fg-faint); } .repo-comments-composer-input:focus { outline: none; border-color: var(--accent); background: var(--surface-3); } .repo-comments-composer-input:disabled { opacity: 0.7; cursor: progress; } .repo-comments-composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .repo-comments-composer-counter { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); letter-spacing: 0.04em; min-height: 1em; } .repo-comments-composer-counter.is-warn { color: var(--warning); } .repo-comments-composer-error { margin: 0; font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--down); } /* ─── Composer (signed-out) ─── */ .repo-comments-signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .repo-comments-signin-copy { margin: 0; font-family: var(--font-sans); font-size: 13px; color: var(--fg); } /* ─── Empty state ─── */ .repo-comments-empty { padding: 24px 16px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-1); font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted); } /* ─── List + row ─── */ .repo-comments-list { display: flex; flex-direction: column; } .repo-comment-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); } .repo-comment-row:first-child { padding-top: 6px; } .repo-comment-row:last-child { border-bottom: 0; padding-bottom: 4px; } .repo-comment-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-2); border: 1px solid var(--border); overflow: hidden; color: var(--bg); font-family: var(--font-mono); font-size: 13px; font-weight: 800; background: var(--surface-3); } .repo-comment-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .repo-comment-avatar.b1 { background: linear-gradient(135deg, var(--accent), var(--warning)); } .repo-comment-avatar.b2 { background: linear-gradient(135deg, var(--info), var(--cyan)); } .repo-comment-avatar.b3 { background: linear-gradient(135deg, var(--up), var(--lime)); } .repo-comment-avatar.b4 { background: linear-gradient(135deg, var(--violet), var(--pink)); } .repo-comment-avatar.b5 { background: linear-gradient(135deg, var(--warning), var(--up)); } .repo-comment-avatar.has-photo { background: var(--surface-3); color: var(--fg); } .repo-comment-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .repo-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .repo-comment-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--fg-bright); letter-spacing: -0.005em; } .repo-comment-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); letter-spacing: 0.04em; } .repo-comment-body { margin: 0; white-space: pre-wrap; word-break: break-word; color: var(--fg); font-family: var(--font-sans); font-size: 13px; line-height: 1.55; } /* ─── Reactions row ─── */ .repo-comment-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .repo-comment-reactions.is-shake { animation: repo-comment-shake 0.32s var(--ease); } .repo-comment-reaction-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .repo-comment-reaction-btn:hover { background: var(--surface-3); border-color: var(--border-hover); color: var(--fg); } .repo-comment-reaction-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .repo-comment-reaction-btn:active { transform: translateY(1px); } .repo-comment-reaction-btn:disabled { cursor: progress; opacity: 0.78; } .repo-comment-reaction-btn.is-empty { opacity: 0.7; } .repo-comment-reaction-btn.is-empty:hover { opacity: 1; } .repo-comment-reaction-btn.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); opacity: 1; } .repo-comment-reaction-emoji { font-family: var(--font-sans); font-size: 13px; line-height: 1; } .repo-comment-reaction-count { min-width: 1ch; font-variant-numeric: tabular-nums; } @keyframes repo-comment-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } @media (max-width: 560px) { .repo-comments-signin { flex-direction: column; align-items: stretch; text-align: left; } .repo-comments-signin .btn { align-self: flex-start; } } /* =========================================================================== RepoLikeButton + RepoTeamCard + RepoSponsorsCard — Wave 2E =========================================================================== */ /* ─── RepoLikeButton (large pill, optimistic toggle) ─── */ .repo-like-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--fg); font-size: 12.5px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; position: relative; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .repo-like-btn:hover { border-color: var(--accent); color: var(--fg-bright); } .repo-like-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .repo-like-btn:active { transform: translateY(1px); } .repo-like-btn:disabled { cursor: progress; opacity: 0.78; } .repo-like-btn .heart { width: 16px; height: 16px; stroke: currentColor; fill: none; transition: fill var(--d-base) var(--ease), stroke var(--d-base) var(--ease), transform var(--d-base) var(--ease); } .repo-like-btn.is-liked { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .repo-like-btn.is-liked .heart { fill: var(--accent); stroke: var(--accent); animation: repo-like-pop 0.45s var(--ease); } .repo-like-label { font-family: var(--font-sans); letter-spacing: -0.005em; } .repo-like-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); padding: 1px 7px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); min-width: 24px; text-align: center; } .repo-like-btn.is-liked .repo-like-count { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); } @keyframes repo-like-pop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } } /* ─── RepoTeamCard ─── */ .repo-team-card .card-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; } .repo-team-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .repo-team-avatar { width: 64px; height: 64px; border-radius: var(--r-2); border: 1px solid var(--border); background: var(--surface-3); object-fit: cover; flex-shrink: 0; display: block; } .repo-team-id { min-width: 0; } .repo-team-name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--fg-bright); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repo-team-type { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-top: 3px; } .repo-team-bio { color: var(--fg-muted); font-size: 12.5px; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .repo-team-bio-empty { color: var(--fg-subtle); font-style: italic; -webkit-line-clamp: 3; } .repo-team-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); } .repo-team-stats b { color: var(--fg-bright); font-weight: 600; } .repo-team-stat { display: inline-flex; align-items: center; gap: 6px; } .repo-team-stat-sep { color: var(--fg-faint); } .repo-team-links { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; } .repo-team-link { color: var(--accent); text-decoration: none; transition: color var(--d-fast) var(--ease); } .repo-team-link:hover { color: var(--accent-hover); text-decoration: underline; } .repo-team-link-static { color: var(--fg-subtle); cursor: default; } .repo-team-link-static:hover { color: var(--fg-subtle); text-decoration: none; } .repo-team-foot { margin-top: 2px; display: flex; justify-content: flex-start; } /* ─── RepoSponsorsCard ─── */ .repo-sponsors-card .card-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .repo-sponsors-pills { display: flex; flex-direction: column; gap: 8px; } .repo-sponsors-pill { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); color: var(--fg); text-decoration: none; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .repo-sponsors-pill:hover { background: var(--surface-3); border-color: var(--accent-line); transform: translateY(-1px); } .repo-sponsors-pill:focus-visible { outline: none; box-shadow: var(--ring-focus); } .repo-sponsors-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-1); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; } .repo-sponsors-pill-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .repo-sponsors-pill-label { font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-bright); font-weight: 500; letter-spacing: -0.005em; } .repo-sponsors-pill-host { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repo-sponsors-note { font-size: 11px; color: var(--fg-faint); margin: 4px 0 0; line-height: 1.4; } /* =========================================================================== RepoStarChart — Wave 2C Interactive ECharts replacement for /repo/[owner]/[name] star history. Server-side renders the controls + an empty canvas; client mounts ECharts on top. All buttons are s driven by ?range=, ?scale=, ?theme=. =========================================================================== */ .repo-star-chart { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; } .repo-star-chart-head { display: flex; flex-direction: column; gap: 10px; } .repo-star-chart-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--t-control); color: var(--fg-faint); text-transform: uppercase; } .repo-star-chart-eyebrow .slash { color: var(--accent); } .repo-star-chart-eyebrow .dot { opacity: 0.45; } .repo-star-chart-eyebrow b { color: var(--fg); font-weight: 600; } .repo-star-chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } /* Pill-style buttons used by both the scale toggle and the theme switch. Smaller than .segmented so the three control groups stack neatly on narrow viewports without dominating the chart head. */ .chart-scale-toggle, .chart-theme-switch { display: inline-flex; align-items: center; gap: 4px; padding: 2px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-xs); font-family: var(--font-mono); } .chart-scale-toggle .pill, .chart-theme-switch .pill { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 3px 8px; font-size: 10px; letter-spacing: var(--t-control); color: var(--fg-faint); background: transparent; border: 1px solid transparent; border-radius: 3px; text-decoration: none; text-transform: uppercase; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .chart-scale-toggle .pill:hover, .chart-theme-switch .pill:hover { color: var(--fg); background: var(--surface-2); } .chart-scale-toggle .pill.on, .chart-theme-switch .pill.on { color: var(--fg-bright); background: var(--surface-2); border-color: var(--border); } /* Per-theme active swatch tint — purely decorative, makes the active theme pill visually distinct without relying on color names in TSX. */ .chart-theme-switch .pill-aurora.on { box-shadow: inset 0 -2px 0 var(--accent); } .chart-theme-switch .pill-macarons.on { box-shadow: inset 0 -2px 0 var(--cyan, var(--up)); } .chart-theme-switch .pill-vintage.on { box-shadow: inset 0 -2px 0 var(--gold, var(--warning)); } .chart-theme-switch .pill-dark.on { box-shadow: inset 0 -2px 0 var(--info); } /* Canvas mount point. Two heights — 360px desktop, 280px below the mobile breakpoint — match the spec. Width is owned by the card. */ .repo-star-chart-body { width: 100%; height: 360px; border-radius: var(--r-xs); } @media (max-width: 720px) { .repo-star-chart-body { height: 280px; } .repo-star-chart-controls { gap: 6px; } .chart-scale-toggle .pill, .chart-theme-switch .pill { min-width: 28px; padding: 3px 6px; } } /* Empty state — shown when star activity has < 2 buckets. Matches the freshness-warming pattern used by the rest of the repo-detail surface. */ .repo-star-chart-empty { display: flex; align-items: flex-start; gap: 12px; padding: 32px 18px; min-height: 280px; background: var(--surface); border: 1px dashed var(--border-subtle); border-radius: var(--r-xs); color: var(--fg-faint); } .repo-star-chart-empty-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 50%; color: var(--warning, var(--accent)); flex-shrink: 0; } .repo-star-chart-empty-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } .repo-star-chart-empty-sub { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--fg-faint); max-width: 60ch; } /* =========================================================================== RepoReadmePreview — Wave 2B =========================================================================== */ .repo-readme-card { display: flex; flex-direction: column; gap: 10px; } .repo-readme-card .card-head .grow { flex: 1; } /* Body wrapper — a
element so the expand/collapse needs no JS. When closed, the rendered markdown is clamped to ~12 lines via -webkit- line-clamp and the bottom fade overlay is visible. When opened, the clamp is lifted and the fade is hidden. */ .repo-readme-body { position: relative; padding: 14px 14px 0 14px; } .repo-readme-body[open] .repo-readme-md { -webkit-line-clamp: unset; display: block; max-height: none; overflow: visible; } .repo-readme-body[open] .repo-readme-fade { display: none; } /* The markdown wrapper — clamp lives here so the fade overlay can sit outside the clipped region. */ .repo-readme-md { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--fg); max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; } .repo-readme-md > * + * { margin-top: 10px; } .repo-readme-md .repo-readme-h1, .repo-readme-md .repo-readme-h2, .repo-readme-md .repo-readme-h3, .repo-readme-md .repo-readme-h4, .repo-readme-md .repo-readme-h5, .repo-readme-md .repo-readme-h6 { color: var(--fg-bright); font-weight: 600; line-height: 1.3; margin-top: 14px; } .repo-readme-md .repo-readme-h1 { font-size: 22px; } .repo-readme-md .repo-readme-h2 { font-size: 18px; } .repo-readme-md .repo-readme-h3 { font-size: 15px; } .repo-readme-md .repo-readme-h4 { font-size: 14px; } .repo-readme-md .repo-readme-h5 { font-size: 13px; } .repo-readme-md .repo-readme-h6 { font-size: 12px; } .repo-readme-md .repo-readme-p { margin: 0; } .repo-readme-md a { color: var(--info); text-decoration: none; } .repo-readme-md a:hover { text-decoration: underline; } .repo-readme-md .repo-readme-code { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); padding: 1px 5px; font-family: var(--font-mono); font-size: 12px; } .repo-readme-md .repo-readme-pre { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-2); padding: 12px; overflow-x: auto; margin: 0; } .repo-readme-md .repo-readme-pre code { background: transparent; border: 0; padding: 0; font-family: var(--font-mono); font-size: 12px; color: var(--fg); white-space: pre; } .repo-readme-md .repo-readme-list { margin: 0; padding-left: 22px; } .repo-readme-md .repo-readme-list li + li { margin-top: 4px; } .repo-readme-md .repo-readme-quote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--border); color: var(--fg-muted); background: var(--surface-2); border-radius: var(--r-1); } .repo-readme-md .repo-readme-hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 14px 0; } .repo-readme-md .repo-readme-img { max-width: 100%; height: auto; border-radius: var(--r-2); display: inline-block; } /* The bottom fade overlay — only visible when the
is closed. Sits above the clipped markdown to ease the eye into the truncation. */ .repo-readme-fade { position: absolute; left: 14px; right: 14px; bottom: 38px; height: 40px; pointer-events: none; background: linear-gradient( to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) ); } /* Summary toggle — styled as a ghost button. Removes the default
triangle marker on every browser. */ .repo-readme-expand { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 9px; font-size: 11px; font-family: var(--font-sans); color: var(--fg); background: transparent; border: 1px solid var(--border); border-radius: var(--r-1); user-select: none; } .repo-readme-expand:hover { background: var(--surface-3); border-color: var(--border-hover); } .repo-readme-expand::-webkit-details-marker { display: none; } .repo-readme-expand::marker { content: ""; } .repo-readme-body[open] .repo-readme-expand-closed { display: none; } .repo-readme-body:not([open]) .repo-readme-expand-open { display: none; } .repo-readme-foot { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px 14px; font-size: 11px; color: var(--fg-muted); } .repo-readme-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .repo-readme-empty-copy { margin: 0; font-size: 12.5px; color: var(--fg-muted); line-height: 1.5; max-width: 60ch; } /* =========================================================================== RepoInfoCard — Wave 2A =========================================================================== */ .repo-info-card { display: flex; flex-direction: column; } .repo-info-head { justify-content: space-between; } .repo-info-body { display: flex; flex-direction: column; gap: 18px; } .repo-info-empty { margin: 0; font-size: 12px; color: var(--fg-muted); line-height: 1.5; } .repo-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } @media (min-width: 1100px) { .repo-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .repo-info-grid { grid-template-columns: minmax(0, 1fr); } } .repo-info-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .repo-info-cell-wide { grid-column: 1 / -1; } .repo-info-cell-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--fg-faint); } .repo-info-cell-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); min-width: 0; } .repo-info-cell-strong { color: var(--fg-bright); font-weight: 600; font-variant-numeric: tabular-nums; } .repo-info-cell-sub { color: var(--fg-subtle); font-size: 10.5px; letter-spacing: var(--t-data); } .repo-info-empty-cell { color: var(--fg-faint); } .repo-info-link { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); border-bottom: 1px dotted var(--border); transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repo-info-link:hover { color: var(--accent); border-bottom-color: var(--accent-line); } .repo-info-code { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); color: var(--fg-bright); } .repo-info-topics { display: flex; flex-wrap: wrap; gap: 4px; } .repo-info-health-bar { position: relative; flex: 1 1 100%; height: 4px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; } .repo-info-health-bar-fill { position: absolute; inset: 0 auto 0 0; display: block; border-radius: var(--r-pill); transition: width var(--d-base) var(--ease); } /* Stack — full-width language breakdown */ .repo-info-stack { display: flex; flex-direction: column; gap: 8px; } .repo-info-stack-bar { display: flex; width: 100%; height: 8px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); overflow: hidden; } .repo-info-stack-seg { display: block; height: 100%; min-width: 1px; } .repo-info-stack-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .repo-info-stack-legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); } .repo-info-stack-legend-swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .repo-info-stack-legend-name { color: var(--fg); } .repo-info-stack-legend-pct { color: var(--fg-subtle); font-variant-numeric: tabular-nums; } /* Funding */ .repo-info-funding { display: flex; flex-direction: column; gap: 8px; } .repo-info-funding-eyebrow { margin: 0; } .repo-info-funding-row { display: flex; flex-wrap: wrap; gap: 6px; } .funding-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); color: var(--fg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .funding-pill:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); } /* =========================================================================== Hero actions reorg + KPI strip (License/Stack) + AISO content upgrade — Wave 2F =========================================================================== */ /* Two-row hero action layout: a prominent primary row (Like / Watch / Compare / Visit / Discuss) and a quieter secondary row (Set alert / Tier list / Share / RSS). Both reuse .hero-actions for the flex baseline. */ .hero-actions-primary { margin-top: 14px; gap: 10px; row-gap: 10px; } .hero-actions-primary .btn, .hero-actions-primary .watch-btn, .hero-actions-primary .repo-like-btn, .hero-actions-primary .discuss-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; } .hero-actions-secondary { margin-top: 8px; gap: 6px; } .hero-actions-secondary .btn { font-size: 11px; } /* RepoLikeButton — primary-row pill that matches WatchButton's footprint and flips to an accent border + accent text when the viewer is liking. */ .repo-like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-bright); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .repo-like-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); } .repo-like-btn:disabled { opacity: 0.65; cursor: progress; } .repo-like-btn.is-liked, .repo-like-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .repo-like-btn .heart { width: 14px; height: 14px; } .repo-like-btn .repo-like-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); padding-left: 4px; border-left: 1px solid var(--border-subtle); margin-left: 2px; } .repo-like-btn.is-liked .repo-like-count, .repo-like-btn.on .repo-like-count { color: var(--accent); border-left-color: color-mix(in srgb, var(--accent) 35%, transparent); } /* DiscussButton — primary-row link with an inline count when comments exist. */ .discuss-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .discuss-btn .discuss-count { font-family: var(--font-mono); font-size: 11px; padding-left: 6px; margin-left: 2px; border-left: 1px solid color-mix(in srgb, var(--fg-bright) 25%, transparent); color: var(--fg-bright); opacity: 0.85; } /* ---------- AISO content-card upgrades ---------- */ /* Lead paragraph above the score/blocks grid. Uses --fg-bright for emphasis inside tags so the synthesized stats read like a headline. */ .aiso-lead { margin: 0 14px 6px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-2); color: var(--fg); font-size: 14px; line-height: 1.55; max-width: 96ch; } .aiso-lead b { color: var(--fg-bright); font-weight: 700; } /* Larger score block modifier — more padding, bigger score number, bigger tier chip. Composes on top of .aiso-score-block so the base spacing / layout stays consistent with the smaller variant if anything else opts in. */ .aiso-score-block-large { gap: 10px; padding: 18px; } .aiso-score-block-large .aiso-score-num { font-size: 48px; } .aiso-score-block-large .aiso-score-max { font-size: 18px; } .aiso-tier-chip-large { align-self: flex-start; padding: 5px 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; } /* Larger engine pills with engine name + "cited / total" rollup count. */ .aiso-engine-pill-large { min-height: 32px; padding: 4px 12px; gap: 8px; font-size: 12px; border-radius: 999px; } .aiso-engine-pill-large b { font-weight: 700; color: var(--fg-bright); } .aiso-engine-pill-large .aiso-engine-pill-count { font-family: var(--font-mono); font-size: 10px; color: var(--up); padding-left: 6px; border-left: 1px solid color-mix(in srgb, var(--up) 30%, transparent); } /* Block headings + rows — more breathing room for the upgraded layout. */ .aiso-card .aiso-body { padding: 18px; gap: 18px; } .aiso-card .aiso-block-head { font-size: 11px; } .aiso-card .aiso-block-rows { gap: 10px; } .aiso-card .aiso-row-label { font-size: 13px; } .aiso-card .aiso-issue { padding: 8px 10px; } .aiso-card .aiso-issue-title { font-size: 13px; } /* Standalone CTA above the foot row — full-bleed centered pill button. */ .aiso-cta { display: flex; justify-content: center; padding: 4px 14px 14px; } .aiso-cta .btn.primary.lg { border-radius: 999px; } /* =========================================================================== Repo profile layout — side-by-side row for Info + AISO (Wave 3) =========================================================================== */ .repo-detail-row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; align-items: start; } @media (max-width: 1180px) { .repo-detail-row-2 { grid-template-columns: 1fr; } } /* === RepoHealthCard (2026-05-24) * Grouped real-metric readout on /repo/[owner]/[name]. Answers the * "Production-ready vs hype?" question with a single sentence + a * 2-col grid of HealthMetric values. */ .repo-health-card { display: flex; flex-direction: column; } .repo-health-production-line { margin: 0; padding: 12px 14px; background: var(--surface-2); border-left: 3px solid var(--fg-faint); color: var(--fg); font-size: 13px; line-height: 1.45; } .repo-health-production-high { border-left-color: var(--accent); } .repo-health-production-medium { border-left-color: var(--warning); } .repo-health-production-experimental { border-left-color: var(--down); } .repo-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border-top: 1px solid var(--border-subtle); } .repo-health-metric { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface); min-width: 0; } .repo-health-metric-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); } .repo-health-metric-value { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--fg-bright); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repo-health-metric-value.level-up { color: var(--up); } .repo-health-metric-value.level-warn { color: var(--warning); } .repo-health-metric-value.level-down { color: var(--down); } .repo-health-metric-value.level-muted { color: var(--fg-faint); } .repo-health-metric-detail { font-size: 11px; color: var(--fg-muted); line-height: 1.35; } @media (max-width: 720px) { .repo-health-grid { grid-template-columns: 1fr; } } /* === RepoEcosystemContext (2026-05-24) * "Spike or market?" call + a related-repo list embedded in the same * card. Reuses .related-row chrome from the existing related-list * pattern — this block only adds the surrounding scaffolding. */ .ecosystem-context-card { display: flex; flex-direction: column; } .ecosystem-spike-line { margin: 0; padding: 12px 14px; background: var(--surface-2); border-left: 3px solid var(--fg-faint); color: var(--fg); font-size: 13px; line-height: 1.45; } .ecosystem-spike-line.is-market { border-left-color: var(--accent); } .ecosystem-spike-line.is-spike { border-left-color: var(--warning); } .ecosystem-spike-line.is-unknown { border-left-color: var(--fg-faint); } .ecosystem-section { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); } .ecosystem-section-head { padding: 12px 14px 6px; margin: 0; font-size: 12px; color: var(--fg-faint); } .ecosystem-related-list { padding: 0 0 4px; } .ecosystem-related-empty { margin: 0; padding: 6px 14px 14px; color: var(--fg-muted); font-size: 12px; line-height: 1.45; } .ecosystem-category-hint { margin: 0; padding: 10px 14px 14px; color: var(--fg-muted); font-size: 11px; line-height: 1.45; border-top: 1px solid var(--border-subtle); } /* =========================================================================== RepoWhyMoving + RepoWhatChanged — repo-profile narrative cards (Wave 3) --------------------------------------------------------------------------- Two stacked cards under the Info + AISO row on /repo/[owner]/[name]. Both consume the repo-intelligence synthesizer; styling reuses the .card, .card-head, .card-title, .chip primitives. No inline hex — every tone goes through tokens (var(--up), var(--down), var(--fg-bright), …). =========================================================================== */ /* ── RepoWhyMoving ─────────────────────────────────────────────────────── */ .why-moving-card { margin: 0; } .why-moving-head { justify-content: space-between; } .why-moving-chip { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .why-moving-body { display: flex; flex-direction: column; gap: 14px; } .why-moving-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .why-moving-row { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); font-weight: 400; } .why-moving-row.is-primary { color: var(--fg-bright); font-weight: 500; } .why-moving-icon { font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--accent); text-align: center; user-select: none; } .why-moving-row.is-primary .why-moving-icon { color: var(--accent-hover); } .why-moving-text { min-width: 0; } .why-moving-empty { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-muted); } .why-moving-foot { margin: 0; padding-top: 10px; border-top: 1px dashed var(--border-subtle); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--fg-faint); line-height: 1.45; } /* ── RepoWhatChanged ──────────────────────────────────────────────────── */ .what-changed-card { margin: 0; } .what-changed-head { justify-content: space-between; } .what-changed-chip { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); } .what-changed-body { display: flex; flex-direction: column; gap: 12px; } .what-changed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .what-changed-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .what-changed-col-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); padding-bottom: 4px; border-bottom: 1px solid var(--accent-line); } .what-changed-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .what-changed-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.4; min-width: 0; } .what-changed-row-label { color: var(--fg-muted); font-weight: 400; white-space: nowrap; } .what-changed-row-value { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; text-align: right; min-width: 0; } .what-changed-row-value.tone-up { color: var(--up); } .what-changed-row-value.tone-down { color: var(--down); } .what-changed-row-value.tone-muted { color: var(--fg-faint); } .what-changed-quiet { margin: 0; padding-top: 10px; border-top: 1px dashed var(--border-subtle); font-size: 12.5px; line-height: 1.45; color: var(--fg-muted); } /* Mobile (< 720px): 3-col grid collapses to 1-col with the column headers acting as horizontal section dividers across the full row. */ @media (max-width: 720px) { .what-changed-grid { grid-template-columns: 1fr; gap: 14px; } .what-changed-col-head { border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; } } /* =========================================================================== RepoOperatorTake — audience-specific CARE / WATCH / SKIP rows =========================================================================== */ .operator-take-card .card-body { display: flex; flex-direction: column; gap: 8px; } .operator-take-empty { color: var(--fg-muted); font-size: 12px; margin: 0; } .operator-take-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .operator-take-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .operator-take-row.is-care { border-color: color-mix(in srgb, var(--up) 28%, var(--border-subtle)); } .operator-take-row.is-watch { border-color: color-mix(in srgb, var(--warning) 28%, var(--border-subtle)); } .operator-take-row.is-skip { border-color: var(--border-subtle); opacity: 0.85; } .operator-take-stance { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-subtle); background: var(--surface-3); color: var(--fg-muted); text-align: center; width: 100%; } .operator-take-stance.is-care { color: var(--up); background: var(--up-soft); border-color: color-mix(in srgb, var(--up) 32%, transparent); } .operator-take-stance.is-watch { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 36%, transparent); } .operator-take-stance.is-skip { color: var(--fg-subtle); background: var(--surface-3); border-color: var(--border-subtle); } .operator-take-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .operator-take-audience { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-bright); } .operator-take-one-liner { font-size: 13px; line-height: 1.45; color: var(--fg-muted); } @media (max-width: 640px) { .operator-take-row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 9px 10px; } .operator-take-stance { font-size: 10px; padding: 5px 8px; letter-spacing: 0.10em; } .operator-take-one-liner { font-size: 12.5px; } } /* =========================================================================== RepoSuggestedAlerts — repo-tuned alert presets + CTA footer =========================================================================== */ .suggested-alerts-card .card-body { display: flex; flex-direction: column; gap: 12px; } .suggested-alerts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .suggested-alert-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-1); } .suggested-alert-row.is-recommended { border-color: color-mix(in srgb, var(--accent) 26%, var(--border-subtle)); background: color-mix(in srgb, var(--accent-wash) 65%, var(--surface-2)); } .suggested-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; color: var(--accent); } .suggested-alert-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .suggested-alert-label { font-size: 13px; font-weight: 600; color: var(--fg-bright); line-height: 1.35; } .suggested-alert-rationale { font-size: 11.5px; line-height: 1.4; color: var(--fg-muted); } .suggested-alert-tag { align-self: center; font-size: 9.5px; letter-spacing: 0.14em; white-space: nowrap; } .suggested-alerts-cta { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-top: 1px solid var(--border-subtle); background: var(--surface-2); border-radius: var(--r-1); } .suggested-alerts-cta .btn.primary.sm { align-self: flex-start; } .suggested-alerts-cta-helper { margin: 0; font-size: 11.5px; color: var(--fg-muted); line-height: 1.4; } @media (max-width: 640px) { .suggested-alert-row { grid-template-columns: 18px minmax(0, 1fr); } .suggested-alert-tag { grid-column: 1 / -1; justify-self: start; } } /* =========================================================================== RepoIntelligenceLead — verdict strip + signal summary card Sits directly under the hero. Operator-grade intelligence layer. =========================================================================== */ .intelligence-lead { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; } /* ---- Verdict strip — 5 colored pills in a row ---- */ .verdict-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .verdict-pill { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-2); transition: border-color 0.15s ease; } .verdict-pill:hover { border-color: var(--border); } .verdict-pill-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); } .verdict-pill-value { align-self: flex-start; padding: 3px 8px !important; font-size: 11px !important; font-weight: 600; } .verdict-pill-reason { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); line-height: 1.4; min-height: 1.4em; } /* Tone modifiers on the outer pill — adds a left accent stripe */ .verdict-pill-up { border-left: 3px solid var(--up); } .verdict-pill-warn { border-left: 3px solid var(--warning); } .verdict-pill-dn { border-left: 3px solid var(--down); } .verdict-pill-info { border-left: 3px solid var(--info); } /* ---- Signal summary card — the 4-sentence analyst brief ---- */ .signal-summary { margin: 0; } .signal-confidence { font-family: var(--font-mono); font-size: 10px !important; letter-spacing: 0.08em; text-transform: uppercase; } .signal-summary-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; } .signal-summary-lede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-bright); font-weight: 500; letter-spacing: -0.005em; } .signal-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .signal-summary-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-2); border-left: 2px solid var(--accent); } .signal-summary-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .signal-summary-text { font-size: 13px; line-height: 1.55; color: var(--fg); } /* ---- Responsive: collapse verdict strip + 3-col grid on narrow screens ---- */ @media (max-width: 1180px) { .verdict-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .signal-summary-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .verdict-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .verdict-pill { padding: 8px 10px; } .signal-summary-lede { font-size: 14px; } } /* ========================================================================= * Profile (pf-*) — reconciled against `Profile - standalone.html`. * The shared selectors below are copied verbatim from the standalone CSS * (C:/tmp/styles.css §pf-*). Token names already match — :root exposes the * standalone aliases. Hex literals for reaction on-states are tokenised * through --heart, --unicorn, --accent-hover. * * Live-only selectors used elsewhere in the app (pf-corner, pf-languages, * pf-faq, pf-const-*, pf-owner stats/links variants, pf-cmt-empty, * pf-engage-secondary, pf-rel-src source classes, pf-rel-meta .momentum, * etc.) are preserved in the trailing "Live-only carry-overs" block. * ========================================================================= */ /* ---------- LAYOUT ---------- */ .pf-main-inner { /* full width, no right rail on profile */ display: block; padding: 18px 22px 60px; max-width: 1440px; margin: 0 auto; } /* ---------- HERO ---------- */ .pf-hero-grid { display: grid; grid-template-columns: 1fr 360px; gap: 14px; margin-bottom: 14px; } .pf-hero { position: relative; padding: 22px 24px 18px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: radial-gradient(600px 220px at 100% 0%, rgba(255,107,53,0.10), transparent 60%), linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-shell) 100%); overflow: hidden; } .pf-hero::before { content: ""; position: absolute; top: 10px; left: 10px; width: 12px; height: 12px; border-top: 1px solid var(--accent-line); border-left: 1px solid var(--accent-line); } .pf-hero::after { content: ""; position: absolute; bottom: 10px; right: 10px; width: 12px; height: 12px; border-bottom: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); } .pf-crumb { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); letter-spacing: var(--t-data); margin-bottom: 14px; } .pf-crumb .owner { color: var(--text-muted); } .pf-crumb .sep { color: var(--text-dim); } .pf-crumb .name { color: var(--text); } .pf-crumb .pill { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: var(--r-xs); background: var(--bg-fill); border: 1px solid var(--border-default); color: var(--text-muted); font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; } .pf-crumb .lang-dot { width: 7px; height: 7px; border-radius: 50%; } .pf-id { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; } .pf-avatar { width: 76px; height: 76px; border-radius: var(--r-md); background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--text); flex-shrink: 0; letter-spacing: -0.02em; position: relative; overflow: hidden; } .pf-avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(255,107,53,0.18) 100%); pointer-events: none; } .pf-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 12px; } .pf-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1; color: var(--text); letter-spacing: -0.025em; margin-bottom: 6px; } .pf-tagline { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; max-width: 540px; } .pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .pf-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--r-xs); background: var(--bg-fill); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: var(--t-control); text-transform: uppercase; cursor: pointer; transition: all var(--motion-fast) var(--ease); } .pf-tag:hover { color: var(--text); border-color: var(--border-hover); } .pf-tag.primary { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .pf-tag.trend { background: var(--success-soft); color: var(--success); border-color: rgba(34,197,94,0.32); } /* ----- engagement bar (dev.to style) ----- */ .pf-engage { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--border-subtle); flex-wrap: wrap; } .pf-react { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r-md); background: var(--bg-fill); border: 1px solid var(--border-default); color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--motion-fast) var(--ease); font-family: var(--font-sans); } .pf-react:hover { background: var(--bg-strong); color: var(--text); border-color: var(--border-hover); } .pf-react .gly { font-size: 14px; line-height: 1; } .pf-react .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums; } .pf-react:hover .n { color: var(--text-muted); } .pf-react.heart.on { color: var(--heart); border-color: var(--heart-line); background: var(--heart-soft); } .pf-react.heart.on .n { color: var(--heart); } .pf-react.unicorn.on { color: var(--unicorn); border-color: var(--unicorn-line); background: var(--unicorn-soft); } .pf-react.unicorn.on .n { color: var(--unicorn); } .pf-react.bookmark.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .pf-react.bookmark.on .n { color: var(--accent); } .pf-react.primary { background: var(--accent); color: #08090a; font-weight: 600; border-color: rgba(255,107,53,0.4); box-shadow: 0 0 0 1px rgba(255,107,53,0.2), 0 0 18px rgba(255,107,53,0.18); } .pf-react.primary:hover { background: var(--accent-hover); color: #08090a; } .pf-engage .spacer { flex: 1 1 0; min-width: 8px; } /* ----- PULSE 24H side card ----- */ .pf-pulse { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bg-raised), var(--bg-shell)); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .pf-pulse-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); } .pf-pulse-head .live { display: inline-flex; align-items: center; gap: 5px; color: var(--success); } .pf-pulse-score { display: flex; align-items: center; gap: 14px; } .pf-pulse-grade { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; position: relative; } .pf-pulse-grade::after { content: "TRACKED"; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: var(--t-control); color: var(--text-dim); } .pf-pulse-main { flex: 1; min-width: 0; } .pf-pulse-num { font-family: var(--font-mono); font-size: 32px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 3px; } .pf-pulse-num .denom { font-size: 13px; color: var(--text-soft); } .pf-pulse-flags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .pf-flag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--t-data); } .pf-flag.rank { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .pf-flag.up { background: var(--success-soft); color: var(--success); border: 1px solid rgba(34,197,94,0.3); } .pf-flag.firing { background: rgba(96,165,250,0.10); color: var(--info); border: 1px solid rgba(96,165,250,0.3); } .pf-pulse-sec { border-top: 1px dashed var(--border-subtle); padding-top: 10px; } .pf-pulse-sec-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; } .pf-constellation { display: flex; gap: 8px; flex-wrap: wrap; } .pf-const-bub { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-soft); position: relative; cursor: pointer; transition: all var(--motion-fast) var(--ease); } .pf-const-bub.firing { color: var(--text); border-width: 1.5px; } .pf-const-bub.firing::after { content: attr(data-n); position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); } .pf-const-bub.silent { opacity: 0.55; } .pf-const-bub.silent::after { content: "0"; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); } .pf-const-row { padding-bottom: 16px; } .pf-dates { display: grid; grid-template-columns: auto 1fr auto 1fr; row-gap: 6px; column-gap: 10px; font-family: var(--font-mono); font-size: 11px; } .pf-dates .k { color: var(--text-dim); text-transform: uppercase; letter-spacing: var(--t-control); font-size: 9.5px; align-self: center; } .pf-dates .v { color: var(--text); font-variant-numeric: tabular-nums; } .pf-dates .v.dim { color: var(--text-dim); } /* ---------- SIGNAL SUMMARY (single prose card) ---------- */ .pf-section { margin-top: 22px; } .pf-summary { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bg-shell), var(--bg-canvas)); overflow: hidden; } .pf-summary-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-shell); } .pf-summary-head .l { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text); } .pf-summary-head .l .slash { color: var(--accent); } .pf-summary-head .l .dim { color: var(--text-soft); } .pf-summary-head .r { display: flex; align-items: center; gap: 10px; } .pf-summary-body { padding: 18px 22px 20px; } .pf-summary-body p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); font-family: var(--font-sans); text-wrap: pretty; max-width: 900px; } .pf-summary-body p + p { margin-top: 14px; } .pf-summary-body em { color: var(--accent); font-style: normal; font-weight: 500; } .pf-summary-body .num { color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .pf-summary-body strong { color: var(--text); font-weight: 600; } .pf-summary-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); border-top: 1px dashed var(--border-subtle); margin-top: 4px; } .pf-summary-foot a { color: var(--info); text-decoration: none; } .pf-summary-foot a:hover { color: var(--fg-bright); } .pf-summary-foot .bag { display: flex; gap: 14px; align-items: center; } /* ---------- OWNER + STATS (split row) ---------- */ .pf-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; } /* ---------- COMBINED OWNER + GITHUB SNAPSHOT (slim) ---------- */ .pf-combo { padding: 0; } .pf-combo-top { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); } .pf-combo-logo { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); } .pf-combo-id { min-width: 0; flex: 1; } .pf-combo-name { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; color: var(--text); } .pf-combo-bio { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 760px; } .pf-combo-links { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; max-width: 320px; justify-content: flex-end; } /* primary repo stats — single row of 6 cells */ .pf-combo-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border-subtle); } .pf-combo-stats .pf-stat { background: var(--bg-shell); padding: 11px 14px; } /* compact org strip — kv pairs inline */ .pf-combo-org { display: flex; flex-wrap: wrap; gap: 0; padding: 0; background: var(--bg-shell); border-top: 1px solid var(--border-subtle); } .pf-combo-org-kv { flex: 1 1 auto; min-width: 0; padding: 9px 14px; display: flex; align-items: baseline; gap: 8px; border-right: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; } .pf-combo-org-kv:last-child { border-right: none; } .pf-combo-org-kv .k { font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); flex-shrink: 0; } .pf-combo-org-kv .v { color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .pf-combo-org-kv .v.accent { color: var(--accent); } .pf-combo-org-kv .v.dim { color: var(--text-dim); } @media (max-width: 1280px) { .pf-combo-top { flex-wrap: wrap; } .pf-combo-links { max-width: 100%; justify-content: flex-start; flex-basis: 100%; } .pf-combo-stats { grid-template-columns: repeat(3, 1fr); } .pf-combo-org-kv { flex-basis: 50%; } } .pf-card { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bg-shell), var(--bg-canvas)); overflow: hidden; } .pf-card-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-shell); } .pf-card-head h3 { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text); } .pf-card-head h3 .slash { color: var(--accent); margin-right: 4px; } .pf-card-head .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); } /* owner card */ .pf-owner { padding: 18px 18px 16px; } .pf-owner-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .pf-owner-logo { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } .pf-owner-logo img { width: 75%; height: 75%; object-fit: contain; } .pf-owner-logo .glyph { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text); } .pf-owner-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--text); margin: 0 0 3px; display: flex; align-items: center; gap: 8px; } .pf-owner-verify { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--r-xs); background: var(--accent-soft); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 9px; color: var(--accent); letter-spacing: var(--t-control); text-transform: uppercase; font-weight: 600; } .pf-owner-bio { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); } .pf-owner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; } .pf-owner-kv { padding: 9px 12px; background: var(--bg-shell); display: flex; flex-direction: column; gap: 2px; } .pf-owner-kv .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); } .pf-owner-kv .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; } .pf-owner-kv .v a { color: var(--info); text-decoration: none; } .pf-owner-kv .v a:hover { color: var(--fg-bright); } .pf-owner-kv .v .ico { width: 11px; height: 11px; color: var(--text-soft); } .pf-owner-kv .v.success { color: var(--success); } .pf-owner-links { display: flex; flex-wrap: wrap; gap: 6px; } .pf-link-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: var(--r-md); background: var(--bg-fill); border: 1px solid var(--border-default); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; text-decoration: none; transition: all var(--motion-fast) var(--ease); } .pf-link-pill:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-strong); } .pf-link-pill .ico { width: 12px; height: 12px; } /* repo stats card */ .pf-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); } .pf-stat { background: var(--bg-shell); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .pf-stat .l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); } .pf-stat .v { font-family: var(--font-mono); font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } .pf-stat .v.dim { color: var(--text-dim); } .pf-stat .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); margin-top: 2px; } .pf-stat .sub.up { color: var(--success); } .pf-stat .sub.down { color: var(--danger); } .pf-stat .sub.warn { color: var(--warning); } /* ---------- CHARTS ---------- */ .pf-charts { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; } .pf-chart-card { padding: 0; } .pf-chart-body { padding: 14px 16px 12px; position: relative; } .pf-chart-tabs { display: flex; gap: 1px; background: var(--border-subtle); padding: 1px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); } .pf-chart-tabs button { background: var(--bg-shell); border: none; color: var(--text-soft); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--t-data); padding: 4px 9px; cursor: pointer; } .pf-chart-tabs button.active { background: var(--bg-fill); color: var(--accent); } .pf-chart-svg-wrap { width: 100%; position: relative; } .pf-chart-svg { display: block; width: 100%; height: auto; } .pf-chart-axis-y, .pf-chart-axis-x { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-dim); letter-spacing: var(--t-data); } .pf-chart-grid { stroke: var(--border-subtle); stroke-width: 1; } .pf-chart-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); margin-top: 6px; letter-spacing: var(--t-data); } .pf-chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 5px; } /* === PF-CHARTS — augmentation for RepoStarChart/RepoForkChart ============ * Adds head-right cluster, "all-time-window" pill, "today" legend pin, * empty-state, hover/focus polish, and Chart.js canvas wrapper. Base rules * above stay verbatim from the standalone — these only extend. * ─────────────────────────────────────────────────────────────────────── */ .pf-chart-head-right { display: flex; align-items: center; gap: 10px; } .pf-chart-window-total { font-family: var(--font-mono); font-size: 11px; color: var(--success); letter-spacing: var(--t-data, 0.04em); font-variant-numeric: tabular-nums; white-space: nowrap; } .pf-chart-tabs button:hover { color: var(--fg-bright, var(--fg)); } .pf-chart-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; position: relative; } .pf-chart-canvas { width: 100%; position: relative; } .pf-chart-legend { align-items: center; } .pf-chart-legend-today { margin-left: auto; color: var(--fg-bright, var(--fg)); font-variant-numeric: tabular-nums; } /* — Empty state (no series yet) ─────────────────────────────────────── */ .pf-chart-empty { display: flex; gap: 12px; align-items: flex-start; padding: 18px 16px; border: 1px dashed var(--border-subtle); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 80%, transparent); } .pf-chart-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm, 4px); background: var(--surface-3, var(--surface)); color: var(--fg-subtle); flex-shrink: 0; } .pf-chart-empty-title { font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright, var(--fg)); text-transform: uppercase; letter-spacing: var(--t-control, 0.08em); margin-bottom: 4px; } .pf-chart-empty-sub { font-family: var(--font-sans); font-size: 12px; color: var(--fg-muted); line-height: 1.5; } .pf-chart-empty-sub code { font-family: var(--font-mono); font-size: 11px; color: var(--accent); background: transparent; padding: 0; } @media (prefers-reduced-motion: reduce) { .pf-chart-tabs button { transition: none; } } @media (max-width: 1080px) { .pf-charts { grid-template-columns: 1fr; } } /* ---------- RELATED REPOS ---------- */ .pf-related-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); } .pf-rel { display: grid; grid-template-columns: 36px 1fr 240px 160px; gap: 18px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--motion-fast) var(--ease); position: relative; } .pf-rel:last-child { border-bottom: none; } .pf-rel:hover { background: var(--bg-muted); box-shadow: inset 3px 0 0 var(--accent); } .pf-rel-rank { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; } .pf-rel-id { display: flex; align-items: center; gap: 12px; min-width: 0; } .pf-rel-logo { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; } .pf-rel-logo img { width: 75%; height: 75%; object-fit: contain; } .pf-rel-text { min-width: 0; flex: 1; } .pf-rel-name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--text); margin-bottom: 3px; } .pf-rel-name .owner { color: var(--text-soft); } .pf-rel-name .sep { color: var(--text-dim); margin: 0 1px; } .pf-rel-why { font-size: 12px; color: var(--text-muted); line-height: 1.45; } .pf-rel-why .tag { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); background: var(--bg-fill); font-family: var(--font-mono); font-size: 10px; color: var(--text-soft); margin-right: 4px; } .pf-rel-mentions { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pf-rel-mentions .l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); } .pf-rel-srcs { display: flex; gap: 4px; flex-wrap: wrap; } .pf-rel-src { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: var(--r-xs); background: var(--bg-fill); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 10.5px; color: var(--text); font-variant-numeric: tabular-nums; } .pf-rel-src .logo { width: 11px; height: 11px; display: grid; place-items: center; } .pf-rel-src .logo img { width: 100%; height: 100%; } .pf-rel-src .n { color: var(--text-muted); font-size: 10.5px; } .pf-rel-meta { text-align: right; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .pf-rel-meta .stars { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; } .pf-rel-meta .mom { display: flex; align-items: center; gap: 6px; width: 100%; } .pf-rel-meta .mom-bar { flex: 1; height: 4px; background: var(--bg-fill); border-radius: var(--r-pill); overflow: hidden; } .pf-rel-meta .mom-fill { height: 100%; background: linear-gradient(90deg, var(--info), var(--success), var(--warning), var(--accent)); } .pf-rel-meta .mom-num { font-variant-numeric: tabular-nums; color: var(--text); width: 22px; text-align: right; } .pf-rel-meta .last { color: var(--text-dim); } /* ---------- COMMENTS ---------- */ .pf-comments { padding: 0; } .pf-cmt-compose { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-shell); } .pf-cmt-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-fill); border: 1px solid var(--border-default); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; flex-shrink: 0; } .pf-cmt-avatar.sm { width: 28px; height: 28px; font-size: 10.5px; } .pf-cmt-compose-box { flex: 1; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-canvas); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color var(--motion-base) var(--ease); } .pf-cmt-compose-box:focus-within { border-color: var(--border-hover); box-shadow: 0 0 0 2px rgba(255,107,53,0.10); } .pf-cmt-compose-box textarea { width: 100%; border: 0; background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; resize: none; outline: none; min-height: 38px; } .pf-cmt-compose-box textarea::placeholder { color: var(--text-soft); } .pf-cmt-compose-foot { display: flex; justify-content: space-between; align-items: center; } .pf-cmt-compose-foot .hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); } .pf-cmt-compose-foot .btns { display: flex; gap: 6px; } .pf-cmt-thread { display: flex; flex-direction: column; } .pf-cmt { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); } .pf-cmt:last-child { border-bottom: none; } .pf-cmt-body { min-width: 0; } .pf-cmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .pf-cmt-name { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text); } .pf-cmt-handle { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); } .pf-cmt-badge { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; border-radius: var(--r-xs); background: var(--bg-fill); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 9px; color: var(--text-soft); letter-spacing: var(--t-control); text-transform: uppercase; } .pf-cmt-badge.op { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .pf-cmt-badge.author { color: var(--info); border-color: rgba(96,165,250,0.3); background: rgba(96,165,250,0.10); } .pf-cmt-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); } .pf-cmt-text { font-size: 13px; line-height: 1.6; color: var(--text); text-wrap: pretty; } .pf-cmt-text code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-fill); padding: 1px 5px; border-radius: var(--r-xs); color: var(--accent); border: 1px solid var(--border-subtle); } .pf-cmt-text a { color: var(--info); text-decoration: none; } .pf-cmt-text a:hover { color: var(--fg-bright); text-decoration: underline; } .pf-cmt-actions { display: flex; gap: 4px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .pf-cmt-act { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--r-md); background: transparent; border: 1px solid transparent; color: var(--text-soft); font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all var(--motion-fast) var(--ease); } .pf-cmt-act:hover { background: var(--bg-fill); color: var(--text); border-color: var(--border-default); } .pf-cmt-act .gly { font-size: 12px; } .pf-cmt-act.on { color: var(--heart); } .pf-cmt-act.on.uni { color: var(--unicorn); } .pf-cmt-act.on.bk { color: var(--accent); } .pf-cmt-replies { margin-top: 12px; border-left: 1px solid var(--border-subtle); padding-left: 14px; display: flex; flex-direction: column; gap: 14px; } .pf-cmt-reply { display: grid; grid-template-columns: 28px 1fr; gap: 10px; } /* ---------- responsive ---------- */ @media (max-width: 1280px) { .pf-hero-grid { grid-template-columns: 1fr; } .pf-split { grid-template-columns: 1fr; } .pf-charts { grid-template-columns: 1fr; } .pf-rel { grid-template-columns: 32px 1fr 1fr; } .pf-rel-meta { display: none; } } @media (max-width: 900px) { .pf-id { flex-direction: column; gap: 10px; } .pf-title { font-size: 28px; } .pf-engage { gap: 6px; } .pf-rel { grid-template-columns: 1fr; } .pf-rel-mentions { display: none; } .pf-stats-grid { grid-template-columns: repeat(2, 1fr); } .pf-owner-grid { grid-template-columns: 1fr; } } /* ========================================================================= * Live-only carry-overs — pf-* selectors used by other surfaces in the repo * that the standalone template doesn't define. Preserved per Agent-1 brief * constraint #3 (don't remove pf-* selectors that exist in live but not in * the standalone — may be used by other surfaces). * ========================================================================= */ /* ---- Corner brackets (used on pf-owner; terminal aesthetic) ---- */ .pf-corner { position: absolute; width: 10px; height: 10px; border-color: var(--accent); pointer-events: none; opacity: 0.75; } .pf-corner-tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; } .pf-corner-tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; } .pf-corner-bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; } .pf-corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; } /* ---- pf-languages — horizontal stacked bar + legend ---- */ .pf-languages .pf-lang-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 16px; } .pf-lang-bar { display: flex; width: 100%; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-subtle); } .pf-lang-bar-seg { height: 100%; display: block; transition: filter 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-lang-bar-seg:hover { filter: brightness(1.18); } .pf-lang-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; list-style: none; padding: 0; margin: 0; } .pf-lang-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); min-width: 0; } .pf-lang-chip { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; } .pf-lang-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-lang-legend-pct { color: var(--fg-muted); margin-left: auto; font-size: 11px; } /* ---- pf-constellation — SVG ring + list ---- */ .pf-constellation .pf-const-body { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; padding: 14px; align-items: center; } .pf-const-svg { width: 100%; height: auto; max-width: 360px; display: block; } .pf-const-rings circle { fill: none; stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; } .pf-const-edges line { stroke: var(--accent); stroke-width: 1; transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-const-center-bg { fill: var(--surface-3); } .pf-const-center-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 0 6px var(--accent-glow)); } .pf-const-center-label { fill: var(--fg-bright); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; } .pf-const-node-bg { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; transition: fill 180ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-const-node:hover .pf-const-node-bg { fill: var(--surface-3); stroke: var(--accent); } .pf-const-node-label { fill: var(--fg); font-family: var(--font-mono); font-size: 10px; pointer-events: none; } .pf-const-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: pf-const; } .pf-const-list-row { counter-increment: pf-const; } .pf-const-list-link { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-2); background: var(--surface-2); color: var(--fg); text-decoration: none; font-size: 12px; transition: background 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-const-list-link::before { content: counter(pf-const, decimal-leading-zero); font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: 0.08em; } .pf-const-list-link:hover { background: var(--surface-3); border-color: var(--border-hover); } .pf-const-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-const-list-meta { color: var(--fg-muted); font-size: 11px; flex-shrink: 0; } @media (max-width: 760px) { .pf-constellation .pf-const-body { grid-template-columns: 1fr; } .pf-const-svg { max-width: 280px; margin: 0 auto; } } /* ---- pf-faq — accordion using native
/ ---- */ .pf-faq .pf-faq-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 14px 16px; } .pf-faq-item { border: 1px solid var(--border-subtle); border-radius: var(--r-2); background: var(--surface-2); overflow: hidden; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-faq-item[open] { border-color: var(--border-strong); } .pf-faq-q { cursor: pointer; list-style: none; padding: 12px 14px; font-size: 13px; font-weight: 500; color: var(--fg); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color 120ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-faq-q::-webkit-details-marker { display: none; } .pf-faq-q::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 16px; line-height: 1; transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pf-faq-item[open] .pf-faq-q::after { content: "−"; } .pf-faq-q:hover { color: var(--fg-bright); } .pf-faq-a { padding: 0 14px 14px; color: var(--fg-muted); font-size: 13px; line-height: 1.55; } .pf-faq-a a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; } .pf-faq-a a:hover { text-decoration-color: var(--accent); } .pf-faq-code { display: block; margin: 8px 0 0; padding: 8px 10px; background: var(--surface-3); border: 1px solid var(--border-subtle); border-radius: 2px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); overflow-x: auto; } /* ---- pf-owner — live-only sub-selectors used by RepoOwnerCard.tsx ---- Base `.pf-owner`, `.pf-owner-head`, `.pf-owner-name`, `.pf-owner-bio`, `.pf-owner-links` bodies are owned by the standalone block above. The selectors below are live-only additions (avatar/id/eyebrow/handle/cta/ stats/stat/stat-label/stat-value/link-item/link/link-static/link-icon) used by the existing React markup. */ .pf-owner-avatar { width: 96px; height: 96px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg-muted); } .pf-owner-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-owner-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pf-owner-eyebrow { font-size: 9.5px; letter-spacing: var(--t-meta); color: var(--accent); display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; } .pf-owner-handle { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.02em; } .pf-owner-cta { align-self: start; } .pf-owner-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-muted); margin: 0; } .pf-owner-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; } .pf-owner-stat-label { font-size: 9.5px; letter-spacing: var(--t-meta); color: var(--text-dim); text-transform: uppercase; } .pf-owner-stat-value { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; font-family: var(--font-display); margin: 0; } .pf-owner-link-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); } .pf-owner-link { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--border-strong); transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .pf-owner-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .pf-owner-link-static { border: none; cursor: default; } .pf-owner-link-icon { font-size: 11px; font-weight: 600; color: var(--text-muted); } /* ========================================================================= * Profile (pf-*) — live-only sub-selectors carried forward. * The bodies of `.pf-summary`, `.pf-combo`, `.pf-comments`, `.pf-engage`, * `.pf-related-list`, `.pf-rel*`, `.pf-dates`, `.pf-stat`, `.pf-react`, * `.pf-cmt-*` are owned by the standalone-verbatim block above. The block * below only contains additional sub-selectors that the standalone HTML * doesn't define but live React markup still uses. * ========================================================================= */ /* PF-SUMMARY — alternative eyebrow markup and inline accent helper used by live components (the standalone uses `.pf-summary-head .l .slash` / `.pf-summary-body em` instead). */ .pf-summary-head .pf-summary-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--t-meta); color: var(--fg-muted); } .pf-summary-credit { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; border-radius: var(--r-sm); } .pf-summary-body .accent { color: var(--accent); } /* PF-STAT (live variant): `
`. The standalone uses `.l/.v/.sub`; live components also use `.lbl/.val/.delta`. */ .pf-stat .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--text-soft); letter-spacing: var(--t-meta); } .pf-stat .val { font-family: var(--font-mono); font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; } .pf-stat .delta { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .pf-stat .delta.is-up { color: var(--up); } .pf-stat .delta.is-down { color: var(--down); } /* PF-COMBO-ORG-KV alt markup `
`. */ .pf-combo-org-kv .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--text-soft); letter-spacing: var(--t-meta); } .pf-combo-org-kv .val { font-family: var(--font-mono); font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* PF-COMMENTS — live-only extras (empty state, maint badge, paragraph spacing). */ .pf-cmt-empty { padding: 24px 12px; text-align: center; color: var(--text-soft); font-size: 12.5px; font-style: italic; } .pf-cmt-badge.maint { background: var(--info-soft); color: var(--info); border-color: var(--info-soft); } .pf-cmt-text p + p { margin-top: 8px; } /* PF-CMT-ACT — live variant uses `.count` child span and `.is-active` flag. */ .pf-cmt-act .count { font-family: var(--font-mono); font-size: 11px; color: inherit; font-variant-numeric: tabular-nums; } .pf-cmt-act.is-active { color: var(--reaction-on, var(--accent)); border-color: currentColor; background: color-mix(in srgb, var(--reaction-on, var(--accent)) 10%, transparent); box-shadow: 0 0 12px -4px currentColor; } /* PF-REACT — live variant `.count` + `.is-active`. */ .pf-react .count { font-family: var(--font-mono); font-size: 12px; color: inherit; font-variant-numeric: tabular-nums; } .pf-react.is-active { color: var(--reaction-on, var(--accent)); border-color: currentColor; background: color-mix(in srgb, var(--reaction-on, var(--accent)) 12%, var(--bg-fill)); box-shadow: 0 0 16px -6px currentColor; } .pf-engage-secondary { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } /* PF-RELATED — live-only header wrapper + alternative `.lang` chip on names. */ .pf-related-list .pf-section-head { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); } .pf-rel-name .lang { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: 6px; font-weight: 400; } /* PF-REL-SRC — source-tinted background variants used by the React grid (the standalone renders the source logo inline instead). */ .pf-rel-src.hackernews { background: color-mix(in srgb, var(--src-hackernews) 18%, transparent); } .pf-rel-src.reddit { background: color-mix(in srgb, var(--src-reddit) 18%, transparent); } .pf-rel-src.x { background: color-mix(in srgb, var(--src-x) 18%, transparent); } .pf-rel-src.bluesky { background: color-mix(in srgb, var(--src-bluesky) 18%, transparent); } .pf-rel-src.github { background: color-mix(in srgb, var(--src-github) 18%, transparent); } /* PF-REL-META .momentum (live variant; standalone uses `.mom .mom-bar`). */ .pf-rel-meta .momentum { width: 100%; height: 4px; background: var(--bg-fill); border-radius: var(--r-sm); overflow: hidden; margin-top: 2px; } .pf-rel-meta .momentum .fill { height: 100%; background: linear-gradient(90deg, var(--info), var(--up), var(--warning), var(--accent)); width: var(--m, 50%); } /* PF-DATES — alternative item markup `
`. */ .pf-dates .item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pf-dates .item .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--text-soft); letter-spacing: var(--t-meta); } .pf-dates .item .val { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ ACCOUNT PAGE — /account ──────────────────────────────────────────────────────────────────────────── Surfaces: AccountIdentityHero .id-hero / .id-avatar / .id-meta / .plan-card AccountYouStats .you-stats (5-cell KPI strip) .acc-grid page two-column layout (subnav + content) AccountSubnav .acc-subnav / .acc-subnav-link / .nav-count AccountAlertInbox .alert-row / .alert-mark / .alert-title / .alert-meta / .alert-time AccountWatchlistPreview .wlist-row / .wlist-name / .wlist-alert / .wlist-spark / .wlist-meta AccountReferralsCard .field (input) AccountActivityTimeline / Billing / API keys / Drops / Settings — all use .feed-item ─────────────────────────────────────────────────────────────────────────── */ /* — Identity hero ─────────────────────────────────────────────────────────── */ .id-hero { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 22px 24px; margin-top: 8px; background: radial-gradient(420px 240px at 4% -20%, var(--accent-wash), transparent 65%), linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); position: relative; overflow: hidden; } .id-hero::before, .id-hero::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent-line); pointer-events: none; } .id-hero::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .id-hero::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; } .id-avatar { width: 88px; height: 88px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent), var(--accent-dim)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: #0b0d0f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--accent-line), 0 10px 28px -12px var(--accent-glow); } .id-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .id-name { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg-bright); margin: 0; line-height: 1.1; } .id-handle { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.02em; } .id-handle b { color: var(--fg); font-weight: 500; } .id-bio { font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; margin: 4px 0 2px; max-width: 62ch; } .id-bio b { color: var(--fg); font-weight: 500; } .id-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .id-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* — Plan card (right column of hero) ──────────────────────────────────────── */ .plan-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; background: linear-gradient(180deg, var(--surface-3), var(--surface)); border: 1px solid var(--border-subtle); border-left: 2px solid var(--accent); border-radius: var(--r-md); position: relative; } .plan-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); } .plan-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--accent); line-height: 1; margin: 2px 0 4px; } .plan-cta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); line-height: 1.5; letter-spacing: 0.02em; } .plan-cta a { color: var(--accent); text-decoration: none; font-weight: 500; transition: color var(--d-fast) var(--ease); } .plan-cta a:hover { color: var(--accent-hover); } /* — You-stats (5-cell KPI strip; same DNA as .kpi-strip) ──────────────────── */ .you-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 16px 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; } .you-stats .kpi { padding: 14px 16px; background: var(--surface); } @media (max-width: 1100px) { .you-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .you-stats { grid-template-columns: repeat(2, 1fr); } } /* — Manage links (slim chip row to the power-user sub-routes) ─────────────── */ .acc-manage { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); } .acc-manage a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--fg-subtle); text-decoration: none; padding: 4px 11px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); transition: all var(--d-fast) var(--ease); } .acc-manage a:hover { color: var(--fg); border-color: var(--border-hover); background: var(--surface-2); } /* — Page-level layout grid ────────────────────────────────────────────────── */ .acc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; margin-top: 18px; } @media (max-width: 900px) { .acc-grid { grid-template-columns: 1fr; } } /* — Sub-nav (vertical tab strip) ──────────────────────────────────────────── */ .acc-subnav { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); position: sticky; top: 80px; align-self: start; } .acc-subnav-link { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-muted); text-decoration: none; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); position: relative; white-space: nowrap; } .acc-subnav-link:hover { background: var(--surface-2); color: var(--fg); } .acc-subnav-link.on { background: var(--surface-3); color: var(--fg-bright); } .acc-subnav-link.on::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; background: var(--accent); border-radius: 1px; } .acc-subnav-link svg { width: 14px; height: 14px; flex: 0 0 auto; } .acc-subnav-link .nav-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-subtle); background: var(--surface-2); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: var(--r-pill); min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; } .acc-subnav-link.on .nav-count { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-wash); } @media (max-width: 900px) { .acc-subnav { flex-direction: row; overflow-x: auto; position: static; padding: 6px; scrollbar-width: none; } .acc-subnav::-webkit-scrollbar { display: none; } .acc-subnav-link { flex: 0 0 auto; grid-template-columns: 16px auto auto; } .acc-subnav-link.on::before { left: 0; right: 0; top: auto; bottom: -6px; width: auto; height: 2px; } } /* — Alert inbox rows ──────────────────────────────────────────────────────── */ .alert-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); align-items: flex-start; position: relative; transition: background var(--d-fast) var(--ease); } .alert-row:hover { background: var(--surface-2); } .alert-row.unread { background: linear-gradient(90deg, var(--accent-wash), transparent 40%); } .alert-row.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } .alert-mark { width: 22px; height: 22px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--border-subtle); color: var(--fg-subtle); flex: 0 0 auto; } .alert-mark svg { width: 11px; height: 11px; } .alert-mark.release { color: var(--up); border-color: rgba(34, 197, 94, 0.25); background: var(--up-soft); } .alert-mark.breakout { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-wash); } .alert-mark.mention { color: var(--info); border-color: rgba(96, 165, 250, 0.25); background: var(--info-soft); } .alert-mark.digest { color: var(--warning); border-color: rgba(255, 181, 71, 0.25); background: var(--warning-soft); } .alert-mark.threshold { color: var(--violet); border-color: rgba(167, 139, 250, 0.25); background: rgba(167, 139, 250, 0.10); } .alert-title { font-family: var(--font-sans); font-size: 12.5px; color: var(--fg); line-height: 1.45; } .alert-title b { color: var(--fg-bright); font-weight: 500; } .alert-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); margin-top: 3px; letter-spacing: 0.04em; } .alert-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); letter-spacing: 0.04em; white-space: nowrap; padding-top: 2px; } /* — Watchlist row (Account watchlist preview) ─────────────────────────────── */ .wlist-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 92px auto; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border-subtle); align-items: center; transition: background var(--d-fast) var(--ease); } .wlist-row:hover { background: var(--surface-2); } .wlist-row .repo-avatar { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid var(--border-subtle); flex: 0 0 auto; } .wlist-name { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; color: var(--fg); min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wlist-name:hover { color: var(--fg-bright); } .wlist-row .muted { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); letter-spacing: 0.04em; } .wlist-alert { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); padding: 3px 8px; border-radius: var(--r-xs); border: 1px solid transparent; } .wlist-alert.on { color: var(--up); background: var(--up-soft); border-color: rgba(34, 197, 94, 0.25); } .wlist-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .wlist-meta .star { font-size: 12.5px; color: var(--fg-bright); font-weight: 500; } .wlist-meta .delta { font-size: 10.5px; color: var(--fg-subtle); } /* — Field input (referral copy bar, future settings inputs) ───────────────── */ .field { font-family: var(--font-mono); font-size: 12px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); width: 100%; letter-spacing: 0.02em; transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .field:read-only { background: var(--surface-2); color: var(--fg-muted); } /* — Feed item (override of global .feed-item for the account 2-child shape). The components emit labelvalue — a label/value row, not a 3-cell entry. Refit the grid here without touching call sites. */ .card .feed-item { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); align-items: baseline; background: transparent; } .card .feed-item:hover { background: var(--surface-2); } .card .feed-item:last-child { border-bottom: 0; } .card .feed-item b { font-family: var(--font-sans); font-size: 12.5px; color: var(--fg); font-weight: 500; } .card .feed-item span { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.02em; text-align: right; } .card .feed-item.is-fresh { position: relative; } .card .feed-item.is-fresh::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); } /* — Hero responsive collapse ──────────────────────────────────────────────── */ @media (max-width: 900px) { .id-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px 18px; } .id-avatar { width: 64px; height: 64px; font-size: 22px; } .plan-card { border-left-width: 2px; } .id-name { font-size: 22px; } } /* === PF-HERO live-only sub-selectors ===================================== Hero base (.pf-hero, .pf-hero-grid) and .pf-id / .pf-avatar / .pf-title / .pf-tagline / .pf-tags / .pf-tag are now owned by the standalone-verbatim block above. This section only adds sub-selectors / colour variants that live React markup uses but the standalone HTML does not. */ .pf-crumb .meta { color: var(--text-soft); text-transform: lowercase; } .pf-hero-row { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: flex-start; } .pf-id img, .pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-hero-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* PF-TAG semantic variants used by live React markup. The standalone defines only `.pf-tag.primary` / `.pf-tag.trend`; these add brand/up/dn/ warn/info on top so existing call-sites keep working. */ .pf-tag.brand { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .pf-tag.up { background: var(--up-soft); border-color: color-mix(in srgb, var(--up) 28%, transparent); color: var(--up); } .pf-tag.dn { background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 28%, transparent); color: var(--down); } .pf-tag.warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); } .pf-tag.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 28%, transparent); color: var(--info); } /* Small-screen tweaks for the live .pf-hero-row markup. The standalone already collapses .pf-hero-grid at 1280/900px; this adds the 640px refinement. */ @media (max-width: 640px) { .pf-hero-row { grid-template-columns: 56px 1fr; gap: 12px; } .pf-id, .pf-avatar { width: 56px; height: 56px; font-size: 24px; } } /* === PROFILE FOOTER ====================================================== Ported from C:/tmp/styles.css lines 1577-1608. 5-column grid with brand block + 4 nav columns, divider, then bottom row (copyright + refresh status). Lives under .pf-main-inner as a sibling. */ .footer { margin-top: 30px; padding: 26px 22px 50px; border-top: 1px solid var(--border-subtle); background: var(--bg-canvas); } .footer-inner { max-width: 1640px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 30px; } .footer h5 { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--t-control); text-transform: uppercase; color: var(--text-soft); font-weight: 500; } .footer a { display: block; padding: 4px 0; color: var(--text-muted); text-decoration: none; font-size: 12.5px; } .footer a:hover { color: var(--text); } .footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .footer .brand-block { max-width: 280px; } .footer .brand-tag { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-top: 8px; } .footer-bottom { max-width: 1640px; margin: 30px auto 0; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } @media (max-width: 1080px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } .footer .brand-block { grid-column: 1 / -1; } } @media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; } }