Peter Foster
282ef50093
- Fixed footer logo contrast (dark → white on dark background) - Fixed avatar sizing and gradient contrasts - Fixed testimonial layout with flexbox - Fixed signup form contrast and LastPass icon overlap - Added responsive company logos section - Fixed FAQ accordion CSS - All CSS improvements for WCAG compliance
7 lines
35 KiB
CSS
7 lines
35 KiB
CSS
/* Reset and Base Styles */* {margin:0;padding:0;box-sizing:border-box;}/* Reset and Base Styles */* {margin:0;padding:0;box-sizing:border-box;}:root {--primary:#1e40af;--primary-dark:#1e3a8a;--primary-light:#3b82f6;--accent:#f59e0b;--text-primary:#1f2937;--text-secondary:#6b7280;--text-light:#9ca3af;--footer-text:#d1d5db;--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);}body {font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;color:var(--text-primary);line-height:1.6;background:var(--bg-primary);}.container {max-width:1200px;margin:0 auto;padding:0 1.5rem;}/* Header */.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:var(--shadow-sm);}.nav {display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;min-height:90px;}.nav-brand {display:flex;align-items:center;gap:0.75rem;font-weight:700;font-size:1.25rem;color:var(--primary);text-decoration:none;white-space:nowrap;}.logo-icon {width:auto;height:90px;color:var(--primary);display:block;}.logo-text {color:var(--text-primary);white-space:nowrap;}.nav-menu {display:flex;list-style:none;align-items:center;gap:2rem;}.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);}.mobile-toggle {display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:0.5rem;}.mobile-toggle span {width:24px;height:2px;background:var(--text-primary);transition:all 0.3s;}/* Buttons */.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:1rem;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-secondary {background:transparent;color:var(--primary);border:3px solid var(--primary);font-weight:700;}.btn-secondary:hover {background:var(--primary);color:white;transform:translateY(-1px);}.btn-outline {background:transparent;color:var(--primary);border:3px solid var(--primary);font-weight:700;}.btn-outline:hover {background:var(--primary);color:white;transform:translateY(-1px);}.btn-sm {padding:0.5rem 1.25rem;font-size:0.875rem;}.btn-lg {padding:0.875rem 2rem;font-size:1.0625rem;}/* Hero Section */.hero {padding:5rem 0 6rem;background:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);}.hero-content {text-align:center;max-width:900px;margin:0 auto;}.badge {display:inline-block;padding:0.5rem 1rem;background:var(--accent);color:white;border-radius:2rem;font-size:0.875rem;font-weight:600;margin-bottom:1.75rem;}.hero-title {font-size:3.5rem;font-weight:700;line-height:1.15;color:var(--text-primary);margin-bottom:1.5rem;letter-spacing:-0.02em;}.hero-subtitle {font-size:1.375rem;color:#4b5563;margin-bottom:2.5rem;line-height:1.7;max-width:760px;margin-left:auto;margin-right:auto;font-weight:500;}.hero-cta {display:flex;gap:0.875rem;justify-content:center;margin-bottom:4.5rem;flex-wrap:wrap;}.hero-stats {display:grid;grid-template-columns:repeat(3, 1fr);gap:3rem;max-width:800px;margin:0 auto;padding:2.5rem 0 0;border-top:1px solid rgba(30,64,175,0.1);}.stat {text-align:center;}.stat-number {font-size:2.75rem;font-weight:700;color:var(--primary);line-height:1;margin-bottom:0.625rem;}.stat-label {font-size:1rem;color:var(--text-secondary);line-height:1.4;font-weight:600;}/* Section Styles */.section {padding:5rem 0;}.section-alt {background:var(--bg-secondary);}.section-header {text-align:center;margin-bottom:4rem;}.section-title {font-size:2.75rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;letter-spacing:-0.01em;}.section-subtitle {font-size:1.25rem;color:#4b5563;line-height:1.6;font-weight:500;}/* Features Section */.features-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:2rem;}.feature-card {background:white;padding:2rem;border-radius:1rem;box-shadow:0 4px 24px rgba(0,0,0,0.12);transition:all 0.3s ease;border:1px solid var(--border);}.feature-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-light);}.feature-icon {width:48px;height:48px;color:var(--primary);margin-bottom:1.5rem;}.feature-card h3 {font-size:1.375rem;font-weight:600;margin-bottom:0.875rem;color:var(--text-primary);}.feature-card p {color:var(--text-secondary);line-height:1.7;font-size:0.9375rem;}/* How It Works Section */.steps {display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:3rem;max-width:1100px;margin:0 auto;}.step {text-align:center;}.step-number {width:72px;height:72px;margin:0 auto 1.5rem;background:var(--primary);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;box-shadow:var(--shadow-md);}.step h3 {font-size:1.375rem;font-weight:600;margin-bottom:0.875rem;color:var(--text-primary);}.step p {color:var(--text-secondary);line-height:1.7;font-size:0.9375rem;}/* Pricing Section */.pricing-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;max-width:1100px;margin:0 auto;align-items:start;}.pricing-card {background:white;border:2px solid var(--border);border-radius:1rem;padding:2.5rem;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);border-color:var(--primary-light);}.pricing-card-featured {border-color:var(--primary);box-shadow:var(--shadow-lg);transform:scale(1.05);}.pricing-card-featured:hover {transform:scale(1.05) translateY(-4px);}.pricing-badge {position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--accent);color:white;padding:0.5rem 1.25rem;border-radius:2rem;font-size:0.875rem;font-weight:600;box-shadow:var(--shadow-md);}.pricing-header h3 {font-size:1.75rem;font-weight:600;margin-bottom:1.25rem;color:var(--text-primary);}.price {font-size:3rem;font-weight:700;color:var(--primary);margin-bottom:2rem;line-height:1;}.currency {font-size:1.75rem;vertical-align:super;font-weight:600;}.period {font-size:1.125rem;color:var(--text-secondary);font-weight:400;}.pricing-features {list-style:none;text-align:left;margin-bottom:2rem;}.pricing-features li {padding:0.875rem 0;border-bottom:1px solid var(--border);color:var(--text-secondary);position:relative;padding-left:2rem;font-size:0.9375rem;}.pricing-features li:before {content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700;font-size:1.125rem;}.pricing-features li:last-child {border-bottom:none;}/* Testimonials Section */.testimonials-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:2rem;}.testimonial-card {background:white;padding:2.25rem;border-radius:1rem;box-shadow:0 4px 24px rgba(0,0,0,0.12);border:1px solid var(--border);transition:all 0.3s ease;}.testimonial-card:hover {transform:translateY(-2px);box-shadow:var(--shadow-md);}.testimonial-quote {font-size:1.0625rem;color:var(--text-primary);margin-bottom:1.5rem;line-height:1.7;font-style:italic;}.testimonial-quote:before {content:'"';font-size:3.5rem;color:var(--primary);opacity:0.3;line-height:0;display:block;margin-bottom:1rem;font-style:normal;}.testimonial-author {border-top:1px solid var(--border);}.testimonial-name {font-weight:600;color:var(--text-primary);font-size:1rem;margin-bottom:0.25rem;}.testimonial-company {font-size:0.875rem;color:var(--text-secondary);}/* Company Logos Section */.company-logos {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3rem;margin:4rem 0;padding:2rem 0;}.logo-item {flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}.logo-item svg {width:140px;height:40px;color:var(--text-secondary);transition:all 0.3s ease;}.logo-item:hover svg {color:var(--primary);transform:scale(1.05);}.logo-item:hover rect,.logo-item:hover polygon,.logo-item:hover circle,.logo-item:hover path {opacity:0.3;}/* Responsive adjustments for company logos */@media (max-width:968px) {.company-logos {gap:2rem;margin:3rem 0;} .logo-item svg {width:120px;height:35px;}}@media (max-width:768px) {.company-logos {gap:1.5rem;margin:2.5rem 0;} .logo-item svg {width:100px;height:30px;}}@media (max-width:480px) {.company-logos {gap:1rem;margin:2rem 0;} .logo-item svg {width:80px;height:25px;}}/* FAQ Section */.faq-list {max-width:800px;margin:0 auto;}.faq-item {border-bottom:1px solid var(--border);}.faq-item:last-child {border-bottom:none;}.faq-question {width:100%;padding:1.5rem 0;background:none;border:none;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-size:1.0625rem;font-weight:600;color:var(--text-primary);transition:color 0.2s;}.faq-question:hover {color:var(--primary);}.faq-icon {width:24px;height:24px;min-width:24px;color:var(--primary);transition:transform 0.3s ease;}.faq-item.active .faq-icon {transform:rotate(180deg);}.faq-answer {max-height:0;overflow:hidden;transition:max-height 0.3s ease;}.faq-item.active .faq-answer {max-height:500px;padding-bottom:1.5rem;}.faq-answer p {color:var(--text-secondary);line-height:1.7;font-size:0.9375rem;}/* Signup Section */.signup {background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:white;}.signup-content {max-width:700px;margin:0 auto;text-align:center;}.signup-title {font-size:2.5rem;font-weight:700;margin-bottom:1rem;letter-spacing:-0.01em;}.signup-subtitle {font-size:1.25rem;margin-bottom:2.5rem;opacity:0.95;line-height:1.6;}.signup-form {max-width:600px;margin:0 auto;}.form-group {display:flex;gap:0.875rem;margin-bottom:1rem;}.form-group input {flex:1;padding:1rem 1.5rem;border:2px solid transparent;border-radius:0.5rem;font-size:1rem;outline:none;transition:border-color 0.2s;}.form-group input:focus {border-color:var(--accent);}.form-note {font-size:0.875rem;opacity:0.85;margin-top:1rem;line-height:1.5;}.form-message {margin-top:1rem;padding:1rem;border-radius:0.5rem;display:none;}.form-message.success {display:block;background:rgba(34,197,94,0.2);border:1px solid rgba(34,197,94,0.4);color:#dcfce7;}.form-message.error {display:block;background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.4);color:#fecaca;}/* Footer */.footer-brand {display:flex;align-items:center;gap:0.75rem;font-weight:700;font-size:1.25rem;margin-bottom:1rem;}.footer-brand .logo-icon {height:52px !important;}.footer-desc {color:var(--footer-text);line-height:1.7;font-size:0.9375rem;}.footer-col h4 {margin-bottom:1.125rem;font-size:1.0625rem;font-weight:600;}.footer-col ul {list-style:none;}.footer-col ul li {margin-bottom:0.75rem;}.footer-col a {color:var(--footer-text);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(--footer-text);font-size:0.875rem;}/* Responsive */@media (max-width:968px) {.pricing-grid {grid-template-columns:1fr;max-width:420px;} .pricing-card-featured {transform:scale(1);}}@media (max-width:768px) {.mobile-toggle {display:flex;} .nav {padding:0.75rem 1.5rem;} .nav-menu {position:absolute;top:100%;left:0;right:0;background:white;flex-direction:column;padding:1.5rem;box-shadow:var(--shadow-lg);max-height:0;overflow:hidden;transition:max-height 0.3s ease;gap:0;} .nav-menu.active {max-height:500px;border-bottom:1px solid var(--border);} .nav-menu li {width:100%;padding:0.75rem 0;border-bottom:1px solid var(--border);} .nav-menu li:last-child {border-bottom:none;} .nav-menu a {display:block;} .hero {padding:4rem 0 5rem;} .hero-title {font-size:2.5rem;} .hero-subtitle {font-size:1.125rem;} .hero-cta {flex-direction:column;max-width:300px;margin-left:auto;margin-right:auto;} .hero-cta .btn {width:100%;} .hero-stats {grid-template-columns:1fr;gap:2rem;max-width:300px;} .section-title {font-size:2rem;} .section {padding:4rem 0;} .features-grid, .steps, .testimonials-grid {grid-template-columns:1fr;} .form-group {flex-direction:column;} .form-group .btn {width:100%;} .footer-grid {grid-template-columns:1fr;gap:2.5rem;}}@media (max-width:480px) {.hero {padding:3rem 0 4rem;} .hero-title {font-size:2rem;line-height:1.2;} .hero-subtitle {font-size:1rem;} .section {padding:3rem 0;} .section-title {font-size:1.75rem;} .btn-lg {padding:0.75rem 1.5rem;font-size:1rem;} .stat-number {font-size:2.25rem;} .stat-label {font-size:0.875rem;}}/* Enhanced Logo Styling */.nav-brand .logo-icon,.header .logo-icon,img.logo-icon {width:auto !important;height:90px !important;max-height:90px !important;color:var(--primary);display:block;}/* Ensure all stat numbers are styled consistently */.hero-stats .stat .stat-number {font-size:2.75rem !important;font-weight:700 !important;color:var(--primary) !important;line-height:1;}/* Force all stat numbers to use the same blue color - ultra specific */.hero .hero-stats .stat .stat-number,.hero-content .hero-stats .stat .stat-number,div.stat div.stat-number {color:#1e40af !important;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 =========================== */.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;} =========================== */@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(--footer-text);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(--footer-text);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 {display:none !important;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;}}/* ============================================ TENDER CARD STYLES ============================================ */.tender-item {background:var(--bg-primary);border:1px solid var(--border);border-radius:0.75rem;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-sm);transition:all 0.3s ease;cursor:pointer;list-style:none;}.tender-item:hover {box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--primary-light);}.tender-item:last-child {margin-bottom:0;}/* Tender Header */.tender-header {display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0.5rem;}.tender-title {font-size:1.125rem;font-weight:700;color:var(--primary);line-height:1.3;margin:0;flex:1;transition:color 0.2s;}.tender-item:hover .tender-title {color:var(--primary-dark);}/* Tender Badges */.tender-badges {display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;}.badge-source,.badge-relevance {display:inline-block;padding:0.375rem 0.75rem;border-radius:1rem;font-size:0.75rem;font-weight:600;white-space:nowrap;}.badge-source {background-color:#e5e7eb;color:#4b5563;}.badge-relevance {background-color:#fed7aa;color:#92400e;}/* Tender Description */.tender-description {font-size:0.9375rem;color:var(--text-secondary);line-height:1.5;margin:0.5rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}/* Tender Metadata */.tender-meta {display:flex;flex-wrap:wrap;gap:1.25rem;padding:1rem 0;border-top:1px solid var(--bg-secondary);border-bottom:1px solid var(--bg-secondary);}.meta-item {display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text-secondary);flex:1;min-width:150px;}.meta-icon {width:1.125rem;height:1.125rem;color:var(--primary);flex-shrink:0;}/* Tender Footer */.tender-footer {display:flex;justify-content:space-between;align-items:center;gap:1rem;}.tender-value {font-size:1.5rem;font-weight:700;color:var(--accent);white-space:nowrap;}.tender-actions {display:flex;gap:0.75rem;}.btn-expand,.btn-save {padding:0.625rem 1.25rem;border:none;border-radius:0.5rem;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap;}.btn-expand {background-color:var(--primary);color:white;}.btn-expand:hover {background-color:var(--primary-dark);transform:translateY(-1px);}.btn-expand:active {transform:translateY(0);}.btn-save {background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);}.btn-save:hover {background-color:var(--bg-alt);border-color:var(--primary);color:var(--primary);}.btn-save:active {transform:translateY(0);}/* Responsive Design */@media (max-width:768px) {.tender-item {padding:1.25rem;gap:0.75rem;} .tender-header {flex-direction:column;gap:0.75rem;} .tender-badges {justify-content:flex-start;} .tender-meta {flex-direction:column;gap:0.75rem;padding:0.75rem 0;} .meta-item {min-width:100%;flex:auto;} .tender-footer {flex-direction:column;align-items:stretch;} .tender-value {text-align:center;padding-bottom:0.5rem;border-bottom:1px solid var(--border);} .tender-actions {flex-direction:column;} .btn-expand, .btn-save {width:100%;text-align:center;}}@media (max-width:480px) {.tender-item {padding:1rem;} .tender-title {font-size:1rem;} .tender-description {-webkit-line-clamp:2;font-size:0.875rem;} .tender-meta {gap:0.5rem;} .meta-item {font-size:0.8125rem;} .tender-value {font-size:1.375rem;}}/* Search icon sizing */.search-icon {width:24px;height:24px;stroke-width:2;flex-shrink:0;}.dashboard-search {display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,0.95);border-radius:8px;border:1px solid #e5e7eb;margin-bottom:16px;}.search-text {color:#9ca3af;font-size:14px;}.filter-chip {display:inline-block;background:#f3f4f6;color:#374151;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;margin-right:8px;}.tender-cards {display:flex;flex-direction:column;gap:12px;margin-top:20px;}/* Hero mockup browser window */.hero-mockup {margin-top:3rem;display:flex;justify-content:center;}.browser-window {width:90%;max-width:800px;background:white;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.15);overflow:hidden;border:1px solid #e5e7eb;}.browser-header {display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f3f4f6;border-bottom:1px solid #e5e7eb;min-height:48px;}.browser-dots {display:flex;gap:8px;}.browser-dots span {width:12px;height:12px;border-radius:50%;background:#d1d5db;}.browser-dots span:first-child {background:#ef4444;}.browser-dots span:nth-child(2) {background:#f59e0b;}.browser-dots span:nth-child(3) {background:#10b981;}.browser-title {flex:1;text-align:center;font-size:13px;font-weight:500;color:#6b7280;}.dashboard-content {padding:20px;background:white;min-height:300px;}.dashboard-filters {display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}/* BUTTON TEXT COLOR FIX - DEFINITIVE */a.btn-primary,a.btn-primary:visited,.btn-primary {color:white !important;}a.btn-primary:hover {color:white !important;}a.btn-primary:active {color:white !important;}/** * 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-secondary);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;}}[data-lastpass-icon-root] { display: none !important; }
|
|
.signup-form [data-lastpass-icon-root] { display: none !important; }
|
|
.signup-form input[type=email]{background:white;color:var(--text-primary);border-color:white}.signup-form input[type=email]::placeholder{color:var(--text-secondary)}.signup-form input[type=email]:focus{border-color:var(--accent);background:white;color:var(--text-primary)}.signup .form-note{opacity:1;color:rgba(255,255,255,.95)}.signup .form-note a{color:white;text-decoration:underline}.signup .form-note a:hover{opacity:.9}
|
|
.signup-title{color:#fff}.signup-subtitle{color:rgba(255,255,255,.95)}
|
|
.footer .logo-icon{filter:brightness(0) invert(1)}
|
|
.testimonial-avatar{width:56px;height:56px;flex-shrink:0}.testimonial-avatar svg{width:100%;height:100%;display:block}.testimonial-author{display:flex;align-items:center;gap:1rem;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--border)}
|