/* ── Funds module theme ───────────────────────────────── */ body[data-theme="light"] main { background: #0f172a; min-height: calc(100vh - 52px); padding: 0; } /* ── Shared utility classes ──────────────────────────── */ .funds-loading { text-align: center; color: #64748b; padding: 48px 16px; font-size: 14px; } .funds-error { text-align: center; color: #ef4444; padding: 20px 16px; font-size: 14px; } /* ── Landing page ────────────────────────────────────── */ .funds-landing { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; } .funds-hero { text-align: center; padding: 48px 20px 40px; border-bottom: 1px solid #1e293b; margin-bottom: 40px; } .funds-hero__title { font-size: 36px; font-weight: 700; margin: 0 0 8px; background: linear-gradient(135deg, #0ea5e9, #6366f1, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .funds-hero__subtitle { font-size: 18px; color: #94a3b8; margin: 0 0 16px; font-weight: 500; } .funds-hero__desc { font-size: 14px; color: #64748b; line-height: 1.7; max-width: 560px; margin: 0 auto 24px; } .funds-hero__cta { display: inline-block; padding: 10px 24px; border-radius: 8px; background: #4f46e5; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; } .funds-hero__cta:hover { background: #6366f1; } /* Flow list */ .funds-flows { margin-bottom: 48px; } .funds-flows__heading { font-size: 18px; font-weight: 600; color: #e2e8f0; margin: 0 0 16px; } .funds-flows__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .funds-flows__empty { text-align: center; color: #64748b; padding: 32px 16px; font-size: 14px; } .funds-flows__empty a { color: #6366f1; text-decoration: none; } .funds-flows__empty a:hover { text-decoration: underline; } .funds-flow-card { display: block; text-decoration: none; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .funds-flow-card:hover { border-color: #6366f1; transform: translateY(-1px); } .funds-flow-card__name { font-size: 15px; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } .funds-flow-card__value { font-size: 20px; font-weight: 700; color: #0ea5e9; margin-bottom: 4px; } .funds-flow-card__meta { font-size: 12px; color: #64748b; } /* About / how-it-works section */ .funds-about { margin-bottom: 48px; } .funds-about__heading { font-size: 18px; font-weight: 600; color: #e2e8f0; margin: 0 0 16px; } .funds-about__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .funds-about__card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 20px; } .funds-about__icon { font-size: 28px; margin-bottom: 8px; } .funds-about__card h3 { font-size: 15px; font-weight: 600; color: #e2e8f0; margin: 0 0 8px; } .funds-about__card p { font-size: 13px; color: #94a3b8; line-height: 1.6; margin: 0; } /* ── Detail view ─────────────────────────────────────── */ .funds-detail { max-width: 1100px; margin: 0 auto; padding: 16px 20px 64px; } .funds-detail__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .funds-detail__back { color: #64748b; text-decoration: none; font-size: 13px; padding: 4px 0; } .funds-detail__back:hover { color: #e2e8f0; } .funds-detail__title { font-size: 22px; font-weight: 700; color: #e2e8f0; margin: 0; flex: 1; } .funds-detail__badge { font-size: 11px; font-weight: 600; color: #fbbf24; background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.3); border-radius: 4px; padding: 2px 8px; } /* ── Tabs ────────────────────────────────────────────── */ .funds-tabs { display: flex; gap: 4px; border-bottom: 1px solid #1e293b; margin-bottom: 20px; } .funds-tab { padding: 8px 18px; border: none; border-bottom: 2px solid transparent; background: transparent; color: #64748b; font-size: 13px; font-weight: 500; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .funds-tab:hover { color: #e2e8f0; } .funds-tab--active { color: #e2e8f0; border-bottom-color: #6366f1; } .funds-tab-content { min-height: 300px; } /* ── Table tab — card grid ───────────────────────────── */ .funds-table { } .funds-section { margin-bottom: 28px; } .funds-section__title { font-size: 14px; font-weight: 600; color: #94a3b8; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.05em; } .funds-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .funds-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 16px; } .funds-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .funds-card__icon { font-size: 18px; } .funds-card__label { font-size: 14px; font-weight: 600; color: #e2e8f0; flex: 1; } .funds-card__type { font-size: 11px; color: #64748b; text-transform: uppercase; } .funds-card__status { font-size: 11px; font-weight: 600; text-transform: capitalize; } .funds-card__desc { font-size: 12px; color: #94a3b8; margin-bottom: 10px; line-height: 1.5; } .funds-card__stat { margin-bottom: 10px; } .funds-card__stat-value { font-size: 18px; font-weight: 700; color: #e2e8f0; } .funds-card__stat-label { font-size: 12px; color: #64748b; margin-left: 4px; } .funds-card__stats { display: flex; justify-content: space-between; margin-bottom: 8px; } /* Progress bar */ .funds-card__bar-container { position: relative; height: 6px; background: #334155; border-radius: 3px; margin-bottom: 10px; overflow: visible; } .funds-card__bar { height: 100%; border-radius: 3px; background: #0ea5e9; transition: width 0.3s ease; } .funds-card__bar--outcome { opacity: 0.8; } .funds-card__bar-threshold { position: absolute; top: -3px; width: 2px; height: 12px; background: #fbbf24; border-radius: 1px; } .funds-card__thresholds { display: flex; gap: 12px; font-size: 11px; color: #64748b; margin-bottom: 8px; } /* Allocation lists */ .funds-card__allocs { margin-top: 8px; padding-top: 8px; border-top: 1px solid #334155; } .funds-card__alloc-title { font-size: 11px; color: #64748b; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; } .funds-card__alloc { font-size: 12px; color: #94a3b8; display: flex; align-items: center; gap: 6px; margin: 2px 0; } .funds-card__alloc-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } /* Status colors */ .funds-status--abundant { color: #fbbf24; } .funds-status--sufficient { color: #10b981; } .funds-status--seeking { color: #0ea5e9; } .funds-status--critical { color: #ef4444; } /* ── River tab ───────────────────────────────────────── */ .funds-river-container { min-height: 500px; } /* ── Transactions tab ────────────────────────────────── */ .funds-tx-list { display: flex; flex-direction: column; gap: 4px; } .funds-tx-empty { text-align: center; color: #64748b; padding: 48px 16px; font-size: 14px; } .funds-tx { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; } .funds-tx__icon { font-size: 16px; flex-shrink: 0; } .funds-tx__body { flex: 1; min-width: 0; } .funds-tx__desc { font-size: 13px; color: #e2e8f0; font-weight: 500; } .funds-tx__meta { font-size: 11px; color: #64748b; margin-top: 2px; } .funds-tx__amount { font-size: 14px; font-weight: 600; white-space: nowrap; } .funds-tx__amount--positive { color: #10b981; } .funds-tx__amount--negative { color: #ef4444; } .funds-tx__time { font-size: 11px; color: #64748b; white-space: nowrap; }