/** * TenderRadar App Styles * Shared styles for dashboard, profile, alerts, and other app pages */ :root { --primary: #1e40af; --primary-dark: #1e3a8a; --primary-light: #3b82f6; --accent: #f59e0b; --text-primary: #1f2937; --text-secondary: #4b5563; --text-light: #6b7280; --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-alt: #f3f4f6; --border: #e5e7eb; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Base typography - MINIMUM 16px */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-primary); } p, .text-body, td, li, input, select, textarea { font-size: 1rem; /* 16px minimum */ } /* Logo consistency - CRITICAL: DO NOT CHANGE */ .logo-icon { width: auto !important; height: 120px !important; display: block; } /* Navbar - NO btn-sm allowed */ .nav-menu a.btn { padding: 0.625rem 1.5rem; font-size: 1rem; } /* Headings - ALL 700-800 weight */ h1, .page-title, .card-title { font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 1rem; } h2, .section-title { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); line-height: 1.3; margin-bottom: 0.875rem; } h3, .subsection-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; margin-bottom: 0.75rem; } h4 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); } /* Stat cards - BIGGER numbers */ .stat-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.75rem; box-shadow: var(--shadow-sm); transition: all 0.2s; } .stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-light); } .stat-card h3, .stat-label { font-size: 0.9375rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 0.875rem; } .stat-card .value, .stat-value, .stat-number { font-size: 3rem; font-weight: 800; color: #1e40af !important; line-height: 1; margin-bottom: 0.5rem; } .stat-card .subtitle { font-size: 1rem; color: var(--text-light); margin-top: 0.5rem; } /* Cards - minimum 16px text */ .card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.75rem; box-shadow: var(--shadow-sm); transition: all 0.2s; } .card:hover { box-shadow: var(--shadow-md); } .card p, .card-content { font-size: 1rem; line-height: 1.6; } /* Form labels and inputs - bigger text */ label { font-weight: 600; font-size: 1rem; color: var(--text-primary); margin-bottom: 0.5rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { font-size: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1); } /* Buttons - consistent sizing, NO btn-sm */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; text-align: center; transition: all 0.2s; border: none; cursor: pointer; line-height: 1.5; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-lg { padding: 0.875rem 2rem; font-size: 1.0625rem; } /* Table text - minimum 16px */ table { width: 100%; border-collapse: collapse; background: var(--bg-primary); } th { padding: 1rem 1.25rem; text-align: left; font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-secondary); } td { padding: 1.25rem; border-bottom: 1px solid var(--border); font-size: 1rem; color: var(--text-primary); } tbody tr:hover { background: var(--bg-secondary); } /* Dashboard header */ .dashboard-header h1 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; } /* Profile page headings */ .profile-section h2 { font-size: 1.875rem; font-weight: 800; margin-bottom: 0.75rem; } .profile-section h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } .profile-section-desc { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2rem; } /* Alerts page headings */ .alerts-header h1 { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; } .alerts-header p { font-size: 1rem; color: var(--text-secondary); } /* Tender cards */ .tender-title { font-size: 1.125rem; font-weight: 700; color: var(--primary); } .tender-description, .tender-meta { font-size: 1rem; line-height: 1.6; } /* Modal content */ .modal-header h2 { font-size: 1.75rem; font-weight: 800; } .detail-label { font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .detail-value { font-size: 1rem; line-height: 1.6; } /* Empty states */ .empty-state h3 { font-size: 1.25rem; font-weight: 700; } .empty-state p { font-size: 1rem; } /* Badges and tags */ .badge-source, .badge-relevance, .status-badge { font-size: 0.8125rem; font-weight: 700; padding: 0.375rem 0.875rem; } /* Filters and controls */ .control-group label { font-size: 1rem; font-weight: 700; } .control-group input, .control-group select { font-size: 1rem; } /* Filter labels */ .filter-label { font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .filter-option label { font-size: 1rem; } /* Alerts and messages */ .alert { font-size: 1rem; padding: 1rem 1.5rem; } /* Sidebar navigation */ .sidebar-item { font-size: 1rem; font-weight: 500; } .sidebar-item.active { font-weight: 700; } /* Footer */ .footer-desc { font-size: 1rem; } .footer-links a { font-size: 1rem; } /* Spacing consistency */ .section { padding: 3rem 0; } .card + .card { margin-top: 1.5rem; } .form-group { margin-bottom: 1.5rem; } /* Responsive adjustments */ @media (max-width: 768px) { h1, .page-title { font-size: 1.75rem; } h2, .section-title { font-size: 1.5rem; } .stat-card .value, .stat-value { font-size: 2.5rem; } .card { padding: 1.25rem; } th, td { padding: 0.875rem; } } @media (max-width: 480px) { h1, .page-title { font-size: 1.5rem; } h2, .section-title { font-size: 1.25rem; } .stat-card .value, .stat-value { font-size: 2rem; } }