/* * main.css | Financial PWA | Modern UI Kit | 2026 * * Google Fonts (Embed in HTML ): * */ /* === Section: Base & Theme === */ :root { /* Color System */ --primary: #4338ca; /* Deep Indigo (modern, trustworthy) */ --primary-light: #6366f1; --primary-dark: #3730a3; --success: #10b981; /* Income */ --success-light: #34d399; --success-dark: #059669; --danger: #ef4444; /* Expenses */ --danger-light: #f87171; --danger-dark: #dc2626; --background: #f8fafc; /* Soft neutral */ --surface: #ffffff; --border: #e2e8f0; --divider: #cbd5e1; --text-primary: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; /* Spacing Scale (4px baseline) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Transitions */ --transition-fast: all 0.15s ease-in-out; --transition: all 0.2s ease-in-out; --transition-slow: all 0.3s ease-in-out; } @media (prefers-color-scheme: dark) { :root { --background: #0f172a; --surface: #1e293b; --border: #334155; --divider: #475569; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } } *, *::before, *::after { box-sizing: border-box; } /* System UI font stack + Inter */ body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.5; color: var(--text-primary); background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Enable dark mode support */ :root { color-scheme: light dark; } /* === Section: Layout === */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 768px) { .container { padding: 0 var(--space-5); } } header, footer { background-color: var(--surface); box-shadow: var(--shadow-sm); padding: var(--space-3) 0; } main { padding: var(--space-5) 0; } /* === Section: Typography === */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-weight: 700; line-height: 1.2; } h1 { font-size: 2.25rem; /* 36px */ } h2 { font-size: 1.875rem; /* 30px */ } h3 { font-size: 1.5rem; /* 24px */ } h4 { font-size: 1.25rem; /* 20px */ } p { margin: 0 0 var(--space-4); } .text-lg { font-size: 1.125rem; } .text-muted { color: var(--text-muted); } /* === Section: Buttons === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-weight: 600; font-size: 1rem; cursor: pointer; transition: var(--transition); text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; } .btn:focus { outline: 2px solid var(--primary); outline-offset: 2px; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover:not(:disabled) { background-color: var(--primary-dark); transform: translateY(-1px); } .btn-secondary { background-color: var(--surface); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background-color: #f1f5f9; } .btn-success { background-color: var(--success); color: white; } .btn-success:hover:not(:disabled) { background-color: var(--success-dark); } .btn-danger { background-color: var(--danger); color: white; } .btn-danger:hover:not(:disabled) { background-color: var(--danger-dark); } /* === Section: Forms === */ .input-group { margin-bottom: var(--space-5); } .input-group label { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: 0.875rem; color: var(--text-secondary); } .input-group input, .input-group select, .input-group textarea { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background-color: var(--surface); color: var(--text-primary); font-size: 1rem; transition: var(--transition); } .input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1); } .input-group .helper-text { margin-top: var(--space-1); font-size: 0.75rem; color: var(--text-muted); } /* === Section: Cards & Stats === */ .card { background-color: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--space-5); margin-bottom: var(--space-5); } .stat-card { text-align: center; padding: var(--space-5); } .stat-card .stat-value { font-size: 2.5rem; font-weight: 700; margin: var(--space-2) 0; } .stat-card .stat-label { font-size: 1rem; color: var(--text-secondary); } /* === Section: Transactions === */ .transaction-list { list-style: none; padding: 0; margin: 0; } .transaction-item { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-4) 0; border-bottom: 1px solid var(--divider); } .transaction-item:last-child { border-bottom: none; } .transaction-info { flex: 1; min-width: 0; } .transaction-category { font-weight: 600; margin-bottom: var(--space-1); font-size: 1rem; } .transaction-details { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: var(--space-1); } .transaction-date { color: var(--text-muted); font-size: 0.75rem; } .transaction-amount { font-weight: 700; font-size: 1.125rem; text-align: right; min-width: 80px; padding-left: var(--space-4); } .income-amount { color: var(--success); } .expense-amount { color: var(--danger); } /* === Section: Feedback & Messages === */ .message { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-weight: 500; display: flex; align-items: center; gap: var(--space-2); } .message.success { background-color: rgba(16, 185, 129, 0.1); color: var(--success-dark); border: 1px solid var(--success-light); } .message.error { background-color: rgba(239, 68, 68, 0.1); color: var(--danger-dark); border: 1px solid var(--danger-light); } .message.info { background-color: rgba(99, 102, 241, 0.1); color: var(--primary-dark); border: 1px solid var(--primary-light); } /* === Section: Loading & Empty States === */ .loading, .no-transactions { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-secondary); } .loading::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: var(--space-2); border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } .no-transactions { color: var(--text-muted); } /* === Section: Utilities === */ .text-center { text-align: center; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0 !important; } .mt-4 { margin-top: var(--space-4); } .d-flex { display: flex; } .flex-column { flex-direction: column; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } /* === Section: Responsive Adjustments === */ @media (max-width: 480px) { .container { padding: 0 var(--space-3); } .card { padding: var(--space-4); } .transaction-item { flex-direction: column; align-items: stretch; } .transaction-amount { margin-top: var(--space-2); text-align: left; padding-left: 0; } } @media (min-width: 768px) { .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }