/* SkillXchange Custom Stylesheet ------------------------------ Palette: - Primary: #1A2E4C (Deep Blue) - Secondary: #FFFFFF (White) - Accent: #FFC107 (Vibrant Yellow) - Background/Neutral: #F8F9FA (Light Gray) - Text: #212529 Typography: - Headings: 'Poppins', sans-serif - Body: 'Roboto', sans-serif */ body { font-family: 'Roboto', sans-serif; color: #212529; background-color: #FFFFFF; } h1, h2, h3, h4, h5, h6, .navbar-brand, .hero-title, .section-title, .card-title { font-family: 'Poppins', sans-serif; font-weight: 600; } /* Navbar */ .navbar { border-bottom: 1px solid #eee; } .navbar-brand { font-weight: 700; font-size: 1.5rem; color: #1A2E4C !important; } .btn-primary { background-color: #1A2E4C; border-color: #1A2E4C; } .btn-primary:hover { background-color: #2E4A6E; border-color: #2E4A6E; } .btn-accent { background-color: #FFC107; border-color: #FFC107; color: #1A2E4C; font-weight: 500; } .btn-accent:hover { background-color: #ffca2c; border-color: #ffca2c; color: #1A2E4C; } /* Hero Section */ .hero-section { background: linear-gradient(to right, #1A2E4C, #2E4A6E); color: white; padding: 6rem 0; text-align: center; } .hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; } .hero-subtitle { font-size: 1.25rem; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-bottom: 2rem; } /* Skills Section */ .section-title { color: #1A2E4C; font-weight: 700; } .skill-card { border: 1px solid #e9ecef; border-radius: 0.5rem; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .skill-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0,0,0,0.08); } .skill-card .card-body { padding: 1.5rem; } .skill-card .card-title { color: #1A2E4C; margin-bottom: 0.75rem; } .skill-card .card-creator { font-size: 0.9rem; color: #6c757d; margin-bottom: 1rem; } .skill-card .card-footer { background-color: #f8f9fa; border-top: 1px solid #e9ecef; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .skill-price { font-weight: 700; font-size: 1.1rem; color: #1A2E4C; } .btn-primary-outline { border: 1px solid #1A2E4C; color: #1A2E4C; } .btn-primary-outline:hover { background-color: #1A2E4C; color: white; } /* Footer */ footer { background-color: #f8f9fa !important; }