/* Samrat UI layer - dark-first design system for the user panel and public site. * * Loaded after Bootstrap and app.css. Everything is driven by the tokens below; * `data-theme` on flips them. Bootstrap keeps handling grid, dropdowns * and modals - this file only restyles them. */ /* ============================================================ 1. Tokens ============================================================ */ :root, [data-theme="dark"] { --bg: #06080c; --panel: #0c0f16; --panel-2: #111623; --line: #1e293b; --line-soft: rgba(255, 255, 255, .06); --txt: #f1f5f9; --txt-muted: #94a3b8; --txt-dim: #64748b; --glass: rgba(12, 15, 22, .82); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lift: 0 18px 38px rgba(87, 91, 235, .16); --field: rgba(255, 255, 255, .04); --field-focus: rgba(255, 255, 255, .07); } [data-theme="light"] { --bg: #f1f4f9; --panel: #ffffff; --panel-2: #f8fafc; --line: #e2e8f0; --line-soft: rgba(15, 23, 42, .07); --txt: #0f172a; --txt-muted: #64748b; --txt-dim: #94a3b8; --glass: rgba(255, 255, 255, .85); --shadow-card: 0 1px 2px rgba(15, 23, 42, .06); --shadow-lift: 0 18px 38px rgba(87, 91, 235, .14); --field: #f1f5f9; --field-focus: #e9eef6; } :root { --accent: #575beb; --accent-2: #8b5cf6; --accent-3: #ec4899; --ok: #10b981; --warn: #f59e0b; --bad: #ef4444; --info: #0ea5e9; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --sidebar-w: 264px; --sidebar-mini-w: 78px; --ease: cubic-bezier(.4, 0, .2, 1); --fast: .18s var(--ease); --slow: .32s var(--ease); --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ============================================================ 2. Base ============================================================ */ html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } body.ui { background: var(--bg); color: var(--txt); font-family: var(--font-body); font-size: .9rem; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background var(--slow), color var(--slow); } body.ui h1, body.ui h2, body.ui h3, body.ui h4, body.ui h5, body.ui h6, .display-font { font-family: var(--font-display); letter-spacing: .005em; font-weight: 700; } /* Wrapped in :where() so this carries zero specificity - every component that sets its own link colour (.side-link, .feed-item, .btn-*) wins without needing !important. */ :where(body.ui) :where(a) { color: var(--accent); transition: color var(--fast); } :where(body.ui) :where(a:hover) { color: var(--accent-2); } /* Underlines are a separate rule: they must outrank Bootstrap's `a`, while the colour above must not outrank the components. */ body.ui a, body.ui a:hover { text-decoration: none; } body.ui hr { border-color: var(--line); opacity: 1; } body.ui ::selection { background: rgba(87, 91, 235, .35); } .text-muted, body.ui .text-muted { color: var(--txt-muted) !important; } .text-dim { color: var(--txt-dim) !important; } .text-ok { color: var(--ok) !important; } .text-bad { color: var(--bad) !important; } .text-warn { color: var(--warn) !important; } .text-accent{ color: var(--accent) !important; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82em; } .num { font-variant-numeric: tabular-nums; } /* Thin Lucide strokes read better than the default 2px at small sizes. */ .ui [data-lucide] { stroke-width: 1.75; width: 18px; height: 18px; flex: 0 0 auto; } /* ============================================================ 3. Gradients and icon tiles ============================================================ */ .grad-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%); } .grad-success { background: linear-gradient(135deg, var(--ok) 0%, #059669 100%); } .grad-info { background: linear-gradient(135deg, var(--info) 0%, var(--accent) 100%); } .grad-warning { background: linear-gradient(135deg, var(--warn) 0%, #d97706 100%); } .grad-danger { background: linear-gradient(135deg, var(--bad) 0%, #dc2626 100%); } .grad-teal { background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%); } .icon-tile { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; flex: 0 0 auto; } .icon-tile [data-lucide] { width: 22px; height: 22px; } .icon-tile.sm { width: 36px; height: 36px; border-radius: var(--r-sm); } .icon-tile.sm [data-lucide] { width: 17px; height: 17px; } /* ============================================================ 4. Panels and cards ============================================================ */ .panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--slow), box-shadow var(--slow), border-color var(--slow); } /* Gradient hairline that fades in on hover. */ .panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); opacity: 0; transition: opacity var(--slow); } .panel.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(87, 91, 235, .3); } .panel.lift:hover::before, .panel.is-live::before { opacity: 1; } .panel.is-live::before { background: linear-gradient(90deg, var(--ok), #06b6d4); } .panel-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; } .panel-head .spacer { margin-left: auto; } .panel-head a { font-family: var(--font-body); font-size: .8rem; font-weight: 500; } .panel-body { padding: 1.25rem; } .panel-body.tight { padding: .85rem 1.25rem; } /* ============================================================ 5. Stat tiles ============================================================ */ .stat { padding: 1.35rem; } .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; } .stat-label { color: var(--txt-muted); font-size: .78rem; font-weight: 500; } .stat-value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; word-break: break-word; } .stat-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--txt-muted); } /* ============================================================ 6. Chips, badges, status dots ============================================================ */ .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 600; line-height: 1; border: 1px solid transparent; white-space: nowrap; } .chip [data-lucide] { width: 13px; height: 13px; } .chip-ok { background: rgba(16, 185, 129, .14); color: var(--ok); border-color: rgba(16, 185, 129, .3); } .chip-bad { background: rgba(239, 68, 68, .14); color: var(--bad); border-color: rgba(239, 68, 68, .3); } .chip-warn { background: rgba(245, 158, 11, .14); color: var(--warn); border-color: rgba(245, 158, 11, .3); } .chip-info { background: rgba(14, 165, 233, .14); color: var(--info); border-color: rgba(14, 165, 233, .3); } .chip-mute { background: var(--field); color: var(--txt-muted); border-color: var(--line); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-bad { background: var(--bad); } .dot-mute { background: var(--txt-dim); } .dot.pulse { animation: dot-pulse 2s var(--ease) infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: .6; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); } } /* ============================================================ 7. Buttons ============================================================ */ .btn { border-radius: var(--r-sm); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast), color var(--fast); } .btn:active { transform: translateY(1px); } .btn-grad { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; color: #fff; } .btn-grad:hover, .btn-grad:focus { color: #fff; box-shadow: 0 10px 24px rgba(87, 91, 235, .35); } .btn-ghost { background: var(--field); border: 1px solid var(--line); color: var(--txt); } .btn-ghost:hover, .btn-ghost:focus { background: var(--field-focus); border-color: rgba(87, 91, 235, .45); color: var(--txt); } .btn-quiet { background: transparent; border: 1px solid var(--line); color: var(--txt-muted); } .btn-quiet:hover { color: var(--txt); border-color: var(--accent); } .btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--r-sm); } /* Bootstrap variants, retuned for the dark surface. */ body.ui .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2); --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2); } body.ui .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); } /* ============================================================ 8. Forms ============================================================ */ body.ui .form-label { color: var(--txt-muted); font-size: .8rem; font-weight: 500; margin-bottom: .4rem; } body.ui .form-control, body.ui .form-select { background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--txt); padding: .62rem .85rem; font-size: .88rem; transition: border-color var(--fast), background var(--fast), box-shadow var(--fast); } body.ui .form-control:focus, body.ui .form-select:focus { background: var(--field-focus); border-color: var(--accent); color: var(--txt); box-shadow: 0 0 0 3px rgba(87, 91, 235, .18); } body.ui .form-control::placeholder { color: var(--txt-dim); } body.ui .form-control:disabled, body.ui .form-control[readonly] { background: var(--panel-2); color: var(--txt-muted); } body.ui .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 13px 10px; padding-right: 2.3rem; } body.ui .form-select option { background: var(--panel); color: var(--txt); } body.ui .form-text { color: var(--txt-dim); font-size: .76rem; } body.ui .form-check-input { background-color: var(--field); border-color: var(--line); } body.ui .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } body.ui .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(87, 91, 235, .2); } body.ui .form-control:-webkit-autofill, body.ui .form-control:-webkit-autofill:hover, body.ui .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--txt); -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset; caret-color: var(--txt); transition: background-color 9999s ease-out; } body.ui .input-group-text { background: var(--panel-2); border-color: var(--line); color: var(--txt-muted); } .copy-field { display: flex; gap: .4rem; } .copy-field .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; } /* ============================================================ 9. Tables ============================================================ */ .table-wrap { overflow-x: auto; } body.ui .table { --bs-table-bg: transparent; --bs-table-color: var(--txt); margin-bottom: 0; font-size: .86rem; } body.ui .table > thead th { background: var(--panel-2); color: var(--txt-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border-bottom: 1px solid var(--line); padding: .7rem 1.25rem; } body.ui .table > tbody td { border-color: var(--line-soft); vertical-align: middle; padding: .8rem 1.25rem; } body.ui .table > tbody tr { transition: background var(--fast); } body.ui .table > tbody tr:hover { background: var(--field); } body.ui .table > tbody tr:last-child td { border-bottom: 0; } /* ============================================================ 10. Progress ============================================================ */ body.ui .progress { background: var(--field); border-radius: var(--r-pill); height: 8px; overflow: hidden; } body.ui .progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s var(--ease); } body.ui .progress-bar.bg-success { background: linear-gradient(90deg, var(--ok), #06b6d4) !important; } /* Circular progress, drawn by user-ui.js via stroke-dashoffset. */ .ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring .ring-bg { fill: none; stroke: var(--line); stroke-width: 9; } .ring .ring-fill { fill: none; stroke: url(#ringGrad); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); } .ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; } .ring-center .ring-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; } .ring-center .ring-cap { font-size: .7rem; color: var(--txt-muted); } /* Sparkline bars, sized inline with --h on each bar. */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; } .spark i { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--accent); height: var(--h, 20%); opacity: .85; transform-origin: bottom; animation: spark-rise .6s var(--ease) backwards; } .spark i.up { background: var(--ok); } .spark i.down { background: var(--bad); } @keyframes spark-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ============================================================ 11. Lists and feeds ============================================================ */ .feed { display: flex; flex-direction: column; } .feed-item { display: flex; align-items: center; gap: .85rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line-soft); color: inherit; transition: background var(--fast); } .feed-item:last-child { border-bottom: 0; } a.feed-item:hover { background: var(--field); color: inherit; } .feed-item .feed-main { min-width: 0; flex: 1 1 auto; } .feed-item .feed-title { font-weight: 600; font-size: .86rem; } .feed-item .feed-sub { color: var(--txt-muted); font-size: .76rem; } .feed-item .feed-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .empty-state { padding: 2.75rem 1.25rem; text-align: center; color: var(--txt-muted); font-size: .87rem; } .empty-state [data-lucide] { width: 34px; height: 34px; opacity: .4; margin-bottom: .7rem; } /* ============================================================ 12. Alerts, dropdowns, modals, pagination ============================================================ */ body.ui .alert { border: 1px solid transparent; border-radius: var(--r-md); font-size: .86rem; } body.ui .alert-success { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); color: #6ee7b7; } body.ui .alert-danger { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); color: #fca5a5; } body.ui .alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #fcd34d; } body.ui .alert-info { background: rgba(14, 165, 233, .12); border-color: rgba(14, 165, 233, .3); color: #7dd3fc; } [data-theme="light"] body.ui .alert-success, [data-theme="light"] .alert-success { color: #047857; } [data-theme="light"] .alert-danger { color: #b91c1c; } [data-theme="light"] .alert-warning { color: #b45309; } [data-theme="light"] .alert-info { color: #0369a1; } body.ui .dropdown-menu { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); padding: .35rem; font-size: .86rem; } body.ui .dropdown-item { color: var(--txt); border-radius: var(--r-sm); padding: .5rem .7rem; display: flex; align-items: center; gap: .55rem; } body.ui .dropdown-item:hover, body.ui .dropdown-item:focus { background: var(--field); color: var(--txt); } body.ui .dropdown-divider { border-color: var(--line); } body.ui .modal-content { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--txt); } body.ui .modal-header, body.ui .modal-footer { border-color: var(--line); } body.ui .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } [data-theme="light"] .btn-close { filter: none; } body.ui .page-link { background: var(--panel); border-color: var(--line); color: var(--txt-muted); } body.ui .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; } body.ui .page-item.disabled .page-link { background: var(--panel); border-color: var(--line); color: var(--txt-dim); } body.ui .list-group-item { background: transparent; border-color: var(--line-soft); color: var(--txt); } /* ============================================================ 13. Entrance animation ============================================================ */ /* Gated on .js (set by the inline head script) so that with scripting off the content is simply visible rather than stuck at opacity 0. */ .js .reveal { opacity: 0; transform: translateY(16px); } .reveal.in { animation: reveal-up .55s var(--ease) forwards; } @keyframes reveal-up { to { opacity: 1; transform: none; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes glow-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } } /* ============================================================ 14. Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { body.ui *, body.ui *::before, body.ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } } /* ============================================================ 15. Composite pieces used by the panel screens ============================================================ */ .panel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line); background: var(--panel-2); font-size: .8rem; color: var(--txt-muted); } .panel-foot .pagination { margin: 0; } /* Bordered inner box - wallets, fee summaries, nested groups. */ .tile { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); padding: 1rem; } .tile-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .85rem; } .tile-row:last-child { border-bottom: 0; } /* --- package / plan card ------------------------------------ */ .plan { display: flex; flex-direction: column; height: 100%; padding: 1.5rem; } .plan-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .plan-price { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; line-height: 1.1; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-list { margin: 1.1rem 0 1.25rem; } .plan-list .tile-row { padding: .45rem 0; } /* --- ad card ------------------------------------------------- */ .ad-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .ad-media { height: 152px; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; } .ad-media img { width: 100%; height: 100%; object-fit: cover; } .ad-media [data-lucide] { width: 34px; height: 34px; color: var(--txt-dim); } .ad-card.done { opacity: .5; } .ad-card .ad-body { padding: 1rem; display: flex; flex-direction: column; flex: 1 1 auto; } .qr-box { display: grid; place-items: center; padding: .75rem; border-radius: var(--r-md); background: #fff; max-width: 190px; margin: 0 auto 1rem; } .qr-box img { max-width: 100%; height: auto; } /* The ad modal is filled by app.js, so its fallback box is styled here. */ #adModal .ad-media-box img { width: 100%; border-radius: var(--r-md); } #adModal .bg-light { background: var(--panel-2) !important; color: var(--txt-muted) !important; border-radius: var(--r-md); }