/* ============================================================ BACKPOCKET — C-WHITE FINTECH THEME Opt-in light theme. Everything is scoped under [data-theme="light"] so it CANNOT leak into the existing dark pages (which never set that attribute). Loaded only on pages that have adopted the new design. Adopt on a page with: and load this file AFTER Bootstrap (it intentionally overrides it). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); [data-theme="light"] { /* Surfaces */ --bp-bg: #f6f7f9; /* page canvas */ --bp-surface: #ffffff; /* raised cards */ --bp-surface-2: #fafafa; /* inset panels / table zebra */ --bp-border: #ececec; /* hairline borders */ --bp-border-2: #e0e2e6; /* stronger borders */ /* Text */ --bp-text: #18181b; /* primary */ --bp-text-2: #52525b; /* secondary */ --bp-text-3: #a1a1aa; /* muted / disabled */ /* Brand + status (emerald-led, per the C-white mockup) */ --bp-accent: #059669; /* emerald — primary action + brand */ --bp-accent-700: #047857; --bp-accent-50: #d1fae5; --bp-pos: #059669; /* gains / active */ --bp-warn: #b45309; /* limited */ --bp-warn-50: #fef3c7; --bp-neg: #dc2626; /* losses */ --bp-neg-50: #fee2e2; --bp-info: #1d4ed8; --bp-info-50: #dbeafe; --bp-radius: 10px; --bp-radius-lg: 14px; --bp-radius-pill: 999px; /* Legacy aliases — JS that emits inline styles referencing the old dark token names (toasts etc.) still resolves to light values on these pages. Folded in from an earlier parallel theme.css draft. */ --bg-card: #ffffff; --bg-body: #f6f7f9; --border-subtle: #ececec; --accent-primary: #059669; --accent-success: #059669; --accent-danger: #dc2626; --accent-warning: #b45309; --accent-info: #1d4ed8; } /* ---- Base ---- */ [data-theme="light"] body { background: var(--bp-bg); color: var(--bp-text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11'; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--bp-text); font-weight: 500; letter-spacing: -0.01em; } [data-theme="light"] .text-muted-2 { color: var(--bp-text-2); } [data-theme="light"] .text-muted-3 { color: var(--bp-text-3); } [data-theme="light"] a { color: var(--bp-accent-700); text-decoration: none; } [data-theme="light"] a:hover { text-decoration: underline; } /* ---- Topbar ---- */ [data-theme="light"] .bp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--bp-surface); border-bottom: 1px solid var(--bp-border); position: sticky; top: 0; z-index: 1030; } [data-theme="light"] .bp-brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--bp-text); } [data-theme="light"] .bp-brand i { color: var(--bp-accent); font-size: 18px; } [data-theme="light"] .bp-pillnav { display: flex; gap: 4px; background: #f4f4f5; border-radius: var(--bp-radius-pill); padding: 3px; } [data-theme="light"] .bp-pillnav a { color: var(--bp-text-2); font-size: 12.5px; padding: 5px 14px; border-radius: var(--bp-radius-pill); transition: background .12s, color .12s; } [data-theme="light"] .bp-pillnav a:hover { color: var(--bp-text); text-decoration: none; } [data-theme="light"] .bp-pillnav a.active { color: #fafafa; background: #18181b; } [data-theme="light"] .bp-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bp-accent-50); color: var(--bp-accent-700); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; } /* ---- Layout shell ---- */ [data-theme="light"] .bp-page { padding: 12px 20px 28px; max-width: 1100px; margin: 0 auto; } [data-theme="light"] .bp-eyebrow { color: var(--bp-text-2); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; } /* ---- Hero balance ---- */ [data-theme="light"] .bp-hero { padding: 8px 4px 18px; } [data-theme="light"] .bp-hero-value { color: var(--bp-text); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; } [data-theme="light"] .bp-hero-delta { color: var(--bp-pos); font-size: 13px; } [data-theme="light"] .bp-hero-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; } [data-theme="light"] .bp-hero-stats span { color: var(--bp-text-2); font-size: 12.5px; } [data-theme="light"] .bp-hero-stats b { color: var(--bp-text); font-weight: 500; } [data-theme="light"] .bp-hero-stats b.pos { color: var(--bp-accent-700); } /* ---- Cards ---- */ [data-theme="light"] .bp-card { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-radius-lg); } [data-theme="light"] .bp-card.inset { background: var(--bp-surface-2); } [data-theme="light"] .bp-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bp-border); font-size: 13px; font-weight: 500; color: var(--bp-text); } [data-theme="light"] .bp-card-body { padding: 6px 16px 12px; } [data-theme="light"] .bp-grid { display: grid; gap: 12px; } [data-theme="light"] .bp-grid.cols-2 { grid-template-columns: 1.25fr 1fr; } [data-theme="light"] .bp-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ---- Metric tiles ---- */ [data-theme="light"] .bp-metric { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: 12px; } [data-theme="light"] .bp-metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--bp-text-2); font-size: 11px; margin-bottom: 4px; } [data-theme="light"] .bp-metric-value { color: var(--bp-text); font-size: 19px; font-weight: 500; } /* ---- List rows (books, transactions, steps) ---- */ [data-theme="light"] .bp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bp-border); } [data-theme="light"] .bp-row:last-child { border-bottom: 0; } [data-theme="light"] .bp-row .grow { flex: 1; min-width: 0; } [data-theme="light"] .bp-row .name { color: var(--bp-text); font-size: 12.5px; } [data-theme="light"] .bp-row .amt { color: var(--bp-text); font-size: 12.5px; font-weight: 500; } [data-theme="light"] .bp-book-badge { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 500; flex-shrink: 0; } /* ---- Status dots + pills ---- */ [data-theme="light"] .bp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; } [data-theme="light"] .bp-status { font-size: 10.5px; color: var(--bp-text-2); } [data-theme="light"] .bp-status.active { color: var(--bp-pos); } [data-theme="light"] .bp-status.limited { color: var(--bp-warn); } [data-theme="light"] .bp-status.burned { color: var(--bp-text-3); } [data-theme="light"] .bp-dot.active { background: #16a34a; } [data-theme="light"] .bp-dot.limited { background: #f59f00; } [data-theme="light"] .bp-dot.burned { background: #a8aeb8; } [data-theme="light"] .bp-pill { font-size: 10.5px; padding: 2px 9px; border-radius: var(--bp-radius-pill); font-weight: 500; } [data-theme="light"] .bp-pill.pos { color: var(--bp-accent-700); background: var(--bp-accent-50); } [data-theme="light"] .bp-pill.warn { color: var(--bp-warn); background: var(--bp-warn-50); } /* ---- Buttons ---- */ [data-theme="light"] .bp-btn { font-size: 12px; font-weight: 500; padding: 7px 16px; border-radius: var(--bp-radius); border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; display: inline-flex; align-items: center; gap: 6px; } [data-theme="light"] .bp-btn-primary { background: var(--bp-accent); color: #fff; } [data-theme="light"] .bp-btn-primary:hover { background: var(--bp-accent-700); } [data-theme="light"] .bp-btn-ghost { background: var(--bp-surface); color: var(--bp-accent-700); border-color: #a7f3d0; } [data-theme="light"] .bp-btn-ghost:hover { background: var(--bp-accent-50); } [data-theme="light"] .bp-btn:disabled { opacity: .55; cursor: default; } [data-theme="light"] .bp-btn-block { width: 100%; justify-content: center; padding: 11px; font-size: 13px; } /* ---- Forms ---- */ [data-theme="light"] .bp-field { margin-bottom: 14px; } [data-theme="light"] .bp-label { display: block; font-size: 12px; color: var(--bp-text-2); margin-bottom: 6px; } [data-theme="light"] .bp-input { width: 100%; height: 42px; padding: 0 14px; background: var(--bp-surface); color: var(--bp-text); border: 1px solid var(--bp-border-2); border-radius: var(--bp-radius); font-size: 14px; font-family: inherit; transition: border-color .12s, box-shadow .12s; } [data-theme="light"] .bp-input::placeholder { color: var(--bp-text-3); } [data-theme="light"] .bp-input:focus { outline: none; border-color: var(--bp-accent); box-shadow: 0 0 0 3px var(--bp-accent-50); } /* ---- Alerts ---- */ [data-theme="light"] .bp-alert { border-radius: var(--bp-radius); padding: 11px 14px; font-size: 13px; margin-bottom: 14px; } [data-theme="light"] .bp-alert-danger { background: var(--bp-neg-50); color: #991b1b; } [data-theme="light"] .bp-alert-success { background: var(--bp-accent-50); color: var(--bp-accent-700); } /* ---- Auth card (login / setup / forgot / waitlist) ---- */ [data-theme="light"] .bp-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bp-bg); } [data-theme="light"] .bp-auth-card { width: 100%; max-width: 420px; background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-radius-lg); padding: 32px; } [data-theme="light"] .bp-auth-logo { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px; background: var(--bp-accent-50); color: var(--bp-accent-700); display: flex; align-items: center; justify-content: center; font-size: 26px; } [data-theme="light"] .bp-auth-title { text-align: center; font-size: 20px; font-weight: 500; margin: 0 0 4px; } [data-theme="light"] .bp-auth-sub { text-align: center; color: var(--bp-text-2); font-size: 13px; margin: 0 0 22px; } [data-theme="light"] .bp-auth-foot { text-align: center; margin-top: 16px; font-size: 13px; } [data-theme="light"] .bp-hr { border: 0; border-top: 1px solid var(--bp-border); margin: 22px 0; } [data-theme="light"] .bp-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: bp-spin .6s linear infinite; } @keyframes bp-spin { to { transform: rotate(360deg); } } /* ---- Responsive ---- */ @media (max-width: 720px) { [data-theme="light"] .bp-grid.cols-2, [data-theme="light"] .bp-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme="light"] .bp-hero-value { font-size: 28px; } [data-theme="light"] .bp-pillnav { display: none; } } @media (max-width: 420px) { [data-theme="light"] .bp-grid.cols-4 { grid-template-columns: 1fr 1fr; } [data-theme="light"] .bp-auth-card { padding: 24px; } } /* ---- Profit grid ---- */ [data-theme="light"] .bp-grid.tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } [data-theme="light"] .bp-metric-value.neg { color: var(--bp-neg); } /* ---- History accordions ---- */ [data-theme="light"] .bp-details { border-bottom: 1px solid var(--bp-border); } [data-theme="light"] .bp-details:last-child { border-bottom: 0; } [data-theme="light"] .bp-details > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--bp-text); } [data-theme="light"] .bp-details > summary::-webkit-details-marker { display: none; } [data-theme="light"] .bp-details > summary::after { content: '\F285'; font-family: 'bootstrap-icons'; color: var(--bp-text-3); font-size: 13px; margin-left: 8px; transition: transform .15s; } [data-theme="light"] .bp-details[open] > summary::after { transform: rotate(180deg); } [data-theme="light"] .bp-summary-meta { margin-left: auto; margin-right: 6px; color: var(--bp-text-2); font-size: 12px; font-weight: 400; } /* ---- Feedback ---- */ [data-theme="light"] textarea.bp-input { height: auto; min-height: 92px; padding: 10px 14px; resize: vertical; line-height: 1.5; } /* ---- Toasts ---- */ [data-theme="light"] #bp-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; } [data-theme="light"] .bp-toast { background: var(--bp-surface); border: 1px solid var(--bp-border); border-left: 3px solid var(--bp-text-3); border-radius: var(--bp-radius); padding: 10px 14px; font-size: 13px; color: var(--bp-text); box-shadow: 0 6px 24px rgba(0,0,0,.08); max-width: 320px; transition: opacity .3s; } [data-theme="light"] .bp-toast.success { border-left-color: var(--bp-accent); } [data-theme="light"] .bp-toast.danger { border-left-color: var(--bp-neg); } [data-theme="light"] .bp-toast.info { border-left-color: var(--bp-info); } [data-theme="light"] .bp-hidden { display: none !important; } /* ---- Loading skeleton ---- */ [data-theme="light"] .bp-skel { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: bp-shimmer 1.4s infinite; border-radius: var(--bp-radius); } @keyframes bp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }