/* ======================================== SELF-EMPLOYED CFO - INDUSTRY-GRADE CSS God-level premium design system (Adapted from YouTube Creator CFO) ======================================== */ /* --- 1. Design System & CSS Variables --- */ :root { /* IRS / Treasury Brand Colors */ --irs-50: #f0f9ff; --irs-100: #e0f2fe; --irs-500: #0ea5e9; /* Sky 500 */ --irs-600: #0284c7; /* Sky 600 */ --irs-900: #0c4a6e; /* Sky 900 */ /* Base Palette */ --bg-body: #f8fafc; --bg-card: #ffffff; --bg-input: #f1f5f9; --text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0; /* Dark Theme Colors */ --dark-bg: #0f172a; /* Slate 900 */ --dark-card: #1e293b; /* Slate 800 */ --dark-border: #334155; --dark-input: #0f172a; /* Semantic Colors */ --color-blue: #3b82f6; --color-emerald: #10b981; --color-red: #ef4444; --color-orange: #f97316; --color-indigo: #6366f1; /* Spacing & Radius */ --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Transitions */ --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark Mode Support — controlled via .dark class on (JS handles system preference detection) */ .dark { --bg-body: #0f172a; --bg-card: #1e293b; --bg-input: #0f172a; --text-main: #f1f5f9; --text-muted: #94a3b8; --border-color: #334155; } /* --- 2. Global Resets --- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: var(--bg-body); color: var(--text-main); min-height: 100vh; line-height: 1.5; transition: var(--transition-slow); } /* --- 3. Navigation Bar --- */ nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); } .dark nav { background: rgba(15, 23, 42, 0.9); } .nav-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; } .logo-container { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--irs-500), var(--color-indigo)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.3); } .logo-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; color: var(--text-main); } .logo-accent { color: var(--irs-600); } .dark .logo-accent { color: var(--irs-500); } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: none; cursor: pointer; transition: var(--transition); } .theme-toggle:hover { color: var(--irs-500); } .dark .theme-toggle { background: var(--dark-card); } /* --- 4. Main Layout --- */ main { max-width: 1280px; margin: 0 auto; padding: 2rem 1rem; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { main { grid-template-columns: 5fr 7fr; } } /* --- 5. Glass Cards --- */ .card { background: var(--bg-card); border-radius: var(--radius-xl); padding: 1.5rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: var(--transition); } .dark .card { background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(10px); } .card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .card-icon { width: 4px; height: 24px; border-radius: 99px; background: var(--irs-500); } .card-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.05em; } /* --- 6. Filing Status --- */ .status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .currency-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; } .currency-symbol-label { font-weight: 700; color: var(--irs-500); margin-right: 0.15rem; } .status-btn { padding: 0.75rem; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .status-btn:hover { background: var(--bg-input); } .status-btn.active { background: var(--irs-50); border-color: var(--irs-500); color: var(--irs-900); box-shadow: var(--shadow-sm); } .dark .status-btn.active { background: rgba(14, 165, 233, 0.2); color: var(--irs-500); border-color: var(--irs-500); } /* --- 7. Form Elements --- */ .form-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon-left { position: absolute; left: 1rem; color: var(--text-muted); font-weight: 700; font-size: 1rem; pointer-events: none; } .input-icon-right { position: absolute; right: 1rem; color: var(--text-muted); font-weight: 700; pointer-events: none; } input[type="number"], input[type="text"], select { width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-main); font-size: 1rem; font-weight: 600; outline: none; transition: var(--transition); } input.input-lg { padding: 0.85rem 1rem 0.85rem 2.5rem !important; font-size: 1.15rem; font-weight: 700; } input:focus { border-color: var(--irs-500); background: var(--bg-card); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); } .dark input { background: var(--dark-input); border-color: var(--dark-border); } .dark input:focus { border-color: var(--irs-500); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2); } /* --- 8. Expenses List --- */ .expense-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: var(--bg-input); border-radius: var(--radius-md); margin-bottom: 0.5rem; transition: var(--transition); } .dark .expense-item { background: var(--dark-input); } .expense-name { font-weight: 500; color: var(--text-main); } .expense-cost { font-weight: 700; color: var(--text-main); } .btn-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; margin-left: 1rem; transition: var(--transition); opacity: 0.5; } .expense-item:hover .btn-remove { opacity: 1; } .btn-remove:hover { color: var(--color-red); } .btn-add { background: var(--text-main); color: var(--bg-card); border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .btn-add:hover { opacity: 0.9; } .preset-btn { padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: 99px; background: transparent; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; transition: var(--transition); } .preset-btn:hover { border-color: var(--irs-500); color: var(--irs-500); } /* --- 9. Hero Cards (Tax Bill & True Net) --- */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .hero-grid { grid-template-columns: 1fr 1fr; } } .hero-card { position: relative; border-radius: var(--radius-xl); padding: 2rem; overflow: hidden; color: white; box-shadow: var(--shadow-xl); } .hero-card.tax { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); } .hero-card.net { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); } .dark .hero-card.net { background: var(--dark-card); border-color: var(--dark-border); } .hero-bg-icon { position: absolute; top: -20px; right: -20px; font-size: 8rem; opacity: 0.05; transform: rotate(15deg); } .hero-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 0.5rem; } .hero-value { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; } @media (min-width: 768px) { .hero-value { font-size: 3.5rem; } } .hero-sub { font-size: 0.875rem; opacity: 0.8; } .net-value { color: var(--color-emerald); } .progress-track { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 99px; margin-top: 1.5rem; overflow: hidden; } .hero-card.net .progress-track { background: var(--bg-input); } .progress-fill { height: 100%; background: var(--color-orange); border-radius: 99px; transition: width 1s ease-out; } /* --- 10. Quarterly Section --- */ .quarterly-flex { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .quarterly-flex { flex-direction: row; align-items: center; } } .date-box { text-align: center; } @media (min-width: 768px) { .date-box { text-align: left; min-width: 120px; } } .payment-box { flex: 1; background: var(--bg-input); border-radius: var(--radius-lg); padding: 1rem; border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .dark .payment-box { background: var(--dark-input); border-color: var(--dark-border); } .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 2rem; text-align: center; } .timeline-item { font-size: 0.75rem; color: var(--text-muted); } .timeline-bar { height: 4px; width: 100%; background: var(--border-color); border-radius: 99px; margin: 0.5rem 0; transition: var(--transition); } .timeline-item.active .timeline-bar { background: var(--irs-500); } .timeline-item.active { color: var(--irs-500); font-weight: 700; } /* --- 11. Breakdown --- */ .breakdown-row { display: flex; justify-content: space-between; padding: 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; transition: var(--transition); } .breakdown-row:hover { background: var(--bg-input); } .dark .breakdown-row:hover { background: var(--dark-input); } .row-label { color: var(--text-muted); } .row-value { font-weight: 700; font-family: monospace; } /* --- 12. Utilities --- */ .text-emerald { color: var(--color-emerald); } .text-orange { color: var(--color-orange); } .text-irs { color: var(--irs-500); } .bg-emerald { background-color: var(--color-emerald); } .bg-orange { background-color: var(--color-orange); } .bg-money { background-color: var(--color-emerald); } .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .hidden { display: none !important; }