/* RNA Payments theme. * * Colors and fonts match rnapay.com (Tranzact's existing site). The portal * defaults to dark mode; this theme flips to light mode by overriding the * background, surface, text, and border CSS variables defined in BRAND_CSS. * * Brand palette (from rnapay.com): * Primary navy: #2A5080 * Accent sky blue: #A8D2F0 * Text dark slate: #39374D * Surface near-white: #F2F9FF / #FFFFFF * Border light gray: #E7E7E7 */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,500,600,700|Poppins:400,500,600,700&display=swap'); :root { /* Surfaces — light mode */ --bg-page: #F2F9FF; --bg-card: #FFFFFF; --border: #E7E7E7; /* Text — dark mode -> light mode means inverting these */ --text: #39374D; --text-strong: #1F1F2E; --text-muted: #6B7280; --text-faint: #9CA3AF; /* Brand */ --primary: #2A5080; --primary-hover: #3A6BA0; --primary-soft: rgba(42,80,128,0.08); --primary-soft-2: rgba(42,80,128,0.03); --primary-soft-3: rgba(42,80,128,0.18); --accent: #A8D2F0; --accent-hover: #BCDEF5; --on-primary: #FFFFFF; /* Semantic colors — adjusted for light mode (slightly stronger fills against white). */ --green: #16A34A; --green-soft: rgba(22,163,74,0.10); --green-text: #15803D; --green-border: rgba(22,163,74,0.25); --green-bg: rgba(22,163,74,0.06); --yellow: #D97706; --yellow-soft: rgba(217,119,6,0.10); --yellow-text: #B45309; --yellow-border: rgba(217,119,6,0.25); --yellow-bg: rgba(217,119,6,0.06); --red: #DC2626; --red-hover: #B91C1C; --red-soft: rgba(220,38,38,0.10); --red-text: #B91C1C; --red-border: rgba(220,38,38,0.25); --red-bg: rgba(220,38,38,0.06); --gray-soft: rgba(107,114,128,0.10); } /* Sans stack pulls Noto Sans + Poppins from Google. The portal's uses --font-stack via inheritance, but BRAND_CSS hardcodes 'Inter' on body. We override here. */ body { font-family: 'Noto Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } h1, h2, h3, h4, .main-header h1 { font-family: 'Poppins', 'Noto Sans', sans-serif; font-weight: 600; } /* Sidebar logo container needs more vertical room to host the image. */ .sidebar-logo { padding: 16px 20px !important; background: #FFFFFF; } /* Sidebar in light mode: white surface, navy text on hover. */ .sidebar { background: #FFFFFF !important; box-shadow: 1px 0 0 var(--border); } /* Tables stripe more subtly in light mode. */ tr:hover td { background: rgba(42,80,128,0.04); } /* Cards get a subtle shadow instead of relying on dark contrast. */ .card { box-shadow: 0 1px 3px rgba(15,23,42,0.06); } /* Inputs in light mode need a different focus shadow color. */ input, select { background: #FFFFFF; color: var(--text); } input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-3); } /* Stat-card values — flip teal/gold class names to brand colors. The class names stay (.teal, .gold) for backward compat; the colors are now navy/sky. */ .stat-card .stat-value.teal { color: var(--primary); } /* `.gold` was Coastal Pay's accent. RNA's accent (#A8D2F0 sky blue) is too pale for stat-value text on white. Use the primary navy instead so it reads clearly. */ .stat-card .stat-value.gold { color: var(--primary) !important; } /* --------------------------------------------------------------------------- * Inline-style overrides for legacy dark-mode hardcoded colors. * * Many pages render with `style="color:#f1f5f9"` or `style="color:#c9a87c"` * baked in. Those were chosen for dark mode and are unreadable on white. * Until we refactor those inline styles to CSS variables, override them * here by attribute-selector with !important. * ------------------------------------------------------------------------ */ /* Light text written for dark mode — re-color to dark slate for readability. */ [style*="color:#f1f5f9"], [style*="color: #f1f5f9"], [style*="color:#e2e8f0"], [style*="color: #e2e8f0"], [style*="color:#cbd5e1"], [style*="color: #cbd5e1"] { color: var(--text-strong) !important; } /* Coastal Pay's gold accent used as inline color — re-target to RNA primary. */ [style*="color:#c9a87c"], [style*="color: #c9a87c"] { color: var(--primary) !important; } /* Coastal Pay's teal accent used as inline color — re-target to RNA primary. */ [style*="color:#2dd4bf"], [style*="color: #2dd4bf"] { color: var(--primary) !important; } /* Dark-mode borders baked into inline styles. */ [style*="border-bottom:1px solid #1e293b"], [style*="border-bottom: 1px solid #1e293b"], [style*="border-bottom:1px solid #334155"], [style*="border-bottom: 1px solid #334155"], [style*="border-top:1px solid #1e293b"], [style*="border-top: 1px solid #1e293b"], [style*="border-top:1px solid #334155"], [style*="border-top: 1px solid #334155"] { border-color: var(--border) !important; } /* Dark-mode card backgrounds baked into inline styles. */ [style*="background:#1e293b"], [style*="background: #1e293b"], [style*="background:#0f172a"], [style*="background: #0f172a"] { background: var(--bg-card) !important; color: var(--text) !important; } /* Faint mono text (payment IDs, tx hashes, addresses) needs more contrast than --text-faint provides on white. Bump it up. */ .text-muted, .text-sm.text-muted { color: var(--text-muted) !important; } table td.text-muted, table td.text-sm, table tbody td .text-muted, .mono.text-sm { color: var(--text) !important; } /* "View"-style table buttons render as The inline background of #334155 is a dark-mode chip color; redirect to a subtle navy outline button in light mode. */ a.btn[style*="background:#334155"], a.btn[style*="background: #334155"] { background: var(--primary-soft) !important; color: var(--primary) !important; border: 1px solid var(--primary-soft-3) !important; } a.btn[style*="background:#334155"]:hover, a.btn[style*="background: #334155"]:hover { background: var(--primary) !important; color: var(--on-primary) !important; }