/* Developed by RegiTech (+2348038240084). Unauthorized removal does not transfer authorship. */ /* ========================================================================== iPay — professional fintech theme, token layer. Single blue brand color, neutral grays, minimal decoration. Loaded last (after dark-mode.css) so it wins the cascade. Composes with existing [data-theme="dark"] convention rather than replacing it — dark mode card bg = body bg, depth via shadow only. ========================================================================== */ :root { --mp-text: #14141F; --mp-text-muted: #7A7E92; --mp-page-bg: #F5F7FB; --mp-page-bg-2: #ECEFF5; --mp-card-bg: #ffffff; --mp-border: #ECEEF5; --mp-brand: #AB2923; --mp-brand-2: #8A1F1A; --mp-brand-soft: #FBEDEC; --mp-accent: #AB2923; --mp-accent-soft: #FBEDEC; /* ── Glass sheen ─────────────────────────────────────────────────────── Diagonal highlight layered OVER a surface's own background, e.g. background: var(--mp-glass-brand), linear-gradient(160deg, …); The first layer paints on top, so the surface keeps its own colour and just gains a lit edge and a shaded far corner. Deliberately NO backdrop-filter: this app ships inside an Android WebView, where blur forces a repaint of everything behind the element on every scroll frame, and degrades to fully transparent on older WebView builds. Gradients cost nothing and render everywhere. */ --mp-glass-brand: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, .08) 100%); --mp-glass-dark: linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, .14) 100%); /* For light neutral surfaces (sheets, modals). These sit on #fff, so a white sheen would be invisible — this shades downward instead, leaving the top edge bright and the base slightly tinted. Same glass read, inverted. */ --mp-glass-sheet: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(20, 20, 31, .012) 55%, rgba(20, 20, 31, .040) 100%); /* Lit top edge. Pairs with any of the sheens above. */ --mp-glass-edge: inset 0 1px 0 rgba(255, 255, 255, .20); --mp-glass-edge-soft: inset 0 1px 0 rgba(255, 255, 255, .10); /* ── Primary button gradient ──────────────────────────────────────────── Deep brand gradient for full-size CTAs sitting on neutral sheets. Same in both themes: brand red is a strong surface against light and dark page backgrounds alike, and white labels stay legible on every stop. NOT for buttons sitting ON the brand masthead — this range overlaps the masthead's own gradient and would dissolve into it. Those use their own darker ramp; see .db-wallet-btn.is-primary in styles/pages/dashboard.css. Small state chips (.copy-btn:active, .quick-amt-btn.active, .pag-btn.on) intentionally stay flat — a gradient across ~28px reads as noise. */ --mp-btn-grad: linear-gradient(180deg, #C93A33 0%, #AB2923 52%, #8A1F1A 100%); --mp-btn-grad-hover: linear-gradient(180deg, #AB2923 0%, #94211C 52%, #741814 100%); /* Active pill-tab surface (Profile + TopUp segmented tabs). Deliberately a neutral dark grey rather than brand, so the tabs read as a control and don't compete with the brand CTAs on the same screen. Always pairs with a dark label — see --mp-pill-active-text, which must always change with it. Dark-mode value is toned down slightly so a near-white pill doesn't glare against the dark track behind it. */ --mp-pill-active: #E8EAEF; --mp-pill-active-text: #14141F; /* Brand red for use ON a dark/black surface. --mp-brand (#AB2923) is far too dark to read against black, so anything sitting on the tab bar or another always-black panel uses this lifted tint instead. Deliberately identical in both themes, because those surfaces are black in both. */ --mp-brand-on-dark: #E8635C; /* Back-compat aliases (existing markup across the app references --mp-blue*) */ --mp-blue: var(--mp-brand); --mp-blue-dark: var(--mp-brand-2); --mp-radius-lg: 20px; --mp-radius-md: 13px; --mp-pill: 999px; /* One radius for every tappable action — primary buttons, secondary buttons and amount presets alike. It existed as the literal 12px in a dozen places while a handful of others used 9/10px or a full pill, so buttons sitting on the same screen did not match. Point new buttons at this rather than typing a value. */ --mp-btn-radius: 12px; --mp-green: #17A24A; --mp-green-bg: #E6F7EC; --mp-red: #E33E3E; --mp-red-bg: #FDEBEB; --mp-amber: #B9720B; --mp-amber-bg: #FFF3DA; --mp-font-display: -apple-system, "Segoe UI", system-ui, sans-serif; /* Figures. Nunito is the app's loaded family (see templates/head.php), so money and other numerals stay in brand type; `font-variant-numeric: tabular-nums` at the usage site is what keeps digits column-aligned. Note: this deliberately is NOT a monospace stack — IBM Plex Mono was referenced here but never actually loaded, so it silently fell back to system monospace and rendered numerals (and ₦) off-brand. */ --mp-font-num: "Nunito", sans-serif; /* Back-compat alias for existing call sites. */ --mp-font-mono: var(--mp-font-num); } [data-theme="dark"] { --mp-page-bg: var(--dm-bg, #1e1e1e); --mp-page-bg-2: var(--dm-bg2, #242424); --mp-card-bg: var(--dm-bg, #1e1e1e); --mp-text: var(--dm-text, #f0f0f0); --mp-text-muted: var(--dm-text2, #a0a0a0); --mp-border: var(--dm-border, #2e2e2e); /* Light grey here too, just a touch dimmer than the light-theme value so it reads as a raised control rather than a glaring white block on #252525. */ --mp-pill-active: #D9DBE2; --mp-pill-active-text: #14141F; /* A white sheen this strong would wash out a dark sheet; drop it to a hint. The brand/dark sheens are already tuned for dark surfaces. */ --mp-glass-sheet: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 46%); --mp-brand: #E8635C; --mp-brand-2: #AB2923; --mp-brand-soft: #3A1614; --mp-accent: #E8635C; --mp-accent-soft: #3A1614; --mp-green: #3FCB80; --mp-green-bg: #173225; --mp-red: #F0716E; --mp-red-bg: #341F1E; --mp-amber: #E7B15C; --mp-amber-bg: #332714; } body, .app-body-wrap { background: var(--mp-page-bg); }