/* * Public Policy Lab — Website v2 * style.css — Global Design System * * This file defines all visual styles for the entire site. * It is organized into sections: * 1. CSS Custom Properties (design tokens: colors, fonts, spacing) * 2. Base / Reset * 3. Typography * 4. Navigation (navbar) * 5. Hero Section * 6. Section Layouts (shared section containers, headings) * 7. Approach Pillars (card grid) * 8. Impact Cards * 9. Focus Area Tiles * 10. Consulting / Team Profile * 11. Contact Page * 12. Callout / Highlight Boxes * 13. Footer * 14. Buttons * 15. Utility Classes * 16. Animations & Transitions * 17. Responsive Overrides */ /* ============================================================ 1. CSS CUSTOM PROPERTIES — Design Tokens These variables define the entire color palette, font stack, and spacing scale. Changing a value here updates it site-wide. ============================================================ */ :root { /* --- Brand Accent Colors (derived from the PPL logo bar chart) --- */ /* Teal — primary accent, dominant interactive color */ --color-teal: #35C9AC; /* Sky blue — secondary accent, cooler and slightly more muted than teal */ --color-blue: #3BAFD4; /* Salmon — warm accent, used for softer highlights */ --color-salmon: #F0A898; /* Coral — energetic accent, used very sparingly for emphasis */ --color-coral: #E06655; /* Sage green — grounding accent, positive/community feel */ --color-green: #52B07A; /* --- Structural / Neutral Colors --- */ /* Charcoal — matches the dark logo wordmark color; used for nav, footer, headings */ --color-charcoal: #1E2328; /* Charcoal-light — slightly lighter, for footer backgrounds */ --color-charcoal-lt: #262D34; /* Off-white — primary page background, clean and airy */ --color-bg: #F7F9FB; /* White — card surfaces, panels */ --color-white: #FFFFFF; /* Slate — body text color, softer than pure black for readability */ --color-text: #2D3A4A; /* Muted — secondary text, captions, metadata */ --color-muted: #5E6E82; /* Border — subtle dividers and card borders */ --color-border: #DDE3EA; /* --- Teal variants for hover/active states --- */ --color-teal-dark: #28A88E; --color-teal-light: #E8F9F5; --color-blue-light: #E6F5FA; --color-salmon-light: #FDF0EE; --color-coral-light: #FCF0EE; --color-green-light: #EAF6EF; /* --- Typography --- */ /* Plus Jakarta Sans is the brand-aligned font for all text. Loaded from Google Fonts in each HTML file's . */ --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Font size scale */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.375rem; /* 22px */ --fs-xl: 1.75rem; /* 28px */ --fs-2xl: 2.25rem; /* 36px */ --fs-3xl: 2.875rem; /* 46px */ --fs-4xl: 3.5rem; /* 56px */ /* --- Spacing scale --- */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2.5rem; --sp-xl: 4rem; --sp-2xl: 6rem; --sp-3xl: 8rem; /* --- Borders & Shadows --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 24px; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.11); /* --- Transitions --- */ --transition: 0.22s ease; } /* ============================================================ 2. BASE / RESET Normalize defaults and set box model globally. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-family); font-size: var(--fs-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-teal-dark); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-teal); } ul, ol { list-style: none; } /* ============================================================ 3. TYPOGRAPHY All heading levels, body text, labels, and decorative text. Plus Jakarta Sans Bold is used for all prominent headings. ============================================================ */ /* Display headline — used in hero section */ .display-headline { font-size: var(--fs-4xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-charcoal); } /* Page-level section headings (H2) */ h2, .section-heading { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-charcoal); } /* Card / subsection headings (H3) */ h3, .card-heading { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; color: var(--color-charcoal); } /* Small card labels / H4 */ h4, .label-heading { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; color: var(--color-charcoal); } /* Body paragraph — standard readability */ p { font-size: var(--fs-base); line-height: 1.75; color: var(--color-text); margin-bottom: var(--sp-sm); } p:last-child { margin-bottom: 0; } /* Lead paragraph — intro text in hero or section intros */ .lead { font-size: var(--fs-md); font-weight: 400; line-height: 1.75; color: var(--color-text); } /* Overline label — small all-caps label above headings */ .overline { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-teal-dark); display: block; margin-bottom: var(--sp-xs); } /* Muted text — captions, metadata */ .text-muted { color: var(--color-muted); font-size: var(--fs-sm); } /* Colored accent text */ .text-teal { color: var(--color-teal-dark); } .text-coral { color: var(--color-coral); } .text-green { color: var(--color-green); } .text-salmon { color: var(--color-salmon); } .text-blue { color: var(--color-blue); } /* ============================================================ 4. NAVIGATION Fixed sticky navbar. Transparent over hero, turns solid on scroll (via .scrolled class added by JS in main.js). ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.0); backdrop-filter: blur(0px); transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition); padding: 0 var(--sp-lg); height: 70px; display: flex; align-items: center; } /* When user scrolls down, JS adds .scrolled to navbar — makes it solid */ .navbar.scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm); } .navbar-inner { max-width: 1160px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } /* * .site-logo — the combined logo component used in both navbar and footer. * It wraps a small SVG icon + a text span styled with Plus Jakarta Sans Bold. * This approach ensures the font renders perfectly since the text is a real * HTML element using the already-loaded Google Font, not embedded in an image. */ .site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } /* The SVG bar-chart icon */ .site-logo-icon { height: 28px; width: auto; flex-shrink: 0; } /* The wordmark text — Plus Jakarta Sans Bold, matching the new logo design */ .site-logo-text { font-family: var(--font-family); font-size: 1.05rem; font-weight: 700; color: var(--color-charcoal); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; } /* Legacy .navbar-logo img kept for any fallback */ .navbar-logo img { height: 36px; width: auto; } /* Nav links container */ .navbar-links { display: flex; align-items: center; gap: var(--sp-lg); } /* Individual nav link */ .nav-link { font-size: var(--fs-sm); font-weight: 600; color: var(--color-charcoal); text-decoration: none; position: relative; padding-bottom: 2px; transition: color var(--transition); } /* Animated underline on hover */ .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-teal); transition: width var(--transition); border-radius: 2px; } .nav-link:hover, .nav-link.active { color: var(--color-teal-dark); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* CTA button in nav */ .nav-cta { background: var(--color-teal); color: var(--color-white) !important; padding: 8px 20px; border-radius: var(--radius-xl); font-size: var(--fs-sm); font-weight: 700; transition: background var(--transition), transform var(--transition); } .nav-cta::after { display: none; /* no underline on the CTA button */ } .nav-cta:hover { background: var(--color-teal-dark); transform: translateY(-1px); color: var(--color-white) !important; } /* Mobile hamburger toggle (hidden on desktop) */ .navbar-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .navbar-toggle span { display: block; width: 24px; height: 2px; background: var(--color-charcoal); border-radius: 2px; transition: all var(--transition); } /* White hamburger bars on transparent navbar (home page hero) */ .navbar:not(.scrolled) .navbar-toggle span { background: rgba(255, 255, 255, 0.85); } /* Logo text turns white when navbar is transparent (over dark hero) */ .navbar:not(.scrolled) .site-logo-text { color: rgba(255, 255, 255, 0.92); } /* Footer logo text — always white on dark background */ .footer-logo .site-logo-text { color: rgba(255, 255, 255, 0.85); } /* Footer logo icon — invert to white (SVG has colored bars, invert makes them light) */ .footer-logo .site-logo-icon { filter: brightness(0) invert(1); opacity: 0.85; } /* * When navbar is NOT scrolled (i.e. transparent over the hero), * nav links should be white so they're readable on the dark hero background. * Once .scrolled is added by JS, these rules no longer apply and the * default charcoal link color takes over. */ .navbar:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.88); } .navbar:not(.scrolled) .nav-link:hover, .navbar:not(.scrolled) .nav-link.active { color: var(--color-white); } .navbar:not(.scrolled) .nav-link::after { background: var(--color-white); } /* Keep the CTA button readable on dark bg even when transparent */ .navbar:not(.scrolled) .nav-cta { background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.4); color: var(--color-white) !important; } .navbar:not(.scrolled) .nav-cta:hover { background: var(--color-teal); border-color: var(--color-teal); } /* ============================================================ 5. HERO SECTION Full-viewport hero with gradient background. Dark charcoal-to-teal gradient gives authority without being too corporate-blue. ============================================================ */ .hero { min-height: 100vh; background: linear-gradient(135deg, #1A2530 0%, #1E3540 45%, #1B3D44 75%, #1D4040 100%); display: flex; flex-direction: column; justify-content: center; padding: 100px var(--sp-lg) var(--sp-3xl); position: relative; overflow: hidden; } /* Subtle decorative element — abstract grid/dot pattern in bg */ .hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient(circle at 70% 30%, rgba(53, 201, 172, 0.12) 0%, transparent 55%), radial-gradient(circle at 20% 80%, rgba(59, 175, 212, 0.08) 0%, transparent 50%); pointer-events: none; } /* Decorative colored bar strip — echoes the logo bar chart motif */ .hero-bar-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient( to right, var(--color-teal) 0%, var(--color-teal) 25%, var(--color-blue) 25%, var(--color-blue) 50%, var(--color-salmon) 50%, var(--color-salmon) 75%, var(--color-green) 75%, var(--color-green) 100% ); } .hero-content { max-width: 1160px; margin: 0 auto; width: 100%; position: relative; z-index: 1; } /* Overline label on dark background */ .hero .overline { color: var(--color-teal); } /* Hero headline on dark background */ .hero .display-headline { color: var(--color-white); max-width: 720px; margin-bottom: var(--sp-md); } /* Hero lead text on dark background */ .hero .lead { color: rgba(255, 255, 255, 0.80); max-width: 600px; margin-bottom: var(--sp-lg); } /* Hero CTA button row */ .hero-cta-row { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-md); } /* Hero scroll indicator */ .hero-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.5; z-index: 1; } .hero-scroll-hint span { font-size: var(--fs-xs); color: var(--color-white); letter-spacing: 0.1em; text-transform: uppercase; } .scroll-arrow { width: 20px; height: 20px; border-right: 2px solid rgba(255,255,255,0.6); border-bottom: 2px solid rgba(255,255,255,0.6); transform: rotate(45deg); animation: scrollBounce 1.6s infinite; } @keyframes scrollBounce { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(5px); } } /* ============================================================ 6. SECTION LAYOUTS Shared containers, section headings, and dividers used across all pages. ============================================================ */ /* Standard section wrapper — controls max width and padding */ .section { padding: var(--sp-2xl) var(--sp-lg); } .section-inner { max-width: 1160px; margin: 0 auto; width: 100%; } /* Alternate background sections — subtle off-white vs white rhythm */ .section-alt { background: var(--color-white); } /* Section header block — overline + heading + optional subtitle */ .section-header { margin-bottom: var(--sp-xl); } .section-header.centered { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; margin-bottom: var(--sp-xl); } .section-header h2 { margin-top: var(--sp-xs); } .section-subtitle { font-size: var(--fs-md); color: var(--color-muted); margin-top: var(--sp-sm); line-height: 1.65; } /* Thin decorative rule — appears below section heading */ .section-rule { display: block; width: 48px; height: 3px; border-radius: 3px; background: var(--color-teal); margin-top: var(--sp-sm); } .section-header.centered .section-rule { margin-left: auto; margin-right: auto; } /* ============================================================ 7. APPROACH PILLARS A 3-column (2 rows) card grid displaying the 5 approach pillars. Each card has a colored icon-dot and a tagline. ============================================================ */ .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); } .pillar-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg) var(--sp-md); transition: box-shadow var(--transition), transform var(--transition); position: relative; overflow: hidden; } /* Subtle top-border accent in the pillar's accent color */ .pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .pillar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } /* Icon circle for pillar */ .pillar-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: var(--sp-sm); } .pillar-card h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 6px; } .pillar-card p { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: 0; } /* Color variants for pillar cards — top border + icon background */ .pillar-teal::before { background: var(--color-teal); } .pillar-blue::before { background: var(--color-blue); } .pillar-salmon::before { background: var(--color-salmon); } .pillar-coral::before { background: var(--color-coral); } .pillar-green::before { background: var(--color-green); } .pillar-teal2::before { background: var(--color-teal-dark); } .pillar-icon-teal { background: var(--color-teal-light); color: var(--color-teal-dark); } .pillar-icon-blue { background: var(--color-blue-light); color: var(--color-blue); } .pillar-icon-salmon { background: var(--color-salmon-light); color: var(--color-coral); } .pillar-icon-coral { background: var(--color-coral-light); color: var(--color-coral); } .pillar-icon-green { background: var(--color-green-light); color: var(--color-green); } .pillar-icon-teal2 { background: var(--color-teal-light); color: var(--color-teal-dark); } /* ============================================================ 8. IMPACT CARDS Cards for each of the 9 impact projects. Left-border accent distinguishes each card; expandable "read more" toggle reveals full description. ============================================================ */ .impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); } .impact-card { background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-teal); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--sp-md) var(--sp-lg); transition: box-shadow var(--transition), transform var(--transition); } .impact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Cycling left-border colors for visual variety */ .impact-card:nth-child(4n+1) { border-left-color: var(--color-teal); } .impact-card:nth-child(4n+2) { border-left-color: var(--color-blue); } .impact-card:nth-child(4n+3) { border-left-color: var(--color-green); } .impact-card:nth-child(4n+4) { border-left-color: var(--color-coral); } .impact-card h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-xs); line-height: 1.4; } /* Partner tag / year badge */ .impact-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 10px; border-radius: var(--radius-xl); margin-bottom: var(--sp-xs); } .tag-teal { background: var(--color-teal-light); color: var(--color-teal-dark); } .tag-blue { background: var(--color-blue-light); color: var(--color-blue); } .tag-green { background: var(--color-green-light); color: var(--color-green); } .tag-coral { background: var(--color-coral-light); color: var(--color-coral); } .tag-salmon { background: var(--color-salmon-light); color: var(--color-coral); } /* Expandable description */ .impact-summary { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: var(--sp-xs); line-height: 1.65; } .impact-full { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; margin-top: var(--sp-xs); display: none; /* hidden by default; JS toggles .expanded */ } .impact-card.expanded .impact-full { display: block; } /* Toggle link */ .impact-toggle { font-size: var(--fs-sm); font-weight: 600; color: var(--color-teal-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-xs); transition: color var(--transition); background: none; border: none; padding: 0; } .impact-toggle:hover { color: var(--color-teal); } .impact-toggle .toggle-arrow { display: inline-block; transition: transform var(--transition); } .impact-card.expanded .toggle-arrow { transform: rotate(180deg); } /* External link on impact cards */ .impact-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-teal-dark); margin-top: var(--sp-xs); } /* ============================================================ 9. FOCUS AREA TILES Four colored tiles for the focus area clusters. Each tile uses one of the brand accent colors. ============================================================ */ .focus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); } .focus-tile { border-radius: var(--radius-lg); padding: var(--sp-lg); position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .focus-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* Color themes for each focus tile */ .focus-teal { background: linear-gradient(135deg, #2ABD9E 0%, #35C9AC 100%); } .focus-blue { background: linear-gradient(135deg, #2FA7CC 0%, #3BAFD4 100%); } .focus-coral { background: linear-gradient(135deg, #D45E4A 0%, #E06655 100%); } .focus-green { background: linear-gradient(135deg, #45A06A 0%, #52B07A 100%); } /* Icon in top right corner of tile */ .focus-tile-icon { position: absolute; top: var(--sp-sm); right: var(--sp-md); font-size: 2.5rem; opacity: 0.18; } .focus-tile h3 { color: var(--color-white); font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-sm); line-height: 1.25; } /* Bullet topics within each tile */ .focus-topics { display: flex; flex-direction: column; gap: 6px; } .focus-topic { color: rgba(255, 255, 255, 0.88); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .focus-topic::before { content: '—'; flex-shrink: 0; opacity: 0.7; font-weight: 400; } /* ============================================================ 10. CONSULTING / TEAM PROFILE Two-column layout: headshot on left, bio on right. Used on consulting.html for Zayaan's profile. ============================================================ */ .profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-xl); align-items: start; } .profile-photo-wrap { position: sticky; top: 90px; /* clears the fixed navbar */ } .profile-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .profile-photo-caption { margin-top: var(--sp-sm); text-align: center; } .profile-name { font-size: var(--fs-lg); font-weight: 700; color: var(--color-charcoal); margin-bottom: 2px; } .profile-title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-teal-dark); } .profile-email { font-size: var(--fs-sm); color: var(--color-muted); margin-top: 6px; } /* Bio text area */ .profile-bio h3 { margin-top: var(--sp-lg); margin-bottom: var(--sp-sm); font-size: var(--fs-md); color: var(--color-charcoal); } .profile-bio h3:first-child { margin-top: 0; } /* Expertise tags */ .expertise-tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-md); } .expertise-tag { font-size: var(--fs-xs); font-weight: 600; padding: 4px 12px; border-radius: var(--radius-xl); background: var(--color-teal-light); color: var(--color-teal-dark); letter-spacing: 0.03em; } /* Services cards on consulting page */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-xl); } .service-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-md); transition: box-shadow var(--transition), transform var(--transition); } .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .service-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: var(--sp-sm); } .service-card h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: 6px; } .service-card p { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: 0; } /* ============================================================ 11. CONTACT PAGE Contact info blocks + a clean HTML mailto form. ============================================================ */ .contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-xl); align-items: start; } .contact-info-block { margin-bottom: var(--sp-lg); } .contact-info-block h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-sm); padding-bottom: var(--sp-xs); border-bottom: 2px solid var(--color-border); } .contact-detail { display: flex; align-items: flex-start; gap: var(--sp-sm); margin-bottom: var(--sp-sm); } .contact-detail-icon { font-size: 18px; color: var(--color-teal); flex-shrink: 0; margin-top: 2px; } .contact-detail-text { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.6; } /* Contact form */ .contact-form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm); } .contact-form h3 { margin-bottom: var(--sp-md); } .form-group { margin-bottom: var(--sp-md); } .form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--color-charcoal); margin-bottom: 6px; } .form-control { width: 100%; padding: 10px 14px; font-family: var(--font-family); font-size: var(--fs-sm); color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; } .form-control:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgba(53, 201, 172, 0.15); background: var(--color-white); } textarea.form-control { resize: vertical; min-height: 130px; } select.form-control { cursor: pointer; } /* Callout box on contact page for funding/partnerships */ .callout-box { border-radius: var(--radius-lg); padding: var(--sp-lg); margin-top: var(--sp-lg); } .callout-teal { background: var(--color-teal-light); border-left: 4px solid var(--color-teal); } .callout-blue { background: var(--color-blue-light); border-left: 4px solid var(--color-blue); } .callout-green { background: var(--color-green-light); border-left: 4px solid var(--color-green); } .callout-coral { background: var(--color-coral-light); border-left: 4px solid var(--color-coral); } .callout-box h4 { margin-bottom: var(--sp-sm); color: var(--color-charcoal); } .callout-box p { font-size: var(--fs-sm); color: var(--color-text); } /* ============================================================ 12. STATS / NUMBERS BAR A horizontal strip of key impact numbers shown on home page. ============================================================ */ .stats-bar { background: var(--color-charcoal); padding: var(--sp-xl) var(--sp-lg); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); max-width: 1160px; margin: 0 auto; text-align: center; } .stat-item .stat-number { font-size: var(--fs-3xl); font-weight: 800; color: var(--color-teal); line-height: 1; display: block; } .stat-item .stat-label { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.65); margin-top: 6px; font-weight: 500; line-height: 1.4; } /* ============================================================ 13. FOOTER Dark footer with logo, nav columns, contact info, copyright. ============================================================ */ .site-footer { background: var(--color-charcoal); color: rgba(255, 255, 255, 0.75); padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg); } .footer-inner { max-width: 1160px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 220px 1fr 1fr 1fr; gap: var(--sp-xl); padding-bottom: var(--sp-xl); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: var(--sp-lg); } /* Footer logo wrapper — the .site-logo link inside footer-logo */ .footer-logo .site-logo { margin-bottom: var(--sp-sm); } .footer-tagline { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.5); line-height: 1.6; } .footer-col h5 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: var(--sp-sm); } .footer-col ul { display: flex; flex-direction: column; gap: 8px; } .footer-col ul li a { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.65); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--color-teal); } .footer-contact-item { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.65); margin-bottom: 8px; line-height: 1.5; } .footer-contact-item a { color: rgba(255, 255, 255, 0.65); } .footer-contact-item a:hover { color: var(--color-teal); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-sm); } .footer-copyright { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.35); } /* Color bar strip in footer top — mirrors hero bottom strip */ .footer-bar-strip { height: 3px; background: linear-gradient( to right, var(--color-teal) 0%, var(--color-teal) 25%, var(--color-blue) 25%, var(--color-blue) 50%, var(--color-salmon) 50%, var(--color-salmon) 75%, var(--color-green) 75%, var(--color-green) 100% ); margin-bottom: var(--sp-lg); } /* ============================================================ 14. BUTTONS Primary (teal fill), Secondary (outlined), Ghost (text only). ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 26px; font-family: var(--font-family); font-size: var(--fs-sm); font-weight: 700; border-radius: var(--radius-xl); cursor: pointer; border: 2px solid transparent; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:active { transform: translateY(1px); } /* Primary — filled teal */ .btn-primary { background: var(--color-teal); color: var(--color-white); border-color: var(--color-teal); } .btn-primary:hover { background: var(--color-teal-dark); border-color: var(--color-teal-dark); color: var(--color-white); box-shadow: 0 4px 14px rgba(53, 201, 172, 0.35); } /* Secondary — outlined teal */ .btn-secondary { background: transparent; color: var(--color-teal); border-color: var(--color-teal); } .btn-secondary:hover { background: var(--color-teal); color: var(--color-white); } /* White variant — for use on dark hero backgrounds */ .btn-white { background: var(--color-white); color: var(--color-charcoal); border-color: var(--color-white); } .btn-white:hover { background: rgba(255, 255, 255, 0.88); color: var(--color-charcoal); box-shadow: var(--shadow-md); } /* Ghost white — outlined, for dark backgrounds */ .btn-ghost-white { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.4); } .btn-ghost-white:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-white); border-color: rgba(255, 255, 255, 0.7); } /* Small button variant */ .btn-sm { padding: 7px 18px; font-size: var(--fs-xs); } /* ============================================================ 15. UTILITY CLASSES ============================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); } .mb-sm { margin-bottom: var(--sp-sm); } .mb-md { margin-bottom: var(--sp-md); } .mb-lg { margin-bottom: var(--sp-lg); } /* Page top padding — accounts for fixed navbar height */ .page-top-pad { padding-top: 70px; } /* Page hero banner — compact alternative to full-height hero */ .page-banner { background: linear-gradient(135deg, #1A2530 0%, #1E3540 60%, #1B3D44 100%); padding: calc(70px + var(--sp-xl)) var(--sp-lg) var(--sp-xl); position: relative; overflow: hidden; } .page-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 50%, rgba(53, 201, 172, 0.1) 0%, transparent 60%); pointer-events: none; } .page-banner-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; } .page-banner .overline { color: var(--color-teal); } .page-banner h1 { font-size: var(--fs-3xl); font-weight: 800; color: var(--color-white); margin-top: var(--sp-xs); letter-spacing: -0.02em; } .page-banner .lead { color: rgba(255, 255, 255, 0.75); max-width: 560px; margin-top: var(--sp-sm); } .page-banner-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient( to right, var(--color-teal) 0%, var(--color-teal) 25%, var(--color-blue) 25%, var(--color-blue) 50%, var(--color-salmon) 50%, var(--color-salmon) 75%, var(--color-green) 75%, var(--color-green) 100% ); } /* ============================================================ 16. ANIMATIONS & TRANSITIONS Fade-in on scroll via .reveal class, toggled by IntersectionObserver in main.js. ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered delay for grid children */ .reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger > *:nth-child(2) { transition-delay: 0.10s; } .reveal-stagger > *:nth-child(3) { transition-delay: 0.15s; } .reveal-stagger > *:nth-child(4) { transition-delay: 0.20s; } .reveal-stagger > *:nth-child(5) { transition-delay: 0.25s; } .reveal-stagger > *:nth-child(6) { transition-delay: 0.30s; } /* ============================================================ 17. RESPONSIVE OVERRIDES Breakpoints: - lg: 1024px (tablet landscape → mobile) - md: 768px (tablet portrait) - sm: 480px (large phone) ============================================================ */ /* --- 1024px --- */ @media (max-width: 1024px) { :root { --fs-4xl: 2.75rem; --fs-3xl: 2.25rem; } .pillars-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); } .profile-layout { grid-template-columns: 220px 1fr; gap: var(--sp-lg); } } /* --- 768px --- */ @media (max-width: 768px) { :root { --fs-4xl: 2.25rem; --fs-3xl: 1.875rem; --fs-2xl: 1.75rem; } /* Mobile nav */ .navbar-links { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--color-white); flex-direction: column; align-items: flex-start; padding: var(--sp-md) var(--sp-lg); gap: var(--sp-sm); box-shadow: var(--shadow-md); border-top: 1px solid var(--color-border); } .navbar-links.open { display: flex; } .navbar-toggle { display: flex; } .hero { min-height: 90vh; } .impact-grid { grid-template-columns: 1fr; } .focus-grid { grid-template-columns: 1fr; } .pillars-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .contact-layout { grid-template-columns: 1fr; } .profile-layout { grid-template-columns: 1fr; } .profile-photo-wrap { position: static; max-width: 240px; } .footer-top { grid-template-columns: 1fr; } } /* --- 480px --- */ @media (max-width: 480px) { :root { --fs-4xl: 1.875rem; --fs-3xl: 1.625rem; --sp-2xl: 4rem; --sp-xl: 3rem; } .section { padding: var(--sp-xl) var(--sp-sm); } .hero { padding: 90px var(--sp-sm) var(--sp-2xl); } .stats-grid { grid-template-columns: 1fr 1fr; } .hero-cta-row { flex-direction: column; align-items: flex-start; } }