/* Opentrades — clean light-theme finance UI. */ :root { --bg: #ffffff; --bg-soft: #f7f8fb; --bg-tint: #eef2ff; --surface: #ffffff; --line: #e6e9ef; --line-strong: #d4d9e2; --fg: #0b1220; --fg-soft: #3b4252; --muted: #6b7280; --muted-soft: #9aa3b2; --accent: #2563eb; --accent-soft: #dbeafe; --accent-deep: #1d4ed8; --accent-fg: #ffffff; --good: #16a34a; --good-soft: #dcfce7; --bad: #dc2626; --bad-soft: #fee2e2; --low-bg: #ecfdf5; --low-fg: #047857; --mid-bg: #fffbeb; --mid-fg: #b45309; --high-bg: #fef2f2; --high-fg: #b91c1c; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --shadow-lg: 0 10px 30px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--muted); } .tabular { font-variant-numeric: tabular-nums; } .container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } /* ── Top navigation ─────────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(10px); position: sticky; top: 0; z-index: 10; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.5rem; max-width: 1120px; margin: 0 auto; } .brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.45rem; } .brand-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #60a5fa); display: inline-block; } .nav { display: flex; align-items: center; gap: 0.5rem; } /* `:not(.btn)` so button-styled anchors like the Sign up CTA keep their own color + padding. Otherwise this generic .nav a rule wins on specificity and bleeds dark-on-dark text into the button. */ .nav a:not(.btn) { color: var(--fg-soft); padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.94rem; font-weight: 500; } .nav a:not(.btn):hover { background: var(--bg-soft); text-decoration: none; } .nav a.active:not(.btn) { color: var(--accent); background: var(--accent-soft); } /* Theme toggle — sun/moon icon swap driven by */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin: 0 0.15rem; background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--fg-soft); transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease; } .theme-toggle:hover { background: var(--bg-soft); border-color: var(--line-strong); color: var(--fg); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .theme-toggle-icon { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Fallback when JS hasn't set data-theme yet — default is light, show moon */ html:not([data-theme]) .theme-toggle .icon-moon { display: block; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background-color 80ms ease, transform 80ms ease, box-shadow 80ms ease; text-decoration: none; } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: var(--accent-deep); text-decoration: none; } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--bg-soft); text-decoration: none; } .btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; } main.container { padding-top: 0; padding-bottom: 4rem; } /* Real footer styles live further down — see "Site footer" block. The small declarations here are kept light-weight so nothing depends on the short-footer reset. */ .site-footer { color: var(--muted); font-size: 0.9rem; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { padding: 5rem 0 3.5rem; text-align: center; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 0.35rem 0.85rem; border-radius: 999px; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; margin: 0 auto 1rem; max-width: 22ch; letter-spacing: -0.02em; font-weight: 700; } .hero .tagline { font-size: 1.15rem; color: var(--muted); max-width: 38rem; margin: 0 auto 2.25rem; } .search-form { display: flex; gap: 0.5rem; max-width: 36rem; margin: 0 auto 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem; box-shadow: var(--shadow); } .search-form input { flex: 1; padding: 0.75rem 1rem; font-size: 1rem; border: none; background: transparent; color: var(--fg); outline: none; } .search-form input::placeholder { color: var(--muted-soft); } .search-form button { padding: 0.75rem 1.4rem; } .search-error { color: var(--bad); margin-top: 0.75rem; } .hero-foot { color: var(--muted); margin-top: 1.5rem; font-size: 0.95rem; } /* ── Section banding ─────────────────────────────────────────────────────── */ .section { padding: 4rem 0; } .section.tinted { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .section-head h2 { font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; font-weight: 700; } .section-head p { color: var(--muted); margin: 0.35rem 0 0; } /* ── Cards ────────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.5rem; box-shadow: var(--shadow-sm); } .card-lg { padding: 2rem; border-radius: var(--radius-lg); } /* Preview cards (homepage): mini leaderboard tiles */ .preview-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .preview-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } a.preview-card:hover { transform: translateY(-1px); border-color: var(--accent, #2563eb); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08)); } .preview-card .pc-rank { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; } .preview-card .pc-profile { display: flex; align-items: center; gap: 0.6rem; } .preview-card .pc-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--line); flex-shrink: 0; } .preview-card .pc-handle { font-weight: 600; font-size: 1.05rem; color: var(--fg); } .preview-card .pc-stats { display: flex; justify-content: space-between; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; } .preview-card .pc-stats span { color: var(--muted); font-size: 0.85rem; } .preview-card .pc-stats strong { color: var(--fg); font-weight: 600; } /* ── Page heads ──────────────────────────────────────────────────────────── */ .page-head { padding: 3rem 0 1.5rem; } .page-head h1 { font-size: 2rem; margin: 0 0 0.35rem; letter-spacing: -0.015em; font-weight: 700; } .page-head .meta { color: var(--muted); } /* ── Sort filter tabs ────────────────────────────────────────────────────── */ .filter-tabs { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-soft); border: 1px solid var(--line); padding: 0.25rem; border-radius: 999px; } .filter-tabs a { padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.88rem; font-weight: 500; color: var(--fg-soft); } .filter-tabs a:hover { text-decoration: none; color: var(--fg); } .filter-tabs a.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); } /* ── Leaderboard table ───────────────────────────────────────────────────── */ .leaderboard-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .leaderboard { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .leaderboard th, .leaderboard td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); } .leaderboard thead th { background: var(--bg-soft); font-weight: 600; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .leaderboard tbody tr:last-child td { border-bottom: none; } .leaderboard tbody tr:hover { background: var(--bg-soft); } .leaderboard tbody tr.clickable-row { cursor: pointer; } .leaderboard .col-rank { width: 3rem; color: var(--muted-soft); font-weight: 600; } .leaderboard .col-num { text-align: right; } .leaderboard .col-risk { text-align: right; } .leaderboard .col-tickers { min-width: 7rem; } .leaderboard .col-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .leaderboard .col-sortable:hover { color: var(--accent); } .leaderboard .col-sortable .sort-icon { font-size: 0.7em; opacity: 0.4; margin-left: 2px; } .leaderboard .col-sortable.sorted { color: var(--accent); } .leaderboard .col-sortable.sorted .sort-icon { opacity: 1; } .leaderboard a { color: inherit; } .ticker-stack { display: flex; align-items: center; } .ticker-logo-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); border: 2px solid var(--surface); overflow: hidden; flex-shrink: 0; } .ticker-logo-wrap::before { content: attr(data-letter); font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; } .ticker-logo-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; } .ticker-logo-wrap.ticker-logo-stacked { margin-left: -8px; } .ticker-logo-wrap.ticker-logo-stacked:first-child { margin-left: 0; } .ticker-stack .ticker-more { margin-left: 4px; font-size: 0.72rem; font-weight: 600; color: var(--muted); white-space: nowrap; } .empty-row { text-align: center; color: var(--muted); padding: 2.5rem; } .pagination-row td { text-align: center; padding: 1rem; } .pagination-row a { margin: 0 0.75rem; color: var(--fg-soft); font-weight: 500; } .handle { font-weight: 600; color: var(--fg); } .handle:hover { color: var(--accent); } .handle-with-avatar { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .handle-with-avatar:hover { text-decoration: none; } .handle-with-avatar:hover span { color: var(--accent); } .row-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--bg-soft); flex-shrink: 0; } /* ── Pct + risk pill ─────────────────────────────────────────────────────── */ .pct { font-weight: 600; } .pct-pos { color: var(--good); } .pct-neg { color: var(--bad); } .pct-zero { color: var(--muted); } .risk-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .risk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; } .risk-low { background: var(--low-bg); color: var(--low-fg); } .risk-medium { background: var(--mid-bg); color: var(--mid-fg); } .risk-high { background: var(--high-bg); color: var(--high-fg); } /* ── Profile ─────────────────────────────────────────────────────────────── */ .profile-head { display: flex; gap: 1.5rem; align-items: center; padding: 2.5rem 0 2rem; } .avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--bg-soft); box-shadow: var(--shadow-sm); } .profile-id h1 { margin: 0 0 0.25rem; font-size: 1.85rem; letter-spacing: -0.015em; } .profile-id .meta { color: var(--muted); margin: 0 0 0.75rem; } .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } .metric { padding: 1.5rem 1.6rem; } .metric-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .metric-value { font-size: 2rem; margin: 0.5rem 0 0.25rem; letter-spacing: -0.02em; font-weight: 700; } .metric-foot { color: var(--muted); font-size: 0.9rem; } .risk-card { margin-bottom: 2rem; } .risk-card h2 { margin-top: 0; font-size: 1.25rem; } .rationale { padding-left: 1.1rem; margin: 0.75rem 0; } .rationale li { margin-bottom: 0.4rem; } .components { list-style: none; padding: 0; margin: 0.75rem 0 0; } .components li { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .components li:last-child { border-bottom: none; } .components span { color: var(--muted); text-transform: capitalize; } .bests { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; } .bests h2 { margin-top: 0; font-size: 1.15rem; } .pick-list { padding: 0; margin: 0.5rem 0 0; list-style: none; } .pick-list li { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; padding: 0.5rem 0; align-items: center; border-bottom: 1px solid var(--line); } .pick-list li:last-child { border-bottom: none; } .ticker { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 600; color: var(--fg); } .perf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .perf-table th, .perf-table td { padding: 0.75rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); } .perf-table tr:last-child td { border-bottom: none; } .perf-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-soft); } .perf-table td:nth-child(n+2), .perf-table th:nth-child(n+2) { text-align: right; } /* ── Pricing ─────────────────────────────────────────────────────────────── */ .pricing-hero { padding: 5rem 0 1.5rem; text-align: center; } .pricing-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 0.75rem; letter-spacing: -0.02em; } .pricing-hero p { color: var(--muted); max-width: 38rem; margin: 0 auto; } .pricing-card { max-width: 440px; margin: 2.5rem auto 0; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-lg); position: relative; } .pricing-card .plan-name { font-size: 0.85rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .pricing-card .price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.75rem 0 0.25rem; } .pricing-card .price .amount { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; } .pricing-card .price .period { color: var(--muted); font-size: 0.95rem; } .pricing-card .summary { color: var(--muted); margin: 0 0 1.5rem; } .pricing-card .features { list-style: none; padding: 0; margin: 0 0 1.75rem; } .pricing-card .features li { padding: 0.5rem 0; display: flex; gap: 0.6rem; align-items: flex-start; } .pricing-card .features li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11l6-7' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-top: 0.18rem; } .pricing-card form { margin: 0; } .pricing-card .btn { width: 100%; padding: 0.95rem 1.5rem; } .pricing-card .fine { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 1rem 0 0; } .notice { max-width: 540px; margin: 1.5rem auto 0; background: var(--bg-tint); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 0.9rem 1.1rem; color: var(--fg-soft); font-size: 0.92rem; } .notice.warn { background: var(--bad-soft); border-color: #fecaca; color: var(--high-fg); } /* ── Loading + error ─────────────────────────────────────────────────────── */ .loading-state { text-align: center; padding: 4rem 1rem 5rem; } .loading-state h1 { margin: 0 0 0.25rem; font-size: 1.5rem; } .loading-head { display: flex; align-items: center; justify-content: center; gap: 1rem; max-width: 560px; margin: 0 auto; text-align: left; } .loading-id { min-width: 0; } .loading-id p { margin: 0; } .spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); flex-shrink: 0; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .error-state h1 { margin-top: 0; } /* Cycling status phrases — JS adds .on to one at a time. */ .status-rotate { position: relative; height: 1.4em; overflow: hidden; color: var(--muted); font-size: 0.95rem; } .status-rotate span { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-rotate span::after { content: "…"; margin-left: 0.05em; } .status-rotate span.on { opacity: 1; transform: translateY(0); } .progress-count { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted-soft); font-variant-numeric: tabular-nums; } /* Live stream of classified mentions — only one card visible at a time, JS rotates through every ~650ms for a slot-machine feel. */ .analyzing-stream { list-style: none; padding: 0; position: relative; margin: 1.75rem auto 0; max-width: 560px; min-height: 90px; text-align: left; } .mini-tweet { position: absolute; inset: 0; display: flex; gap: 0.65rem; padding: 0.7rem 0.85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; } .mini-tweet.on { opacity: 1; transform: translateY(0); pointer-events: auto; } .mini-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft); } .mini-body { flex: 1; min-width: 0; } .mini-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); } .mini-head strong { color: var(--fg); font-weight: 600; } .mini-dot { color: var(--muted-soft); } .mini-pill { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--bg-soft); color: var(--fg-soft); } .mini-ticker { font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: 0; background: var(--bg-tint); color: var(--accent); } .mini-pill-bullish { background: var(--low-bg); color: var(--low-fg); } .mini-pill-bearish { background: var(--high-bg); color: var(--high-fg); } .mini-pill-neutral { background: var(--bg-soft); color: var(--muted); } .mini-text { margin: 0.3rem 0 0; color: var(--fg-soft); font-size: 0.88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 3rem 2rem; color: var(--muted); } .empty-state h2 { margin: 0 0 0.5rem; color: var(--fg); } .empty-state code { background: var(--bg-soft); border: 1px solid var(--line); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em; } /* ── Ticker explorer (profile body) ──────────────────────────────────────── */ .ticker-explorer { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; margin-bottom: 2rem; align-items: start; } .ticker-sidebar { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 0.75rem; box-shadow: var(--shadow-sm); } .ticker-sidebar h2 { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.25rem 0.75rem 0.75rem; font-weight: 600; } .ticker-sidebar ul { list-style: none; padding: 0; margin: 0; } .ticker-sidebar li { margin: 0; } .ticker-sidebar li a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--fg); text-decoration: none; border-left: 3px solid transparent; } .ticker-sidebar li a:hover { background: var(--bg-soft); text-decoration: none; } .ticker-sidebar li.active a { background: var(--accent-soft); border-left-color: var(--accent); } .ticker-sidebar .ticker { font-weight: 600; } .ticker-sidebar .ticker-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .ticker-sidebar .sidebar-ago { font-size: 0.7rem; color: var(--muted-soft); font-variant-numeric: tabular-nums; font-weight: 500; } .ticker-sidebar li.active .sidebar-ago { color: var(--accent); } .ticker-sidebar .sidebar-meta { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; } .ticker-sidebar li.hide { display: none; } .sidebar-search { padding: 0 0.5rem 0.6rem; } .sidebar-search input { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.88rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); outline: none; transition: border-color 80ms ease, background-color 80ms ease; } .sidebar-search input::placeholder { color: var(--muted-soft); } .sidebar-search input:focus { border-color: var(--accent); background: var(--surface); } /* Native search-input clear button — show in WebKit only; default browser chrome is fine. */ .sidebar-search input::-webkit-search-cancel-button { cursor: pointer; } .sidebar-empty { margin: 0.5rem 0.75rem 0; font-size: 0.85rem; color: var(--muted); } .sidebar-empty.hide { display: none; } .ticker-panel { padding: 1.5rem 1.75rem; min-width: 0; /* lets the inner canvas shrink in the grid */ } .ticker-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .ticker-panel-id h2 { margin: 0 0 0.25rem; font-size: 1.6rem; letter-spacing: -0.01em; } .ticker-panel-id .meta { color: var(--muted); margin: 0; } .metric-strip { display: flex; gap: 1.5rem; flex-wrap: wrap; } .metric-cell { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .metric-cell label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .metric-cell span { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .metric-cell small { color: var(--muted); font-size: 0.8rem; } .chart-wrap { position: relative; height: 360px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem; } .chart-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.95rem; pointer-events: none; } .marker-legend { display: flex; gap: 1.25rem; align-items: center; list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); } .marker-legend li.dot { display: inline-flex; align-items: center; gap: 0.45rem; } .marker-legend li.dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot-bullish::before { background: var(--good); } .dot-bearish::before { background: var(--bad); } .dot-neutral::before { background: var(--muted-soft); } /* Tweet-card tooltip — shown on chart-marker hover */ .tweet-card-tooltip { position: absolute; z-index: 9999; width: 340px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.85rem 1rem 0.75rem; opacity: 0; pointer-events: none; transition: opacity 90ms ease; font-family: var(--font); font-size: 0.92rem; line-height: 1.45; } .tcc-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.55rem; } .tcc-profile-link { display: flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; } .tcc-profile-link:hover .tcc-id strong { color: var(--accent); } .tcc-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); flex-shrink: 0; border: 1px solid var(--line); } .tcc-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .tcc-id strong { color: var(--fg); font-weight: 600; font-size: 0.95rem; } .tcc-id time { color: var(--muted); font-size: 0.78rem; } .tcc-pill { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 999px; flex-shrink: 0; } .tcc-bullish { background: var(--low-bg); color: var(--low-fg); } .tcc-bearish { background: var(--high-bg); color: var(--high-fg); } .tcc-body { margin: 0 0 0.75rem; white-space: pre-wrap; word-wrap: break-word; color: var(--fg); } .tcc-foot { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .tcc-meta { color: var(--muted); } .tcc-link { margin-left: auto; color: var(--accent); font-weight: 600; } .tcc-link:hover { text-decoration: underline; } /* Tweet list under the chart */ .tweet-list { margin-top: 2rem; } .tweet-list h3 { font-size: 1.05rem; margin: 0 0 0.85rem; color: var(--fg); } .tweet-list ol { list-style: none; padding: 0; margin: 0; } .tweet-row { display: flex; gap: 0.85rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.65rem; transition: border-color 100ms ease, box-shadow 100ms ease; } .tweet-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .tweet-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft); } .tweet-body { flex: 1; min-width: 0; /* allows long lines / URLs to wrap inside the flex child */ } .tweet-row-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: var(--muted); } .tweet-author { color: var(--fg); font-weight: 600; font-size: 0.95rem; } .tweet-dot { color: var(--muted-soft); } .tweet-date { color: var(--muted); font-variant-numeric: tabular-nums; } .tweet-sentiment { margin-left: auto; text-transform: uppercase; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.18rem 0.55rem; border-radius: 999px; } .tweet-row.tweet-bullish .tweet-sentiment { background: var(--low-bg); color: var(--low-fg); } .tweet-row.tweet-bearish .tweet-sentiment { background: var(--high-bg); color: var(--high-fg); } .tweet-row.tweet-neutral .tweet-sentiment { background: var(--bg-tint); color: var(--accent); } .tweet-text { margin: 0.45rem 0 0.65rem; color: var(--fg); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.5; } .tweet-row-foot { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; padding-top: 0.65rem; border-top: 1px solid var(--line); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .tweet-meta { color: var(--muted); } .tweet-link { margin-left: auto; font-size: 0.85rem; color: var(--accent); font-weight: 600; } @media (max-width: 720px) { .ticker-explorer { grid-template-columns: 1fr; } .ticker-sidebar { position: static; max-height: 240px; } .ticker-panel { padding: 1.1rem 1.1rem; } .ticker-panel-head { flex-direction: column; gap: 0.75rem; } .metric-strip { gap: 1rem; } .metric-cell { align-items: flex-start; text-align: left; } .chart-wrap { height: 280px; } } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .nav a:not(.btn) { padding: 0.45rem 0.6rem; font-size: 0.9rem; } .hero { padding: 3rem 0 2rem; } .metric-grid, .bests { grid-template-columns: 1fr; } .profile-head { flex-direction: column; align-items: flex-start; } .avatar { width: 72px; height: 72px; } .leaderboard th, .leaderboard td { padding: 0.7rem 0.6rem; } .leaderboard .col-tickers, .leaderboard th:nth-child(3), .leaderboard .col-num:nth-child(6), .leaderboard th:nth-child(6) { display: none; } /* Tweet cards on a 375-414px phone — tighter padding, smaller avatar, and a flex-wrap on the row head so the sentiment pill drops to a new line instead of getting cropped past the right edge. */ .tweet-row { gap: 0.6rem; padding: 0.75rem 0.85rem; } .tweet-avatar { width: 36px; height: 36px; } .avatar-wrap.tweet-avatar { font-size: 36px; } .tweet-row-head { flex-wrap: wrap; row-gap: 0.25rem; font-size: 0.85rem; } .tweet-date { white-space: nowrap; } .tweet-sentiment { /* Stop the pill being margin-left:auto'd off the right edge — let it wrap onto its own line on small screens. */ margin-left: 0; order: 4; flex-basis: 100%; align-self: flex-start; width: max-content; } .tweet-text { font-size: 0.95rem; } .tweet-row-foot { gap: 0.5rem; font-size: 0.8rem; padding-top: 0.55rem; } .tweet-link { margin-left: 0; flex-basis: 100%; } } /* Narrow phones (≤480px): the nav can't fit brand + 4 links + CTA on one line. Wrap to a second row, keep the brand + Sign up CTA most prominent so the page still feels balanced. */ @media (max-width: 480px) { .site-header-inner { flex-wrap: wrap; row-gap: 0.5rem; padding: 0.7rem 1rem; } .nav { gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; } .nav a:not(.btn) { padding: 0.35rem 0.55rem; font-size: 0.85rem; } .container { padding: 0 1rem; } } /* ── Homepage: stats strip ───────────────────────────────────────────────── */ .stats-strip { padding: 1.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.25rem; } .stat-tile { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; } .stat-tile .stat-num { font-family: "Inter Tight", var(--font); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.01em; color: var(--fg); line-height: 1; } .stat-tile .stat-label { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ── Homepage: smart-money spotlight ─────────────────────────────────────── */ .spotlight-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .spotlight-card { display: flex; flex-direction: column; gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .spotlight-card:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; } .spot-eyebrow { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .spotlight-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0; letter-spacing: -0.005em; color: var(--fg); } .spot-hero { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .spot-hero-meta { display: flex; flex-direction: column; gap: 0.2rem; } .spot-handle { font-weight: 600; color: var(--fg); } .spot-pct { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--muted); } .spot-cta { margin-top: auto; color: var(--accent); font-weight: 600; font-size: 0.9rem; } /* ── Homepage: feature grid ──────────────────────────────────────────────── */ .feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; } .feature-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.05em; } .feature h3 { margin: 0; font-size: 1.05rem; color: var(--fg); letter-spacing: -0.005em; } .feature p { margin: 0; color: var(--muted); font-size: 0.95rem; } /* ── Homepage: versus grid (FinTwit vs Opentrades) ────────────────────────── */ .versus-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .versus-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .versus-card h3 { margin: 0 0 0.85rem; font-size: 1.1rem; color: var(--fg); } .versus-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .versus-card li { position: relative; padding-left: 1.55rem; color: var(--fg-soft); font-size: 0.95rem; line-height: 1.45; } .versus-card li::before { position: absolute; left: 0; top: 0; width: 1.15rem; height: 1.15rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; } .versus-bad li::before { content: "×"; color: var(--bad); background: var(--bad-soft); } .versus-good li::before { content: "✓"; color: var(--good); background: var(--good-soft); } .versus-good { border-color: var(--good); } /* ── Homepage: FAQ ───────────────────────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 780px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; } .faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; font-size: 1rem; color: var(--fg); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: "+"; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.1rem; color: var(--muted); transition: transform 150ms ease; } .faq-item[open] > summary::after { content: "−"; } .faq-item[open] > summary { border-bottom: 1px solid var(--line); } .faq-body { padding: 0.9rem 1.25rem 1.1rem; color: var(--fg-soft); font-size: 0.95rem; line-height: 1.55; } .faq-body p { margin: 0; } .faq-body code { background: var(--bg-soft); border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.9em; } /* ── Homepage: bottom CTA band ───────────────────────────────────────────── */ .cta-band { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 3.5rem 0; } .cta-inner { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; } .cta-inner h2 { margin: 0 0 0.35rem; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.01em; color: var(--fg); } .cta-inner .muted { margin: 0; } .cta-form { margin: 0; max-width: 540px; } @media (min-width: 820px) { .cta-inner { grid-template-columns: 1fr auto; gap: 2.5rem; } } /* ── Site footer ───────────────────────────────────────────────────────────── Editorial four-column footer with a giant "FOLLOW THE SMART MONEY" watermark that fades into the page bottom. Colors flow from theme tokens so light/dark both work without overrides. ────────────────────────────────────────────────────────────────────────── */ .site-footer { margin-top: 4rem; background: var(--bg-soft); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; overflow: hidden; /* clip the watermark's bleed */ position: relative; } .site-footer-inner { max-width: 1120px; margin: 0 auto; padding: 4rem 1.5rem 0; } /* — Top: brand + link columns ———————————————————————————————————————— */ .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 3rem; align-items: start; padding-bottom: 3rem; border-bottom: 1px solid var(--line); } .footer-brand-block { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; } .footer-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; text-decoration: none; } .footer-brand:hover { text-decoration: none; color: var(--fg); } .footer-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; } .footer-brand-name { font-family: "Inter Tight", var(--font); } .footer-tagline { margin: 0; font-family: "Inter Tight", var(--font); font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); font-weight: 600; } .footer-tagline .muted { display: block; font-weight: 400; font-size: 0.98rem; color: var(--muted); letter-spacing: 0; } .footer-social { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-soft); font-size: 0.88rem; font-weight: 500; font-variant-numeric: tabular-nums; transition: color 100ms ease, border-color 100ms ease, background-color 100ms ease; } .footer-social:hover { color: var(--fg); border-color: var(--fg); text-decoration: none; background: var(--surface); } .footer-social svg { display: block; opacity: 0.9; } /* — Link columns —————————————————————————————————————————————————— */ .footer-col { display: flex; flex-direction: column; gap: 0.85rem; } .footer-col-h { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 500; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .footer-col a, .footer-inline-button { color: var(--fg-soft); font-size: 0.94rem; text-decoration: none; transition: color 80ms ease; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.94rem; text-align: left; } .footer-col a:hover, .footer-inline-button:hover { color: var(--accent); text-decoration: none; } .footer-inline-form { margin: 0; } /* — Giant watermark ——————————————————————————————————————————————— */ .footer-watermark { display: block; font-family: "Inter Tight", var(--font); font-size: clamp(3rem, 13vw, 10.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.88; text-align: center; white-space: nowrap; margin: 2.5rem 0 -1.5rem; background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 14%, transparent) 0%, color-mix(in srgb, var(--fg) 4%, transparent) 55%, transparent 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; user-select: none; pointer-events: none; } /* — Bottom strip: regulatory disclosure ——————————————————————————— */ .footer-bottom { position: relative; z-index: 1; padding: 1.75rem 0 2.25rem; border-top: 1px solid var(--line); } .footer-disclosure { display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.78rem; line-height: 1.65; color: var(--muted); } .footer-disclosure p { margin: 0; } .footer-disclosure strong { color: var(--fg-soft); font-weight: 600; } .footer-disclosure a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; } .footer-disclosure a:hover { color: var(--fg); text-decoration-color: var(--fg); } /* — Responsive ————————————————————————————————————————————————————— */ @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } .footer-brand-block { grid-column: 1 / -1; } .footer-watermark { margin: 1.5rem 0 -0.75rem; } .footer-bottom { grid-template-columns: 1fr; } } @media (max-width: 540px) { .site-footer-inner { padding: 3rem 1.25rem 0; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-brand-block { max-width: none; } } /* ── Legal pages (privacy + terms) ───────────────────────────────────────── */ .legal-page { max-width: 760px; margin: 0 auto; padding: 3rem 0 4rem; color: var(--fg-soft); font-size: 1rem; line-height: 1.65; } .legal-head { margin-bottom: 2rem; } .legal-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; } .legal-page h1 { font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--fg); font-weight: 700; } .legal-effective { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.92rem; } .legal-intro { color: var(--fg-soft); margin: 0; } .legal-section { margin-top: 2.2rem; } .legal-section h2 { font-size: 1.25rem; margin: 0 0 0.75rem; color: var(--fg); letter-spacing: -0.005em; } .legal-section h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; color: var(--fg); font-weight: 600; } .legal-section p { margin: 0 0 0.85rem; } .legal-section ul { margin: 0 0 0.85rem; padding-left: 1.25rem; } .legal-section li { margin-bottom: 0.4rem; } .legal-callout { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 1.25rem 1.5rem; border-radius: var(--radius); } .legal-callout-warn { border-left-color: var(--bad); background: var(--bad-soft); } .legal-callout-warn h2 { color: var(--bad); } .legal-footnote { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; } /* ── Nav additions: account chip + logout form ───────────────────────────── */ .nav-account { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.94rem; font-weight: 500; color: var(--fg-soft); } .nav-account:hover { background: var(--bg-soft); text-decoration: none; color: var(--fg); } .nav-account-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); display: inline-block; } .nav-logout-form { margin: 0; display: inline; } .nav-logout-form button { padding: 0.45rem 0.9rem; font-size: 0.9rem; } /* ── Auth pages (signup, login) ──────────────────────────────────────────── */ .auth-shell { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 240px); padding: 3rem 1rem; } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.25rem 2rem; box-shadow: var(--shadow); } .auth-head { margin-bottom: 1.5rem; text-align: center; } .auth-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; } .auth-head h1 { font-size: clamp(1.6rem, 3.5vw, 2rem); letter-spacing: -0.015em; font-weight: 700; margin: 0 0 0.4rem; color: var(--fg); } .auth-sub { margin: 0; color: var(--muted); font-size: 0.98rem; } .auth-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; } .auth-field { display: flex; flex-direction: column; gap: 0.35rem; } .auth-label { font-size: 0.85rem; font-weight: 600; color: var(--fg); } .auth-field input[type="date"] { padding: 0.7rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 1rem; font-family: var(--font); outline: none; transition: border-color 100ms ease, box-shadow 100ms ease; } .auth-field input[type="date"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .auth-hint { font-size: 0.82rem; color: var(--muted); } .auth-error { background: var(--bad-soft); color: var(--bad-fg, var(--bad)); border: 1px solid var(--bad); border-radius: var(--radius); padding: 0.65rem 0.85rem; font-size: 0.92rem; margin: 0; } .btn-google { width: 100%; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); padding: 0.85rem 1rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius); gap: 0.65rem; } .btn-google:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--accent); text-decoration: none; } .btn-google:disabled { opacity: 0.55; cursor: not-allowed; } .auth-tos { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; text-align: center; } .auth-alt { margin: 1.5rem 0 0; text-align: center; color: var(--muted); font-size: 0.93rem; } /* ── Account page meta list ──────────────────────────────────────────────── */ .account-meta { margin: 0; display: grid; gap: 0.5rem 1rem; grid-template-columns: max-content 1fr; font-size: 0.95rem; } .account-meta dt { color: var(--muted); font-weight: 500; } .account-meta dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; } /* ── Homepage: locked preview cards (blur tease) ─────────────────────────── */ .preview-card-locked { position: relative; } .locked-value { display: inline-block; filter: blur(7px); color: var(--fg); user-select: none; letter-spacing: 0.02em; transition: filter 200ms ease; } .preview-card-locked:hover .locked-value { filter: blur(9px); } .locked-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); border: 1px solid var(--line); color: var(--fg-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .locked-pill svg { opacity: 0.85; } /* ── Homepage: horizontal scrolling strip ────────────────────────────────── */ .scroll-section { padding-bottom: 3.5rem; } .scroll-strip { display: flex; gap: 0.9rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: max(1.5rem, calc((100vw - 1120px) / 2)); padding: 1rem max(1.5rem, calc((100vw - 1120px) / 2)) 1.5rem; /* Hide scrollbar on macOS-style trackpads; keep functional. */ scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; /* Soft fade on left + right edges to hint at more content. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .scroll-strip::-webkit-scrollbar { height: 6px; } .scroll-strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .scroll-strip::-webkit-scrollbar-track { background: transparent; } .strip-card { flex: 0 0 220px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .strip-card:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; } .strip-card-head { display: flex; align-items: center; gap: 0.6rem; } .strip-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--line); flex-shrink: 0; } .strip-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .strip-handle { font-weight: 600; font-size: 0.95rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strip-rank { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; } .strip-stats { display: flex; align-items: baseline; gap: 0.45rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; } .strip-ytd { font-family: "Inter Tight", var(--font); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); } .strip-ytd-label { font-size: 0.7rem; color: var(--muted); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .strip-card .pct-pos { color: var(--good); } .strip-card .pct-neg { color: var(--bad); } .strip-card .strip-ytd .pct { /* Inherit when wrapped in */ color: inherit; } /* ── Avatar with first-letter fallback ─────────────────────────────────── unavatar.io is rate-limited by X and occasionally 404s. The macro emits a span.avatar-wrap[data-letter] with the inside; img.onerror removes the img, exposing the CSS-rendered initial underneath. Sizes and border-radius are still owned by the per-context class (.avatar / .row-avatar / .pc-avatar / .tweet-avatar / .strip-avatar / .mini-avatar). Source order matters: this block follows the per-context rules so the gradient + letter win over their flat backgrounds. */ .avatar-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #6b8df0, #2c5fe6); color: #fff; font-weight: 700; text-transform: uppercase; user-select: none; line-height: 1; } .avatar-wrap::before { content: attr(data-letter); display: block; font-size: 0.42em; } .avatar-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; } /* Letter size in absolute px so 88px wrappers get a 36px "M" and 28px leaderboard rows get an 11px one. (`::before { font-size: 0.42em }` above scales off these values.) */ .avatar-wrap.avatar { font-size: 88px; } .avatar-wrap.tweet-avatar { font-size: 44px; } .avatar-wrap.strip-avatar { font-size: 40px; } .avatar-wrap.pc-avatar { font-size: 36px; } .avatar-wrap.tcc-avatar { font-size: 36px; } .avatar-wrap.mini-avatar { font-size: 32px; } .avatar-wrap.row-avatar { font-size: 28px; } /* ── Footer: theme-toggle row ────────────────────────────────────────────── */ .footer-theme-row { display: flex; justify-content: flex-end; margin-bottom: 1.1rem; } .footer-theme-row .theme-toggle { width: auto; height: auto; padding: 0.4rem 0.85rem 0.4rem 0.65rem; gap: 0.45rem; border-radius: 999px; background: var(--surface); color: var(--fg-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .footer-theme-row .theme-toggle:hover { color: var(--fg); border-color: var(--fg); } .theme-toggle-label { line-height: 1; } /* ── Ticker page (reverse-lookup) ────────────────────────────────────────── */ .ticker-head { padding: 3.5rem 0 1.5rem; text-align: left; } .ticker-head .ticker-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.5rem; } .ticker-head h1 { font-family: "Inter Tight", var(--font); font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.02em; font-weight: 800; margin: 0 0 0.75rem; color: var(--fg); line-height: 1; } .ticker-head .ticker-sub { margin: 0 0 0.5rem; font-size: 1rem; color: var(--fg-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ticker-head .ticker-sub strong { color: var(--fg); } .ticker-head .ticker-prose { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--fg-soft); max-width: 70ch; } .ticker-head .ticker-prose strong { color: var(--fg); } .ticker-foot { margin: 1.5rem 0 0; font-size: 0.82rem; color: var(--muted); } /* — Sentiment pill (also used by the per-creator stance column) ——————— */ .pill { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .pill-good { background: var(--good-soft); color: var(--good); } .pill-bad { background: var(--bad-soft); color: var(--bad); } .pill-neutral { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); } /* — Inline creator chip used in tables ——————————————————————————— */ .row-creator { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); text-decoration: none; font-weight: 500; } .row-creator:hover { color: var(--accent); text-decoration: none; } /* Ticker title becomes a discreet link to /tickers/{T}. Inherits the h2 color so it doesn't read as a "hot" link, only on hover. */ .ticker-panel-id h2 a.ticker-link { color: inherit; text-decoration: none; } .ticker-panel-id h2 a.ticker-link:hover { color: var(--accent); text-decoration: none; } .all-callers-link { color: var(--accent); text-decoration: none; font-weight: 500; } .all-callers-link:hover { text-decoration: underline; } /* ── App shell (/app/*) ──────────────────────────────────────────────────── Nansen-style data-dense dashboard. Persistent 220px sidebar + main panel with a top-bar (search + actions) and tight screener tables. Reuses the existing color tokens — only the LAYOUT rules + density changes here. */ .app-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; background: var(--bg-soft); } .app-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; padding: 0.85rem 0.7rem 0.85rem; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; font-size: 0.9rem; } .app-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: -0.01em; font-size: 1rem; color: var(--fg); padding: 0.4rem 0.5rem 0.9rem; white-space: nowrap; } .app-brand:hover { text-decoration: none; } .app-brand-name { line-height: 1; } /* Section label between nav groups: "MAIN", "ACCOUNT" etc. */ .app-nav-label { font-size: 0.66rem; font-weight: 700; color: var(--muted-soft); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 0.7rem 0.3rem; } .app-nav { display: flex; flex-direction: column; gap: 0.1rem; } /* Flat row: icon + label inline. No nested rows, no subtitle column — the previous grid layout collapsed "Log in" into two stacked lines for items without an icon. */ .app-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 7px; color: var(--fg-soft); font-size: 0.9rem; font-weight: 500; border-left: 3px solid transparent; white-space: nowrap; line-height: 1.2; min-height: 36px; /* keeps icon-less rows the same height */ } .app-nav-item svg { flex-shrink: 0; color: var(--muted); width: 16px; height: 16px; } .app-nav-item:hover { background: var(--bg-soft); text-decoration: none; color: var(--fg); } .app-nav-item:hover svg { color: var(--fg-soft); } .app-nav-item.active { background: var(--accent-soft); color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; } .app-nav-item.active svg { color: var(--accent); } .app-sidebar-divider { height: 1px; background: var(--line); margin: 0.6rem 0.5rem; } .app-sidebar-spacer { flex: 1; } /* push secondary nav to the bottom */ .app-nav-secondary { display: flex; flex-direction: column; gap: 0.1rem; } .app-nav-back { color: var(--muted); font-size: 0.82rem; } .app-nav-back svg { color: var(--muted); width: 14px; height: 14px; } .app-logout-form { padding: 0; margin: 0; } .app-logout-form button { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; background: transparent; border: none; border-radius: 7px; color: var(--muted); font: inherit; font-size: 0.9rem; cursor: pointer; text-align: left; white-space: nowrap; } .app-logout-form button:hover { background: var(--bg-soft); color: var(--fg); } /* ── Main content panel ──────────────────────────────────────────────── */ .app-main { min-width: 0; /* lets tables shrink in the grid */ display: flex; flex-direction: column; } /* Sticky top-bar — page title on the left, search + actions on the right. Sits above the scroll content; gives the screener a real product shell instead of floating naked under a giant title. */ .app-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.5rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); min-height: 56px; } .app-topbar-title { font-size: 0.95rem; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; } .app-topbar-crumb { color: var(--muted-soft); font-weight: 500; margin: 0 0.4rem; } .app-topbar-meta { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 0.5rem; } .app-topbar-meta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 0.45rem; vertical-align: middle; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); } .app-topbar-search { flex: 1; max-width: 360px; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; margin-left: auto; position: relative; } .app-topbar-search input { flex: 1; border: none; background: transparent; font: inherit; font-size: 0.88rem; color: var(--fg); outline: none; } .app-topbar-search input::placeholder { color: var(--muted-soft); } .app-topbar-search svg { color: var(--muted); width: 14px; height: 14px; flex-shrink: 0; } .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; border-radius: 8px; background: var(--card-bg, #fff); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100; overflow: hidden; } .search-dropdown:empty { display: none; } .search-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; color: var(--fg); text-decoration: none; font-size: 0.85rem; transition: background 0.1s; } .search-result:hover { background: var(--bg-soft); } .search-result-icon { font-size: 0.9rem; flex-shrink: 0; } .search-result-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .search-result-label { font-weight: 600; } .search-result-sublabel { margin-left: 0.4rem; font-weight: 400; font-size: 0.8rem; color: var(--muted); } .search-result-meta { margin-left: auto; font-size: 0.75rem; color: var(--muted); } .search-empty { padding: 0.75rem; font-size: 0.82rem; color: var(--muted); text-align: center; } .app-topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .app-content { padding: 1.25rem 1.5rem 3rem; } /* Page head — denser than before. Title is meaningful but doesn't dominate the viewport with empty space. */ .app-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .app-page-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.015em; font-weight: 700; line-height: 1.15; } .app-page-head .meta { color: var(--muted); margin: 0.25rem 0 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .app-page-head-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .btn-sm { padding: 0.45rem 0.85rem; font-size: 0.82rem; font-weight: 600; } /* Ticker-index filter input — paired with the page-head actions slot */ .ticker-filter-input { padding: 0.45rem 0.85rem; font: inherit; font-size: 0.85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; color: var(--fg); outline: none; min-width: 220px; transition: border-color 120ms ease, background-color 120ms ease; } .ticker-filter-input::placeholder { color: var(--muted-soft); } .ticker-filter-input:focus { border-color: var(--accent); background: var(--surface); } /* In-shell filter tabs */ .filter-tabs-app { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .filter-tabs-app a { padding: 0.4rem 0.85rem; border-radius: 7px; font-size: 0.82rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .filter-tabs-app a:hover { color: var(--fg); text-decoration: none; background: var(--bg-soft); } .filter-tabs-app a.active { color: var(--accent-deep); background: var(--accent-soft); border-color: transparent; } /* ── Screener — dense data table ─────────────────────────────────────── */ .screener-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .screener-wrap .leaderboard { font-size: 0.875rem; } /* Tighter rows than the marketing leaderboard. No sticky header — the wrap's `overflow: hidden` + the parent topbar's sticky positioning made the sticky thead overlap the first body row at certain scroll offsets. For 5-50 rows the tradeoff favors a clean static header. */ .screener-wrap .leaderboard thead th { background: var(--bg-soft); font-size: 0.7rem; padding: 0.55rem 0.85rem; } .screener-wrap .leaderboard td { padding: 0.6rem 0.85rem; font-variant-numeric: tabular-nums; } .screener-wrap .leaderboard tbody tr { transition: background-color 120ms ease; } .screener-wrap .leaderboard tbody tr:hover { background: var(--bg-tint); } .screener-table .col-ticker { min-width: 8rem; } .screener-table .col-num { font-feature-settings: "tnum"; font-weight: 600; } .screener-table .col-sentiment { min-width: 11rem; width: 16rem; } .screener-table .col-pickers { min-width: 14rem; } .screener-row { cursor: pointer; } .screener-table td { padding-top: 0.5rem; padding-bottom: 0.5rem; vertical-align: middle; } .screener-table .picker-chip-row { flex-wrap: nowrap; overflow: hidden; } /* Ticker cell — logo + symbol with monospace styling for $TICKER */ .ticker-link { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); font-weight: 700; font-size: 0.92rem; font-family: "JetBrains Mono", "Fira Mono", "SF Mono", Menlo, monospace; letter-spacing: -0.01em; } .ticker-link:hover { color: var(--accent); text-decoration: none; } .ticker-link .ticker-logo { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft); margin: 0; } .ticker-link .ticker-logo-wrap { width: 22px; height: 22px; border: 1px solid var(--line); } .ticker-link .ticker-logo-wrap::before { font-size: 0.6rem; } /* Sentiment bar — wider, with always-visible labels */ .sentiment-cell { display: flex; flex-direction: column; gap: 0.3rem; min-width: 11rem; } .sentiment-bar { display: flex; height: 5px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); } .sentiment-bar-lg { height: 8px; margin-bottom: 0.5rem; } .sentiment-bar-bull { background: var(--good); } .sentiment-bar-bear { background: var(--bad); } .sentiment-bar-label { display: inline-flex; gap: 0.45rem; align-items: center; font-size: 0.76rem; font-variant-numeric: tabular-nums; font-weight: 500; } /* Picker chips — compact, clickable, sentiment-coded border accent */ .picker-chip-row { display: flex; gap: 0.3rem; flex-wrap: wrap; } .picker-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem 0.2rem 0.25rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: var(--fg-soft); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .picker-chip:hover { background: var(--surface); border-color: var(--accent); color: var(--fg); text-decoration: none; } .picker-chip .chip-avatar { width: 18px; height: 18px; font-size: 9px; border-radius: 50%; } .picker-chip-bullish { border-color: var(--good-soft); } .picker-chip-bearish { border-color: var(--bad-soft); } .chip-handle { line-height: 1; } /* Smart-money leaderboard inside the app shell — same density treatment */ .app-content .leaderboard-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .app-content .leaderboard { font-size: 0.875rem; } .app-content .leaderboard thead th { background: var(--bg-soft); font-size: 0.7rem; padding: 0.55rem 0.85rem; } .app-content .leaderboard td { padding: 0.6rem 0.85rem; } .app-content .leaderboard tbody tr { transition: background-color 120ms ease; } .app-content .leaderboard tbody tr:hover { background: var(--bg-tint); } /* Ticker drill-down (/app/tickers/{ticker}) */ .ticker-detail-head { display: flex; align-items: center; gap: 1rem; } .ticker-detail-logo { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft); } .ticker-detail-head h1 { margin: 0; } .ticker-detail-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .metric-sentiment { display: flex; flex-direction: column; } .sentiment-hero { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.5rem 0 0.75rem; line-height: 1; } .sentiment-hero .sentiment-hero-pct { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; } .sentiment-hero-word { font-size: 0.95rem; font-weight: 600; text-transform: lowercase; } .sentiment-hero-word--bullish { color: var(--good); } .sentiment-hero-word--bearish { color: var(--bad); } .sentiment-tug-track { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); margin-bottom: 0.75rem; } .sentiment-tug-bull { background: linear-gradient(90deg, var(--good-soft), var(--good)); } .sentiment-tug-bear { background: linear-gradient(90deg, var(--bad), var(--bad-soft)); } .sentiment-tug-counts { display: flex; justify-content: space-between; gap: 0.5rem; } .sentiment-tug-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .sentiment-tug-chip--bull { background: var(--good-soft); color: var(--good); } .sentiment-tug-chip--bear { background: var(--bad-soft); color: var(--bad); } .sentiment-tug-arrow { font-size: 0.85em; opacity: 0.85; line-height: 1; } .ticker-detail-chart { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; } .ticker-detail-pickers { margin-bottom: 1.5rem; } .ticker-detail-pickers h2 { margin: 0 0 1rem; font-size: 1.15rem; } .picker-summary-list { list-style: none; padding: 0; margin: 0; } .picker-summary-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .picker-summary-row:last-child { border-bottom: none; } .picker-summary-link { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); font-weight: 600; } .picker-summary-link:hover { color: var(--accent); text-decoration: none; } .picker-summary-mix { display: inline-flex; gap: 0.4rem; font-size: 0.88rem; } .picker-summary-perf { font-weight: 600; } .ticker-detail-calls h2 { margin: 1.25rem 0 0.75rem; font-size: 1.15rem; } /* ── Call feed (Home) ──────────────────────────────────────────────────────── */ .call-feed { display: flex; flex-direction: column; gap: 1.25rem; } .call-card { background: var(--card-bg, #fff); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; border-left: 4px solid var(--line); } .call-card--win { border-left-color: var(--green, #16a34a); } .call-card--loss { border-left-color: var(--red, #dc2626); } .call-card--pending { border-left-color: var(--muted, #94a3b8); } .call-card-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; } .call-card-dot { width: 8px; height: 8px; border-radius: 50%; } .dot-scored { background: var(--green, #16a34a); } .dot-pending { background: var(--muted, #94a3b8); } .call-card-label { font-weight: 600; color: var(--fg); } .call-card-subtitle { color: var(--muted); margin-left: auto; } .call-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); } .call-card-body > * { background: var(--card-bg, #fff); padding: 1.25rem; } .call-card-post-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .call-card-profile-link { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; } .call-card-profile-link:hover .call-card-handle { color: var(--accent); } .call-card-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; } .call-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .call-card-author { display: flex; flex-direction: column; } .call-card-handle { font-weight: 600; font-size: 0.9rem; } .call-card-meta { font-size: 0.75rem; color: var(--muted); } .call-card-view { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--accent); text-decoration: none; } .call-card-view:hover { text-decoration: underline; } .call-card-text { font-size: 0.85rem; line-height: 1.5; color: var(--fg); margin: 0 0 0.5rem; word-break: break-word; } .call-card-time { font-size: 0.72rem; color: var(--muted); } .call-card-parsed { display: flex; flex-direction: column; gap: 0.75rem; } .call-card-parsed-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; } .call-card-parsed-head::before { content: "⚡"; font-size: 0.8rem; } .call-card-asset, .call-card-stance, .call-card-hit-rate { display: flex; align-items: baseline; gap: 0.5rem; } .call-card-asset-label, .call-card-stance-label, .call-card-hit-rate-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); min-width: 50px; } .call-card-ticker { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .sentiment-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; } .sentiment-pill--bullish { background: #dcfce7; color: #166534; } .sentiment-pill--bearish { background: #fee2e2; color: #991b1b; } /* Generic stat pill — same shape as .sentiment-pill so secondary metrics sit alongside the stance chip without visual whiplash. Tier modifier tints by threshold so a low hit rate reads as a warning at a glance. */ .stat-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-pill--good { background: var(--low-bg); color: var(--low-fg); } .stat-pill--mid { background: var(--mid-bg); color: var(--mid-fg); } .stat-pill--bad { background: var(--high-bg); color: var(--high-fg); } .stat-pill--neutral { background: var(--bg-soft); color: var(--fg-soft); border: 1px solid var(--line); } .call-card-snippet { font-size: 0.82rem; color: var(--fg); line-height: 1.45; margin: 0; } .call-card-tag { display: inline-block; font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0.15rem 0.45rem; } .call-card-outcome { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--bg-subtle, #f8fafc); } .call-card-outcome-section { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem; } .call-card-outcome-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } .call-card-price { font-size: 1.1rem; font-weight: 600; font-family: var(--font-mono, monospace); } .call-card-pct { font-size: 0.75rem; } .call-card-outcome-arrow { font-size: 1.2rem; color: var(--muted); } .call-card-result { margin-left: auto; text-align: right; } .call-card-result-value { font-size: 1.2rem; font-weight: 700; font-family: var(--font-mono, monospace); padding: 0.3rem 0.7rem; border-radius: 6px; } .call-card-result-value.pct-pos { background: #dcfce7; color: #166534; } .call-card-result-value.pct-neg { background: #fee2e2; color: #991b1b; } .call-card-pending { color: var(--muted); font-style: italic; } .call-feed-pagination { display: flex; justify-content: center; padding: 1rem 0; } /* Mobile: bottom-anchored tab bar for primary nav. */ @media (max-width: 840px) { .app-shell { grid-template-columns: 1fr; } .app-sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 1000; flex-direction: row; align-items: stretch; padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); border-right: none; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -1px 6px rgba(0,0,0,0.06); overflow: visible; } .app-brand, .app-nav-label, .app-nav-secondary, .app-sidebar-divider, .app-sidebar-spacer { display: none; } .app-nav { flex-direction: row; gap: 0; width: 100%; justify-content: space-around; } .app-nav-item { flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.45rem 0 0.35rem; border-radius: 0; border-left: none; font-size: 0.65rem; font-weight: 500; min-height: auto; flex: 1; color: var(--muted); } .app-nav-item svg { width: 22px; height: 22px; } .app-nav-item:hover { background: transparent; } .app-nav-item.active { background: transparent; border-left-color: transparent; color: var(--accent-deep); } .app-nav-item.active svg { color: var(--accent); } .app-main { padding-bottom: 56px; } .app-topbar { padding: 0.55rem 1rem; flex-wrap: wrap; min-height: auto; } .app-topbar-search { max-width: 100%; } .app-content { padding: 1rem 1rem 1.5rem; } .ticker-detail-metrics { grid-template-columns: 1fr; } .screener-table .col-sentiment, .screener-table .col-pickers { display: none; } .call-card-body { grid-template-columns: 1fr; } .call-card-outcome { flex-wrap: wrap; gap: 0.5rem; } .call-card-result { margin-left: 0; width: 100%; text-align: left; margin-top: 0.5rem; } } /* ────────────────────────────────────────────────────────────────────────── Marketing surface — landing, /how-it-works, /about, /pricing redesign. All classes prefixed `.ml-*` to keep them isolated from the app shell styles above. Browser-frame chrome (`.browser-frame`) is shared across marketing surfaces to make embedded screenshots look productized. ────────────────────────────────────────────────────────────────────── */ /* ── browser-frame chrome (wraps screenshots) ───────────────────────── */ .browser-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; } .browser-frame-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .browser-frame-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; } .browser-frame-dot:nth-child(1) { background: #ff5f57; } .browser-frame-dot:nth-child(2) { background: #febc2e; } .browser-frame-dot:nth-child(3) { background: #28c840; } .browser-frame-url { flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 0.18rem 0.85rem; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browser-frame img { display: block; width: 100%; height: auto; background: var(--bg-soft); } .browser-frame-fallback-content { display: none; } /* When the screenshot fails to load, swap in a placeholder block so the layout doesn't collapse. The `onerror` handler in the template adds .browser-frame-fallback to the parent. */ .browser-frame.browser-frame-fallback img { display: none; } .browser-frame.browser-frame-fallback { min-height: 400px; } .browser-frame.browser-frame-fallback .browser-frame-fallback-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; gap: 0.5rem; text-align: center; background: linear-gradient(135deg, var(--bg-soft), var(--accent-soft)); } .browser-frame.browser-frame-fallback .browser-frame-fallback-content strong { font-size: 1.15rem; color: var(--fg); } /* ── landing hero (split layout) ────────────────────────────────────── */ .ml-hero { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; } .ml-hero-copy { display: flex; flex-direction: column; gap: 1.25rem; } .ml-hero-copy h1 { font-family: "Inter Tight", "Inter", sans-serif; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; margin: 0; } .ml-hero-copy .tagline { font-size: 1.1rem; line-height: 1.55; color: var(--fg-soft); margin: 0; max-width: 36rem; } .ml-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; } .ml-hero-proof { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); } .ml-hero-proof-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; } .ml-hero-proof-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; } .ml-hero-picker { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--fg); font-size: 0.88rem; transition: color 0.12s ease; } .ml-hero-picker:hover { color: var(--accent); } .ml-hero-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--bg-soft); } .ml-hero-avatar img { width: 100%; height: 100%; object-fit: cover; } .ml-hero-handle { font-weight: 500; } .ml-hero-ytd { font-family: "JetBrains Mono", monospace; font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; } .ml-hero-search { margin-top: 0.25rem; max-width: 100%; } .ml-hero-shot { position: relative; } .browser-frame-hero { transform: rotate(-1deg); transform-origin: center; } .ml-hero-callouts { display: none; } @media (min-width: 900px) { .ml-hero-callouts { display: block; position: absolute; inset: 0; pointer-events: none; } .ml-hero-callout { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.72rem; font-weight: 600; color: var(--fg); box-shadow: var(--shadow); white-space: nowrap; } .ml-hero-callout code { background: var(--accent-soft); color: var(--accent-deep); padding: 0 0.3rem; border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; } .ml-hero-callout-1 { top: 6%; right: -8%; } .ml-hero-callout-2 { top: 45%; left: -10%; } .ml-hero-callout-3 { bottom: 6%; right: -4%; } } /* ── trust strip ────────────────────────────────────────────────────── */ .ml-trust-strip { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.75rem 0; } .ml-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; text-align: center; } .ml-trust-tile { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .ml-trust-num { font-family: "Inter Tight", "Inter", sans-serif; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); } .ml-trust-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } /* ── shared section helpers ─────────────────────────────────────────── */ .section-head-centered { flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem; } .section-head-centered > div { max-width: 38rem; } .section-head-centered h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; } .center { text-align: center; } .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; } /* ── problem grid (3-up) ───────────────────────────────────────────── */ .ml-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .ml-problem-card { padding: 1.5rem; position: relative; } .ml-problem-num { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 0.15rem 0.5rem; border-radius: 6px; margin-bottom: 0.85rem; } .ml-problem-card h3 { font-size: 1.05rem; margin: 0 0 0.45rem; letter-spacing: -0.01em; } .ml-problem-card p { margin: 0; color: var(--fg-soft); line-height: 1.5; } /* ── solution 3-up (screenshot cards) ───────────────────────────────── */ .ml-solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .ml-solution-card { display: flex; flex-direction: column; gap: 1rem; } .ml-solution-card .browser-frame { aspect-ratio: 16 / 10; } .ml-solution-card h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; } .ml-solution-card p { margin: 0; font-size: 0.92rem; color: var(--fg-soft); line-height: 1.5; } /* ── how it works (3-step pipeline) ─────────────────────────────────── */ .ml-howit-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: stretch; margin-bottom: 2.5rem; } .ml-howit-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; } .ml-howit-num { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 0.95rem; font-family: "JetBrains Mono", monospace; } .ml-howit-step h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; } .ml-howit-step p { margin: 0; color: var(--fg-soft); font-size: 0.9rem; line-height: 1.5; } .ml-howit-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--muted); } .ml-howit-shot { max-width: 920px; margin: 0 auto; } .ml-howit-link { text-align: center; margin: 2rem 0 0; } /* ── feature pillars (4-up grid) ────────────────────────────────────── */ .ml-pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .ml-pillar { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .ml-pillar-shot { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 7 / 4; } .ml-pillar-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .ml-pillar.browser-frame-fallback .ml-pillar-shot { background: linear-gradient(135deg, var(--bg-soft), var(--accent-soft)); } .ml-pillar h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; } .ml-pillar p { margin: 0; color: var(--fg-soft); font-size: 0.92rem; line-height: 1.5; } /* ── how-it-works page (long-form pillar layout) ────────────────────── */ .marketing-hero { max-width: 800px; margin: 0 auto; padding: 4rem 1.5rem 2.5rem; text-align: center; } .marketing-hero-tight { padding: 3rem 1.5rem 1.5rem; } .marketing-hero .eyebrow { display: inline-block; margin-bottom: 0.85rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 600; } .marketing-hero h1 { font-family: "Inter Tight", "Inter", sans-serif; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0; } .marketing-hero .tagline { font-size: 1.05rem; color: var(--fg-soft); line-height: 1.55; max-width: 38rem; margin: 1rem auto 0; } .method-pillar-grid { display: flex; flex-direction: column; gap: 3rem; } .method-pillar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center; } .method-pillar:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .method-pillar:nth-child(even) .method-step-shot { order: -1; } .method-step-num { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 0.2rem 0.65rem; border-radius: 6px; margin-bottom: 0.85rem; } .method-pillar h2 { margin: 0 0 0.85rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; } .method-step-lede { font-size: 1.02rem; color: var(--fg); line-height: 1.5; margin: 0 0 1rem; } .method-step-detail { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .method-step-detail li { padding-left: 1.25rem; position: relative; font-size: 0.92rem; color: var(--fg-soft); line-height: 1.5; } .method-step-detail li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 600; } .method-step-shot .browser-frame { aspect-ratio: 16 / 10; } .risk-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .risk-signal { padding: 1.35rem; position: relative; } .risk-signal-weight { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; color: var(--fg); background: var(--bg-soft); border: 1px solid var(--line); padding: 0.15rem 0.5rem; border-radius: 6px; margin-bottom: 0.65rem; } .risk-signal h3 { margin: 0 0 0.4rem; font-size: 1.05rem; letter-spacing: -0.01em; } .risk-signal p { margin: 0; color: var(--fg-soft); font-size: 0.92rem; line-height: 1.5; } .exclusions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .exclusion { padding: 1.35rem; } .exclusion h3 { margin: 0 0 0.4rem; font-size: 1.05rem; letter-spacing: -0.01em; } .exclusion p { margin: 0; color: var(--fg-soft); font-size: 0.92rem; line-height: 1.5; } /* ── about page prose ───────────────────────────────────────────────── */ .prose { max-width: 720px; margin: 0 auto; } .prose h2 { font-size: 1.4rem; letter-spacing: -0.015em; margin: 2.25rem 0 0.85rem; } .prose h2:first-of-type { margin-top: 0; } .prose p { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.6; color: var(--fg-soft); } .prose p code { background: var(--bg-soft); border: 1px solid var(--line); padding: 0.05rem 0.35rem; border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 0.92rem; color: var(--fg); } /* ── pricing redesign ───────────────────────────────────────────────── */ .ml-pricing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; max-width: 1200px; margin: 0 auto; } .ml-pricing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow); } .ml-pricing-card .plan-name { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; } .ml-pricing-card .price { display: flex; align-items: baseline; gap: 0.35rem; font-family: "Inter Tight", "Inter", sans-serif; } .ml-pricing-card .amount { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); } .ml-pricing-card .period { color: var(--muted); font-size: 1rem; } .ml-pricing-card .summary { margin: 0; font-size: 1rem; color: var(--fg-soft); line-height: 1.5; } .ml-pricing-features { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; } .ml-pricing-features li { padding-left: 1.65rem; position: relative; font-size: 0.95rem; color: var(--fg); line-height: 1.45; } .ml-pricing-features li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 16px; height: 16px; background-color: var(--good); mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .ml-pricing-cta { width: 100%; margin-top: 0.75rem; } .ml-pricing-card .fine { font-size: 0.78rem; color: var(--muted); margin: 0.35rem 0 0; text-align: center; } .ml-pricing-shot { position: sticky; top: 1.5rem; } .ml-pricing-shot .browser-frame { aspect-ratio: 16 / 10; } /* ── CTA band (refresh existing) ────────────────────────────────────── */ .cta-band .cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .cta-band .cta-actions form { display: inline; } /* ── mobile responsive (consolidated breakpoint for marketing) ───────── */ @media (max-width: 920px) { .ml-hero { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.25rem 1.5rem; } .ml-hero-shot { order: 2; } .browser-frame-hero { transform: none; } .method-pillar, .method-pillar:nth-child(even) { grid-template-columns: 1fr; gap: 1.5rem; } .method-pillar:nth-child(even) .method-step-shot { order: 0; } .ml-howit-pipeline { grid-template-columns: 1fr; } .ml-howit-arrow { transform: rotate(90deg); padding: 0.25rem 0; } .ml-pricing-grid { grid-template-columns: 1fr; gap: 2rem; } .ml-pricing-shot { position: static; } }