/* No media queries — all responsive rules in responsive.css. sections.css — IDF Kenya v4.2 — shared section styles. */ /* ============================================== sections.css — IDF Kenya v4.2 Shared section styles for all pages. CHANGE FROM v3.1: home.css has been RETIRED. All homepage hero styles are now merged into this file under the HERO section. No other file needs to touch the hero — this is the single source of truth. LOAD ORDER (enforced in every page ): 1. styles.css — tokens, navbar, footer 2. components.css — shared component styles 3. sections.css — THIS FILE 4. [page].css — page-specific only (about, ourwork, etc.) 5. responsive.css — media queries last home.css is no longer linked in index.html. ============================================== */ /* ===================================================== TOKEN BRIDGE styles.css defines --idf-navy, --idf-blue etc. sections.css uses --navy, --blue etc. The bridge maps both so all rules resolve correctly regardless of load order. ===================================================== */ :root { --navy: var(--idf-navy, #1B2E4B); --navy-dark: var(--idf-navy-dark, #0f1e33); --blue: var(--idf-blue, #2E6DB4); --blue-light: var(--idf-blue-light, #5B9BD5); --blue-pale: var(--idf-blue-pale, #EBF3FB); --green: var(--idf-green, #3A7D44); --green-light: var(--idf-green-light, #52a85f); --green-pale: var(--idf-green-pale, #EAF4EB); --cream: var(--idf-cream, #F8FAFF); --white: #FFFFFF; --text-dark: #1a1a2e; --text-mid: #3d4560; --text-muted: #6b7280; --border: rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 8px rgba(27, 46, 75, 0.07); --shadow-md: 0 8px 28px rgba(27, 46, 75, 0.12); --shadow-lg: 0 20px 56px rgba(27, 46, 75, 0.18); --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 28px; --transition: 0.28s ease; --max-width: 1180px; } /* ===================================================== HERO SECTION - MATCHING REGIONS.HTML STYLE ───────────────────────────────────────────────────── Updated to use the same gradient and structure as regions.html ===================================================== */ .hero { position: relative; height: calc(100vh - 72px); /* Full visible height below fixed navbar */ min-height: 560px; /* Floor so content never crushes on tiny screens */ display: flex; align-items: center; /* Vertically centre content so nothing scrolls out of view */ overflow: hidden; margin-top: 72px; /* Offsets fixed navbar — hero starts below it */ background-color: #0f1e33; /* Fallback shown until image loads */ } /* Hero background image - using img tag approach like regions */ .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } /* Gradient overlay - EXACT MATCH to regions.html */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 108deg, rgba(11, 20, 38, 0.92) 0%, rgba(27, 46, 75, 0.72) 40%, rgba(27, 46, 75, 0.28) 100% ); } /* Hide pattern and accent line to match regions */ .hero-pattern, .hero-accent-line { display: none; } /* Content positioning - matching regions */ .hero-content { position: relative; z-index: 2; max-width: 1280px; width: 100%; margin: 0 auto; padding: 24px 28px 32px; } .hero-inner { max-width: 780px; } /* Typography - matching regions */ .hero-eyebrow { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue-light, #5B9BD5); margin-bottom: 14px; background: transparent; border: none; padding: 0; } .hero h1 { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 14px; /* No text-shadow to match regions */ } .hero h1 em { color: var(--blue-light, #5B9BD5); font-style: italic; } .hero-sub { font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size: 1.08rem; color: rgba(255, 255, 255, 0.76); max-width: 600px; line-height: 1.75; margin: 0 0 clamp(16px, 2.5vh, 24px) 0; } /* CTA buttons - matching regions styling */ .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero .btn-primary { background: var(--green, #3A7D44); border-color: var(--green, #3A7D44); padding: 14px 32px; font-size: 0.9rem; } .hero .btn-primary:hover { background: var(--green-light, #52a85f); border-color: var(--green-light, #52a85f); box-shadow: 0 8px 24px rgba(58, 125, 68, 0.4); transform: translateY(-2px); } .hero .btn-outline-white { padding: 13px 32px; font-size: 0.9rem; border-color: rgba(255, 255, 255, 0.35); } .hero .btn-outline-white:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.70); transform: translateY(-2px); } /* Hero impact stats - matching regions aesthetic */ .hero-impact { display: flex; align-items: flex-start; gap: clamp(28px, 5vw, 56px); margin-top: clamp(20px, 3vh, 32px); padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid rgba(255, 255, 255, 0.12); } .hero-impact-stat { display: flex; flex-direction: column; gap: 4px; } .hero-impact-stat + .hero-impact-stat { padding-left: clamp(28px, 5vw, 56px); border-left: 1px solid rgba(255, 255, 255, 0.12); } .hero-impact-number { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.01em; } .hero-impact-number sup { font-size: 0.55em; color: var(--green-light, #52a85f); vertical-align: super; font-weight: 600; } .hero-impact-label { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; color: rgba(255, 255, 255, 0.45); line-height: 1.4; } /* Remove scroll indicator to match regions */ .hero-scroll { display: none; } /* Entrance animations - simplified to match regions */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .hero h1 { animation: heroFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; } .hero-sub { animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; } .hero-actions { animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both; } .hero-impact { animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both; } /* ===================================================== ABOUT SECTION (index.html) — v4.3: grid shifted to 2fr 3fr (40% text / 60% image) award-card moved out of about-image-wrap into new about-image-column wrapper; no longer absolutely positioned over the photo. ===================================================== */ .about-section { padding: 80px 0; background: var(--white); position: relative; z-index: 5; } .about-grid { display: grid; grid-template-columns: 2fr 3fr; /* was: 1fr 1fr */ gap: 64px; align-items: center; } .about-text h2 { margin-top: 8px; margin-bottom: 20px; } .about-text p { margin-bottom: 16px; } .about-text .btn { margin-top: 12px; } .about-signature { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } .about-signature-text strong { display: block; font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--navy); } .about-signature-text span { font-size: 0.82rem; color: var(--text-muted); } /* New outer column — stacks badge above image via flex */ .about-image-column { display: flex; flex-direction: column; gap: 16px; } /* Badge — in normal document flow, no longer absolutely positioned */ .award-card { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; /* don't stretch to full column width */ background: var(--navy); color: var(--white); padding: 12px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); position: static; /* reset any inherited absolute */ } .award-card strong { display: block; font-size: 0.9rem; white-space: nowrap; } .award-card span { font-size: 0.75rem; color: var(--blue-light); white-space: nowrap; } /* Image wrap — keeps relative positioning for the deco border */ .about-image-wrap { position: relative; } .about-image-wrap img { width: 100%; height: 480px; object-fit: cover; object-position: center top; /* bias toward faces, not feet */ border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; z-index: 1; display: block; } .about-image-deco { position: absolute; bottom: -20px; right: -20px; width: 100%; height: 100%; border: 2px solid var(--blue); border-radius: var(--radius-lg); z-index: 0; } /* ===================================================== STATS SECTION ===================================================== */ .stats-section { padding: 90px 0; background: var(--navy-dark); position: relative; overflow: hidden; } .stats-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(91, 155, 213, 0.08) 1px, transparent 1px); background-size: 28px 28px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; margin-top: 3rem; } .stat-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 36px 24px; text-align: center; transition: all var(--transition); } .stat-card:hover { background: rgba(91, 155, 213, 0.1); border-color: rgba(91, 155, 213, 0.25); transform: translateY(-4px); } .stat-icon { font-size: 2rem; margin-bottom: 16px; display: block; } .stat-number { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 8px; display: flex; align-items: baseline; justify-content: center; gap: 2px; } .stat-number .suffix { color: var(--blue-light); font-size: 1.8rem; } .stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); } /* ===================================================== PROJECTS SECTION ===================================================== */ .projects-section { padding: 110px 0; background: var(--cream); } .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .project-card { display: block; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); box-shadow: var(--shadow-sm); } .project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(46, 109, 180, 0.15); } .project-img { height: 230px; overflow: hidden; } .project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .project-card:hover .project-img img { transform: scale(1.07); } .project-body { padding: 30px; } .project-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 12px; border-radius: 20px; margin-bottom: 12px; } .project-tag--blue { background: var(--blue-pale); color: var(--blue); } .project-tag--green { background: var(--green-pale); color: var(--green); } .project-body h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--navy); } .project-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; } .project-link { font-size: 0.875rem; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 6px; } .project-link::after { content: '→'; transition: transform var(--transition); } .project-card:hover .project-link::after { transform: translateX(4px); } /* ===================================================== QUOTE SECTION ===================================================== */ .quote-section { padding: 100px 0; background: var(--navy); text-align: center; } .quote-inner { max-width: 860px; margin: 0 auto; padding: 0 28px; } .quote-mark { font-family: 'Playfair Display', serif; font-size: 6rem; color: var(--blue-light); opacity: 0.3; line-height: 0.5; margin-bottom: 32px; display: block; } .quote-section blockquote { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 3vw, 2rem); font-style: italic; color: var(--white); line-height: 1.6; margin-bottom: 28px; } .quote-attribution { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--blue-light); } /* ===================================================== PARTNERS SECTION ===================================================== */ .partners-section { padding: 60px 0; background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .partners-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 60px; margin-top: 2rem; } .partner-item { display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: all var(--transition); } .partner-item img { max-height: 45px; max-width: 110px; width: auto; object-fit: contain; filter: grayscale(100%); transition: all var(--transition); } .partner-item:hover { opacity: 1; } .partner-item:hover img { filter: grayscale(0%); } /* ===================================================== CTA STRIP ===================================================== */ .cta-section { padding: 90px 0; background: var(--blue-pale); } .cta-inner { text-align: center; max-width: 680px; margin: 0 auto; padding: 0 28px; } .cta-inner h2 { margin-top: 8px; margin-bottom: 16px; } .cta-inner p { margin-bottom: 32px; font-size: 1.05rem; } .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ===================================================== INNER PAGE HERO (about, ourwork, contact, etc.) ===================================================== */ .page-hero { height: 360px; position: relative; display: flex; align-items: flex-end; overflow: hidden; } .page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(11, 20, 38, 0.88) 0%, rgba(27, 46, 75, 0.45) 55%, rgba(27, 46, 75, 0.20) 100% ); } .page-hero-content { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px 44px; } .breadcrumb { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 10px; display: flex; gap: 6px; align-items: center; } .breadcrumb a { color: rgba(255, 255, 255, 0.55); } .breadcrumb a:hover { color: var(--white); } .page-hero-content h1 { color: var(--white); } /* ===================================================== PAGE CONTENT ===================================================== */ .page-content { padding: 80px 0 110px; } .page-content .container { max-width: 880px; } .page-content h2 { margin: 44px 0 16px; color: var(--navy); } .page-content h3 { margin: 28px 0 12px; color: var(--blue); font-size: 1.15rem; } .page-content p { margin-bottom: 20px; } .page-content ul { margin: 14px 0 24px; display: flex; flex-direction: column; gap: 10px; } .page-content ul li { padding-left: 22px; position: relative; color: var(--text-mid); } .page-content ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); } .page-content img { width: 100%; border-radius: var(--radius-md); margin: 28px 0 8px; box-shadow: var(--shadow-md); } .photo-caption { font-size: 0.84rem; color: var(--text-muted); font-style: italic; margin-top: 0; margin-bottom: 28px; } .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0; } .photo-grid img { width: 100%; height: 220px; object-fit: cover; margin: 0; } /* ===================================================== INFO BOXES ===================================================== */ .info-box { background: var(--white); border-left: 4px solid var(--blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 20px 24px; margin: 24px 0; } .info-box h4 { color: var(--navy); margin-bottom: 10px; } .info-box p, .info-box li { color: var(--text-mid); } /* ===================================================== CONTACT PAGE ===================================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; } .contact-info h2 { margin-bottom: 20px; } .contact-detail { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; } .contact-item strong { display: block; color: var(--navy); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .contact-item p, .contact-item a { color: var(--text-mid); font-size: 0.95rem; margin: 0; } .contact-form { background: var(--cream); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--border); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 11px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; background: var(--white); color: var(--text-dark); outline: none; transition: border-color var(--transition); } .form-group input:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 109, 180, 0.1); } .form-group textarea { min-height: 130px; resize: vertical; } /* ===================================================== UTILITY / SHARED COMPONENTS ===================================================== */ .container { max-width: var(--max-width, 1180px); margin: 0 auto; padding: 0 28px; } .section-header { text-align: center; margin-bottom: 3rem; } .section-header h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 1rem; } .section-header p { max-width: 700px; margin: 0 auto; color: var(--text-muted); } .label-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); background: var(--blue-pale); padding: 4px 14px; border-radius: 20px; margin-bottom: 14px; } .label-tag--white { color: var(--blue-light) !important; background: rgba(255, 255, 255, 0.12); } .label-tag--green { color: var(--green); background: var(--green-pale); } /* ===================================================== BUTTONS ===================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; text-decoration: none; border-radius: 6px; transition: all var(--transition); cursor: pointer; border: none; } .btn-primary { background: var(--green); color: var(--white); } .btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(58, 125, 68, 0.25); } .btn-outline-white { background: transparent; border: 1px solid var(--white); color: var(--white); } .btn-outline-white:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .btn-outline-navy { background: transparent; border: 1px solid var(--navy); color: var(--navy); } .btn-outline-navy:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); } /* ===================================================== SCROLL REVEAL ===================================================== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } /* ===================================================== RESPONSIVE BREAKPOINTS ===================================================== */ /* ── ≤ 1100px ── */ /* ── ≤ 992px ── */ /* ── ≤ 768px ── */ /* ── ≤ 480px ── */