Fix: ensure button text is white with high-specificity CSS rule

public/styles.css

@@ -1,9 +1,3 @@
-/* Global cursor fix - no I-beam on non-interactive content */
-* { cursor: default; user-select: none; }
-input, textarea, select, [contenteditable], a, button, label { cursor: auto; user-select: auto; }
-input, textarea, select, [contenteditable] { cursor: text; }
-a, button, [role="button"], .btn, summary { cursor: pointer; }
-
 /* Reset and Base Styles */
 * {
     margin: 0;
@@ -57,8 +51,8 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.25rem 1.5rem;
+    padding: 0.875rem 1.5rem;
-    min-height: 90px;
+    min-height: 72px;
 }
 
 .nav-brand {
@@ -69,19 +63,17 @@ body {
     font-size: 1.25rem;
     color: var(--primary);
     text-decoration: none;
-    white-space: nowrap;
 }
 
 .logo-icon {
     width: auto;
-    height: 90px;
+    height: 65px;
     color: var(--primary);
     display: block;
-    }
+}
 
 .logo-text {
     color: var(--text-primary);
-    white-space: nowrap;
 }
 
 .nav-menu {
@@ -89,7 +81,6 @@ body {
     list-style: none;
     align-items: center;
     gap: 2rem;
-    
 }
 
 .nav-menu a {
@@ -150,8 +141,7 @@ body {
 .btn-secondary {
     background: transparent;
     color: var(--primary);
-    border: 3px solid var(--primary);
+    border: 2px solid var(--primary);
-    font-weight: 700;
 }
 
 .btn-secondary:hover {
@@ -163,8 +153,7 @@ body {
 .btn-outline {
     background: transparent;
     color: var(--primary);
-    border: 3px solid var(--primary);
+    border: 2px solid var(--primary);
-    font-weight: 700;
 }
 
 .btn-outline:hover {
@@ -216,14 +205,13 @@ body {
 }
 
 .hero-subtitle {
-    font-size: 1.375rem;
+    font-size: 1.25rem;
-    color: #4b5563;
+    color: var(--text-secondary);
     margin-bottom: 2.5rem;
     line-height: 1.7;
     max-width: 760px;
     margin-left: auto;
     margin-right: auto;
-    font-weight: 500;
 }
 
 .hero-cta {
@@ -257,10 +245,9 @@ body {
 }
 
 .stat-label {
-    font-size: 1rem;
+    font-size: 0.9375rem;
     color: var(--text-secondary);
     line-height: 1.4;
-    font-weight: 600;
 }
 
 /* Section Styles */
@@ -278,7 +265,7 @@ body {
 }
 
 .section-title {
-    font-size: 2.75rem;
+    font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1rem;
@@ -286,10 +273,9 @@ body {
 }
 
 .section-subtitle {
-    font-size: 1.25rem;
+    font-size: 1.125rem;
-    color: #4b5563;
+    color: var(--text-secondary);
     line-height: 1.6;
-    font-weight: 500;
 }
 
 /* Features Section */
@@ -303,7 +289,7 @@ body {
     background: white;
     padding: 2rem;
     border-radius: 1rem;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-sm);
     transition: all 0.3s ease;
     border: 1px solid var(--border);
 }
@@ -393,12 +379,11 @@ body {
     text-align: center;
     position: relative;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
 }
 
 .pricing-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-xl);
     border-color: var(--primary-light);
 }
 
@@ -492,7 +477,7 @@ body {
     background: white;
     padding: 2.25rem;
     border-radius: 1rem;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-sm);
     border: 1px solid var(--border);
     transition: all 0.3s ease;
 }
@@ -522,7 +507,8 @@ body {
 }
 
 .testimonial-author {
-        
+    margin-top: 1.5rem;
+    padding-top: 1.25rem;
     border-top: 1px solid var(--border);
 }
 
@@ -705,7 +691,7 @@ body {
 }
 
 .footer-brand .logo-icon {
-    height: 52px !important;
+    height: 52px;
 }
 
 .footer-desc {
@@ -899,8 +885,8 @@ body {
 .header .logo-icon,
 img.logo-icon {
     width: auto !important;
-    height: 90px !important;
+    height: 70px !important;
-    max-height: 90px !important;
+    max-height: 70px !important;
     color: var(--primary);
     display: block;
 }
@@ -921,693 +907,3 @@ div.stat div.stat-number {
     font-size: 2.75rem !important;
     font-weight: 700 !important;
 }
-/**
- * TenderRadar Design Consistency Fixes
- * Addresses all visual design and formatting issues
- */
-
-/* ===========================
-   LOGO CONSISTENCY FIX
-   =========================== */
-
-/* Force consistent logo sizing across ALL pages */
-.nav-brand .logo-icon,
-.header .logo-icon,
-.auth-header .logo-icon,
-img.logo-icon {
-    width: auto !important;
-    height: 90px !important;
-    max-height: 90px !important;
-    display: block;
-}
-
-/* Navbar logo specifically */
-.nav .logo-icon,
-.nav-brand img {
-    height: 90px !important;
-}
-
-/* ===========================
-   AUTH PAGES - FORM LAYOUT FIX
-   =========================== */
-
-/* Remove duplicate logo from auth cards */
-.auth-header .logo-icon {
-    display: none !important;
-}
-
-/* Keep only navbar logo, center the auth header */
-.auth-header {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-/* Stack labels ABOVE inputs (not beside) */
-.auth-card .form-group {
-    margin-bottom: 1.25rem;
-    display: flex;
-    flex-direction: column;
-}
-
-.auth-card .form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: var(--text-primary);
-    font-size: 0.875rem;
-    text-align: left;
-}
-
-.auth-card .form-group input,
-.auth-card .form-group select {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    font-family: 'Inter', sans-serif;
-    font-size: 0.9375rem;
-    transition: all 0.2s;
-}
-
-/* Password field with toggle button */
-.auth-card .password-group {
-    position: relative;
-}
-
-.auth-card .password-toggle {
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-secondary);
-    padding: 0.25rem 0.5rem;
-    margin-top: 12px; /* Offset for label */
-}
-
-/* Forgot password link - position properly */
-.form-header-with-link {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.form-header-with-link label {
-    margin: 0;
-}
-
-.forgot-password {
-    font-size: 0.8125rem;
-    color: var(--primary);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.forgot-password:hover {
-    text-decoration: underline;
-}
-
-/* Form row for side-by-side fields (industry + company size) */
-.form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    margin-bottom: 1.25rem;
-}
-
-.form-row .form-group {
-    margin-bottom: 0;
-}
-
-/* ===========================
-   CARD STYLING FIX
-   =========================== */
-
-/* Stronger card shadows for auth pages */
-.auth-card {
-    background: white;
-    border-radius: 0.75rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    border: 1px solid var(--border);
-    padding: 2.5rem;
-}
-
-/* Consistent card styles across app */
-.card,
-.stat-card,
-.feature-card,
-.pricing-card,
-.testimonial-card {
-    background: white;
-    border: 1px solid var(--border);
-    border-radius: 0.75rem;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    transition: all 0.2s;
-}
-
-.card:hover,
-.feature-card:hover,
-.testimonial-card:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    border-color: rgba(30, 64, 175, 0.3);
-}
-
-/* ===========================
-   BUTTON CONSISTENCY
-   =========================== */
-
-/* Ensure all buttons have consistent styling */
-.btn {
-    display: inline-block;
-    padding: 0.625rem 1.5rem;
-    border-radius: 0.5rem;
-    font-weight: 600;
-    text-decoration: none;
-    text-align: center;
-    transition: all 0.2s;
-    border: none;
-    cursor: pointer;
-    font-size: 0.9375rem;
-    line-height: 1.5;
-    font-family: 'Inter', sans-serif;
-}
-
-.btn-primary {
-    background: #1e40af;
-    color: white;
-    border: 2px solid transparent;
-}
-
-.btn-primary:hover {
-    background: #1e3a8a;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.btn-secondary,
-.btn-outline {
-    background: transparent;
-    color: #1e40af;
-    border: 2px solid #1e40af;
-}
-
-.btn-secondary:hover,
-.btn-outline:hover {
-    background: #1e40af;
-    color: white;
-    transform: translateY(-1px);
-}
-
-.btn-sm {
-    padding: 0.5rem 1.25rem;
-    font-size: 0.875rem;
-}
-
-.btn-lg {
-    padding: 0.875rem 2rem;
-    font-size: 1rem;
-}
-
-/* Submit buttons on auth pages */
-.submit-btn {
-    width: 100%;
-    padding: 0.875rem 1.5rem;
-    font-size: 1rem;
-    margin-top: 1.25rem;
-}
-
-/* ===========================
-   TYPOGRAPHY CONSISTENCY
-   =========================== */
-
-/* Ensure consistent heading hierarchy */
-h1, .hero-title, .page-title {
-    font-size: 3rem;
-    font-weight: 700;
-    line-height: 1.15;
-    color: var(--text-primary);
-    letter-spacing: -0.02em;
-}
-
-h2, .section-title, .auth-header h1 {
-    font-size: 1.875rem;
-    font-weight: 700;
-    color: var(--text-primary);
-    letter-spacing: -0.01em;
-}
-
-h3 {
-    font-size: 1.375rem;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-/* Body text consistency */
-p, .hero-subtitle, .section-subtitle {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: var(--text-secondary);
-}
-
-/* Stats - FORCE all to use same color */
-.stat-number,
-.hero-stats .stat .stat-number,
-div.stat div.stat-number,
-.stat-card .value {
-    font-size: 2.75rem !important;
-    font-weight: 700 !important;
-    color: #1e40af !important;
-    line-height: 1;
-}
-
-.stat-label,
-.stat-card h3 {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-/* ===========================
-   COLOR PALETTE ENFORCEMENT
-   =========================== */
-
-:root {
-    --primary: #1e40af;
-    --primary-dark: #1e3a8a;
-    --primary-light: #3b82f6;
-    --accent: #f59e0b;
-    --text-primary: #1f2937;
-    --text-secondary: #6b7280;
-    --text-light: #9ca3af;
-    --bg-primary: #ffffff;
-    --bg-secondary: #f9fafb;
-    --bg-alt: #f3f4f6;
-    --border: #e5e7eb;
-}
-
-/* Ensure all primary buttons use exact blue */
-.btn-primary,
-.badge,
-.btn-expand {
-    background: #1e40af !important;
-}
-
-.btn-primary:hover,
-.btn-expand:hover {
-    background: #1e3a8a !important;
-}
-
-/* Accent color (orange) for beta badge and highlights */
-.badge,
-.badge-relevance {
-    background: #f59e0b !important;
-    color: white !important;
-}
-
-/* ===========================
-   SPACING RHYTHM
-   =========================== */
-
-/* Consistent section padding */
-.section {
-    padding: 5rem 0;
-}
-
-.hero {
-    padding: 5rem 0 6rem;
-}
-
-/* Consistent card padding */
-.card,
-.feature-card,
-.pricing-card,
-.testimonial-card,
-.stat-card {
-    padding: 2rem;
-}
-
-/* Consistent gaps in grids */
-.features-grid,
-.pricing-grid,
-.testimonials-grid {
-    gap: 2rem;
-}
-
-/* Form spacing */
-.form-group {
-    margin-bottom: 1.25rem;
-}
-
-.form-row {
-    gap: 1rem;
-}
-
-/* ===========================
-   NAVBAR CONSISTENCY
-   =========================== */
-
-/* Consistent navbar across all pages */
-.header {
-    position: sticky;
-    top: 0;
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid var(--border);
-    z-index: 1000;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.875rem 1.5rem;
-    min-height: 72px;
-}
-
-.nav-brand {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    text-decoration: none;
-}
-
-.nav-menu {
-    display: flex;
-    list-style: none;
-    align-items: center;
-    gap: 2rem;
-    margin: 0;
-    padding: 0;
-}
-
-.nav-menu a {
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.2s;
-    font-size: 0.9375rem;
-}
-
-.nav-menu a:hover {
-    color: var(--primary);
-}
-
-/* ===========================
-   FOOTER CONSISTENCY
-   =========================== */
-
-/* Add footer to all pages */
-.footer {
-    background: var(--text-primary);
-    color: white;
-    padding: 4rem 0 2rem;
-    margin-top: auto;
-}
-
-.footer-grid {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr 1fr;
-    gap: 3rem;
-    margin-bottom: 3rem;
-}
-
-.footer-brand {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-weight: 700;
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-    color: white;
-}
-
-.footer-desc {
-    color: var(--text-light);
-    line-height: 1.7;
-    font-size: 0.9375rem;
-}
-
-.footer-col h4 {
-    margin-bottom: 1.125rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: white;
-}
-
-.footer-col ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.footer-col ul li {
-    margin-bottom: 0.75rem;
-}
-
-.footer-col a {
-    color: var(--text-light);
-    text-decoration: none;
-    transition: color 0.2s;
-    font-size: 0.9375rem;
-}
-
-.footer-col a:hover {
-    color: white;
-}
-
-.footer-bottom {
-    padding-top: 2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    text-align: center;
-    color: var(--text-light);
-    font-size: 0.875rem;
-}
-
-/* ===========================
-   MOBILE RESPONSIVE FIXES
-   =========================== */
-
-@media (max-width: 768px) {
-    .hero-title,
-    h1 {
-        font-size: 2.25rem;
-    }
-
-    .section-title,
-    h2 {
-        font-size: 1.75rem;
-    }
-
-    .form-row {
-        grid-template-columns: 1fr;
-    }
-
-    .footer-grid {
-        grid-template-columns: 1fr;
-        gap: 2rem;
-    }
-
-    .auth-card {
-        padding: 2rem 1.5rem;
-    }
-
-    .nav {
-        padding: 0.75rem 1.25rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .hero-title,
-    h1 {
-        font-size: 1.875rem;
-    }
-
-    .section-title,
-    h2 {
-        font-size: 1.5rem;
-    }
-
-    .btn-lg {
-        padding: 0.75rem 1.5rem;
-        font-size: 0.9375rem;
-    }
-
-    .stat-number,
-    .stat-card .value {
-        font-size: 2.25rem !important;
-    }
-}
-
-/* ===========================
-   EMPTY STATES & LOADING
-   =========================== */
-
-.empty-state {
-    text-align: center;
-    padding: 3rem 1.5rem;
-}
-
-.empty-state-icon {
-    width: 64px;
-    height: 64px;
-    color: var(--text-light);
-    margin: 0 auto 1rem;
-    opacity: 0.5;
-}
-
-.empty-state h3 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 0.5rem;
-}
-
-.empty-state p {
-    color: var(--text-secondary);
-    margin: 0;
-}
-
-.loading-spinner {
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    border: 3px solid rgba(30, 64, 175, 0.1);
-    border-top-color: var(--primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-/* ===========================
-   FORM INPUT CONSISTENCY
-   =========================== */
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="number"],
-input[type="date"],
-input[type="search"],
-textarea,
-select {
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    font-family: 'Inter', sans-serif;
-    font-size: 0.9375rem;
-    color: var(--text-primary);
-    background: var(--bg-primary);
-    transition: all 0.2s;
-    width: 100%;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
-}
-
-input:disabled,
-textarea:disabled,
-select:disabled {
-    background: var(--bg-secondary);
-    color: var(--text-light);
-    cursor: not-allowed;
-}
-
-/* Input error states */
-input.error,
-textarea.error,
-select.error {
-    border-color: #ef4444;
-    background: rgba(239, 68, 68, 0.02);
-}
-
-input.error:focus,
-textarea.error:focus,
-select.error:focus {
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-}
-
-/* ===========================
-   BADGE & TAG CONSISTENCY
-   =========================== */
-
-.badge,
-.badge-source,
-.badge-relevance {
-    display: inline-block;
-    padding: 0.375rem 0.875rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.badge {
-    background: #f59e0b;
-    color: white;
-}
-
-.badge-source {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border);
-    color: var(--text-secondary);
-}
-
-.badge-relevance {
-    background: rgba(245, 158, 11, 0.15);
-    border: 1px solid rgba(245, 158, 11, 0.3);
-    color: #92400e;
-}
-
-/* ===========================
-   ACCESSIBILITY IMPROVEMENTS
-   =========================== */
-
-/* Ensure sufficient color contrast */
-.text-secondary,
-.hero-subtitle,
-.section-subtitle {
-    color: #6b7280; /* Darker for better contrast */
-}
-
-/* Focus states for keyboard navigation */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
-}
-
-/* ===========================
-   PRINT STYLES
-   =========================== */
-
-@media print {
-    .header,
-    .footer,
-    .nav,
-    .mobile-toggle,
-    .btn {
-        display: none !important;
-    }
-
-    body {
-        background: white;
-    }
-}