/* ============================================================ QFS — shared theme Visual language matched to qfsworld.com (navy + gold, Poppins/Inter). Linked from every page's in place of the old per-page inline "root.style.setProperty(...)" theme scripts. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap'); :root { /* Brand (drives the wallet app's tailwind.config color extend) */ --primary-color: #0a3d91; --primary-color-dark: #062a6b; --primary-color-light: #1258c4; --secondary-color: #38bdf8; --secondary-color-dark: #0ea5e9; --secondary-color-light: #7dd3fc; /* Wallet app surfaces — light theme by default */ --text-color: #0f172a; --text-muted-color: #64748b; --bg-color: #f4f6fb; --card-bg-color: #ffffff; --border-color: #e6ebf3; --hover-color: rgba(15, 23, 42, .045); --sidebar-bg-color: #ffffff; --sidebar-border-color: #eef1f7; --sidebar-hover-color: #f1f5f9; --surface2-color: #eef2f9; --surface2-hover-color: #e2e8f0; --label-accent-color: #1258c4; /* Public marketing site (light theme, mirrors qfsworld.com's own tokens) */ --pub-text: #1a1a2e; --pub-text2: #4a5568; --pub-text3: #718096; --pub-bg: #ffffff; --pub-bg2: #f7f9fc; --pub-bg3: #eef2f9; --pub-border: #e2e8f0; --pub-shadow: 0 4px 24px rgba(10, 61, 145, .10); --pub-shadow-lg: 0 12px 48px rgba(10, 61, 145, .16); } /* Dark Mode — toggled via data-theme="dark" on (wallet app only). */ html[data-theme="dark"] { --primary-color-dark: #041a45; --text-color: #f1f5f9; --text-muted-color: #94a3b8; --bg-color: #05070d; --card-bg-color: #0a0e18; --border-color: rgba(255, 255, 255, .08); --hover-color: rgba(255, 255, 255, .06); --sidebar-bg-color: #0a0e18; --sidebar-border-color: rgba(255, 255, 255, .06); --sidebar-hover-color: rgba(255, 255, 255, .06); --surface2-color: rgba(255, 255, 255, .08); --surface2-hover-color: rgba(255, 255, 255, .16); --label-accent-color: #7dd3fc; } .font-heading { font-family: 'Poppins', sans-serif; } /* ── Wallet app (dashboard) chrome ── */ .qfs-dash-header { background: var(--card-bg-color); border-bottom: 1px solid var(--border-color); } .qfs-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* Card surface used across dashboard pages in place of the old always-dark "bg-card-navy border-white/10" pairing. */ .qfs-card { background: var(--card-bg-color); border: 1px solid var(--border-color); } .qfs-hover:hover { background: var(--hover-color); } /* Desktop sidebar (screenshot layout). Hidden below lg, where the off-canvas menu + bottom nav take over. */ .qfs-sidebar { background: var(--sidebar-bg-color); border-right: 1px solid var(--sidebar-border-color); } .qfs-sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .65rem; font-size: .875rem; font-weight: 500; color: var(--text-muted-color); transition: background .15s, color .15s; } .qfs-sidebar-link:hover { background: var(--sidebar-hover-color); color: var(--text-color); } .qfs-sidebar-link.active { background: var(--primary-color-light); color: #fff; box-shadow: 0 4px 14px rgba(18, 88, 196, .3); } .qfs-sidebar-link.active:hover { background: var(--primary-color-light); } .qfs-sidebar-section { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-color); opacity: .75; padding: 0 .75rem; margin: 1.1rem 0 .4rem; } .qfs-sidebar-section:first-of-type { margin-top: 0; } /* Stat-card icon tints (dashboard overview cards) */ .qfs-chip { width: 40px; height: 40px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .qfs-chip-blue { background: rgba(18, 88, 196, .1); color: var(--primary-color-light); } .qfs-chip-green { background: rgba(16, 185, 129, .12); color: #10b981; } .qfs-chip-purple { background: rgba(139, 92, 246, .12); color: #8b5cf6; } .qfs-chip-orange { background: rgba(249, 115, 22, .12); color: #f97316; } html[data-theme="dark"] .qfs-chip-blue { background: rgba(56, 189, 248, .14); color: var(--secondary-color); } html[data-theme="dark"] .qfs-chip-green { background: rgba(16, 185, 129, .16); } html[data-theme="dark"] .qfs-chip-purple { background: rgba(139, 92, 246, .18); } html[data-theme="dark"] .qfs-chip-orange { background: rgba(249, 115, 22, .18); } /* ── Public marketing site helpers (same class names qfsworld.com uses) ── */ .sec { padding: 88px 6%; } .sec-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary-color); margin-bottom: .55rem; } .sec-h { font-family: 'Poppins', sans-serif; font-size: clamp(1.85rem, 3.2vw, 2.7rem); font-weight: 800; color: var(--pub-text); line-height: 1.18; letter-spacing: -.02em; margin-bottom: .85rem; } .sec-h span { color: var(--primary-color); } .sec-p { color: var(--pub-text2); line-height: 1.8; font-size: .96rem; } .bar { width: 52px; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 2px; margin: 1rem 0 2rem; } .tc { text-align: center; } .tc .bar { margin: 1rem auto 2rem; } .tc .sec-p { max-width: 580px; margin: 0 auto; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 11px 24px; border-radius: 9px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .875rem; cursor: pointer; transition: all .22s; border: none; line-height: 1; } .btn-blue { background: var(--primary-color); color: #fff; } .btn-blue:hover { background: var(--primary-color-light); transform: translateY(-1px); } .btn-gold { background: var(--secondary-color); color: #fff; } .btn-gold:hover { background: var(--secondary-color-dark); transform: translateY(-1px); } .btn-outline { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); } .btn-outline:hover { background: var(--primary-color); color: #fff; } .btn-lg { padding: 14px 34px; font-size: 1rem; border-radius: 11px; } /* ── Auth pages (login / register / forgot-password / reset) ── */ .auth-bg { min-height: 100vh; background-color: #fbfcfe; background-image: radial-gradient(circle, #dbe3ee 1px, transparent 1px); background-size: 22px 22px; } .auth-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; } .auth-home-btn { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--pub-border); border-radius: 100px; padding: 8px 16px; font-size: .85rem; font-weight: 600; color: var(--pub-text2); box-shadow: var(--pub-shadow); transition: color .2s; } .auth-home-btn:hover { color: var(--primary-color); } .auth-secure { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--pub-text3); } .auth-secure-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); } .auth-logo-lockup { display: flex; align-items: center; justify-content: center; gap: .65rem; } .auth-logo-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .auth-logo-text { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--primary-color); letter-spacing: -.02em; } .auth-logo-text span { color: var(--secondary-color); } .auth-tagline { text-align: center; color: var(--pub-text3); font-size: .9rem; } .auth-card-wrap { padding: 2px; border-radius: 20px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); box-shadow: var(--pub-shadow-lg); } .auth-card { background: #fff; border-radius: 18px; padding: 2rem; } .auth-footer { text-align: center; color: var(--pub-text3); font-size: .78rem; padding: 2rem 1rem 1rem; } .auth-footer a { color: var(--pub-text3); text-decoration: underline; }