/* Developed by Mohammad Rameez Imdad (Rameez Scripts) WhatsApp: https://whatsapp.rameezscripts.com/ (For Custom Projects) YouTube: https://www.youtube.com/@rameezimdad (Subscribe for more!) */ :root { --navy-primary:#001f3f; --navy-dark:#001529; --navy-light:#003366; --navy-accent:#0074D9; --navy-hover:#002a52; --success:#34a853; --warning:#fbbc04; --danger:#ea4335; --text-primary:#2b3440; --text-muted:#7a8794; --r-sm:4px; --r-md:6px; --r-pill:999px; } * { margin:0; padding:0; box-sizing:border-box; } :where(button, input, select, textarea) { font: inherit; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background:#f5f5f5; color:var(--text-primary); -webkit-tap-highlight-color:transparent; touch-action:manipulation; } input, select, textarea { font-size:16px !important; touch-action:manipulation; } a { color:var(--navy-accent); } /* Buttons */ .btn { padding:10px 20px; border:none; border-radius:var(--r-md); font-size:14px; font-weight:600; cursor:pointer; transition:all .3s; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; touch-action:manipulation; } .btn-primary { background:var(--navy-primary); color:#fff; } .btn-primary:hover { background:var(--navy-hover); transform:translateY(-2px); } .btn-success { background:var(--success); color:#fff; } .btn-danger { background:var(--danger); color:#fff; } .btn-secondary { background:#6c757d; color:#fff; } .btn-block { width:100%; } .btn-lg { padding:15px 24px; font-size:16px; } .btn-sm { padding:8px 16px; font-size:13px; } .btn:disabled, .btn[disabled] { opacity:.65; cursor:not-allowed; pointer-events:none; } .btn .fa-spinner { margin-right:2px; } .btn:focus-visible, .action-icon:focus-visible, .close-btn:focus-visible, .tb-tbtn:focus-visible { outline:2px solid var(--navy-accent); outline-offset:2px; } /* Forms */ .form-group { margin-bottom:20px; } .form-group label { display:block; margin-bottom:8px; color:#555; font-weight:500; font-size:14px; } .form-group input, .form-group select, .form-group textarea { width:100%; padding:14px 16px; border:1px solid #d0d0d0; border-radius:2px; font-size:16px; transition:all .3s; font-family:inherit; } .form-group input:focus-visible, .form-group select:focus-visible { outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 2px rgba(0,116,217,.1); } .form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } .form-grid .form-group { margin-bottom:0; } .form-actions { display:flex; gap:10px; margin-top:30px; } .error { margin-top:15px; color:var(--danger); font-size:14px; } .toggle { appearance:none; -webkit-appearance:none; width:44px; height:24px; border-radius:24px; background:#ccc; position:relative; cursor:pointer; transition:background .3s; border:none; } .toggle:checked { background:var(--navy-accent); } .toggle::before { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .3s; box-shadow:0 1px 3px rgba(0,0,0,.2); } .toggle:checked::before { transform:translateX(20px); } /* width guard — .form-group input (0,1,1) would otherwise stretch a bare .toggle (0,1,0) across the form */ .form-group .toggle, .toggle-row .toggle { width:44px; min-width:44px; max-width:44px; height:24px; flex:0 0 44px; padding:0; } .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; } .file-input { width:100%; height:42px; border:1px solid #cfd6dd; border-radius:3px; background:#fff; color:#444; cursor:pointer; } .file-input::file-selector-button { height:100%; border:none; background:var(--navy-primary); color:#fff; padding:0 18px; margin-right:12px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s; } .file-input:hover::file-selector-button { background:var(--navy-hover); } /* Login */ .login-container { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; background:linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); } .login-box { background:#fff; padding:44px 36px; border-radius:var(--r-sm); box-shadow:0 4px 20px rgba(0,0,0,.15); width:100%; max-width:420px; text-align:center; } .login-logo { width:110px; height:110px; border-radius:50%; object-fit:cover; margin-bottom:22px; border:3px solid var(--navy-primary); box-shadow:0 4px 12px rgba(0,0,0,.15); } .login-box h2 { margin-bottom:28px; color:var(--navy-primary); font-size:24px; font-weight:600; } .login-box .form-group { text-align:left; } .login-contact { margin-top:22px; padding-top:16px; border-top:1px solid #e2e8f0; text-align:center; } .login-contact p { font-size:13px; color:#666; font-weight:600; margin-bottom:10px; } .login-contact .developer-links { justify-content:center; } .login-contact .dev-link { padding:8px 14px; font-size:13px; } /* Layout */ .app-container { display:flex; min-height:100vh; } .sidebar { width:260px; background:linear-gradient(180deg, var(--navy-primary) 0%, var(--navy-dark) 100%); color:#fff; overflow-y:auto; display:flex; flex-direction:column; box-shadow:2px 0 10px rgba(0,0,0,.1); flex-shrink:0; } .sidebar-brand { display:flex; align-items:center; gap:12px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.1); } .sidebar-brand img { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.3); } .sidebar-brand span { font-weight:700; font-size:16px; line-height:1.2; } .sidebar-brand small { display:block; font-size:11px; font-weight:500; opacity:.7; } .sidebar-menu-section { flex:1; padding:18px 14px; } .sidebar-menu-title { margin:14px 0 10px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.45); padding:0 12px; } .sidebar-menu { list-style:none; } .sidebar-menu li { margin-bottom:4px; } .sidebar-menu a { width:100%; padding:12px 14px; color:rgba(255,255,255,.9); border-radius:var(--r-md); font-size:14.5px; transition:all .3s; display:flex; align-items:center; gap:13px; font-weight:500; text-decoration:none; } .sidebar-menu a:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateX(4px); } .sidebar-menu a.active { background:var(--navy-accent); color:#fff; box-shadow:0 4px 12px rgba(0,116,217,.3); } .sidebar-menu i { width:20px; text-align:center; font-size:16px; } .nav-pill { margin-left:auto; min-width:20px; padding:2px 7px; border-radius:var(--r-pill); background:var(--danger); color:#fff; font-size:11px; font-weight:700; font-style:normal; text-align:center; } .sidebar-logout { padding:14px 18px; border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.15); } .sidebar-logout a { width:100%; padding:12px; background:rgba(234,67,53,.22); border:1px solid rgba(234,67,53,.4); color:#fff; border-radius:var(--r-md); font-size:14.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; transition:all .3s; } .sidebar-logout a:hover { background:rgba(234,67,53,.42); transform:translateY(-2px); } .main-content { flex:1; padding:20px; overflow-x:hidden; background:#f5f5f5; min-width:0; } /* Navbar — the single page header (title + crumb + user merged) */ .navbar { display:flex; align-items:center; gap:8px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); border-radius:3px; padding:8px 14px; margin-bottom:15px; } .navbar-start { display:flex; align-items:center; gap:8px; flex:1; min-width:0; } .navbar-end { display:flex; align-items:center; gap:6px; } .nav-page { display:flex; flex-direction:column; gap:2px; min-width:0; padding-left:4px; } .nav-page-title { font-size:18px; font-weight:700; color:var(--navy-primary); display:flex; align-items:center; gap:9px; line-height:1.15; white-space:nowrap; } .nav-page-title i { color:var(--navy-accent); font-size:16px; } .nav-crumb { font-size:11.5px; color:#9aa6b2; display:flex; align-items:center; gap:6px; } .nav-crumb i { font-size:10px; color:var(--navy-accent); } .nav-crumb-sep { color:#cbd3db; } .nav-welcome { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; margin-right:6px; } .nav-welcome-hi { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:#9aa6b2; font-weight:600; } .nav-welcome strong { font-size:14px; color:var(--navy-primary); font-weight:600; } .nav-btn { width:40px; height:40px; border:none; background:transparent; border-radius:var(--r-md); color:#4a5763; font-size:17px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; transition:background .2s; } .nav-btn:hover { background:#eef1f5; color:var(--navy-primary); } .nav-avatar { width:38px; height:38px; border-radius:50%; border:2px solid var(--navy-accent); object-fit:cover; cursor:pointer; } .nav-dd { position:relative; } .nav-dd-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:230px; background:#fff; border:1px solid #e8ecf1; border-radius:3px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px; display:none; z-index:300; } .nav-dd.open .nav-dd-menu { display:block; } .nav-dd-menu a { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:var(--r-md); font-size:14px; color:#444; text-decoration:none; } .nav-dd-menu a:hover { background:#eef1f5; color:var(--navy-primary); } .nav-dd-head { padding:10px 12px; border-bottom:1px solid #f0f0f0; margin-bottom:6px; } .nav-dd-head .dd-title { font-size:15px; font-weight:700; color:var(--navy-primary); } .nav-dd-head .dd-sub { font-size:12.5px; color:var(--navy-accent); margin-top:2px; } .env-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; } .env-chip.sandbox { background:rgba(251,188,4,.18); color:#8a6d02; } .env-chip.production { background:rgba(52,168,83,.16); color:#1e7e34; } .env-chip.development { background:rgba(0,116,217,.14); color:var(--navy-accent); } /* AdminLTE small-box / info-box / lte-card */ .small-box { position:relative; display:block; border-radius:var(--r-md); box-shadow:0 2px 6px rgba(0,0,0,.15); color:#fff; overflow:hidden; transition:transform .25s; } .small-box:hover { transform:translateY(-3px); box-shadow:0 4px 14px rgba(0,0,0,.2); } .small-box .inner { padding:18px 20px 12px; position:relative; z-index:2; } .small-box .inner h3 { font-size:clamp(22px, 4.5vw, 30px); font-weight:700; margin:0 0 6px; white-space:nowrap; } .small-box .inner p { font-size:14px; margin:0 0 8px; opacity:.95; } .small-box .icon { position:absolute; top:12px; right:16px; z-index:1; font-size:64px; color:rgba(0,0,0,.15); transition:font-size .3s; } .small-box:hover .icon { font-size:70px; } .small-box-footer { position:relative; display:block; width:100%; padding:7px 0; text-align:center; background:rgba(0,0,0,.12); color:rgba(255,255,255,.9); font-size:13px; text-decoration:none; border:none; cursor:pointer; z-index:3; } .small-box-footer:hover { background:rgba(0,0,0,.22); color:#fff; } .bg-navy { background:linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); } .bg-info { background:linear-gradient(135deg, var(--navy-accent) 0%, #3393e0 100%); } .bg-success { background:linear-gradient(135deg, #2e8b46 0%, var(--success) 100%); } .bg-warning { background:linear-gradient(135deg, #e0a800 0%, var(--warning) 100%); color:#1f2d3d; } .bg-warning .small-box-footer { color:rgba(0,0,0,.65); } .bg-danger { background:linear-gradient(135deg, #c5221f 0%, var(--danger) 100%); } .info-box { display:flex; align-items:center; background:#fff; border-radius:var(--r-md); box-shadow:0 2px 6px rgba(0,0,0,.1); padding:12px; min-height:80px; } .info-box-icon { width:56px; height:56px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; flex-shrink:0; } .info-box-content { padding-left:12px; flex:1; min-width:0; } .info-box-text { text-transform:uppercase; font-size:12px; color:#666; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .info-box-number { font-size:20px; font-weight:700; color:var(--navy-primary); } .lte-card { background:#fff; border-radius:var(--r-md); box-shadow:0 2px 6px rgba(0,0,0,.1); margin-bottom:20px; border-top:3px solid var(--navy-accent); } .lte-card-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid #f0f0f0; flex-wrap:wrap; gap:10px; } .lte-card-title { font-size:16px; font-weight:600; color:var(--navy-primary); margin:0; display:flex; align-items:center; gap:8px; } .lte-card-tools { display:flex; align-items:center; gap:4px; } .lte-card-tools button { background:none; border:none; color:#999; cursor:pointer; padding:4px 8px; font-size:14px; } .lte-card-tools button:hover { color:var(--navy-accent); } .lte-card-body { padding:18px; } .lte-card.collapsed .lte-card-body { display:none; } .lte-card.collapsed { border-top-color:#ccc; } .kpi-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:20px; } /* Tabulator — navy skin */ .tabulator { background:transparent; border:1px solid #e6e9ef; border-radius:var(--r-md); font-size:13px; overflow:hidden; } .tabulator .tabulator-header { background:var(--navy-primary); border-bottom:0; color:#fff; font-weight:600; } .tabulator .tabulator-header .tabulator-col { background:transparent; border-right:1px solid rgba(255,255,255,.10); } .tabulator .tabulator-header .tabulator-col-title { font-size:12.5px; letter-spacing:.3px; padding:12px 10px; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background:rgba(255,255,255,.08); } .tabulator .tabulator-header .tabulator-col .tabulator-arrow { border-bottom-color:rgba(255,255,255,.6) !important; } .tabulator .tabulator-row { border-bottom:1px solid #f1f3f7; background:#fff; } .tabulator .tabulator-row.tabulator-row-even { background:#fcfdff; } .tabulator .tabulator-row:hover { background:#f5f8fc; } .tabulator .tabulator-cell { border-right:0; padding:11px 10px; color:var(--text-primary); } .tabulator .tabulator-footer { background:#f8fafc; border-top:1px solid #eceff4; padding:8px 10px; } .tabulator .tabulator-footer .tabulator-page { border:1px solid #e2e8f1; background:#fff; color:var(--navy-primary); font-size:12.5px; padding:5px 10px; border-radius:var(--r-sm); } .tabulator .tabulator-footer .tabulator-page.active { background:var(--navy-primary); color:#fff; border-color:var(--navy-primary); } .tabulator .tabulator-footer .tabulator-page:disabled { opacity:.45; } .tabulator .tabulator-placeholder .tabulator-placeholder-contents { color:#98a2b3; font-size:13px; } .tb-user { display:flex; align-items:center; gap:10px; min-width:0; } .tb-ava { flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--navy-accent); color:#fff; font-size:11.5px; font-weight:700; } .tb-uid { min-width:0; line-height:1.3; } .tb-uid b { display:block; font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; } .tb-uid small { display:block; font-size:11.5px; color:#9aa6b2; overflow:hidden; text-overflow:ellipsis; } .tb-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; } .tb-pill i { width:6px; height:6px; border-radius:50%; background:currentColor; } .tb-pill.ok { background:rgba(52,168,83,.14); color:#1e7e34; } .tb-pill.off { background:rgba(234,67,53,.13); color:#c5221f; } .tb-pill.wait { background:rgba(251,188,4,.18); color:#8a6d02; } .tb-pill.idle { background:rgba(122,135,148,.15); color:#5c6773; } .tb-na { color:#9aa6b2; } .tb-amt { font-weight:700; font-variant-numeric:tabular-nums; } .tb-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px; margin-bottom:10px; background:#fff; border:1px solid #e6e9ef; border-radius:var(--r-md); } .tb-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tb-search, .tb-sel { position:relative; display:flex; align-items:center; } .tb-search > i, .tb-sel > i { position:absolute; left:12px; font-size:13px; color:#9aa6b2; pointer-events:none; } .tb-search input, .tb-sel select { height:38px; padding:0 12px 0 34px; border:1px solid #e2e8f1; background:#fff; color:var(--text-primary); font-family:inherit; font-size:13px !important; font-weight:500; border-radius:var(--r-sm); transition:border-color .2s, box-shadow .2s; } .tb-search input { width:262px; } .tb-sel select { padding-right:28px; cursor:pointer; min-width:150px; } .tb-search input:focus, .tb-sel select:focus { outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 3px rgba(0,116,217,.14); } .tb-tbtn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:1px solid #e2e8f1; background:#fff; color:var(--text-primary); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:var(--r-sm); transition:all .18s; text-decoration:none; } .tb-tbtn:hover { border-color:var(--navy-accent); color:var(--navy-accent); } /* Status badges + tables */ .status-badge { padding:5px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; display:inline-block; } .status-paid { background:#d4edda; color:#155724; } .status-pending, .status-initiated { background:#fff3cd; color:#8a6d02; } .status-failed { background:#f8d7da; color:#721c24; } .status-cancelled { background:#e9ecef; color:#495057; } .about-table-wrapper { overflow-x:auto; margin:15px 0; } .about-roles-table { width:100%; border-collapse:collapse; font-size:14px; } .about-roles-table th, .about-roles-table td { padding:12px 15px; text-align:center; border:1px solid #e0e0e0; } .about-roles-table th { background:var(--navy-primary); color:#fff; font-weight:600; } .about-roles-table th:first-child, .about-roles-table td:first-child { text-align:left; } .about-roles-table td:first-child { font-weight:500; background:#f8f9fa; } .role-badge { display:inline-block; padding:4px 10px; border-radius:3px; font-size:12px; font-weight:600; } .role-admin { background:#d4edda; color:#155724; } .role-viewer { background:#d6e4ff; color:#004085; } .text-success { color:var(--success); } .text-danger { color:var(--danger); } /* About */ .about-section { max-width:960px; margin:0 auto; } .about-header { display:flex; align-items:center; gap:20px; margin-bottom:24px; padding:24px; border-radius:var(--r-sm); color:#fff; background:linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); } .about-header img { width:78px; height:78px; border-radius:50%; border:3px solid rgba(255,255,255,.3); object-fit:cover; } .about-title h1 { font-size:23px; margin-bottom:6px; font-weight:700; } .about-dev { font-size:14px; opacity:.9; } .about-card { background:#fff; border-radius:var(--r-sm); padding:24px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,.08); border-left:4px solid var(--navy-primary); } .about-card h2 { color:var(--navy-primary); font-size:19px; margin-bottom:14px; display:flex; align-items:center; gap:10px; } .about-card p { color:#555; line-height:1.7; font-size:15px; } .about-features { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; } .about-features li { padding:13px 15px; background:#f8f9fa; border-radius:3px; color:#333; font-size:14px; font-weight:600; display:flex; align-items:center; } .about-features li i { color:var(--navy-primary); margin-inline-end:10px; font-size:16px; flex-shrink:0; } .about-developer { border-left-color:var(--navy-accent); } .developer-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; } .dev-link { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-md); text-decoration:none; font-weight:600; font-size:14px; transition:all .3s; } .dev-link.whatsapp { background:#25D366; color:#fff; } .dev-link.whatsapp:hover { background:#128C7E; transform:translateY(-2px); } .dev-link.telegram { background:#229ED9; color:#fff; } .dev-link.telegram:hover { background:#1a7fb0; transform:translateY(-2px); } .dev-link.email { background:var(--navy-accent); color:#fff; } .dev-link.email:hover { background:var(--navy-primary); transform:translateY(-2px); } .dev-link.youtube { background:#FF0000; color:#fff; } .dev-link.youtube:hover { background:#CC0000; transform:translateY(-2px); } .about-footer { text-align:center; padding:22px; color:#666; font-size:14px; } /* Top loading bar — READS only, non blocking */ .top-loadbar { position:fixed; top:0; left:0; right:0; height:3px; z-index:10001; overflow:hidden; pointer-events:none; } .top-loadbar > span { display:block; height:100%; width:38%; border-radius:0 3px 3px 0; background:linear-gradient(90deg, rgba(0,116,217,0), var(--navy-accent), var(--navy-primary)); box-shadow:0 0 8px rgba(0,116,217,.5); animation:topLoadSlide 1.05s ease-in-out infinite; } @keyframes topLoadSlide { 0% { transform:translateX(-105%); } 100% { transform:translateX(320%); } } /* Processing overlay — WRITES only */ .action-loader { position:fixed; inset:0; z-index:3000; display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:rgba(0,31,63,.72); backdrop-filter:blur(3px); } .action-loader.on { display:flex; } .action-loader img { width:92px; height:92px; border-radius:50%; border:3px solid rgba(255,255,255,.35); object-fit:cover; box-shadow:0 6px 24px rgba(0,0,0,.35); animation:al-pulse 1.6s ease-in-out infinite; } .action-loader-bar { width:min(260px, 60vw); height:5px; border-radius:var(--r-md); background:rgba(255,255,255,.25); overflow:hidden; } .action-loader-bar::after { content:""; display:block; width:40%; height:100%; border-radius:var(--r-md); background:var(--navy-accent); animation:al-slide 1.1s ease-in-out infinite; } .action-loader-text { color:#fff; font-size:14px; font-weight:600; letter-spacing:.3px; } @keyframes al-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } } @keyframes al-slide { 0% { transform:translateX(-100%); } 100% { transform:translateX(350%); } } /* ───── customer flow: UIv31 "Fintech Blurple" (docs/colors.md, exact registry hexes) ───── Scoped to the pages a buyer sees; the admin dashboard keeps the Navy theme. Token mapping per colors.md: Primary = dark text/chrome, Background = summary rail, Cards = form surface, Accent = buttons/focus rings. Semantics stay separate (rule 5). */ .page-checkout, .page-pay { --c-primary:#0A2540; --c-secondary:#425466; --c-bg:#F6F9FC; --c-card:#FFFFFF; --c-accent:#635BFF; --c-on-accent:#FFFFFF; --c-ok:#16A34A; --c-err:#DC2626; --c-warn:#D97706; --c-line:color-mix(in srgb, var(--c-secondary) 16%, #fff); /* derived from Secondary, not invented */ --c-ghost:color-mix(in srgb, var(--c-secondary) 55%, #fff); --st-sh:0 1px 1px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.02); /* the layered input shadow */ background:var(--c-card); color:var(--c-primary); } /* two content columns hugging the centre gutter */ .co { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; min-height:100dvh; } .co-side { background:var(--c-bg); border-right:1px solid var(--c-line); display:flex; justify-content:flex-end; align-items:flex-start; padding:56px 44px; } .co-side-inner { width:100%; max-width:400px; display:flex; flex-direction:column; } .co-main { background:var(--c-card); display:flex; justify-content:flex-start; align-items:flex-start; padding:56px 44px; } .co-form { width:100%; max-width:400px; } .co-merchant { display:flex; align-items:center; gap:10px; margin-bottom:36px; } .co-merchant img { width:30px; height:30px; border-radius:6px; object-fit:cover; } .co-merchant span { font-size:15px; font-weight:600; } .co-pay-label { font-size:15px; color:var(--c-secondary); font-weight:500; margin-bottom:7px; } .co-total { font-size:clamp(30px, 3.4vw, 36px); font-weight:600; letter-spacing:-.6px; font-variant-numeric:tabular-nums; margin-bottom:32px; } /* priced line item — what they are buying, not a generic label/value list */ .co-item { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:20px 0 18px; margin-top:4px; border-top:1px solid var(--c-line); } .co-item-desc { min-width:0; } .co-item-desc b { display:block; font-size:14px; font-weight:500; line-height:1.35; word-break:break-word; } .co-item-desc small { display:block; margin-top:3px; font-size:13px; color:var(--c-secondary); word-break:break-word; } .co-item-price { font-size:14px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; } .co-due { display:flex; justify-content:space-between; gap:18px; padding-top:16px; border-top:1px solid var(--c-line); font-size:14px; } .co-due span { color:var(--c-secondary); } .co-due b { font-weight:600; font-variant-numeric:tabular-nums; } .co-side-foot { margin-top:30px; padding-top:22px; border-top:1px solid var(--c-line); font-size:12.5px; color:var(--c-secondary); } .co-trust { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .co-cards { display:inline-flex; align-items:center; gap:7px; font-size:23px; color:var(--c-secondary); opacity:.65; } .co-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; background:color-mix(in srgb, var(--c-ok) 10%, #fff); color:#047857; margin-bottom:12px; } .co-title { font-size:20px; font-weight:600; letter-spacing:-.2px; margin-bottom:24px; } .st-block { margin-bottom:20px; } .st-label { display:block; font-size:14px; font-weight:500; margin-bottom:8px; } /* grouped inputs — one border round the set, hairlines between. Stripe's signature. */ .st-group { border:1px solid var(--c-line); border-radius:6px; background:var(--c-card); box-shadow:var(--st-sh); overflow:hidden; transition:border-color .15s, box-shadow .15s; } .st-group:focus-within { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent), var(--st-sh); } .st-group.bad { border-color:var(--c-err); } .st-group.bad:focus-within { box-shadow:0 0 0 1px var(--c-err), var(--st-sh); } .st-split { display:grid; grid-template-columns:1fr 1fr; } .st-cell + .st-cell, .st-split + .st-cell { border-top:1px solid var(--c-line); } .st-split .st-cell + .st-cell { border-top:0; border-left:1px solid var(--c-line); } .st-group input { width:100%; height:44px; padding:0 13px; border:0; background:transparent; color:var(--c-primary); font-family:inherit; font-size:15px !important; } .st-group input:focus { outline:none; } .st-group input::placeholder, .st-input::placeholder { color:var(--c-ghost); } .st-input { width:100%; height:48px; padding:0 14px; border:1px solid var(--c-line); border-radius:6px; background:var(--c-card); color:var(--c-primary); font-family:inherit; font-size:16px !important; box-shadow:var(--st-sh); transition:border-color .15s, box-shadow .15s; } .st-input:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent), var(--st-sh); } .st-input.bad { border-color:var(--c-err); } .st-input.bad:focus { box-shadow:0 0 0 1px var(--c-err), var(--st-sh); } .st-amt { position:relative; } .st-cur { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; font-weight:600; color:var(--c-secondary); pointer-events:none; } .st-amt .st-input { padding-left:56px; font-size:20px !important; font-weight:600; font-variant-numeric:tabular-nums; } .st-err { display:none; margin-top:7px; font-size:13px; color:var(--c-err); align-items:center; gap:6px; line-height:1.4; } .st-err.on { display:flex; } .st-hint { margin-top:8px; font-size:12.5px; color:var(--c-secondary); } .st-btn { width:100%; height:46px; margin-top:26px; border:0; border-radius:6px; background:var(--c-accent); color:var(--c-on-accent); font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; transition:filter .15s, transform .06s; box-shadow:0 1px 1px rgba(0,0,0,.06), 0 2px 6px color-mix(in srgb, var(--c-accent) 30%, transparent); } .st-btn:hover:not(:disabled) { filter:brightness(1.08); } .st-btn:active:not(:disabled) { transform:translateY(1px); } .st-btn:disabled { opacity:.5; cursor:not-allowed; } .st-btn:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; } .st-alert { display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:6px; font-size:13.5px; line-height:1.5; margin-bottom:18px; } .st-alert.err { background:color-mix(in srgb, var(--c-err) 8%, #fff); color:var(--c-err); } .st-alert.warn { background:color-mix(in srgb, var(--c-warn) 12%, #fff); color:#8a5a00; } .st-alert a { color:inherit; font-weight:600; } .st-secure { margin-top:16px; font-size:12.5px; color:var(--c-secondary); line-height:1.6; text-align:center; } .st-secure i { color:var(--c-ok); margin-right:4px; } .st-legal { margin-top:14px; padding-top:14px; border-top:1px solid var(--c-line); text-align:center; font-size:12px; color:var(--c-secondary); } .st-legal b { color:var(--c-primary); font-weight:600; } /* overlay picks up the accent on the customer flow */ .page-checkout .action-loader, .page-pay .action-loader { background:color-mix(in srgb, var(--c-primary) 80%, transparent); } .page-checkout .action-loader-bar::after, .page-pay .action-loader-bar::after { background:var(--c-accent); } @media (max-width: 900px) { .co { grid-template-columns:1fr; } .co-side { border-right:0; border-bottom:1px solid var(--c-line); padding:24px 20px 20px; justify-content:stretch; } .co-side-inner, .co-form { max-width:none; } .co-merchant { margin-bottom:20px; } .co-total { margin-bottom:20px; } .co-side-foot { display:none; } .co-main { padding:26px 20px 40px; justify-content:stretch; } } /* ───── page: result / receipt ───── */ .page-pay { background:var(--c-bg); min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .result-card { background:var(--c-card); border:1px solid var(--c-line); border-radius:10px; box-shadow:0 4px 14px rgba(10,37,64,.07); width:100%; max-width:440px; overflow:hidden; text-align:center; } .result-top { padding:34px 28px 26px; border-bottom:1px solid var(--c-line); } .result-icon { font-size:46px; margin-bottom:14px; } .result-top.ok .result-icon { color:var(--c-ok); } .result-top.bad .result-icon { color:var(--c-err); } .result-top.wait .result-icon { color:var(--c-warn); } .result-top h1 { font-size:21px; font-weight:600; letter-spacing:-.2px; margin-bottom:7px; } .result-top p { font-size:13.5px; color:var(--c-secondary); line-height:1.5; } .result-amt { font-size:32px; font-weight:600; margin:16px 0 0; font-variant-numeric:tabular-nums; letter-spacing:-.5px; } .result-rows { padding:20px 28px; text-align:left; } .result-row { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--c-line); font-size:13.5px; } .result-row:last-child { border-bottom:none; } .result-row span { color:var(--c-secondary); } .result-row b { font-weight:500; text-align:right; word-break:break-all; } .result-actions { padding:4px 28px 26px; display:flex; gap:10px; } .result-actions .st-btn { margin-top:0; flex:1; } .result-actions .st-btn.alt { background:var(--c-card); color:var(--c-primary); border:1px solid var(--c-line); box-shadow:var(--st-sh); } .result-actions .st-btn.alt:hover { border-color:var(--c-accent); color:var(--c-accent); filter:none; } /* ───── page: setup ───── */ .page-setup { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; background:linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); } .setup-card { background:#fff; border-radius:var(--r-sm); box-shadow:0 10px 36px rgba(0,0,0,.25); padding:34px; max-width:620px; width:100%; text-align:center; } .setup-logo { width:78px; height:78px; border-radius:50%; object-fit:cover; border:3px solid var(--navy-primary); margin-bottom:14px; } .setup-card h1 { color:var(--navy-primary); font-size:23px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:10px; } .setup-card p { color:#555; font-size:14.5px; line-height:1.65; margin-bottom:18px; } .setup-msg { padding:13px 16px; border-radius:var(--r-md); font-size:14px; font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:9px; text-align:left; } .setup-msg.ok { background:#d4edda; color:#155724; } .setup-msg.err { background:#f8d7da; color:#721c24; } .setup-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .setup-note { font-size:13px; color:var(--text-muted); margin:18px 0 0; } .setup-card code { background:#f1f4f8; padding:2px 7px; border-radius:3px; font-size:13px; color:var(--navy-primary); } /* ───── page: settings ───── */ .page-settings .lte-card-body { max-width:760px; } .key-hint { font-size:12px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:6px; } .copy-row { display:flex; gap:8px; align-items:center; } .copy-row input { flex:1; background:#f8fafc; } @media (max-width: 992px) { .kpi-grid { grid-template-columns:repeat(2, 1fr); } .about-features { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 768px) { .app-container { flex-direction:column; } .sidebar { width:100%; } .kpi-grid, .form-grid, .about-features { grid-template-columns:1fr; } .form-grid { gap:20px; margin-bottom:20px; } .nav-crumb, .nav-welcome { display:none; } .nav-page-title { font-size:16px; } .tb-tools { width:100%; } .tb-search, .tb-search input, .tb-sel, .tb-sel select { flex:1; width:auto; min-width:0; } .about-header { flex-direction:column; text-align:center; } input, select, textarea { font-size:16px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* segmented picker — used instead of a plain