PageSourceSearch

https://ideal-consortium.github.io/

html ideal-consortium.github.io collected 2026-10-03 09:19:43 UTC 27,563 bytes, 868 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6  <title>Impact Data and Evidence Aggregation Library (IDEAL)</title>
7  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
8  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
9  <link rel="stylesheet" href="assets/css/ideal-style.css">
10  <style>
11 
12body {
13    margin: 0;
14    padding: 0;
15    box-sizing: border-box;
16    font-family: 'Open Sans', sans-serif; 
17    line-height: 1.6;
18    background-color: #f9f9f9;
19    display: flex;
20    flex-direction: column;
21    min-height: 100vh;
22}
23
24div.content h2 {
25  color: #1f3667;
26}
27strong {
28  color: #1f3667;
29}
30
31/* Header Styles */
32.header {
33    position: fixed;
34    top: 0;
35    left: 0;
36    width: 100%;
37    padding: 1rem 0;
38    background: rgba(255, 255, 255, 0);
39    backdrop-filter: blur(10px);
40    transition: all 0.3s ease;
41    z-index: 1000;
42    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
43}
44
45.header.scrolled {
46    background: rgba(255, 255, 255, 0.95);
47    backdrop-filter: blur(20px);
48    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
49    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
50}
51
52.header-container {
53    max-width: 1200px;
54    margin: 0 auto;
55    padding: 0 2rem;
56}
57
58.header-inner {
59    display: flex;
60    align-items: center;
61    justify-content: space-between; /* NEW: pushes left and right apart */
62    gap: 2rem;
63}
64
65.logo-wrapper {
66    display: flex;
67    align-items: center;
68    gap: 1rem;
69}
70
71.logo {
72    display: flex;
73    align-items: center;
74    text-decoration: none;
75    color: white;
76    font-size: 1.5rem;
77    font-weight: bold;
78    transition: color 0.3s ease;
79}
80
81.header.scrolled .logo {
82    color: #1f3667;
83}
84
85.logo-icon {
86    width: 80px;
87    height: 80px;
88    margin-right: 0.5rem;
89    position: relative;
90}
91
92/* Logo image switching */
93.logo-icon img {
94    width: 100%;
95    height: 100%;
96    object-fit: contain;
97    position: absolute;
98    top: 0;
99    left: 0;
100    transition: opacity 0.3s ease;
101}
102
103.logo-icon .logo-white {
104    opacity: 1;
105}
106
107.logo-icon .logo-dark {
108    opacity: 0;
109}
110
111.header.scrolled .logo-icon .logo-white {
112    opacity: 0;
113}
114
115.header.scrolled .logo-icon .logo-dark {
116    opacity: 1;
117}
118
119.logo-tagline {
120    color: rgba(255, 255, 255, 0.9);
121    font-size: 0.9rem;
122    font-weight: 400;
123    transition: color 0.3s ease;
124}
125
126.header.scrolled .logo-tagline {
127    color: #1f3667;
128}
129
130.header-buttons {
131    display: flex;
132    align-items: center;
133    gap: 1rem;
134    margin-left: auto;
135}
136
137/* Search Form Styles */
138.search-wrapper {
139    position: relative;
140}
141
142.search-form {
143    display: flex;
144    align-items: center;
145    background: rgba(255, 255, 255, 0.1);
146    border: 1px solid rgba(255, 255, 255, 0.2);
147    border-radius: 25px;
148    overflow: hidden;
149    transition: all 0.3s ease;
150    max-width: 300px;
151}
152
153.header.scrolled .search-form {
154    background: rgba(0, 0, 0, 0.05);
155    border-color: rgba(0, 0, 0, 0.1);
156}
157
158.search-input {
159    background: none;
160    border: none;
161    padding: 0.75rem 1rem;
162    color: white;
163    font-size: 0.9rem;
164    width: 200px;
165    transition: color 0.3s ease;
166}
167
168.search-input::placeholder {
169    color: rgba(255, 255, 255, 0.6);
170    transition: color 0.3s ease;
171}
172
173.header.scrolled .search-input {
174    color: #1f3667;
175}
176
177.header.scrolled .search-input::placeholder {
178    color: rgba(0, 0, 0, 0.4);
179}
180
181.search-input:focus {
182    outline: none;
183}
184
185.search-button {
186    background: none;
187    border: none;
188    padding: 0.75rem;
189    color: white;
190    cursor: pointer;
191    transition: all 0.3s ease;
192}
193
194.header.scrolled .search-button {
195    color: #1f3667;
196}
197
198.search-button:hover {
199    background: rgba(255, 255, 255, 0.1);
200}
201
202.search-icon {
203    width: 18px;
204    height: 18px;
205    fill: currentColor;
206}
207
208/* Button Styles */
209.mobile-menu-button {
210    background: none;
211    border: none;
212    color: white;
213    font-size: 1.5rem;
214    cursor: pointer;
215    transition: color 0.3s ease;
216    padding: 0.5rem;
217}
218
219.header.scrolled .mobile-menu-button {
220    color: #1f3667;
221}
222
223/* Dropdown Menu Styles */
224.dropdown-menu {
225    position: absolute;
226    top: 100%;
227    right: 0;
228    background: white;
229    border: 1px solid rgba(0, 0, 0, 0.1);
230    border-radius: 8px;
231    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
232    min-width: 200px;
233    display: none;
234    z-index: 1001;
235    margin-top: 0.5rem;
236}
237
238.dropdown-menu.show {
239    display: block;
240}
241
242.dropdown-menu a {
243    display: block;
244    padding: 0.75rem 1rem;
245    color: #1f3667;
246    text-decoration: none;
247    transition: background-color 0.2s ease;
248    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
249}
250
251.dropdown-menu a:last-child {
252    border-bottom: none;
253}
254
255.dropdown-menu a:hover {
256    background-color: #f8f9fa;
257}
258
259.dropdown-container {
260    position: relative;
261}
262
263/* Hero Section */
264.hero {
265    height: 100vh;
266    background: url('assets/images/logos/Copilot-books.jpg') center/cover no-repeat;
267    display: flex;
268    align-items: center;
269    justify-content: center;
270    color: white;
271    text-align: center;
272    position: relative;
273}
274
275/* Dark overlay for better text readability */
276.hero::before {
277    content: '';
278    position: absolute;
279    top: 0;
280    left: 0;
281    right: 0;
282    bottom: 0;
283    background: rgba(0, 0, 0, 0.4);
284    z-index: 1;
285}
286
287.hero-content {
288    position: relative;
289    z-index: 2;
290    max-width: 1100px;
291    padding: 0 2rem;
292}
293
294.hero-content h1 {
295    font-size: 3.5rem;
296    font-weight: 700;
297    margin-bottom: 0.25rem;
298    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
299    line-height: 1.2;
300    color: #ffffff;
301    font-family: inherit;
302}
303.hero-intro-spacer { margin-top: 1rem; }
304/* Set specific fonts for hero title, subtitle, and intro paragraphs */
305.hero-content h1,
306.hero-content p { font-family: 'Crimson Text', serif; }
307/* Different fonts for the two intro paragraphs */
308.hero-intro-1 { font-family: 'Inter', sans-serif; }
309.hero-intro-2 { font-family: 'Crimson Text', serif; }
310
311/* Ensure subtitle uses same white color and has matching shimmer effect */
312.hero-content p:first-of-type {
313    color: #ffffff;
314    position: relative;
315}
316.hero-content p:first-of-type::before {
317    content: '';
318    position: absolute;
319    top: 0;
320    left: 0;
321    right: 0;
322    bottom: 0;
323    background: linear-gradient(90deg, transparent, rgba(43, 108, 176, 0.1), transparent);
324    animation: shimmer 3s ease-in-out infinite;
325}
326.hero-content p:first-of-type::after {
327    content: '';
328    position: absolute;
329    top: 50%;
330    left: 50%;
331    width: 0;
332    height: 0;
333    background: radial-gradient(circle, rgba(43, 108, 176, 0.2) 0%, transparent 70%);
334    border-radius: 50%;
335    transform: translate(-50%, -50%);
336    animation: gentlePulse 4s ease-in-out infinite;
337}
338/* Add spacing after subtitle before first intro paragraph */
339.hero-subtitle { margin-bottom: 1.5rem; }
340/* Force subtitle to solid white and disable shimmer overlays */
341.hero-subtitle, .hero-subtitle strong { color: #ffffff !important; }
342.hero-content p:first-of-type::before,
343.hero-content p:first-of-type::after { display: none !important; }
344
345.hero-content p {
346    font-size: 1.2rem;
347    opacity: 0.95;
348    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
349}
350    
351/* Main Layout */
352.main {
353    display: flex;
354    flex: 1;
355}
356
357.sidebar {
358    width: 320px;
359    background-color: #ffffff;
360    padding: 20px;
361    border-radius: 0 10px 10px 0;
362    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
363}
364
365.sidebar {
366  position: sticky;
367  top: 80px; /* Adjust based on header height */
368}
369    
370.sidebar-links {
371    list-style: none;
372    padding-left: 0;
373    margin: 0;
374}
375
376.sidebar-links li {
377    margin: 17px 0;
378}
379
380.sidebar a {
381    color: #1f3366;
382    text-decoration: none;
383    font-weight: normal;
384}
385
386.sidebar a:hover {
387    color: #7ec5bb;
388}
389
390.sidebar-links li a {
391    display: flex;
392    align-items: center;
393    gap: 0.6em;
394    font-size: 1.07em;
395    transition: color 0.2s, background 0.2s;
396    padding: 0.4em 0.7em;
397    border-radius: 6px;
398}
399.sidebar-links li a:hover {
400    background: #f0f7f6;
401    color: #63bfb2;
402}
403
404.content {
405    flex: 1;
406    /* Align content column with sidebar top */
407    padding: 0 40px 40px;
408}
409/* Add spacing between paragraphs inside main content */
410.content p { margin-bottom: 1rem; }
411
412/* Removed old static footer logo grid styles */
413
414.card {
415    background: #fff;
416    border-radius: 14px;
417    box-shadow: 0 2px 16px rgba(31,54,103,0.07);
418    padding: 2rem;
419    margin-bottom: 2rem;
420}
421
422/* Responsive Design */
423@media (max-width: 768px) {
424    .header-inner {
425        flex-wrap: wrap;
426        gap: 1rem;
427    }
428
429    .logo-tagline {
430        display: none;
431    }
432
433    .search-form {
434        max-width: 200px;
435    }
436
437    .search-input {
438        width: 120px;
439    }
440
441    .hero-content h1 {
442        font-size: 2rem;
443    }
444
445    .header-container {
446        max-width: 1200px;
447        margin: 0 auto;
448        padding: 0 1rem;
449    }
450
451    .dropdown-menu {
452        right: -1rem;
453        left: auto;
454        min-width: 180px;
455    }
456
457    .main {
458        flex-direction: column;
459    }
460
461    .sidebar {
462        width: 100%;
463        border-radius: 0;
464        box-shadow: none;
465        border-bottom: 1px solid #ddd;
466    }
467
468    .content {
469        padding: 20px;
470    }
471
472    /* Removed responsive rules for old footer grid */
473}
474
475@media (max-width: 480px) {
476    /* Removed responsive rules for old footer grid */
477}
478
479/* Smooth scrolling */
480html {
481    scroll-behavior: smooth;
482}
483
484/* Rolling consortium logos styles are now sourced from assets/css/ideal-style.css */
485
486/* Project flowchart */
487.project-flowchart {
488  margin: 2rem 0;
489}
490#project-flowchart h2 {
491  text-align: center;
492  font-size: 1.25rem;
493  margin: 0 0 1rem;
494  color: #1f3667;
495}
496.project-flowchart img {
497  cursor: zoom-in;
498}
499.project-flowchart-nav {
500  display: flex;
501  align-items: center;
502  justify-content: center;
503  gap: 0.75rem;
504  margin: 1rem 0 0;
505}
506.project-flowchart-nav button {
507  appearance: none;
508  border: 1px solid rgba(31, 54, 103, 0.2);
509  background: #fff;
510  color: #1f3667;
511  border-radius: 999px;
512  padding: 0.4rem 0.9rem;
513  font-size: 1rem;
514  cursor: pointer;
515  transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
516}
517.project-flowchart-nav button:hover {
518  background: #f8f9fa;
519  border-color: rgba(31, 54, 103, 0.35);
520}
521.project-flowchart-nav button:active {
522  transform: translateY(1px);
523}
524.project-flowchart-nav .project-flowchart-label {
525  color: rgba(31, 54, 103, 0.85);
526  font-size: 0.95rem;
527}
528.project-flowchart img {
529  width: 100%;
530  max-width: 980px;
531  height: auto;
532  display: block;
533  margin: 0 auto;
534  border-radius: 14px;
535}
536.project-flowchart figcaption {
537  margin-top: 0.75rem;
538  text-align: center;
539  color: rgba(31, 54, 103, 0.8);
540  font-size: 0.95rem;
541}
542
543/* Flowchart lightbox modal */
544.flowchart-modal {
545  position: fixed;
546  inset: 0;
547  background: rgba(0, 0, 0, 0.75);
548  display: none;
549  align-items: center;
550  justify-content: center;
551  padding: 2rem;
552  z-index: 2000;
553}
554.flowchart-modal.is-open {
555  display: flex;
556}
557.flowchart-modal__dialog {
558  position: relative;
559  width: min(1200px, 100%);
560  max-height: 90vh;
561  background: #ffffff;
562  border-radius: 14px;
563  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
564  overflow: hidden;
565}
566.flowchart-modal__header {
567  display: flex;
568  align-items: center;
569  justify-content: space-between;
570  gap: 1rem;
571  padding: 0.75rem 1rem;
572  border-bottom: 1px solid rgba(0,0,0,0.08);
573}
574.flowchart-modal__title {
575  margin: 0;
576  font-size: 1rem;
577  color: #1f3667;
578  font-weight: 600;
579}
580.flowchart-modal__close {
581  appearance: none;
582  border: 1px solid rgba(31, 54, 103, 0.2);
583  background: #fff;
584  color: #1f3667;
585  border-radius: 10px;
586  padding: 0.35rem 0.6rem;
587  font-size: 1rem;
588  cursor: pointer;
589}
590.flowchart-modal__body {
591  padding: 1rem;
592  overflow: auto;
593  max-height: calc(90vh - 56px);
594}
595.flowchart-modal__img {
596  width: 100%;
597  height: auto;
598  display: block;
599}
600
601</style>
602</head>
603
604<body>
605    <header class="header" id="header">
606        <div class="header-container">
607            <div class="header-inner">
608                <div class="logo-wrapper">
609                   <a href="#" class="logo">
610                    <div class="logo-icon">
611                      <img src="assets/images/logos/ideal_logo_reversed.png" alt="IDEAL Logo" class="logo-white">
612                      <img src="assets/images/logos/ideal.png" alt="IDEAL Logo" class="logo-dark">
613                    </div>
614                    <span class="logo-tagline">Impact Data and Evidence Aggregation Library</span>
615                  </a>
616                </div>
617                
618                <div class="header-buttons">
619                    <div class="search-wrapper">
620                        <form class="search-form" action="#" method="get">
621                            <input 
622                                class="search-input" 
623                                type="text" 
624                                placeholder="Search..." 
625                                name="s"
626                            >
627                            <button class="search-button" type="submit">
628                                <svg class="search-icon" viewBox="0 0 24 24">
629                                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
630                                </svg>
631                            </button>
632                        </form>
633                    </div>
634                    
635                    <div class="dropdown-container">
636                        <button class="mobile-menu-button" id="menuButton">☰</button>
637                        <div class="dropdown-menu" id="dropdownMenu">
638                            <a href="https://survey.wb.surveycto.com/" target="_blank">Access SurveyCTO</a>
639                            <a href="https://github.com/orgs/IDEAL-consortium/projects/11" target="_blank">Access GitHub Paper Tracking</a>
640                        </div>
641                    </div>
642                </div>
643            </div>
644        </div>
645    </header>
646
647    <!-- Hero Section -->
648    <section class="hero">
649        <div class="hero-content">
650            <h1>Introducing IDEAL</h1>
651            
652            <p class="hero-intro-1">
653                Welcome to IDEAL, the Impact Data and Evidence Aggregation Library, a platform designed to extract results data from international development RCTs and make them accessible to researchers and policymakers. The project is currently in a pilot phase, during which we extract information from a curated initial set of studies and develop robust protocols to grow and maintain IDEAL in the future.
654            </p>
655            <p class="hero-intro-spacer hero-intro-2">
656                Hosted by the World Bank, IDEAL will be fully open-access and free for the world to use. Users will be able to easily search, compare, and visualize the relative effect sizes of different policy interventions on a range of outcomes, across countries and contexts.
657            </p>
658        </div>
659    </section>
660
661  <div class="main">
662    <nav class="sidebar">                    <!-- ← RESTORED: sidebar container -->
663        <ul class="sidebar-links">            <!-- ← RESTORED: navigation list -->
664            <li><a href="Schema_Index.html">Metadata Schema</a></li>
665            <li><a href="codingprotocol.html">Coding Protocol</a></li>
666            <li><a href="principles.html">Coding Extraction Principles and Objectives</a></li>
667            <li><a href="Training_Slides">Coder Training Materials</a></li>
668            <li><a href="https://www.worldbank.org/en/programs/sief-trust-fund/brief/sief-ideal-project-description" target="_blank" rel="noopener noreferrer">Contact the IDEAL Team</a></li>
669        </ul>
670    </nav>
671
672        <div class="content">
673            <div class="card" id="project-flowchart">
674                <h2>IDEAL Project Flowchart</h2>
675                <figure class="project-flowchart">
676                    <img
677                        id="flowchartImg"
678                        src="assets/images/flowcharts/Project flowchart updated May26.png"
679                        alt="Project flowchart"
680                        loading="lazy"
681                    />
682                    <figcaption id="flowchartCaption">IDEAL Project Flowchart (Overall)</figcaption>
683                </figure>
684            </div>
685            <p>
686                <strong>Motivation</strong>
687            </p>
688            <p>
689                The last few decades have seen explosive growth in randomized impact evaluations that seek to guide policy decision-making in low- and middle-income countries. IDEAL will contribute to translating the insights from multiple studies into <strong>actionable and credible policy insights</strong> by making the impact of different interventions easily comparable across studies. Beyond this core purpose, IDEAL will help guide the standardization of key information from randomized evaluations and unlock the potential to answer a wide range of methodological questions about RCTs.
690            </p>
691            <p>
692                <strong>Next Steps</strong>
693            </p>
694            <p>
695                Once IDEAL is established, we will invite others to join, guided by consistent protocols for adding new content and rigorous quality control. We will provide <strong>public access to IDEAL data</strong>, aided by a website that can filter studies by a wide range of criteria and display results immediately. We will also develop a set of pedagogical resources to make evidence aggregation methods widely accessible.
696            </p>
697        </div>
698    </div>
699
700    <!-- Rolling Logos Section -->
701    <section class="consortium-section">
702        <div class="container" style="margin-top: 0.75rem; margin-bottom: 1.25rem;">
703            <div style="display:flex; align-items:center; justify-content:center; gap: 4rem; flex-wrap: wrap; padding: 0 clamp(2.5rem, 8vw, 6rem);">
704                <a href="https://www.worldbank.org/en/programs/sief-trust-fund" target="_blank" rel="noopener noreferrer" title="SIEF"
705                   style="display:inline-flex; align-items:center;">
706                    <img src="assets/images/logos/sief.png" alt="SIEF" style="height: 78px; width: auto; max-width: 90vw; display:block;" />
707                </a>
708                <a href="https://www.worldbank.org/en/research/brief/ideal" target="_blank" rel="noopener noreferrer" title="World Bank Group"
709                   style="display:inline-flex; align-items:center;">
710                    <img src="assets/images/logos/world-bank-group.png" alt="World Bank Group" style="height: 78px; width: auto; max-width: 90vw; display:block;" />
711                </a>
712            </div>
713        </div>
714        <div class="container" style="margin-top: -0.5rem;">
715            <h2 class="cta-title">In collaboration with</h2>
716        </div>
717        <div class="consortium-scroll-container">
718            <div class="consortium-scroll-track">
719                <a href="https://www.worldbank.org/en/about/unit/u
719nit-dec/impactevaluation" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="World Bank">
720                    <div class="consortium-organization-card__image-container">
721                        <img src="assets/images/logos/world-bank.png" class="consortium-organization-card__image" alt="World Bank" />
722                    </div>
723                </a>
724                <a href="#" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Development Research Group">
725                    <div class="consortium-organization-card__image-container">
726                        <img src="assets/images/logos/drg.png" class="consortium-organization-card__image" alt="Development Research Group" />
727                    </div>
728                </a>
729                <a href="https://cega.berkeley.edu/our-work/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="CEGA">
730                    <div class="consortium-organization-card__image-container">
731                        <img src="assets/images/logos/cega.png" class="consortium-organization-card__image" alt="CEGA" />
732                    </div>
733                </a>
734                <a href="https://www.kellogg.northwestern.edu/academics-research/global-poverty-research-lab/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Global Poverty Research Lab">
735                    <div class="consortium-organization-card__image-container">
736                        <img src="assets/images/logos/gprl.png" class="consortium-organization-card__image" alt="Global Poverty Research Lab" />
737                    </div>
738                </a>
739                <a href="https://www.aidgrade.org" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="AidGrade">
740                    <div class="consortium-organization-card__image-container">
741                        <img src="assets/images/logos/aidgrade.png" class="consortium-organization-card__image" alt="AidGrade" />
742                    </div>
743                </a>
744                <!-- Duplicate for seamless scroll -->
745                <a href="https://www.worldbank.org/en/about/unit/unit-dec/impactevaluation" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="World Bank">
746                    <div class="consortium-organization-card__image-container">
747                        <img src="assets/images/logos/world-bank.png" class="consortium-organization-card__image" alt="World Bank" />
748                    </div>
749                </a>
750                <a href="#" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Development Research Group">
751                    <div class="consortium-organization-card__image-container">
752                        <img src="assets/images/logos/drg.png" class="consortium-organization-card__image" alt="Development Research Group" />
753                    </div>
754                </a>
755                <a href="https://cega.berkeley.edu/our-work/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="CEGA">
756                    <div class="consortium-organization-card__image-container">
757                        <img src="assets/images/logos/cega.png" class="consortium-organization-card__image" alt="CEGA" />
758                    </div>
759                </a>
760                <a href="https://www.kellogg.northwestern.edu/academics-research/global-poverty-research-lab/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Global Poverty Research Lab">
761                    <div class="consortium-organization-card__image-container">
762                        <img src="assets/images/logos/gprl.png" class="consortium-organization-card__image" alt="Global Poverty Research Lab" />
763                    </div>
764                </a>
765                <a href="https://www.aidgrade.org" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="AidGrade">
766                    <div class="consortium-organization-card__image-container">
767                        <img src="assets/images/logos/aidgrade.png" class="consortium-organization-card__image" alt="AidGrade" />
768                    </div>
769                </a>
770            </div>
771        </div>
772    </section>
773
774    <!-- Professional Footer (Shared) -->
775    <footer class="footer">
776        <div class="container">
777            <div class="footer-content"></div>
778            <div class="footer-bottom"></div>
779        </div>
780    </footer>
781
782    <!-- Flowchart Lightbox Modal -->
783    <div class="flowchart-modal" id="flowchartModal" aria-hidden="true">
784        <div class="flowchart-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="flowchartModalTitle">
785            <div class="flowchart-modal__header">
786                <p class="flowchart-modal__title" id="flowchartModalTitle">Project Flowchart</p>
787                <button type="button" class="flowchart-modal__close" id="flowchartModalClose" aria-label="Close">×</button>
788            </div>
789            <div class="flowchart-modal__body">
790                <img class="flowchart-modal__img" id="flowchartModalImg" alt="Project flowchart large view" />
791            </div>
792        </div>
793    </div>
794
795    
795<script>
796        // Header scroll effect
797        window.addEventListener('scroll', function() {
798            const header = document.getElementById('header');
799            if (window.scrollY > 50) {
800                header.classList.add('scrolled');
801            } else {
802                header.classList.remove('scrolled');
803            }
804        });
805
806        // Mobile menu toggle
807        document.getElementById('menuButton').addEventListener('click', function() {
808            const dropdownMenu = document.getElementById('dropdownMenu');
809            dropdownMenu.classList.toggle('show');
810        });
811
812        // Close dropdown when clicking outside
813        document.addEventListener('click', function(event) {
814            const dropdownContainer = document.querySelector('.dropdown-container');
815            const dropdownMenu = document.getElementById('dropdownMenu');
816            
817            if (!dropdownContainer.contains(event.target)) {
818                dropdownMenu.classList.remove('show');
819            }
820        });
821
822        // Flowchart lightbox (single image)
823        (function() {
824            const img = document.getElementById('flowchartImg');
825            const caption = document.getElementById('flowchartCaption');
826            if (!img || !caption) return;
827
828            const modal = document.getElementById('flowchartModal');
829            const modalImg = document.getElementById('flowchartModalImg');
830            const modalTitle = document.getElementById('flowchartModalTitle');
831            const modalClose = document.getElementById('flowchartModalClose');
832            if (!modal || !modalImg || !modalTitle) return;
833
834            const openModal = () => {
835                modalImg.src = img.getAttribute('src') || '';
836                modalTitle.textContent = caption.textContent || 'Project Flowchart';
837                modal.classList.add('is-open');
838                modal.setAttribute('aria-hidden', 'false');
839                // focus close button for accessibility
840                if (modalClose) modalClose.focus();
841            };
842            const closeModal = () => {
843                modal.classList.remove('is-open');
844                modal.setAttribute('aria-hidden', 'true');
845            };
846
847            // Click image to open large view
848            img.addEventListener('click', openModal);
849
850            // Close interactions
851            if (modalClose) modalClose.addEventListener('click', closeModal);
852            if (modal) {
853                modal.addEventListener('click', (e) => {
854                    // close when clicking the dark backdrop (but not the dialog)
855                    if (e.target === modal) closeModal();
856                });
857            }
858            document.addEventListener('keydown', (e) => {
859                if (e.key === 'Escape') closeModal();
860            });
861
862        })();
863    </script>
863
864    <!-- Shared Footer Script -->
865    
865<script src="assets/js/footer.js"></script>
865
866    
866<script src="assets/js/ideal-script.js"></script>
866
867</body>
868</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.