/* ============================================================ NAGABA Women Youth and Needy Association Professional NGO Stylesheet ============================================================ */ /* Bootstrap, AOS, and Font Awesome loaded via CDN in HTML */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Nunito+Sans:wght@300;400;600;700;800&display=swap'); :root { --clr-primary: #1a5632; --clr-primary-dark: #0f3d22; --clr-primary-light: #e8f5ec; --clr-accent: #c8a351; --clr-accent-light: #f5ecd6; --clr-cream: #faf8f4; --clr-white: #ffffff; --clr-dark: #1e1e1e; --clr-text: #3a3a3a; --clr-muted: #6b7280; --clr-border: #e2ddd5; --clr-warm-bg: #f7f4ef; --font-heading: 'Lora', Georgia, serif; --font-body: 'Nunito Sans', 'Segoe UI', sans-serif; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --radius: 8px; --radius-lg: 16px; --transition: 0.3s ease; } *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); margin: 0; padding: 0; background: var(--clr-cream); color: var(--clr-text); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--clr-dark); line-height: 1.3; } h1 { color: var(--clr-primary-dark); } a { color: var(--clr-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--clr-accent); } img { max-width: 100%; height: auto; } /* ---- Navbar ---- */ .custom-navbar { background-color: var(--clr-white); box-shadow: var(--shadow-sm); padding: 0.75rem 0; border-bottom: 3px solid var(--clr-primary); } .navbar-brand { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--clr-primary) !important; letter-spacing: 0.5px; } .nav-link { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 0.5rem 0.85rem !important; margin: 0 0.1rem; border-radius: var(--radius); color: var(--clr-text) !important; text-transform: uppercase; letter-spacing: 0.4px; transition: all var(--transition); } .nav-link:hover { background-color: var(--clr-primary-light); color: var(--clr-primary) !important; } .nav-link.active { background-color: var(--clr-primary) !important; color: var(--clr-white) !important; } /* ---- Sections ---- */ .section { padding: 5rem 0; } .section-title { font-size: 2.2rem; font-weight: 700; text-align: center; margin-bottom: 3rem; color: var(--clr-primary-dark); position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 3px; background: var(--clr-accent); margin: 0.75rem auto 0; border-radius: 2px; } .bg-light { background-color: var(--clr-warm-bg) !important; } /* ---- Hero ---- */ .hero-section { background: linear-gradient(135deg, var(--clr-primary-light) 0%, var(--clr-cream) 100%); padding: 4rem 0 5rem; border-bottom: 1px solid var(--clr-border); } .hero-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--clr-primary-dark); line-height: 1.2; margin-bottom: 1.25rem; } .hero-subtitle { font-size: 1.1rem; color: var(--clr-muted); line-height: 1.8; margin-bottom: 1.5rem; } .hero-image { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ---- Buttons ---- */ .btn-primary-custom { background-color: var(--clr-primary); color: var(--clr-white); border: 2px solid var(--clr-primary); padding: 0.65rem 1.75rem; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius); transition: all var(--transition); letter-spacing: 0.3px; } .btn-primary-custom:hover { background-color: var(--clr-primary-dark); border-color: var(--clr-primary-dark); color: var(--clr-white); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-outline-custom { background-color: transparent; color: var(--clr-primary); border: 2px solid var(--clr-primary); padding: 0.65rem 1.75rem; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius); transition: all var(--transition); } .btn-outline-custom:hover { background-color: var(--clr-primary); color: var(--clr-white); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* ---- Cards ---- */ .custom-card { background: var(--clr-white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); } .custom-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .card-icon { font-size: 2.5rem; color: var(--clr-primary); margin-bottom: 1rem; } .card-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--clr-dark); margin-bottom: 0.75rem; } .card-text { color: var(--clr-muted); font-size: 0.95rem; line-height: 1.7; } /* ---- Stats ---- */ .stats-container { background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%); padding: 4rem 0; } .stat-item { text-align: center; padding: 1.5rem 0; } .stat-number { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; color: var(--clr-accent); line-height: 1; } .stat-label { font-size: 0.9rem; color: rgba(255,255,255,0.85); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } /* ---- Events ---- */ .event-card { display: flex; gap: 1.5rem; background: var(--clr-white); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); margin-bottom: 1.5rem; } .event-card:hover { box-shadow: var(--shadow-md); border-color: var(--clr-primary-light); } .event-date { background: var(--clr-primary); color: var(--clr-white); border-radius: var(--radius); padding: 1rem; text-align: center; min-width: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .event-date .day { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1; } .event-date .month { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-top: 0.25rem; } .event-info h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--clr-dark); } .event-info p { font-size: 0.9rem; color: var(--clr-muted); margin-bottom: 0.4rem; } /* ---- Blog ---- */ .blog-post { background: var(--clr-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); padding-bottom: 1.5rem; } .blog-post:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .blog-post img { width: 100%; height: 200px; object-fit: cover; } .blog-post h3 { font-size: 1.15rem; padding: 0 1.25rem; margin-bottom: 0.5rem; } .blog-post p { padding: 0 1.25rem; font-size: 0.9rem; color: var(--clr-muted); } .blog-post .btn { margin: 0 1.25rem; } .post-meta { color: var(--clr-muted); font-size: 0.8rem; padding: 1rem 1.25rem 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* ---- Testimonials ---- */ .testimonial { text-align: center; padding: 3rem 2rem; max-width: 700px; margin: 0 auto; } .testimonial img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 1.5rem; border: 3px solid var(--clr-accent); object-fit: cover; } .testimonial-text { font-family: var(--font-heading); font-size: 1.15rem; font-style: italic; color: var(--clr-text); line-height: 1.8; margin-bottom: 1rem; } .testimonial-author { font-weight: 600; color: var(--clr-primary); font-size: 0.95rem; } /* ---- Team ---- */ .team-member { text-align: center; padding: 2rem 1rem; background: var(--clr-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); } .team-member:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .team-member img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 3px solid var(--clr-primary-light); } .team-member h3 { font-size: 1.1rem; margin-bottom: 0.25rem; } .team-member .text-primary { color: var(--clr-primary) !important; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* ---- Timeline ---- */ .timeline-content { background: var(--clr-white); padding: 1.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); margin-bottom: 1.5rem; border-left: 4px solid var(--clr-accent); } .timeline-content h3 { font-size: 1.1rem; color: var(--clr-accent); margin-bottom: 0.25rem; font-weight: 700; } .timeline-content h4 { font-size: 1.15rem; color: var(--clr-dark); margin-bottom: 0.75rem; } .timeline-content p { font-size: 0.95rem; color: var(--clr-muted); margin-bottom: 0; } /* ---- Program/Donation/Success Cards ---- */ .program-card { background: var(--clr-white); padding: 2.5rem 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); } .program-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--clr-primary-light); } .program-icon { font-size: 2.5rem; color: var(--clr-primary); } .program-card h2 { font-size: 1.35rem; margin: 1rem 0; } .donation-option { background: var(--clr-white); padding: 2.5rem 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); } .donation-option:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .donation-icon { font-size: 2.5rem; color: var(--clr-accent); } .success-story, .impact-story { background: var(--clr-white); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); border-top: 4px solid var(--clr-primary); } /* ---- Contact ---- */ .contact-card { background: var(--clr-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); transition: all var(--transition); } .contact-card:hover { box-shadow: var(--shadow-md); } .icon-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--clr-primary-light); display: inline-flex; align-items: center; justify-content: center; color: var(--clr-primary); font-size: 1.5rem; } .map-container { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--clr-border); } .map-container iframe { display: block; } /* ---- Forms ---- */ .form-control, .form-select { border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 0.65rem 1rem; font-family: var(--font-body); transition: border-color var(--transition); } .form-control:focus, .form-select:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(26,86,50,0.1); } .card-header.bg-primary { background-color: var(--clr-primary) !important; } /* ---- Accordion ---- */ .accordion-button:not(.collapsed) { background-color: var(--clr-primary-light); color: var(--clr-primary-dark); } .accordion-button:focus { box-shadow: 0 0 0 3px rgba(26,86,50,0.1); } /* ---- Overrides ---- */ .values-icon i { color: var(--clr-primary) !important; } .text-primary { color: var(--clr-primary) !important; } .bg-primary { background-color: var(--clr-primary) !important; } /* ---- Footer ---- */ .footer { background: var(--clr-dark); color: rgba(255,255,255,0.75); padding: 4rem 0 0; } .footer h5 { font-family: var(--font-heading); color: var(--clr-white); font-size: 1.1rem; margin-bottom: 1.25rem; font-weight: 700; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 0.6rem; font-size: 0.9rem; } .footer-links a { color: rgba(255,255,255,0.7); transition: color var(--transition); } .footer-links a:hover { color: var(--clr-accent); } .social-icons { display: flex; gap: 0.75rem; margin-top: 1rem; } .social-icons a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); transition: all var(--transition); font-size: 0.9rem; } .social-icons a:hover { background: var(--clr-accent); color: var(--clr-white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 3rem; padding: 1.5rem 0; } .footer-bottom p { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin: 0; } /* ---- Back to Top ---- */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; border-radius: 50%; background: var(--clr-primary); color: var(--clr-white); display: flex; align-items: center; justify-content: center; font-size: 1rem; opacity: 0.85; z-index: 1000; transition: all var(--transition); box-shadow: var(--shadow-md); } .back-to-top:hover { background: var(--clr-primary-dark); color: var(--clr-white); opacity: 1; transform: translateY(-3px); } .social-link { width: 44px; height: 44px; border-radius: 50%; background: var(--clr-primary-light); display: inline-flex; align-items: center; justify-content: center; color: var(--clr-primary); transition: all var(--transition); } .social-link:hover { background: var(--clr-primary); color: var(--clr-white); } /* ---- Responsive ---- */ @media (max-width: 991.98px) { .section { padding: 3.5rem 0; } .hero-section { padding: 3rem 0; } .section-title { font-size: 1.8rem; } .navbar-collapse { background: var(--clr-white); padding: 1rem; border-radius: var(--radius); margin-top: 0.5rem; box-shadow: var(--shadow-md); } } @media (max-width: 767.98px) { .section { padding: 2.5rem 0; } .hero-title { font-size: 1.8rem; } .stat-number { font-size: 2rem; } .event-card { flex-direction: column; text-align: center; } .event-date { flex-direction: row; gap: 0.5rem; justify-content: center; } .footer { padding: 3rem 0 0; } } .lead { font-size: 1.1rem; color: var(--clr-muted); line-height: 1.8; } .rounded-3 { border-radius: var(--radius-lg) !important; } .shadow { box-shadow: var(--shadow-md) !important; }