/* GenZ Pharma Custom Styles */ /* Typography */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&display=swap'); :root { --primary-color: #1D4ED8; --secondary-color: #F3F4F6; --accent-color: #34D399; --text-color: #111827; --bs-body-font-family: 'Inter', sans-serif; --bs-body-color: var(--text-color); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Poppins', sans-serif; font-weight: 600; } /* Buttons */ .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); padding: 0.75rem 1.5rem; font-weight: 500; transition: background-color 0.3s ease; } .btn-primary:hover { background-color: #1e40af; /* A slightly darker shade of primary */ border-color: #1e40af; } .btn-accent { background-color: var(--accent-color); border-color: var(--accent-color); color: white; padding: 0.75rem 1.5rem; font-weight: 500; transition: background-color 0.3s ease; } .btn-accent:hover { background-color: #2aa779; /* A slightly darker shade of accent */ border-color: #2aa779; } /* Navbar */ .navbar { transition: background-color 0.3s ease; } /* Hero Section */ .hero { background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%); color: white; padding: 6rem 0; } .hero h1 { font-weight: 700; } /* Section Styling */ .section { padding: 4rem 0; } .section-bg { background-color: var(--secondary-color); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background-color: var(--primary-color); color: white; font-size: 2rem; margin-bottom: 1rem; } /* Footer */ .footer { background-color: var(--text-color); color: var(--secondary-color); padding: 3rem 0; } .footer a { color: var(--secondary-color); text-decoration: none; } .footer a:hover { color: var(--accent-color); } /* Authentication Pages */ .auth-container { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 140px); /* Adjust based on header/footer height */ background-color: #f9fafb; } .auth-card { width: 100%; max-width: 450px; padding: 2.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background-color: #ffffff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .auth-card .card-title { font-weight: 700; color: var(--text-color); } .auth-card form p { margin-bottom: 1rem; } .auth-card form label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #374151; } .auth-card form input[type="text"], .auth-card form input[type="password"], .auth-card form input[type="email"] { display: block; width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.375rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .auth-card form input[type="text"]:focus, .auth-card form input[type="password"]:focus, .auth-card form input[type="email"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3); } .auth-card .btn-primary { width: 100%; padding: 0.875rem; font-size: 1rem; }