From 61f498b967db5bcf0168e2d487c0169d5c155f95 Mon Sep 17 00:00:00 2001 From: Peter Foster Date: Sat, 14 Feb 2026 18:03:12 +0000 Subject: [PATCH] Fix: ensure button text is white with high-specificity CSS rule --- public/styles.css | 744 ++-------------------------------------------- 1 file changed, 20 insertions(+), 724 deletions(-) diff --git a/public/styles.css b/public/styles.css index d86b1bd..50d4fe4 100644 --- a/public/styles.css +++ b/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; - min-height: 90px; + padding: 0.875rem 1.5rem; + 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); - font-weight: 700; + border: 2px solid var(--primary); } .btn-secondary:hover { @@ -163,8 +153,7 @@ body { .btn-outline { background: transparent; color: var(--primary); - border: 3px solid var(--primary); - font-weight: 700; + border: 2px solid var(--primary); } .btn-outline:hover { @@ -216,14 +205,13 @@ body { } .hero-subtitle { - font-size: 1.375rem; - color: #4b5563; + font-size: 1.25rem; + 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; - color: #4b5563; + font-size: 1.125rem; + 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; - max-height: 90px !important; + height: 70px !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; - } -}