/* ============================================================ CloudCaarl — styles.css Clean flat design. Outfit + JetBrains Mono. Light / Dark via [data-theme] on ============================================================ */ /* ── Dark theme (default) ─────────────────────────────────── */ :root { --bg: #080d17; --bg2: #0d1220; --card: #111827; --card2: #161f30; --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.13); --accent: #3b82f6; --accent-dim: rgba(59,130,246,0.12); --accent-hover: #2563eb; --green: #22c55e; --green-dim: rgba(34,197,94,0.10); --red: #ef4444; --red-dim: rgba(239,68,68,0.10); --yellow: #f59e0b; --yellow-dim: rgba(245,158,11,0.10); --gold: #eab308; --gold-dim: rgba(234,179,8,0.10); --text: #e8edf5; --text2: #7a8ba3; --text3: #374151; --sidebar-w: 252px; --radius: 10px; --radius-sm: 7px; --shadow: 0 2px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.55); --font: 'Outfit', sans-serif; --mono: 'JetBrains Mono', monospace; --transition: 0.15s ease; color-scheme: dark; } /* ── Light theme ──────────────────────────────────────────── */ [data-theme="light"] { --bg: #f1f5f9; --bg2: #ffffff; --card: #ffffff; --card2: #f8fafc; --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.14); --accent: #2563eb; --accent-dim: rgba(37,99,235,0.09); --accent-hover: #1d4ed8; --green: #16a34a; --green-dim: rgba(22,163,74,0.09); --red: #dc2626; --red-dim: rgba(220,38,38,0.09); --yellow: #d97706; --yellow-dim: rgba(217,119,6,0.09); --gold: #b45309; --gold-dim: rgba(180,83,9,0.09); --text: #0f172a; --text2: #475569; --text3: #94a3b8; --shadow: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); color-scheme: light; } /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; transition: background 0.2s, color 0.2s; } a { text-decoration: none; color: inherit; } button { font-family: var(--font); cursor: pointer; border: none; outline: none; } input, select, textarea { font-family: var(--font); outline: none; } .hidden { display: none !important; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } /* ── Lucide icon sizing ───────────────────────────────────── */ [data-lucide] { display: inline-block; vertical-align: middle; width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; } .icon-sm [data-lucide] { width: 14px; height: 14px; } .icon-lg [data-lucide] { width: 20px; height: 20px; } .icon-xl [data-lucide] { width: 28px; height: 28px; } /* ── Toast ────────────────────────────────────────────────── */ #toast-container { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--card); border: 1px solid var(--border2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 13px 16px; min-width: 265px; max-width: 340px; box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 10px; animation: toastIn 0.22s ease; font-size: 0.87rem; } .toast.error { border-left-color: var(--red); } .toast.warning { border-left-color: var(--yellow); } .toast.success { border-left-color: var(--green); } .toast-icon { flex-shrink: 0; margin-top: 1px; color: var(--accent); } .toast.error .toast-icon { color: var(--red); } .toast.warning .toast-icon { color: var(--yellow); } .toast.success .toast-icon { color: var(--green); } .toast-body strong { display: block; font-weight: 600; margin-bottom: 2px; font-size: 0.88rem; } .toast-body span { color: var(--text2); font-size: 0.82rem; line-height: 1.4; } @keyframes toastIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(110%); } } /* ── Modal ────────────────────────────────────────────────── */ #modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); animation: fadeIn 0.18s ease; } #modal-box { background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: scaleIn 0.18s ease; } #modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } #modal-title { font-size: 1.02rem; font-weight: 600; } .modal-close { background: none; color: var(--text2); padding: 5px; border-radius: 6px; transition: var(--transition); display: flex; align-items: center; } .modal-close:hover { background: var(--border); color: var(--text); } #modal-body { padding: 22px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── Auth ─────────────────────────────────────────────────── */ #auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); position: relative; } .auth-theme-btn { position: fixed; top: 16px; right: 16px; z-index: 10; background: var(--card); border: 1px solid var(--border2); border-radius: 8px; padding: 8px; color: var(--text2); cursor: pointer; display: flex; align-items: center; transition: var(--transition); } .auth-theme-btn:hover { color: var(--text); border-color: var(--accent); } .auth-card { background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 38px 34px; width: 100%; max-width: 398px; box-shadow: var(--shadow-lg); } .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .auth-logo-icon { flex-shrink: 0; display: flex; align-items: center; } .logo-text { font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; } .auth-tagline { color: var(--text2); margin-bottom: 26px; font-size: 0.88rem; } .auth-tabs { display: flex; gap: 3px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 20px; } .auth-tab { flex: 1; padding: 8px; border-radius: 5px; background: none; color: var(--text2); font-size: 0.87rem; font-weight: 500; transition: var(--transition); } .auth-tab.active { background: var(--accent); color: #fff; font-weight: 600; } .auth-form { display: flex; flex-direction: column; gap: 13px; } .auth-demo-hint { margin-top: 16px; text-align: center; font-size: 0.76rem; color: var(--text3); padding-top: 16px; border-top: 1px solid var(--border); } .auth-demo-hint span { color: var(--text2); font-weight: 500; } /* ── Form elements ────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 0.75rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.07em; } .field input, .field select, .field textarea { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: 0.9rem; transition: var(--transition); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .field input::placeholder { color: var(--text3); } .field select option { background: var(--card); } .field textarea { resize: vertical; min-height: 88px; } .field small { font-size: 0.73rem; color: var(--text3); margin-top: 2px; } .search-input, .filter-select { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 12px; font-size: 0.87rem; transition: var(--transition); } .search-input { flex: 1; min-width: 180px; } .search-input:focus, .filter-select:focus { border-color: var(--accent); } .filter-select { cursor: pointer; } /* ── Buttons ──────────────────────────────────────────────── */ .btn-primary { background: var(--accent); color: #fff; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 0.9rem; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(0.98); } .btn-primary.full { width: 100%; justify-content: center; } .btn-primary.small { padding: 6px 13px; font-size: 0.8rem; } .btn-primary:disabled { opacity: 0.42; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--card2); color: var(--text); font-weight: 500; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid var(--border); transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; } .btn-secondary:hover { background: var(--border); border-color: var(--border2); } .btn-secondary.full { width: 100%; justify-content: center; } .btn-secondary.small { padding: 6px 13px; font-size: 0.8rem; } .btn-danger { background: var(--red-dim); color: var(--red); font-weight: 600; padding: 7px 13px; border-radius: var(--radius-sm); font-size: 0.8rem; border: 1px solid rgba(239,68,68,0.17); transition: var(--transition); display: inline-flex; align-items: center; gap: 5px; } .btn-danger:hover { background: var(--red); color: #fff; } .btn-success { background: var(--green-dim); color: var(--green); font-weight: 600; padding: 7px 13px; border-radius: var(--radius-sm); font-size: 0.8rem; border: 1px solid rgba(34,197,94,0.17); transition: var(--transition); display: inline-flex; align-items: center; gap: 5px; } .btn-success:hover { background: var(--green); color: #fff; } .btn-logout { width: 100%; background: none; color: var(--text2); padding: 9px 10px; border-radius: var(--radius-sm); font-size: 0.84rem; text-align: left; transition: var(--transition); display: flex; align-items: center; gap: 8px; } .btn-logout:hover { background: var(--red-dim); color: var(--red); } /* ── App layout ───────────────────────────────────────────── */ #app-screen { display: flex; min-height: 100vh; } #sidebar { width: var(--sidebar-w); background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; transition: transform 0.25s ease; } .sidebar-logo { display: flex; align-items: center; gap: 9px; padding: 16px 14px; border-bottom: 1px solid var(--border); } .sidebar-logo-icon { flex-shrink: 0; display: flex; align-items: center; } .sidebar-logo .logo-text { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .user-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; flex-shrink: 0; } .user-name { font-weight: 600; font-size: 0.86rem; line-height: 1.2; } .user-balance { font-family: var(--mono); font-size: 0.78rem; color: var(--gold); font-weight: 600; margin-top: 1px; } nav { padding: 8px 7px; flex: 1; } .nav-section-label { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); padding: 10px 9px 4px; } .admin-label { color: var(--yellow); opacity: 0.55; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--radius-sm); color: var(--text2); font-size: 0.87rem; font-weight: 500; transition: var(--transition); margin-bottom: 1px; cursor: pointer; } .nav-item:hover { background: var(--border); color: var(--text); } .nav-item.active { background: var(--accent-dim); color: var(--accent); } .nav-item [data-lucide] { width: 15px; height: 15px; flex-shrink: 0; } .nav-label { flex: 1; } .nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 0.67rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; min-width: 18px; text-align: center; line-height: 1.6; } .nav-badge.red { background: var(--red); } .nav-badge.yellow { background: var(--yellow); color: #000; } .nav-badge:empty { display: none; } .sidebar-bottom { padding: 10px 7px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .theme-toggle-btn { display: flex; align-items: center; gap: 9px; padding: 9px 9px; border-radius: var(--radius-sm); background: none; color: var(--text2); font-size: 0.84rem; font-weight: 500; width: 100%; transition: var(--transition); border: none; cursor: pointer; font-family: var(--font); } .theme-toggle-btn:hover { background: var(--border); color: var(--text); } /* ── Mobile header ────────────────────────────────────────── */ #mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--bg2); border-bottom: 1px solid var(--border); z-index: 200; align-items: center; justify-content: space-between; padding: 0 14px; } #menu-toggle { background: none; color: var(--text); padding: 6px; display: flex; align-items: center; } .mobile-logo { font-weight: 800; font-size: 0.93rem; } .mobile-right { display: flex; align-items: center; gap: 4px; } .mobile-notif { cursor: pointer; color: var(--text2); position: relative; display: flex; padding: 6px; } .notif-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--red); border-radius: 50%; border: 2px solid var(--bg2); } .mobile-theme-btn { background: none; color: var(--text2); padding: 6px; display: flex; align-items: center; cursor: pointer; } #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; } #sidebar-overlay.visible { display: block; } /* ── Main content ─────────────────────────────────────────── */ #main-content { margin-left: var(--sidebar-w); flex: 1; padding: 28px 30px; min-height: 100vh; } /* ── Views ────────────────────────────────────────────────── */ .view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .view-header h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } .view-header p { color: var(--text2); font-size: 0.86rem; margin-top: 3px; } /* ── Stat cards ───────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 13px; margin-bottom: 22px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; transition: var(--transition); } .stat-card:hover { border-color: var(--border2); } /* stat-card-bar — no accent colours, plain cards */ .stat-card-bar { display: none; } .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; } .stat-icon-wrap [data-lucide] { width: 16px; height: 16px; } .stat-icon-wrap.green { background: var(--green-dim); color: var(--green); } .stat-icon-wrap.blue { background: var(--accent-dim); color: var(--accent); } .stat-icon-wrap.gold { background: var(--gold-dim); color: var(--gold); } .stat-icon-wrap.yellow { background: var(--yellow-dim); color: var(--yellow); } .stat-icon-wrap.red { background: var(--red-dim); color: var(--red); } .stat-icon-wrap.accent { background: var(--accent-dim); color: var(--accent); } .stat-label { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-bottom: 5px; } .stat-value { font-family: var(--mono); font-size: 1.45rem; font-weight: 600; line-height: 1; } .stat-sub { font-size: 0.73rem; color: var(--text3); margin-top: 5px; } .stat-sub a { color: var(--accent); } /* ── Card ─────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .card-title { font-size: 0.93rem; font-weight: 600; } /* ── Task cards ───────────────────────────────────────────── */ .tasks-toolbar { display: flex; gap: 9px; margin-bottom: 16px; flex-wrap: wrap; } #tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 13px; } .task-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; display: flex; flex-direction: column; gap: 10px; transition: var(--transition); } .task-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); } .task-category-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-dim); color: var(--accent); padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; width: fit-content; } .task-title { font-size: 0.93rem; font-weight: 600; line-height: 1.4; } .task-description { font-size: 0.84rem; color: var(--text2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .task-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text2); } .task-reward { font-family: var(--mono); font-size: 1.02rem; font-weight: 700; color: var(--gold); } .task-deadline { color: var(--text3); display: flex; align-items: center; gap: 4px; } .task-deadline.urgent { color: var(--red); } .task-footer { display: flex; align-items: center; gap: 8px; } /* ── Badges ───────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: 0.73rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .badge.approved, .badge.paid, .badge.active { background: var(--green-dim); color: var(--green); } .badge.pending { background: var(--yellow-dim); color: var(--yellow); } .badge.submitted { background: var(--accent-dim); color: var(--accent); } .badge.rejected, .badge.suspended { background: var(--red-dim); color: var(--red); } .badge.in_progress { background: var(--accent-dim); color: var(--accent); } .badge.not_submitted { background: var(--border); color: var(--text3); } .badge.admin { background: var(--gold-dim); color: var(--gold); } /* ── Tables ───────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } thead tr { background: var(--bg2); } th { padding: 11px 14px; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); white-space: nowrap; } td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: middle; } tr:hover td { background: rgba(255,255,255,0.015); } [data-theme="light"] tr:hover td { background: rgba(0,0,0,0.015); } .td-mono { font-family: var(--mono); font-weight: 500; } .td-actions { display: flex; gap: 5px; flex-wrap: wrap; } /* ── List items ───────────────────────────────────────────── */ .list-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; margin-bottom: 7px; display: flex; align-items: flex-start; gap: 12px; transition: var(--transition); } .list-item:hover { border-color: var(--border2); } .list-item.unread { border-left: 2px solid var(--accent); } .list-item-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .list-item-icon [data-lucide] { width: 16px; height: 16px; } .list-item-icon.task { background: var(--accent-dim); color: var(--accent); } .list-item-icon.kyc { background: var(--green-dim); color: var(--green); } .list-item-icon.withdrawal { background: var(--gold-dim); color: var(--gold); } .list-item-icon.system { background: var(--border); color: var(--text3); } .list-item-body { flex: 1; min-width: 0; } .list-item-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; } .list-item-sub { font-size: 0.82rem; color: var(--text2); line-height: 1.5; } .list-item-time { font-size: 0.73rem; color: var(--text3); margin-top: 5px; } .list-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } /* ── KYC progress ─────────────────────────────────────────── */ .kyc-progress { display: flex; align-items: center; margin-bottom: 22px; } .kyc-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; position: relative; } .kyc-step::after { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 1px; background: var(--border); } .kyc-step:last-child::after { display: none; } .kyc-step.done::after { background: var(--accent); } .kyc-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 700; z-index: 1; position: relative; } .kyc-step.done .kyc-dot { background: var(--accent); border-color: var(--accent); color: #fff; } .kyc-step.active .kyc-dot { border-color: var(--accent); color: var(--accent); } .kyc-step-label { font-size: 0.68rem; color: var(--text2); text-align: center; } .kyc-step.done .kyc-step-label, .kyc-step.active .kyc-step-label { color: var(--text); } /* ── Tx items ─────────────────────────────────────────────── */ .tx-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tx-item:last-child { border-bottom: none; } .tx-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .tx-dot.earning { background: var(--green); } .tx-dot.withdrawal { background: var(--red); } .tx-dot.adjustment { background: var(--gold); } .tx-desc { flex: 1; font-size: 0.85rem; } .tx-date { font-size: 0.73rem; color: var(--text3); } .tx-amount { font-family: var(--mono); font-weight: 600; font-size: 0.87rem; } .tx-amount.positive { color: var(--green); } .tx-amount.negative { color: var(--red); } /* ── Empty state ──────────────────────────────────────────── */ .empty-state { text-align: center; padding: 54px 20px; } .empty-icon { width: 50px; height: 50px; border-radius: 13px; background: var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; color: var(--text3); } .empty-icon [data-lucide] { width: 22px; height: 22px; } .empty-title { font-size: 0.97rem; font-weight: 600; margin-bottom: 5px; color: var(--text); } .empty-sub { font-size: 0.83rem; max-width: 270px; margin: 0 auto; color: var(--text2); } /* ── Loading ──────────────────────────────────────────────── */ .loading-spinner { display: flex; align-items: center; justify-content: center; padding: 52px; color: var(--text2); gap: 10px; font-size: 0.86rem; } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.65s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Filter tabs ──────────────────────────────────────────── */ .filter-tabs { display: flex; gap: 5px; margin-bottom: 16px; flex-wrap: wrap; } .ftab { background: var(--card); border: 1px solid var(--border); color: var(--text2); padding: 6px 13px; border-radius: 99px; font-size: 0.82rem; font-weight: 500; transition: var(--transition); } .ftab:hover { border-color: var(--border2); color: var(--text); } .ftab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } /* ── Pagination ───────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 20px; } .page-btn { min-width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); color: var(--text2); font-size: 0.83rem; font-weight: 500; transition: var(--transition); display: flex; align-items: center; justify-content: center; padding: 0 7px; cursor: pointer; } .page-btn:hover { border-color: var(--accent); color: var(--accent); } .page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } .page-btn:disabled { opacity: 0.28; cursor: not-allowed; } /* ── Alert ────────────────────────────────────────────────── */ .alert { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 0.85rem; line-height: 1.55; margin-bottom: 13px; display: flex; align-items: flex-start; gap: 9px; } .alert [data-lucide] { flex-shrink: 0; margin-top: 1px; width: 15px; height: 15px; } .alert.warning { background: var(--yellow-dim); border: 1px solid rgba(245,158,11,0.17); color: var(--yellow); } .alert.info { background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.17); color: var(--accent); } .alert.success { background: var(--green-dim); border: 1px solid rgba(34,197,94,0.17); color: var(--green); } .alert.error { background: var(--red-dim); border: 1px solid rgba(239,68,68,0.17); color: var(--red); } /* ── Detail rows ──────────────────────────────────────────── */ .detail-row { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .detail-row:last-child { border-bottom: none; } .detail-label { color: var(--text2); width: 152px; flex-shrink: 0; } .detail-value { color: var(--text); font-weight: 500; word-break: break-all; } /* ── Layout helpers ───────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .progress-bar-wrap { background: var(--bg2); border-radius: 99px; height: 5px; overflow: hidden; margin-top: 3px; } .progress-bar { height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.4s ease; } /* ── 404 ──────────────────────────────────────────────────── */ .error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .error-card { text-align: center; max-width: 420px; padding: 52px 38px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); } .error-code { font-family: var(--mono); font-size: 4.5rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 14px; } .error-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 9px; } .error-sub { color: var(--text2); line-height: 1.6; margin-bottom: 26px; font-size: 0.9rem; } .error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 900px) { #sidebar { transform: translateX(-100%); } #sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } #main-content { margin-left: 0; padding: 64px 15px 22px; } #mobile-header { display: flex; } .two-col, .three-col { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } #tasks-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .auth-card { padding: 26px 18px; } .stats-grid { grid-template-columns: 1fr 1fr; } .view-header { flex-direction: column; align-items: flex-start; } } /* ── Search input with icon prefix ────────────────────────── */ .search-wrap { position: relative; display: flex; align-items: center; } .search-wrap [data-lucide] { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text3); pointer-events: none; z-index: 1; } .search-wrap .search-input { padding-left: 32px; } /* ── Admin settings page ──────────────────────────────────── */ .settings-group { margin-bottom: 28px; } .settings-group-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 16px; } .settings-row:last-child { border-bottom: none; } .settings-row-info { flex: 1; } .settings-row-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; } .settings-row-desc { font-size: 0.8rem; color: var(--text2); line-height: 1.4; } .settings-row-control { flex-shrink: 0; } .settings-row-control input[type="text"], .settings-row-control input[type="number"], .settings-row-control select { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px; font-size: 0.88rem; font-family: var(--font); width: 180px; transition: var(--transition); } .settings-row-control input:focus, .settings-row-control select:focus { border-color: var(--accent); } /* Toggle switch */ .toggle-wrap { display: flex; align-items: center; gap: 9px; } .toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border2); border-radius: 99px; transition: 0.2s; } .toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--text2); border-radius: 50%; transition: 0.2s; } .toggle input:checked + .toggle-slider { background: var(--accent); } .toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; } /* Danger zone */ .danger-zone { border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius); padding: 18px 20px; background: var(--red-dim); margin-top: 24px; } .danger-zone-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--red); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } /* ============================================================ Writing Pad & Attachment Upload ============================================================ */ /* ── Quill editor overrides ───────────────────────────────── */ .ql-toolbar.ql-snow { border: 1px solid var(--border) !important; border-bottom: none !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; background: var(--bg2) !important; padding: 8px 10px !important; flex-wrap: wrap; } .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; } .ql-toolbar.ql-snow button, .ql-toolbar.ql-snow .ql-picker-label { color: var(--text2) !important; } .ql-toolbar.ql-snow button:hover, .ql-toolbar.ql-snow button.ql-active, .ql-toolbar.ql-snow .ql-picker-label:hover { color: var(--accent) !important; } .ql-toolbar.ql-snow .ql-stroke { stroke: var(--text2) !important; } .ql-toolbar.ql-snow button:hover .ql-stroke, .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent) !important; } .ql-toolbar.ql-snow .ql-fill { fill: var(--text2) !important; } .ql-toolbar.ql-snow button:hover .ql-fill, .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--accent) !important; } .ql-container.ql-snow { border: 1px solid var(--border) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; background: var(--bg2) !important; font-family: var(--font) !important; font-size: 0.92rem !important; } .ql-editor { min-height: 200px !important; max-height: 420px !important; overflow-y: auto !important; color: var(--text) !important; line-height: 1.7 !important; padding: 14px 16px !important; } .ql-editor.ql-blank::before { color: var(--text3) !important; font-style: normal !important; } .ql-editor p, .ql-editor li { color: var(--text); } .ql-editor a { color: var(--accent); } .ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--text); font-weight: 700; } .ql-editor blockquote { border-left: 3px solid var(--border2) !important; padding-left: 12px !important; color: var(--text2) !important; } .ql-editor pre.ql-syntax { background: var(--bg) !important; color: var(--accent) !important; border-radius: var(--radius-sm) !important; font-family: var(--mono) !important; font-size: 0.84rem !important; padding: 10px 14px !important; } .ql-snow .ql-picker-options { background: var(--card) !important; border-color: var(--border2) !important; border-radius: var(--radius-sm) !important; } .ql-snow .ql-picker-item { color: var(--text2) !important; } .ql-snow .ql-picker-item:hover { color: var(--accent) !important; } /* Word count bar */ .word-count-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: var(--bg2); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: 0.73rem; color: var(--text3); margin-bottom: 14px; } .word-count-bar.warn { color: var(--yellow); } /* ── Attachment drop zone ─────────────────────────────────── */ .attach-zone { border: 1.5px dashed var(--border2); border-radius: var(--radius-sm); padding: 24px 16px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--bg2); position: relative; } .attach-zone:hover, .attach-zone.drag-over { border-color: var(--accent); background: var(--accent-dim); } .attach-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .attach-zone-icon { color: var(--text3); margin-bottom: 8px; } .attach-zone-label { font-size: 0.88rem; color: var(--text2); line-height: 1.5; } .attach-zone-label strong { color: var(--accent); } .attach-zone-types { font-size: 0.75rem; color: var(--text3); margin-top: 5px; } /* ── Attachment file list ─────────────────────────────────── */ .attach-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .attach-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.85rem; } .attach-item-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.7rem; font-weight: 700; font-family: var(--mono); letter-spacing: 0; } .attach-item-icon.pdf { background: rgba(239,68,68,0.12); color: var(--red); } .attach-item-icon.doc { background: rgba(59,130,246,0.12); color: var(--accent); } .attach-item-icon.xls { background: rgba(34,197,94,0.12); color: var(--green); } .attach-item-icon.img { background: rgba(234,179,8,0.12); color: var(--gold); } .attach-item-icon.other { background: var(--border); color: var(--text3); } .attach-item-info { flex: 1; min-width: 0; } .attach-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .attach-item-size { font-size: 0.73rem; color: var(--text3); margin-top: 1px; } .attach-item-status { font-size: 0.73rem; font-weight: 600; margin-top: 1px; color: var(--text3); } .attach-item-status.uploading { color: var(--yellow); } .attach-item-status.done { color: var(--green); } .attach-item-status.error { color: var(--red); } .attach-item-remove { background: none; color: var(--text3); padding: 4px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; transition: var(--transition); } .attach-item-remove:hover { background: var(--red-dim); color: var(--red); } /* Upload progress bar */ .attach-progress { height: 3px; background: var(--border); border-radius: 99px; margin-top: 5px; overflow: hidden; } .attach-progress-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.3s ease; width: 0%; } /* ── Proof display (submission review) ────────────────────── */ .proof-content { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.88rem; line-height: 1.7; color: var(--text); max-height: 320px; overflow-y: auto; } .proof-content p { margin-bottom: 0.5em; } .proof-content h1, .proof-content h2, .proof-content h3 { font-weight: 700; margin-bottom: 0.3em; } .proof-content ul, .proof-content ol { padding-left: 1.4em; margin-bottom: 0.5em; } .proof-content blockquote { border-left: 3px solid var(--border2); padding-left: 10px; color: var(--text2); margin: 0.5em 0; } .proof-content pre { background: var(--bg); border-radius: 6px; padding: 8px 12px; font-family: var(--mono); font-size: 0.82rem; overflow-x: auto; } .proof-content a { color: var(--accent); } /* Attachment viewer grid */ .attach-viewer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .attach-viewer-item { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.82rem; text-decoration: none; color: var(--text); transition: var(--transition); min-width: 0; } .attach-viewer-item:hover { border-color: var(--accent); color: var(--accent); } .attach-viewer-item [data-lucide] { flex-shrink: 0; } .attach-viewer-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ Mobile header icon buttons (theme, notif, sign-out) ============================================================ */ .mobile-icon-btn { background: none; border: none; color: var(--text2); padding: 7px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: var(--transition); text-decoration: none; } .mobile-icon-btn:hover { background: var(--border); color: var(--text); } .mobile-icon-btn [data-lucide] { width: 18px; height: 18px; } .mobile-signout-btn:hover { background: var(--red-dim); color: var(--red); } /* ============================================================ Profile avatar upload ============================================================ */ .avatar-upload-wrap { position: relative; width: 88px; height: 88px; border-radius: 18px; flex-shrink: 0; cursor: pointer; } .avatar-img { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; display: block; border: 2px solid var(--border2); } .avatar-initials { width: 88px; height: 88px; border-radius: 18px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; border: 2px solid var(--border2); } .avatar-overlay { position: absolute; inset: 0; border-radius: 18px; background: rgba(0,0,0,0.52); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; opacity: 0; transition: opacity 0.18s ease; color: #fff; font-size: 0.7rem; font-weight: 600; } .avatar-overlay [data-lucide] { width: 18px; height: 18px; } .avatar-upload-wrap:hover .avatar-overlay { opacity: 1; } .avatar-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; border-radius: 18px; z-index: 2; } /* Password strength bar */ .pw-strength-bar { height: 4px; border-radius: 99px; background: var(--border); margin-top: 6px; overflow: hidden; } .pw-strength-fill { height: 100%; border-radius: 99px; width: 0%; transition: width 0.3s ease, background 0.3s ease; } .pw-strength-label { font-size: 0.73rem; margin-top: 4px; font-weight: 600; } .pw-strength-label.weak { color: var(--red); } .pw-strength-label.fair { color: var(--yellow); } .pw-strength-label.strong { color: var(--green); } /* ============================================================ KYC — TIN validation + Camera ============================================================ */ /* TIN input states */ #kyc-tin { transition: border-color 0.2s, box-shadow 0.2s; } /* Camera section */ #camera-container { min-height: 220px; max-height: 340px; } #camera-video, #camera-captured { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #camera-guide { position: absolute; inset: 0; pointer-events: none; } /* Flip the video so it mirrors the user naturally */ #camera-video { transform: scaleX(-1); } /* Camera container needs position:relative for overlays */ #camera-container { position: relative !important; } /* ============================================================ PUBLIC / MARKETING SITE Navbar · Footer · Page layouts · Section styles ============================================================ */ /* ── Site navbar ─────────────────────────────────────────────── */ .site-navbar { position: sticky; top: 0; z-index: 500; background: var(--bg2); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .site-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 12px; } .site-nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; } .site-nav-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; } .site-nav-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .site-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; } .site-nav-link { display: block; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--text2); transition: var(--transition); text-decoration: none; } .site-nav-link:hover, .site-nav-link.active { background: var(--accent-dim); color: var(--accent); } .site-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .site-nav-icon-btn { background: none; border: none; color: var(--text2); padding: 7px; border-radius: var(--radius-sm); display: flex; align-items: center; cursor: pointer; transition: var(--transition); } .site-nav-icon-btn:hover { background: var(--border); color: var(--text); } .site-nav-signin { font-size: 0.88rem !important; padding: 7px 14px !important; } .site-nav-cta { font-size: 0.88rem !important; padding: 7px 16px !important; } .site-nav-hamburger { display: none; background: none; border: none; color: var(--text2); padding: 7px; border-radius: var(--radius-sm); cursor: pointer; align-items: center; flex-shrink: 0; } /* Mobile nav drawer */ #nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 600; } #nav-overlay.visible { display: block; } #site-mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--card); border-left: 1px solid var(--border); z-index: 700; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; padding: 0 0 20px 0; overflow-y: auto; } #site-mobile-nav.open { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); } .mobile-nav-header button { background: none; border: none; color: var(--text2); padding: 6px; cursor: pointer; display: flex; align-items: center; } .mobile-nav-links { list-style: none; padding: 12px 12px; flex: 1; } .mobile-nav-links li { margin-bottom: 2px; } .mobile-nav-links .site-nav-link { display: block; padding: 11px 12px; font-size: 0.95rem; } /* ── Site footer ─────────────────────────────────────────────── */ .site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; } #site-footer { background: var(--bg2); border-top: 1px solid var(--border); margin-top: 80px; padding: 56px 0 0; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .footer-brand-col {} .footer-tagline { font-size: 0.88rem; color: var(--text2); line-height: 1.7; margin-top: 12px; max-width: 280px; } .footer-social { display: flex; gap: 8px; margin-top: 16px; } .footer-social-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--border); color: var(--text2); display: flex; align-items: center; justify-content: center; transition: var(--transition); text-decoration: none; } .footer-social-btn:hover { background: var(--accent); color: #fff; } .footer-col-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-bottom: 14px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-links a { font-size: 0.88rem; color: var(--text2); text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--text3); flex-wrap: wrap; gap: 10px; } .footer-bottom-links { display: flex; gap: 18px; } .footer-bottom-links a { color: var(--text3); text-decoration: none; } .footer-bottom-links a:hover { color: var(--accent); } /* ── Page wrappers ────────────────────────────────────────────── */ .site-page { min-height: 100vh; } .site-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .site-section { padding: 80px 0; } .site-section-sm { padding: 48px 0; } /* Section labels */ .section-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-dim); color: var(--accent); padding: 4px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; } .section-title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; } .section-sub { font-size: 1rem; color: var(--text2); line-height: 1.7; max-width: 560px; } .section-header { margin-bottom: 48px; } .section-header.center { text-align: center; } .section-header.center .section-sub { margin: 0 auto; } /* ── Hero ─────────────────────────────────────────────────────── */ .hero { padding: 96px 0 80px; position: relative; overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--green-dim); color: var(--green); padding: 5px 14px; border-radius: 99px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 20px; } .hero-headline { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 18px; } .hero-sub { font-size: 1.08rem; color: var(--text2); line-height: 1.75; margin-bottom: 32px; max-width: 500px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hero-trust { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; } .hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.83rem; color: var(--text2); } .hero-trust-item [data-lucide] { color: var(--green); width: 14px; height: 14px; } /* Hero visual / stats panel */ .hero-visual { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-lg); } .hero-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .hero-stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .hero-stat-value { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; line-height: 1; } .hero-stat-label { font-size: 0.75rem; color: var(--text2); margin-top: 5px; } /* Task preview in hero */ .hero-task-preview { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .hero-task-preview:last-child { margin-bottom: 0; } .hero-task-name { font-size: 0.87rem; font-weight: 600; } .hero-task-cat { font-size: 0.73rem; color: var(--text3); margin-top: 2px; } .hero-task-pay { font-family: var(--mono); font-weight: 700; color: var(--gold); font-size: 1rem; flex-shrink: 0; } /* ── Feature / trust grid ────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: var(--transition); } .feature-card:hover { border-color: var(--accent); } .feature-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-icon [data-lucide] { width: 20px; height: 20px; } .feature-title { font-size: 1rem; font-weight: 700; margin-bottom: 7px; } .feature-desc { font-size: 0.87rem; color: var(--text2); line-height: 1.65; } /* ── Steps ────────────────────────────────────────────────────── */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; position: relative; } .step-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; position: relative; text-align: center; transition: var(--transition); } .step-card:hover { border-color: var(--accent); } .step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .step-title { font-weight: 700; margin-bottom: 8px; } .step-desc { font-size: 0.86rem; color: var(--text2); line-height: 1.6; } /* ── Task cards (public preview) ─────────────────────────────── */ .public-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .public-task-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: var(--transition); } .public-task-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); } /* ── Stats bar ───────────────────────────────────────────────── */ .stats-bar { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; } .stats-bar-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; } .stats-bar-value { font-family: var(--mono); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--accent); } .stats-bar-label { font-size: 0.82rem; color: var(--text2); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* ── Testimonials ────────────────────────────────────────────── */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .testimonial-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .testimonial-stars { color: var(--gold); margin-bottom: 12px; font-size: 0.95rem; } .testimonial-text { font-size: 0.92rem; color: var(--text2); line-height: 1.7; margin-bottom: 18px; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 11px; } .testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .testimonial-name { font-weight: 600; font-size: 0.9rem; } .testimonial-role { font-size: 0.78rem; color: var(--text3); } .testimonial-payout { font-family: var(--mono); font-size: 0.8rem; color: var(--green); font-weight: 600; margin-top: 2px; } /* ── CTA banner ──────────────────────────────────────────────── */ .cta-banner { background: var(--accent); border-radius: 16px; padding: 56px 48px; text-align: center; margin: 0 24px; } .cta-banner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 12px; } .cta-banner p { color: rgba(255,255,255,0.82); font-size: 1rem; margin-bottom: 28px; } .cta-banner-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-white { background: #fff; color: var(--accent); font-weight: 700; padding: 12px 28px; border-radius: var(--radius-sm); font-size: 0.95rem; border: none; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .btn-white:hover { background: #f0f4ff; } .btn-outline-white { background: transparent; color: #fff; font-weight: 600; padding: 12px 28px; border-radius: var(--radius-sm); font-size: 0.95rem; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.1); } /* ── Policy / legal pages ────────────────────────────────────── */ .policy-wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; } .policy-wrap h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; } .policy-meta { font-size: 0.83rem; color: var(--text3); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .policy-wrap h2 { font-size: 1.15rem; font-weight: 700; margin: 32px 0 10px; } .policy-wrap p, .policy-wrap li { font-size: 0.93rem; color: var(--text2); line-height: 1.8; } .policy-wrap ul, .policy-wrap ol { padding-left: 1.4em; margin: 10px 0 16px; } .policy-wrap li { margin-bottom: 6px; } .policy-wrap a { color: var(--accent); } .policy-highlight { background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.2); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.9rem; color: var(--accent); margin: 16px 0; display: flex; gap: 10px; align-items: flex-start; } .policy-highlight [data-lucide] { flex-shrink: 0; margin-top: 2px; } /* ── Contact / About ─────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; } .contact-info-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; } .contact-info-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .contact-info-item:last-child { border-bottom: none; } .contact-info-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-icon [data-lucide] { width: 17px; height: 17px; } .contact-info-label { font-size: 0.75rem; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .contact-info-value { font-size: 0.9rem; font-weight: 500; margin-top: 3px; } /* ── FAQ ─────────────────────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .faq-question { width: 100%; text-align: left; padding: 18px 20px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 0.95rem; font-weight: 600; color: var(--text); font-family: var(--font); transition: var(--transition); } .faq-question:hover { background: var(--border); } .faq-question [data-lucide] { flex-shrink: 0; transition: transform 0.2s; color: var(--text2); } .faq-item.open .faq-question [data-lucide] { transform: rotate(45deg); color: var(--accent); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.2s; font-size: 0.9rem; color: var(--text2); line-height: 1.7; } .faq-item.open .faq-answer { max-height: 400px; padding: 0 20px 18px; } /* ── Page hero (inner pages) ─────────────────────────────────── */ .page-hero { padding: 64px 0 52px; border-bottom: 1px solid var(--border); margin-bottom: 0; } .page-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-dim); color: var(--accent); padding: 4px 12px; border-radius: 99px; font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; } .page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; } .page-hero p { font-size: 1rem; color: var(--text2); line-height: 1.7; max-width: 600px; } /* ── Responsive ──────────────────────────────────────────────── */ /* Tablet → 960px */ @media (max-width: 960px) { /* Nav */ .site-nav-links { display: none; } .site-nav-signin { display: none; } .site-nav-cta { display: none; } .site-nav-hamburger{ display: flex; } .site-nav-inner { justify-content: space-between; } .site-nav-actions { margin-left: auto; } .site-nav-name { display: block !important; } /* Hero */ .hero-inner { grid-template-columns: 1fr; } .hero-visual { display: none; } .hero-headline { font-size: clamp(1.9rem, 5vw, 2.8rem); } /* Layout */ .footer-top { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr !important; } /* Steps — 2 cols on tablet */ .steps-grid[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } } /* Large mobile → 720px */ @media (max-width: 720px) { .site-container { padding: 0 16px; } .section-title { font-size: clamp(1.5rem, 5vw, 2rem); } .page-hero { padding: 44px 0 36px; } .page-hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); } /* Feature grid — 1 col */ .feature-grid { grid-template-columns: 1fr; } /* Testimonials — 1 col */ .testimonial-grid { grid-template-columns: 1fr; } /* Public task grid — 1 col */ .public-task-grid { grid-template-columns: 1fr; } /* Stats bar — 2 col */ .stats-bar-inner { grid-template-columns: 1fr 1fr; gap: 20px; } /* CTA banner */ .cta-banner { padding: 36px 24px; margin: 0; border-radius: 12px; } .cta-banner h2 { font-size: 1.5rem; } .cta-banner-btns { flex-direction: column; align-items: center; } .cta-banner-btns a, .cta-banner-btns button { width: 100%; max-width: 280px; justify-content: center; } /* Contact card stacks */ .contact-info-card { padding: 20px; } /* Policy pages */ .policy-wrap { padding: 36px 16px 60px; } .policy-wrap h1 { font-size: 1.6rem; } /* Steps — 1 col on mobile */ .steps-grid[style*="repeat(4"] { grid-template-columns: 1fr !important; } } /* Small mobile → 600px */ @media (max-width: 600px) { /* Footer */ .footer-top { grid-template-columns: 1fr; gap: 28px; } .footer-tagline { max-width: 100%; } /* Sections */ .site-section { padding: 48px 0; } .site-section-sm { padding: 32px 0; } /* Hero */ .hero { padding: 52px 0 40px; } .hero-sub { font-size: 0.95rem; } .hero-cta { flex-direction: column; } .hero-cta a { width: 100%; justify-content: center; } .hero-trust { gap: 10px; } /* Stats bar */ .stats-bar-inner { grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px; } .stats-bar-value { font-size: 1.7rem; } /* Nav inner */ .site-nav-inner { padding: 0 14px; height: 56px; } .site-nav-logo { width: 30px; height: 30px; } .site-nav-name { font-size: 0.95rem; } /* Mobile nav drawer */ #site-mobile-nav { width: 260px; } /* Sections header */ .section-header.center { text-align: left; } .section-header.center .section-sub { margin: 0; } /* Auth pages */ .auth-wrap { padding: 28px 18px; } /* Footer bottom */ .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .footer-bottom-links { flex-wrap: wrap; gap: 12px; } } /* Extra small → 420px */ @media (max-width: 420px) { .stats-bar-inner { grid-template-columns: 1fr; text-align: center; } .hero-trust { flex-direction: column; gap: 6px; } .site-nav-name { font-size: 0.88rem; } .cta-banner { margin: 0; border-radius: 0; } } /* ============================================================ APP PAGES — MOBILE RESPONSIVE Targets: user/withdrawals, user/transactions, admin/tasks, admin/users, admin/transactions ============================================================ */ /* ── Tables: scroll horizontally, shrink text ─────────────── */ @media (max-width: 900px) { .table-wrap { border-radius: var(--radius-sm); } table th, table td { font-size: 0.8rem; padding: 10px 10px; } /* Hide lower-priority columns on tablet */ .col-hide-md { display: none; } /* Action buttons: stack or shrink */ .td-actions { flex-direction: column; align-items: flex-start; gap: 4px; } .td-actions .btn-secondary, .td-actions .btn-primary, .td-actions .btn-danger, .td-actions .btn-success { font-size: 0.75rem !important; padding: 5px 9px !important; white-space: nowrap; } } @media (max-width: 600px) { /* Filter bars: wrap to column */ .filter-bar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .filter-bar select, .filter-bar input, .filter-bar .search-input, .filter-bar .search-wrap { width: 100% !important; min-width: 0 !important; } .filter-bar .btn-primary, .filter-bar .btn-secondary { width: 100%; justify-content: center; } /* Filter tabs: wrap */ .filter-tabs { flex-wrap: wrap; gap: 5px; } .filter-tabs .ftab { font-size: 0.78rem; padding: 5px 10px; } /* View header: stack title + actions */ .view-header { flex-direction: column; align-items: flex-start; gap: 10px; } .view-header .btn-primary, .view-header .btn-secondary { align-self: stretch; justify-content: center; } /* Table: hide more columns, shrink further */ .col-hide-sm { display: none; } table th, table td { font-size: 0.76rem; padding: 9px 8px; } /* Make action cells full-width rows on very small screens */ .td-actions { flex-direction: row; flex-wrap: wrap; } /* Withdrawal two-col stats at top */ .withdrawal-meta-grid { grid-template-columns: 1fr !important; } /* Transaction filter row */ .tx-filter-row { flex-direction: column; gap: 8px; } .tx-filter-row input, .tx-filter-row select { width: 100% !important; } } @media (max-width: 420px) { /* On very small screens, switch tables to card-style list */ .table-card-mobile thead { display: none; } .table-card-mobile tbody tr { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 12px; } .table-card-mobile tbody td { display: flex; justify-content: space-between; align-items: center; border: none !important; padding: 5px 0 !important; font-size: 0.82rem; } .table-card-mobile tbody td::before { content: attr(data-label); font-weight: 600; color: var(--text2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 8px; flex-shrink: 0; } .table-card-mobile .td-actions { justify-content: flex-end; flex-wrap: wrap; gap: 5px; } } /* ── Additional app-page mobile fixes ─────────────────────── */ /* Date filter row wraps cleanly */ .filter-bar-dates { flex-wrap: wrap; } @media (max-width: 600px) { .filter-bar-dates { width: 100%; flex-direction: column; align-items: stretch; } .filter-bar-dates input[type="date"] { width: 100% !important; } /* Search wrap inside filter bar: full width */ .filter-bar .search-wrap, .filter-bar .search-input, .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar select { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; } /* Filter tabs scroll horizontally if too many */ .filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .filter-tabs .ftab { flex-shrink: 0; } } /* User table in admin: smaller text on mobile */ @media (max-width: 600px) { .table-card-mobile .user-avatar { width: 22px !important; height: 22px !important; font-size: 0.65rem !important; } } /* ============================================================ HERO — 2-COLUMN: COPY LEFT · IMAGE+BADGES RIGHT ============================================================ */ /* ── Entry animations ─────────────────────────────────────── */ @keyframes heroSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes heroSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-anim-left { animation: heroSlideLeft 0.7s cubic-bezier(0.22,1,0.36,1) both; } .hero-anim-right { animation: heroSlideRight 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s both; } /* ── 2-col grid ───────────────────────────────────────────── */ .hero-2col { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; } /* ── Center / right image frame ───────────────────────────── */ .hero-img-wrap { display: flex; justify-content: center; align-items: center; } .hero-img-frame { position: relative; width: 100%; max-width: 400px; } .hero-photo { width: 100%; height: auto; border-radius: 28px; display: block; box-shadow: 0 24px 64px rgba(0,0,0,0.38); object-fit: cover; aspect-ratio: 4 / 5; } /* ── Floating stat badges ─────────────────────────────────── */ .hero-badge { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.22); backdrop-filter: blur(10px); white-space: nowrap; } /* Staggered float animation */ .hero-badge-tl { animation: badgeFloat 3.2s ease-in-out 0.0s infinite; top: -20px; left: -32px; } .hero-badge-tr { animation: badgeFloat 3.2s ease-in-out 0.8s infinite; top: 50px; right: -28px; } .hero-badge-bl { animation: badgeFloat 3.2s ease-in-out 1.6s infinite; bottom: 90px; left: -32px; } .hero-badge-br { animation: badgeFloat 3.2s ease-in-out 2.4s infinite; bottom: -20px; right: -20px; } @keyframes badgeFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } .hero-badge-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-badge-icon [data-lucide] { width: 17px; height: 17px; } .hero-badge-val { font-family: var(--mono); font-weight: 700; font-size: 0.92rem; line-height: 1.1; color: var(--text); } .hero-badge-lbl { font-size: 0.7rem; color: var(--text3); margin-top: 1px; font-weight: 500; } /* ── Responsive ───────────────────────────────────────────── */ /* Tablet landscape: shrink right column */ @media (max-width: 1024px) { .hero-2col { grid-template-columns: 1fr 360px; gap: 40px; } .hero-img-frame { max-width: 340px; } } /* Tablet portrait: shrink columns, stay side-by-side */ @media (max-width: 768px) { .hero-2col { grid-template-columns: 1fr 260px; gap: 24px; align-items: center; } .hero-img-frame { max-width: 260px; } .hero-headline { font-size: clamp(1.5rem, 4.5vw, 2.2rem); } .hero-sub { font-size: 0.88rem; } /* Badges tighter */ .hero-badge-tl { top: -12px; left: -12px; } .hero-badge-tr { top: 36px; right: -12px; } .hero-badge-bl { bottom: 60px; left: -12px; } .hero-badge-br { bottom: -12px; right: -8px; } } /* Mobile — still side-by-side, smaller image column */ @media (max-width: 520px) { .hero-2col { grid-template-columns: 1fr 160px; gap: 16px; } .hero-img-frame { max-width: 160px; } .hero-photo { border-radius: 14px; aspect-ratio: 3/4; } .hero-headline { font-size: clamp(1.2rem, 5vw, 1.7rem); } .hero-sub { font-size: 0.82rem; line-height: 1.6; } .hero-cta { flex-direction: column; gap: 8px; } .hero-cta a { width: 100%; justify-content: center; font-size: 0.88rem !important; padding: 10px 14px !important; } .hero-eyebrow { font-size: 0.7rem; } /* Smaller badges */ .hero-badge { padding: 5px 8px; gap: 6px; border-radius: 8px; } .hero-badge-icon { width: 24px; height: 24px; border-radius: 6px; } .hero-badge-icon [data-lucide] { width: 12px; height: 12px; } .hero-badge-val { font-size: 0.72rem; } .hero-badge-lbl { font-size: 0.58rem; } .hero-badge-tl { top: -8px; left: -6px; } .hero-badge-tr { top: 26px; right: -6px; } .hero-badge-bl { bottom: 46px; left: -6px; display: none; } .hero-badge-br { bottom: -8px; right: -4px; } } /* Very small phones */ @media (max-width: 360px) { .hero-2col { grid-template-columns: 1fr 130px; gap: 10px; } .hero-img-frame { max-width: 130px; } .hero-badge-tl, .hero-badge-tr, .hero-badge-bl { display: none; } .hero-badge-br { bottom: -8px; right: -3px; } } /* ============================================================ PLATFORM STATS BAR — SCROLL-TRIGGERED ANIMATIONS ============================================================ */ /* Each stat item slides + fades in when scrolled into view */ .stats-bar-inner > div { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .stats-bar-inner > div.stat-visible { opacity: 1; transform: translateY(0); } /* Number counter pulse on entry */ .stats-bar-value { display: inline-block; } .stats-bar-inner > div.stat-visible .stats-bar-value { animation: statPulse 0.5s ease 0.3s both; } @keyframes statPulse { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }