/* theme.css – DARK-mode palette only (everything here fires only when ) */ /* 1) tokens */ [data-theme="dark"] { /* Colours */ --c-bg: #0d0f14; --c-surface: #13171f; --c-primary: #01d2ff; --c-success: #2ee670; --c-danger: #ff3659; --c-text: #e0e4ef; --c-text-muted: #8a90a2; /* Typography */ --font-sans: 'Inter','Helvetica Neue',sans-serif; --fs-base: 16px; --fs-sm: 14px; --fs-lg: 20px; --fs-xl: 32px; /* Layout */ --radius: 8px; /* Stage 2: dropped the cyan blur-bomb shadow; chart-page now inherits Block J slate-blue tokens with no glow. Other dark pages get a clean transparent value so they don't render a cyan halo either. */ --shadow: none; } /* 2) element styles (dark-only) */ [data-theme="dark"] body{ font-family: var(--font-sans); font-size: var(--fs-base); color: var(--c-text); background: var(--c-bg); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3{ font-weight:600; line-height:1.2; color:var(--c-text); } [data-theme="dark"] button, [data-theme="dark"] select{ border-radius:var(--radius); font-size:var(--fs-base); padding:.6rem 1.1rem; } [data-theme="dark"] .chart-container{ background:var(--c-surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; } /* (You can migrate additional dark-specific rules from neon.css here later) */ /* ── Subscriber Tier Badges ─────────────────────────────── */ /* Design reference: .strategy-tile--active (dashboard nav pill) border-color: rgba(56,189,248,.72) background: rgba(56,189,248,.12) box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 14px rgba(56,189,248,.18) PREMIUM → miniaturised sibling of STRATEGY PRO ON — same cyan system MONTHLY → quiet slate pill, no glow — confident but restrained */ .ss-tier-badge { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1; vertical-align: middle; white-space: nowrap; transition: box-shadow .2s ease, border-color .2s ease; } .ss-tier-badge--monthly { background: rgba(148,163,184,0.07); border: 1px solid rgba(148,163,184,0.32); color: #94a3b8; box-shadow: none; } .ss-tier-badge--premium { background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.72); color: #bae6fd; box-shadow: 0 0 0 1px rgba(56,189,248,0.18), 0 0 10px rgba(56,189,248,0.22); } /* ── Hot Pairs Now Card ─────────────────────────────────── */ .hot-pairs-card { margin-bottom: 1.1rem; } .hot-pairs-header { display: flex; align-items: center; gap: .65rem; margin-bottom: .3rem; } .hot-pairs-title { font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: #f1f5f9; } .hot-pairs-subtitle { font-size: .78rem; opacity: .55; margin: 0 0 .85rem; } .hot-pairs-section { margin-bottom: .75rem; } .hot-pairs-section:last-child { margin-bottom: 0; } .hot-pairs-section-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; opacity: .45; margin-bottom: .4rem; } .hot-pairs-row { display: flex; align-items: center; justify-content: flex-start; gap: .7rem; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: .85rem; } .hot-pairs-pair-block { display: inline-flex; align-items: baseline; gap: .4rem; flex-shrink: 0; } .hot-pairs-row:last-child { border-bottom: none; } .hot-pairs-pair { font-weight: 600; color: #e2e8f0; } .hot-pairs-tf { font-size: .75rem; opacity: .6; min-width: 2.2rem; } .hot-pairs-return { font-weight: 700; min-width: 3.8rem; text-align: right; } .hot-pairs-wins { font-size: .78rem; opacity: .65; min-width: 3rem; text-align: right; } .hot-pairs-arrow { font-size: 1rem; min-width: 1.2rem; text-align: center; } .hot-pairs-row--up .hot-pairs-return, .hot-pairs-row--up .hot-pairs-arrow { color: #22c55e; } .hot-pairs-row--down .hot-pairs-return, .hot-pairs-row--down .hot-pairs-arrow { color: #ef4444; } .hot-pairs-empty { font-size: .8rem; opacity: .5; margin: .25rem 0 0; }