/* ============================================================= Maunas Jan Chetna Seva Samiti — main stylesheet Organised by section. Search the ALL-CAPS headers to jump around. ============================================================= */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { --color-cream: #F5E9A8; --color-cream-soft: #FBF6E4; --color-cream-deep: #EFDD8A; --color-charcoal: #2B2B2B; --color-charcoal-60: rgba(43, 43, 43, 0.6); --color-red: #D93B2B; --color-red-dark: #B92E20; --color-teal: #1D8A8A; --color-teal-dark: #146868; --color-green: #1C9B4B; --color-green-dark: #157A3B; --color-white: #FFFFFF; --shadow-soft: 0 10px 30px rgba(43, 43, 43, 0.08); --shadow-lift: 0 20px 45px rgba(43, 43, 43, 0.16); --radius-lg: 26px; --radius-md: 18px; --radius-sm: 12px; --radius-pill: 999px; --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Poppins', 'Inter', -apple-system, sans-serif; --container-pct: 70%; --container-max: 1400px; --header-height: 84px; --header-height-scrolled: 64px; } /* ---------- 2. RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-en); color: var(--color-charcoal); background: var(--color-cream-soft); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; color: var(--color-charcoal); } p { margin: 0 0 1em; } .container { width: var(--container-pct); max-width: var(--container-max); margin: 0 auto; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-charcoal); color: var(--color-white); padding: 12px 20px; z-index: 1000; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* Each section reads as one near-full-height "screen" rather than a long scroll — compact padding, vertically centred content. */ /* Content-driven height (no forced min-height) so sections that share the same background don't leave a huge dead gap when their content is shorter than the viewport. Padding is intentionally asymmetric — a section only owns its own top gap, so two adjacent sections never stack two paddings into one oversized gap. */ section.section { padding: 88px 0 50px; } /* Contact gets extra bottom breathing room since the footer (dark bg) follows immediately after — a bigger gap here reads as an intentional section break rather than the content just stopping. */ .contact-section { padding-bottom: 140px; } #home, #reach, #about, #initiatives, #projects, #gallery, #contact { scroll-margin-top: var(--header-height); } .section-heading { text-align: center; max-width: 640px; margin: 0 auto 44px; } .section-heading .eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; color: var(--color-red); margin-bottom: 10px; } .section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; } /* Progressive-enhancement guard: if the AOS CDN script fails to load (e.g. no internet on a local XAMPP setup) main.js adds .no-aos to so scroll-reveal elements stay visible instead of stuck at opacity:0. */ html.no-aos [data-aos] { opacity: 1 !important; transform: none !important; } /* ---------- 3. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; padding: 14px 28px; border-radius: var(--radius-pill); border: 2px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; will-change: transform; } .btn-primary { background: var(--color-red); color: var(--color-white); box-shadow: var(--shadow-soft); } .btn-primary:hover { background: var(--color-red-dark); box-shadow: var(--shadow-lift); } .btn-outline { background: transparent; color: var(--color-charcoal); border-color: var(--color-charcoal); } .btn-outline:hover { background: var(--color-charcoal); color: var(--color-white); } .btn-outline-light { background: rgba(255, 255, 255, 0.08); color: var(--color-white); border-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); } .btn-outline-light:hover { background: var(--color-white); color: var(--color-charcoal); } .btn-lg { padding: 16px 34px; font-size: 1rem; } .btn-sm { padding: 8px 18px; font-size: 0.82rem; } .btn-nav-cta { padding: 10px 22px; font-size: 0.85rem; } .btn-submit { width: 100%; justify-content: center; margin-top: 8px; } /* ---------- 4. STICKY HEADER / NAVBAR ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--header-height); display: flex; align-items: center; background: rgba(251, 246, 228, 0.94); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease; } .site-header.scrolled { height: var(--header-height-scrolled); background: rgba(251, 246, 228, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); } .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; width: 92%; max-width: 1500px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-soft); transition: width 0.35s ease, height 0.35s ease; } .site-header.scrolled .brand-logo { width: 38px; height: 38px; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-en { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-charcoal); } .brand-sub { font-size: 0.68rem; color: var(--color-charcoal-60); } .main-nav { display: flex; justify-content: center; } .main-nav ul { display: flex; gap: 30px; justify-content: center; } .nav-link { font-family: var(--font-heading); font-weight: 500; font-size: 0.92rem; position: relative; padding-bottom: 4px; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--color-red); transition: width 0.25s ease; } .nav-link:hover::after { width: 100%; } .nav-link.active { color: var(--color-red); } .nav-link.active::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 14px; justify-self: end; } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; border-radius: 50%; } .hamburger span { width: 22px; height: 2px; margin: 0 auto; background: var(--color-charcoal); transition: transform 0.3s ease, opacity 0.3s ease; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- 5. MOBILE DRAWER ---------- */ .mobile-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 85vw); background: var(--color-cream-soft); box-shadow: var(--shadow-lift); z-index: 600; padding: 32px 32px 32px; overflow-y: auto; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); } .mobile-drawer.open { transform: translateX(0); } .drawer-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid rgba(43, 43, 43, 0.12); } .drawer-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-soft); } .drawer-brand-text { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.3; } .mobile-drawer ul { display: flex; flex-direction: column; gap: 22px; margin-bottom: 32px; } .drawer-link { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; display: block; } .drawer-link.active { color: var(--color-red); } .drawer-backdrop { position: fixed; inset: 0; background: rgba(43, 43, 43, 0.45); z-index: 550; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } /* ---------- 6. SCROLL PROGRESS BAR ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0% 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--color-teal), var(--color-red), var(--color-green)); z-index: 700; } /* ---------- 7. HERO ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--header-height); overflow: hidden; background: url("../images/banner.png") center/cover no-repeat; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,20,20,0.92) 0%, rgba(20,20,20,0.72) 40%, rgba(20,20,20,0.35) 68%, rgba(20,20,20,0.15) 100%); } /* .hero-inner also carries the shared .container class (for the same left-edge alignment as the header/other sections), which sets margin:0 auto — override that here so this block hugs the left edge instead of centering itself when it's narrower than the container. */ .hero-inner { position: relative; z-index: 2; max-width: 760px; width: 100%; padding: 40px 0; margin-left: 150px; margin-right: auto; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 8px 18px 8px 8px; border-radius: var(--radius-pill); margin-bottom: 26px; } .hero-badge-logo { width: 30px; height: 30px; border-radius: 50%; } .hero-badge span { color: var(--color-white); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; } .hero-title { font-weight: 800; color: var(--color-white); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.1; margin-bottom: 22px; } .hero-title .hl { color: var(--color-green); } .hero-sub { font-size: clamp(1rem, 1.4vw, 1.1rem); color: rgba(255, 255, 255, 0.82); max-width: 620px; margin: 0 0 34px; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; } .scroll-cue span { display: block; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-pill); position: relative; } .scroll-cue span::before { content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: var(--color-white); border-radius: var(--radius-pill); animation: scrollcue 1.8s ease-in-out infinite; } @keyframes scrollcue { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 22px; } } /* ---------- 8. OUTREACH / STATS BAND ---------- */ .stats-band { background: var(--color-charcoal); padding: 18px 0; } .stats-eyebrow { text-align: center; color: rgba(255, 255, 255, 0.6); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; margin-bottom: 30px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat-item { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 8px; white-space: nowrap; } .stat-number { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--color-cream); } .stat-suffix { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--color-cream); margin-left: -4px; } .stat-label { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; letter-spacing: 0.03em; } /* ---------- 9. ABOUT ---------- */ .about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; margin-bottom: 56px; } .about-story .eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; color: var(--color-red); margin-bottom: 10px; } .about-story h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 16px; } .about-lead { font-size: 1.15rem; font-weight: 600; color: var(--color-charcoal); } .about-story p { color: var(--color-charcoal-60); } .about-story p.about-lead { color: var(--color-charcoal); } .about-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .chip { font-size: 0.8rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(43, 43, 43, 0.1); color: var(--color-charcoal); } .about-image { position: relative; } .about-image-panel { position: absolute; top: 20px; left: -20px; right: -20px; bottom: -20px; background: var(--color-teal); border-radius: var(--radius-lg); opacity: 0.18; z-index: 0; height: 90%; } .about-image img { position: relative; z-index: 1; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .about-badge { position: absolute; z-index: 2; bottom: -22px; left: -22px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); padding: 16px 22px; text-align: center; line-height: 1.1; } .about-badge strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--color-red); } .about-badge span { font-size: 0.72rem; color: var(--color-charcoal-60); text-transform: uppercase; letter-spacing: 0.05em; } /* Logo modifier: used wherever this photo slot currently holds the plain square site logo instead of a real outreach photo (About page "Our Story" + Home "Who We Are" teaser) — shows it as a small centered badge instead of stretching/cropping it to a photo's 4:3 frame. Swap back to a real photo by simply removing this class. */ .about-image--logo { display: flex; align-items: center; justify-content: center; min-height: 280px; } .about-image--logo .about-image-panel { top: 10%; left: 6%; right: 6%; bottom: 10%; } .about-image--logo img { position: relative; z-index: 1; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); } .pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pillar-card { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .pillar-icon { display: inline-flex; width: 56px; height: 56px; margin-bottom: 14px; } .pillar-icon svg { width: 100%; height: 100%; } .pillar-card h4 { font-size: 1.1rem; margin-bottom: 8px; } .pillar-card p { color: var(--color-charcoal-60); font-size: 0.92rem; margin: 0; } .pillar-health { color: var(--color-teal); } .pillar-health h4 { color: var(--color-teal-dark); } .pillar-education { color: var(--color-red); } .pillar-education h4 { color: var(--color-red-dark); } .pillar-environment { color: var(--color-green); } .pillar-environment h4 { color: var(--color-green-dark); } .pillar-card.is-hovered, .project-card.is-hovered { box-shadow: var(--shadow-lift); } /* ---------- 10. PROJECTS ---------- */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .project-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; border-top: 4px solid var(--color-charcoal); } .project-card.pillar-health { border-top-color: var(--color-teal); } .project-card.pillar-education { border-top-color: var(--color-red); } .project-card.pillar-environment { border-top-color: var(--color-green); } .project-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .project-card:hover .project-image img { transform: scale(1.06); } .project-status { position: absolute; top: 14px; right: 14px; background: rgba(43, 43, 43, 0.75); color: var(--color-white); font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); } .project-body { padding: 22px 24px 26px; } .project-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-cream); color: var(--color-charcoal); margin-bottom: 12px; } .project-card h3 { font-size: 1.08rem; margin-bottom: 8px; line-height: 1.3; } .project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-teal-dark); font-size: 0.78rem; font-weight: 600; margin: 0 0 10px; } .project-meta-sep { color: var(--color-charcoal-60); } .project-desc { color: var(--color-charcoal-60); font-size: 0.9rem; margin: 0 0 18px; } .project-viewmore { width: 100%; justify-content: center; } /* ---------- 11. GALLERY — uniform grid (every tile the same size and width), with a caption-on-hover overlay as the style differentiator from the plain magnifier-icon hover used elsewhere. ---------- */ .gallery-masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gallery-item { position: relative; display: block; width: 100%; border: none; padding: 0; background: none; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.06); } .gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 14px 16px; color: var(--color-white); font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; background: linear-gradient(to top, rgba(20, 20, 20, 0.85), rgba(20, 20, 20, 0)); transform: translateY(100%); transition: transform 0.3s ease; } .gallery-caption-icon { font-size: 1rem; } .gallery-item:hover .gallery-caption { transform: translateY(0); } /* ---------- 11b. GALLERY TEASER (Home page) ---------- */ .gallery-teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .gallery-teaser-item { display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-teaser-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-teaser-item:hover img { transform: scale(1.08); } .lightbox { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 20, 0.92); opacity: 0; visibility: hidden; } .lightbox.active { opacity: 1; visibility: visible; } .lightbox-image { max-width: 88vw; max-height: 82vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255, 255, 255, 0.12); color: var(--color-white); border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, 0.25); } .lightbox-close { top: 24px; right: 24px; } .lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); } /* ---------- 12. CONTACT ---------- */ .contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 44px; align-items: start; } .contact-form-wrap, .contact-info { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-soft); } .hp-field { position: absolute; left: -9999px; opacity: 0; } .form-field { position: relative; margin-bottom: 22px; } .form-field input, .form-field textarea { width: 100%; font: inherit; padding: 16px 16px 8px; border: 2px solid rgba(43, 43, 43, 0.15); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-charcoal); transition: border-color 0.25s ease, box-shadow 0.25s ease; resize: vertical; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 4px rgba(29, 138, 138, 0.15); } .form-field label { position: absolute; left: 16px; top: 16px; font-size: 1rem; color: var(--color-charcoal-60); transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease, top 0.2s ease; pointer-events: none; } .form-field input:focus + label, .form-field input:not(:placeholder-shown) + label, .form-field textarea:focus + label, .form-field textarea:not(:placeholder-shown) + label { top: 6px; font-size: 0.72rem; color: var(--color-teal-dark); font-weight: 600; } .form-alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.92rem; scroll-margin-top: calc(var(--header-height) + 20px); } .form-alert-success { background: rgba(28, 155, 75, 0.12); color: var(--color-green-dark); border: 1px solid rgba(28, 155, 75, 0.3); } .form-alert-error { background: rgba(217, 59, 43, 0.1); color: var(--color-red-dark); border: 1px solid rgba(217, 59, 43, 0.3); } .form-alert-error ul { padding-left: 18px; list-style: disc; } .contact-info h3 { font-size: 1.15rem; margin-bottom: 20px; } .contact-info-list li { margin-bottom: 18px; } .contact-info-list strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal-dark); margin-bottom: 4px; } .contact-info-list p { margin: 0; } .contact-info-list a:hover { color: var(--color-red); } .contact-info-sub { font-size: 0.85rem; color: var(--color-charcoal-60); margin-top: 4px !important; } .social-links { display: flex; gap: 10px; margin-top: 8px; } .social-links a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-charcoal); color: var(--color-white); font-size: 0.72rem; font-weight: 700; transition: transform 0.25s ease, background 0.25s ease; } .social-links a:hover { background: var(--color-red); transform: translateY(-3px); } /* ---------- 13. FOOTER ---------- */ .site-footer { background: var(--color-charcoal); color: rgba(255, 255, 255, 0.82); padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr; gap: 40px; padding-bottom: 40px; } .footer-logo { width: 54px; height: 54px; border-radius: 50%; margin-bottom: 14px; } .footer-name-en { font-family: var(--font-heading); font-weight: 700; color: var(--color-cream); font-size: 1.05rem; margin-bottom: 8px; } .footer-tagline { font-size: 0.88rem; margin-bottom: 10px; } .footer-reg { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); } .site-footer h3 { color: var(--color-white); font-size: 0.95rem; margin-bottom: 18px; } .footer-links ul li, .footer-pillars ul li { margin-bottom: 14px; font-size: 0.9rem; } .footer-links a { display: flex; align-items: center; gap: 10px; } .footer-links a:hover { color: var(--color-cream); } .footer-pillars .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; } .dot-health { background: var(--color-teal); } .dot-education { background: var(--color-red); } .dot-environment { background: var(--color-green); } /* Colorful little icon badges used in front of the Quick Links and Contact rows in the footer — plain circular chips, brand-colored. */ .link-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); } .link-icon svg { width: 14px; height: 14px; } .icon-teal { color: var(--color-teal); } .icon-red { color: var(--color-red); } .icon-green { color: var(--color-green); } .footer-contact address { font-style: normal; font-size: 0.9rem; margin-bottom: 16px; } .footer-contact address p { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-contact a:hover { color: var(--color-cream); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 0; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); } /* ---------- 13b. INTERIOR PAGE HEADER (About/Projects/Gallery/Contact) ---------- */ .page-header { background: linear-gradient(120deg, var(--color-charcoal) 0%, #3d3d3d 100%); padding: calc(var(--header-height) + 64px) 0 56px; text-align: center; } .page-header-eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; color: var(--color-red); margin-bottom: 12px; } .page-header h1 { color: var(--color-white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 14px; } .breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); } .breadcrumb a { color: rgba(255, 255, 255, 0.85); } .breadcrumb a:hover { color: var(--color-cream); } .breadcrumb span { margin: 0 6px; } /* ---------- 13b2. ABOUT: motto quote band ---------- */ .motto-band { padding: 44px 0; } .motto-text { margin: 0; text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: black; max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* ---------- 13c. ABOUT: each section uses a genuinely different layout language (icon row / colour panels / timeline) so the page doesn't read as "the same card, five times". ---------- */ .pillars-section { background: var(--color-cream-deep); } .container-wide { width: 92%; max-width: 1600px; margin: 0 auto; } /* --- Pillars: inline icon row with divider lines, no card boxes --- */ .pillar-feature-row { display: flex; align-items: flex-start; } .pillar-feature { flex: 1; text-align: center; padding: 0 32px; } .pillar-feature-divider { width: 1px; align-self: stretch; background: rgba(43, 43, 43, 0.12); margin-top: 8px; } .pillar-feature-icon { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 22px; } .pillar-feature-icon svg { width: 40px; height: 40px; } .pillar-feature.pillar-health .pillar-feature-icon { background: rgba(29, 138, 138, 0.12); color: var(--color-teal); } .pillar-feature.pillar-education .pillar-feature-icon { background: rgba(217, 59, 43, 0.12); color: var(--color-red); } .pillar-feature.pillar-environment .pillar-feature-icon { background: rgba(28, 155, 75, 0.12); color: var(--color-green); } .pillar-feature.pillar-health h4 { color: var(--color-teal-dark); } .pillar-feature.pillar-education h4 { color: var(--color-red-dark); } .pillar-feature.pillar-environment h4 { color: var(--color-green-dark); } .pillar-feature h4 { font-size: 1.15rem; margin-bottom: 10px; } .pillar-feature p { color: var(--color-charcoal-60); font-size: 0.92rem; margin: 0; } /* --- Mission & Vision: bold full-bleed colour panels, no cards --- Opts out of the shared .section class (this section needs no horizontal container padding of its own, just top spacing to match the site's section rhythm). ---------- */ .mission-section { padding: 88px 0 0; } .mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-lg); overflow: hidden; } .mv-panel { padding: 64px 52px; color: var(--color-white); } .mv-panel--mission { background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%); } .mv-panel--vision { background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%); } .mv-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); margin-bottom: 22px; } .mv-icon svg { width: 26px; height: 26px; } .mv-panel h3 { color: var(--color-white); font-size: 1.4rem; margin-bottom: 16px; } .mv-panel p { color: rgba(255, 255, 255, 0.9); margin: 0; } /* --- Our Journey: a connected timeline, not another row of boxes --- */ .timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .timeline-track { position: absolute; top: 9px; left: 5%; right: 5%; height: 2px; background: rgba(43, 43, 43, 0.15); } .timeline-item { position: relative; text-align: center; padding-top: 40px; } .timeline-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--color-teal); border: 4px solid var(--color-cream-deep); } .timeline-year { display: inline-block; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--color-teal-dark); margin-bottom: 12px; } .timeline-item h4 { font-size: 1.05rem; margin-bottom: 10px; } .timeline-item p { color: var(--color-charcoal-60); font-size: 0.92rem; margin: 0; } /* --- Meet Our Team: circular photo cards, a visual language of its own (people), distinct from icons/panels/timeline above --- */ .team-section { background: var(--color-white); } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; } .team-card { background: var(--color-cream-soft); border-radius: var(--radius-lg); padding: 36px 24px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .team-photo { width: 240px; height: 240px; border-radius: var(--radius-md); margin: 0 auto 18px; display: block; border: 4px solid var(--color-white); box-shadow: var(--shadow-soft); } .team-photo-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-red) 100%); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; } .team-card h4 { margin: 0 0 6px; font-size: 1.1rem; } .team-role { margin: 0; color: var(--color-red); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- 13d. HOME TEASERS (About/Projects/Gallery previews + CTA) ---------- */ .pillar-grid--row { margin-top: 48px; } .about-teaser-image img { aspect-ratio: 4 / 3; } .teaser-more { text-align: center; margin-top: 40px; } .cta-band { background: linear-gradient(120deg, var(--color-teal) 0%, var(--color-teal-dark) 100%); padding: 64px 0; } .cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .cta-band h2 { color: var(--color-white); font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 8px; } .cta-band p { color: rgba(255, 255, 255, 0.85); margin: 0; } .cta-band .btn-primary { background: var(--color-white); color: var(--color-teal-dark); flex-shrink: 0; } .cta-band .btn-primary:hover { background: var(--color-cream); } /* ---------- 13e. PROJECTS: filter tabs + no-photo fallback card ---------- */ .filter-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; } .filter-tab { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; padding: 10px 22px; border-radius: var(--radius-pill); border: 2px solid rgba(43, 43, 43, 0.15); background: var(--color-white); color: var(--color-charcoal-60); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .filter-tab:hover { border-color: var(--color-teal); color: var(--color-charcoal); } .filter-tab.active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); } .project-card.filtered-out { display: none; } .project-image-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.04); } .project-image-fallback svg { width: 72px; height: 72px; } .project-image-fallback.pillar-health { color: var(--color-teal); background: rgba(29, 138, 138, 0.1); } .project-image-fallback.pillar-education { color: var(--color-red); background: rgba(217, 59, 43, 0.1); } .project-image-fallback.pillar-environment { color: var(--color-green); background: rgba(28, 155, 75, 0.1); } /* ---------- 13f0. ABOUT: Social & Community Helping Activities ---------- */ .initiatives-section { background: var(--color-white); } .initiative-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .initiative-card { background: var(--color-cream-soft); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .initiative-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .initiative-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 16px; background: var(--color-cream); font-size: 1.6rem; } .initiative-card h4 { font-size: 1.02rem; margin-bottom: 8px; } .initiative-card p { color: var(--color-charcoal-60); font-size: 0.9rem; margin: 0; } /* ---------- 13f1. HOME: Initiatives teaser (compact chip row) ---------- */ .initiatives-teaser { background: var(--color-cream-deep); } .initiative-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .initiative-chip { display: flex; align-items: center; gap: 10px; background: var(--color-white); border-radius: var(--radius-pill); padding: 12px 20px 12px 12px; box-shadow: var(--shadow-soft); font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .initiative-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .initiative-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-cream-soft); font-size: 1.1rem; flex-shrink: 0; } /* ---------- 13f2. PROJECT / ACTIVITY DETAIL MODAL ---------- */ .project-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .project-modal.active { opacity: 1; visibility: visible; } .project-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.75); } .project-modal-dialog { position: relative; z-index: 1; width: min(680px, 100%); max-height: 86vh; overflow-y: auto; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); transform: translateY(16px) scale(0.98); transition: transform 0.3s ease; } .project-modal.active .project-modal-dialog { transform: translateY(0) scale(1); } .project-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(43, 43, 43, 0.08); color: var(--color-charcoal); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .project-modal-close:hover { background: rgba(43, 43, 43, 0.16); } .project-modal-image { aspect-ratio: 16 / 9; overflow: hidden; } .project-modal-image[hidden] { display: none; } .project-modal-image img { width: 100%; height: 100%; object-fit: cover; } .project-modal-body { padding: 28px 32px 32px; } .project-modal-body h3 { font-size: 1.3rem; margin-bottom: 10px; } .project-modal-body #projectModalMeta { color: var(--color-teal-dark); font-weight: 600; font-size: 0.85rem; margin-bottom: 14px; } .project-modal-body #projectModalDesc { color: var(--color-charcoal-60); } #projectModalHighlightsWrap[hidden] { display: none; } #projectModalHighlightsWrap h4 { font-size: 0.95rem; margin-bottom: 10px; } #projectModalHighlights { list-style: disc; padding-left: 20px; } #projectModalHighlights li { color: var(--color-charcoal-60); font-size: 0.92rem; margin-bottom: 6px; } /* ---------- 13f. CONTACT: Google Map embed ---------- */ .map-wrap { margin-top: 48px; height: 360px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); } .map-wrap iframe { width: 100%; height: 100%; display: block; } /* ---------- 14. SCROLL-TO-TOP ---------- */ .scroll-top-btn { position: fixed; bottom: 28px; right: 28px; z-index: 400; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--color-red); color: var(--color-white); font-size: 1.2rem; box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease; } .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top-btn:hover { background: var(--color-red-dark); } /* ---------- 15. RESPONSIVE BREAKPOINTS ---------- */ /* Large desktop / TV */ @media (min-width: 1440px) { section.section { padding-top: 110px; } .mission-section { padding-top: 110px; } .contact-section { padding-bottom: 160px; } } /* Laptop / small desktop */ @media (max-width: 1024px) { :root { --container-pct: 82%; } .about-grid { grid-template-columns: 1fr; } .about-image { order: -1; margin-bottom: 20px; } .pillar-grid, .project-grid { grid-template-columns: repeat(2, 1fr); } .gallery-masonry { grid-template-columns: repeat(3, 1fr); } .gallery-teaser-grid { grid-template-columns: repeat(3, 1fr); } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } .about-grid--teaser { grid-template-columns: 1fr; } .cta-band-inner { flex-direction: column; text-align: center; gap: 24px; } .mv-panel { padding: 48px 36px; } } /* Tablet */ @media (max-width: 768px) { :root { --container-pct: 88%; } .main-nav { display: none; } .header-actions .btn-nav-cta { display: none; } .hamburger { display: flex; } section.section { padding-top: 64px; } .mission-section { padding-top: 64px; } .contact-section { padding-bottom: 90px; } .hero { min-height: 100vh; } .pillar-grid, .project-grid { grid-template-columns: 1fr; } .mv-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .gallery-masonry { grid-template-columns: repeat(2, 1fr); } .gallery-teaser-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .contact-form-wrap, .contact-info { padding: 26px; } .about-badge { left: 12px; bottom: -18px; padding: 12px 16px; } .page-header { padding-top: calc(var(--header-height) + 40px); padding-bottom: 36px; } /* Pillar icon row -> stacked, no divider lines between stacked items */ .pillar-feature-row { flex-direction: column; gap: 36px; } .pillar-feature-divider { display: none; } /* Timeline -> vertical line on the left instead of a horizontal one */ .timeline { grid-template-columns: 1fr; gap: 36px; } .timeline-track { top: 0; bottom: 0; left: 9px; right: auto; width: 2px; height: auto; } .timeline-item { text-align: left; padding-top: 0; padding-left: 40px; } .timeline-dot { top: 4px; left: 0; transform: none; } } /* Mobile */ @media (max-width: 480px) { :root { --container-pct: 92%; } /* width:auto (not 100%) so these fixed margins inset the block instead of pushing it past the viewport edge and overflowing. */ .hero-inner { width: auto; margin-left: 15px; margin-right: 10px; } .hero-break { display: none; } /* let the headline reflow naturally instead of forcing wide fixed-width lines */ .hero-title { font-size: 1.9rem; } .hero-badge { flex-wrap: wrap; max-width: 100%; } .gallery-masonry { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gallery-teaser-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .filter-tabs { gap: 8px; } .filter-tab { padding: 8px 16px; font-size: 0.82rem; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { justify-content: center; } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .footer-grid { grid-template-columns: 1fr; text-align: left; } .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.1rem; } .brand-text { display: none; } .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .stat-item { white-space: normal; flex-wrap: wrap; row-gap: 2px; } .stat-number { font-size: 1.5rem; } .stat-suffix { font-size: 1rem; } .stat-label { font-size: 0.8rem; flex-basis: 100%; } } /* ---------- 16. ACCESSIBILITY: REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }