Impact Investing Conference 2025
/* Base colors */
:root {
/* Base colors */
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--light-bg: #f8fafc;
--gray-bg: #f1f5f9;
--gray-bg-darker: #e2e8f0;
--text-dark: #0f172a;
--text-light: #475569;
--border-radius: 0; /* Changed to 0 for sharp edges */
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
/* Day 1 */
--foundations-color: #154378; /* Dark blue - Impact Investing For Advisers, Foundations, & Family Offices */
--foundations-light: #e6edf5;
--climate-color: #20a3d0; /* Light blue - Climate */
--climate-light: #e6f4fa;
--social-infra-color: #522a68; /* Purple - Communities – Social Infrastructure & Inclusion */
--social-infra-light: #eee7f1;
--healthcare-color: #9d5fb8; /* Lighter color variation - Healthcare (lighter purple) */
--healthcare-light: #f5eef9;
/* Day 2 */
--institutions-color: #154378; /* Dark blue - Impact Investing for Institutions */
--institutions-light: #e6edf5;
--climate-tech-color: #20a3d0; /* Light blue - Climate Tech */
--climate-tech-light: #e6f4fa;
--edtech-color: #522a68; /* Purple - Education */
--edtech-light: #eee7f1;
--medtech-color: #9d5fb8; /* Lighter color variation - MedTech/Biotech (lighter purple) */
--medtech-light: #f5eef9;
--plenary-color: var(--primary-color); /* Uses the primary blue */
--plenary-light: #ffffff; /* White interior */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
color: var(--text-dark);
background-color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Section header styles for legend */
.container h3 {
font-size: 1.5rem;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary-color);
display: inline-block;
}
h1 {
font-size: 2.25rem;
font-weight: bold;
text-align: center;
margin-bottom: 1.5rem;
color: var(--primary-color);
padding-bottom: 0.75rem;
border-bottom: 3px solid var(--primary-color);
display: inline-block;
margin-left: auto;
margin-right: auto;
letter-spacing: -0.02em; /* Improved typography */
}
h2 {
font-size: 1.75rem;
font-weight: bold;
text-align: center;
margin: 2.5rem 0 1.5rem;
padding: 1rem;
background-color: var(--primary-color);
color: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
letter-spacing: -0.01em; /* Improved typography */
}
.schedule-container {
overflow-x: auto;
margin-bottom: 2rem;
background-color: var(--light-bg);
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
border: 1px solid var(--gray-bg-darker); /* Added border for sharper look */
}
.stream-headers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.stream-header {
padding: 0.75rem 0.5rem;
font-weight: bold;
text-align: center;
border-radius: var(--border-radius);
color: white;
box-shadow: var(--card-shadow);
text-transform: uppercase; /* More professional look */
font-size: 0.9rem;
letter-spacing: 0.05em;
}
/* Stream-specific header styling */
.stream-header[data-stream="FOUNDATIONS"] {
background-color: var(--foundations-color);
}
.stream-header[data-stream="CLIMATE"],
.stream-header[data-stream="CLIMATE TECH"] {
background-color: var(--climate-color);
}
.stream-header[data-stream="CLIMATE TECH"] {
background-color: var(--climate-tech-color);
}
.stream-header[data-stream="COMMUNITIES - SOCIAL INFRASTRUCTURE AND INCLUSION"] {
background-color: var(--social-infra-color);
}
.stream-header[data-stream="HEALTHCARE"] {
background-color: var(--healthcare-color);
}
.stream-header[data-stream="MEDTECH / BIOTECH"] {
background-color: var(--medtech-color);
}
.stream-header[data-stream="EDTECH"] {
background-color: var(--edtech-color);
}
.stream-header[data-stream="INSTITUTIONS"] {
background-color: var(--institutions-color);
}
.time-block {
margin-bottom: 1.25rem;
border-left: 4px solid var(--gray-bg-darker);
padding-left: 1rem;
}
.time-label {
font-weight: bold;
margin-bottom: 0.5rem;
background-color: var(--gray-bg-darker);
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0; /* Sharp edges */
font-size: 0.85rem;
letter-spacing: 0.03em;
}
.common-event {
background-color: var(--gray-bg);
padding: 0.75rem;
border-radius: var(--border-radius);
margin-bottom: 0.5rem;
box-shadow: var(--card-shadow);
}
.common-event-card {
background-color: white; /* Pure white background */
padding: 1.25rem;
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.2s;
border: 3px solid #2563eb; /* Updated to #2563eb (--primary-color) */
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-dark);
}
.common-event-card .event-title {
font-size: 1.1rem;
font-weight: 600;
color: #2563eb; /* Updated title color to match border */
}
.common-event-card:hover {
background-color: #f8fafc;
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.common-event-card .learn-more {
color: #2563eb; /* Updated to match border */
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
text-decoration: underline;
font-weight: 500;
}
.common-event-card .learn-more:hover {
color: var(--primary-hover);
text-decoration: none;
}
.transition-time-card {
background-color: var(--gray-bg);
padding: 1.25rem;
border-radius: var(--border-radius);
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-light);
border: 1px solid var(--gray-bg-darker);
}
.transition-time-card .event-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-light);
}
.stream-events {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.event-card {
padding: 0.75rem;
border-radius: var(--border-radius);
min-height: 140px;
cursor: pointer;
transition: all 0.2s;
background-color: white;
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
border-top: 4px solid;
border: 1px solid rgba(0, 0, 0, 0.04); /* Subtle border */
position: relative;
}
.stream-name {
display: none;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: white;
align-self: flex-start;
padding: 0.2rem 0.5rem;
border-radius: var(--border-radius);
margin-bottom: 0.5rem;
}
.stream-name[data-stream="FOUNDATIONS"] {
background-color: var(--foundations-color);
}
.stream-name[data-stream="CLIMATE"] {
background-color: var(--climate-color);
}
.stream-name[data-stream="CLIMATE TECH"] {
background-color: var(--climate-tech-color);
}
.stream-name[data-stream="COMMUNITIES - SOCIAL INFRASTRUCTURE AND INCLUSION"] {
background-color: var(--social-infra-color);
}
.stream-name[data-stream="HEALTHCARE"] {
background-color: var(--healthcare-color);
}
.stream-name[data-stream="MEDTECH / BIOTECH"] {
background-color: var(--medtech-color);
}
.stream-name[data-stream="EDTECH"] {
background-color: var(--edtech-color);
}
.stream-name[data-stream="INSTITUTIONS"] {
background-color: var(--institutions-color);
}
.event-with {
display: none;
font-size: 0.75rem;
margin-top: auto;
color: var(--text-light);
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 0.5rem;
margin-bottom: 1.75rem; /* Add space for learn more */
}
.learn-more {
font-size: 0.75rem;
color: var(--primary-color);
font-weight: 500;
text-decoration: underline;
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
}
/* Stream-specific event card styling */
.event-card[data-stream="FOUNDATIONS"] {
border-color: var(--foundations-color);
background-color: var(--foundations-light);
}
.event-card[data-stream="CLIMATE"] {
border-color: var(--climate-color);
background-color: var(--climate-light);
}
.event-card[data-stream="CLIMATE TECH"] {
border-color: var(--climate-tech-color);
background-color: var(--climate-tech-light);
}
.event-card[data-stream="COMMUNITIES - SOCIAL INFRASTRUCTURE AND INCLUSION"] {
border-color: var(--social-infra-color);
background-color: var(--social-infra-light);
}
.event-card[data-stream="HEALTHCARE"] {
border-color: var(--healthcare-color);
background-color: var(--healthcare-light);
}
.event-card[data-stream="MEDTECH / BIOTECH"] {
border-color: var(--medtech-color);
background-color: var(--medtech-light);
}
.event-card[data-stream="EDTECH"] {
border-color: var(--edtech-color);
background-color: var(--edtech-light);
}
.event-card[data-stream="INSTITUTIONS"] {
border-color: var(--institutions-color);
background-color: var(--institutions-light);
}
.event-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}
.event-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
/* Modal styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 50;
backdrop-filter: blur(3px);
}
.modal {
background-color: white;
border-radius: var(--border-radius);
width: 100%;
max-width: 42rem;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* Modal header styles */
.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1.5rem;
border-bottom: 1px solid var(--gray-bg-darker);
background-color: var(
--primary-color
); /* Default color, will be overridden by stream-specific styles */
color: white;
}
/* Modal title */
.modal-title {
font-size: 1.5rem;
font-weight: bold;
letter-spacing: -0.01em;
color: white;
}
/* Stream-specific header background colors */
.modal.modal-foundations .modal-header {
background-color: var(--foundations-color);
}
.modal.modal-climate .modal-header {
background-color: var(--climate-color);
}
.modal.modal-climate-tech .modal-header {
background-color: var(--climate-tech-color);
}
.modal.modal-social-infrastructure-and-inclusion .modal-header {
background-color: var(--social-infra-color);
}
.modal.modal-healthcare .modal-header {
background-color: var(--healthcare-color);
}
.modal.modal-medtech-biotech .modal-header {
background-color: var(--medtech-color);
}
.modal.modal-edtech .modal-header {
background-color: var(--edtech-color);
}
.modal.modal-institutions .modal-header {
background-color: var(--institutions-color);
}
/* Stream-specific title styling */
.modal.modal-foundations .modal-header .modal-title {
color: white;
}
.modal.modal-climate .modal-header .modal-title {
color: white;
}
.modal.modal-climate-tech .modal-header .modal-title {
color: white;
}
.modal.modal-social-infrastructure-and-inclusion
.modal-header
.modal-title {
color: white;
}
.modal.modal-healthcare .modal-header .modal-title {
color: white;
}
.modal.modal-medtech-biotech .modal-header .modal-title {
color: white;
}
.modal.modal-edtech .modal-header .modal-title {
color: white;
}
.modal.modal-institutions .modal-header .modal-title {
color: white;
}
/* Close button */
.modal-header .close-btn {
color: white;
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
}
.modal-body {
padding: 1.5rem;
}
.modal-info {
margin-bottom: 1.5rem;
background-color: var(--light-bg);
padding: 1rem;
border-radius: var(--border-radius);
}
/* Stream-specific modal info border styling */
.modal-foundations .modal-info {
border-left: 3px solid var(--foundations-color);
}
.modal-climate .modal-info {
border-left: 3px solid var(--climate-color);
}
.modal-climate-tech .modal-info {
border-left: 3px solid var(--climate-tech-color);
}
.modal-social-infrastructure-and-inclusion .modal-info {
border-left: 3px solid var(--social-infra-color);
}
.modal-healthcare .modal-info {
border-left: 3px solid var(--healthcare-color);
}
.modal-medtech-biotech .modal-info {
border-left: 3px solid var(--medtech-color);
}
.modal-edtech .modal-info {
border-left: 3px solid var(--edtech-color);
}
.modal-institutions .modal-info {
border-left: 3px solid var(--institutions-color);
}
/* Default modal info border */
.modal .modal-info {
border-left: 3px solid var(--gray-bg-darker);
}
.modal-info-item {
color: var(--text-light);
margin-bottom: 0.5rem;
}
.modal-section {
margin-bottom: 1.5rem;
}
.modal-section-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.75rem;
padding-bottom: 0.25rem;
border-bottom: 2px solid var(--gray-bg-darker);
letter-spacing: 0.01em;
}
/* Stream-specific section title border */
.modal-foundations .modal-section-title {
border-bottom-color: var(--foundations-color);
}
.modal-climate .modal-section-title {
border-bottom-color: var(--climate-color);
}
.modal-climate-tech .modal-section-title {
border-bottom-color: var(--climate-tech-color);
}
.modal-social-infrastructure-and-inclusion .modal-section-title {
border-bottom-color: var(--social-infra-color);
}
.modal-healthcare .modal-section-title {
border-bottom-color: var(--healthcare-color);
}
.modal-medtech-biotech .modal-section-title {
border-bottom-color: var(--medtech-color);
}
.modal-edtech .modal-section-title {
border-bottom-color: var(--edtech-color);
}
.modal-institutions .modal-section-title {
border-bottom-color: var(--institutions-color);
}
.modal-description {
color: var(--text-light);
line-height: 1.6;
white-space: pre-line; /* or pre-wrap */
}
.speakers-list {
list-style-type: none;
padding-left: 0;
}
.speakers-list li {
color: var(--text-light);
margin-bottom: 0.5rem;
padding: 0.5rem;
background-color: var(--light-bg);
border-radius: var(--border-radius);
}
/* More specific and forceful speaker link styling */
.speakers-list li a,
.speakers-list .speaker-link,
a.speaker-link {
color: var(--primary-color) !important;
text-decoration: underline !important;
font-weight: 500 !important;
transition: color 0.2s !important;
display: inline-block;
position: relative;
}
.speakers-list li a:hover,
.speakers-list .speaker-link:hover,
a.speaker-link:hover {
color: var(--primary-hover) !important;
text-decoration: none !important;
}
/* Add a subtle icon to indicate external link */
.speaker-link::after {
content: "↗";
display: inline-block;
margin-left: 3px;
font-size: 0.9em;
}
/* Stream-specific speakers list styling */
.modal-foundations .speakers-list li {
border-left: 3px solid var(--foundations-color);
}
.modal-climate .speakers-list li {
border-left: 3px solid var(--climate-color);
}
.modal-climate-tech .speakers-list li {
border-left: 3px solid var(--climate-tech-color);
}
.modal-social-infrastructure-and-inclusion .speakers-list li {
border-left: 3px solid var(--social-infra-color);
}
.modal-healthcare .speakers-list li {
border-left: 3px solid var(--healthcare-color);
}
.modal-medtech-biotech .speakers-list li {
border-left: 3px solid var(--medtech-color);
}
.modal-edtech .speakers-list li {
border-left: 3px solid var(--edtech-color);
}
.modal-institutions .speakers-list li {
border-left: 3px solid var(--institutions-color);
}
/* Default speakers list styling */
.modal .speakers-list li {
border-left: 3px solid var(--gray-bg-darker);
}
.modal-footer {
background-color: var(--gray-bg);
padding: 1rem 1.5rem;
display: flex;
justify-content: flex-end;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.close-modal-btn {
background-color: var(--primary-color);
color: white;
padding: 0.6rem 1.2rem;
border-radius: var(--border-radius);
border: none;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
/* Stream-specific close button */
.modal-foundations .close-modal-btn {
background-color: var(--foundations-color);
}
.modal-climate .close-modal-btn {
background-color: var(--climate-color);
}
.modal-climate-tech .close-modal-btn {
background-color: var(--climate-tech-color);
}
.modal-social-infrastructure-and-inclusion .close-modal-btn {
background-color: var(--social-infra-color);
}
.modal-healthcare .close-modal-btn {
background-color: var(--healthcare-color);
}
.modal-medtech-biotech .close-modal-btn {
background-color: var(--medtech-color);
}
.modal-edtech .close-modal-btn {
background-color: var(--edtech-color);
}
.modal-institutions .close-modal-btn {
background-color: var(--institutions-color);
}
.close-modal-btn:hover {
opacity: 0.9;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
font-size: 1.25rem;
}
.error {
color: #ef4444;
padding: 1rem;
}
/* Updated Legend styling for vertical display */
.legend {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
margin: 0.5rem 0 1rem;
padding-left: 1rem;
border-left: 3px solid var(--gray-bg-darker);
max-width: 500px;
}
.legend-item {
display: flex;
align-items: center;
font-size: 0.9rem;
padding: 0.25rem 0.4rem;
border-radius: var(--border-radius);
width: 100%;
}
.legend-color {
width: 16px;
height: 16px;
margin-right: 0.5rem;
border-radius: var(--border-radius);
}
/* Background colors for legend items */
.legend-item-foundations {
background-color: var(--foundations-light);
}
.legend-item-climate {
background-color: var(--climate-light);
}
.legend-item-social-infra {
background-color: var(--social-infra-light);
}
.legend-item-healthcare {
background-color: var(--healthcare-light);
}
.legend-item-institutions {
background-color: var(--institutions-light);
}
.legend-item-climate-tech {
background-color: var(--climate-tech-light);
}
.legend-item-edtech {
background-color: var(--edtech-light);
}
.legend-item-medtech {
background-color: var(--medtech-light);
}
.legend-item-plenary {
background-color: var(--plenary-light);
border: 2px solid var(--plenary-color); /* Adding border with primary color */
}
.highlight-card {
animation: pulse 1.5s ease-in-out;
z-index: 10;
position: relative;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(66, 153, 225, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(66, 153, 225, 0);
}
}
/* Responsive styles */
@media (max-width: 768px) {
.stream-headers,
.stream-events {
grid-template-columns: repeat(2, 1fr);
}
.legend {
max-width: 100%;
}
h1 {
font-size: 1.75rem;
margin-left: 1rem;
margin-right: 1rem;
}
h2 {
font-size: 1.5rem;
padding: 0.75rem;
}
.modal {
width: 95%;
max-height: 85vh;
}
.modal-header {
padding: 1rem;
}
.modal-title {
font-size: 1.25rem;
}
.modal-body {
padding: 1rem;
}
.stream-name {
display: block;
}
}
/* Smaller phones */
@media (max-width: 580px) {
.stream-headers,
.stream-events {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.5rem;
text-align: center;
display: block;
}
h2 {
font-size: 1.25rem;
margin: 1.5rem 0 1rem;
}
.time-label {
font-size: 0.8rem;
display: block;
width: 100%;
text-align: center;
}
.time-block {
padding-left: 0.5rem;
border-left-width: 2px;
margin-bottom: 2rem;
}
.event-card {
min-height: 120px;
}
.event-title {
font-size: 0.95rem;
}
.common-event-card {
padding: 0.75rem;
}
.modal-title {
font-size: 1.125rem;
}
.modal-info-item {
font-size: 0.9rem;
}
.modal-section-title {
font-size: 1rem;
}
.modal-description {
font-size: 0.9rem;
}
.speakers-list li {
font-size: 0.9rem;
padding: 0.4rem;
}
/* Better spacing for stacked cards */
.stream-events {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.stream-name {
display: block;
}
.event-slot {
margin-bottom: 0.75rem;
}
/* Adjust modal positioning */
.modal-overlay {
align-items: flex-start;
padding: 0;
}
.modal {
border-radius: 0;
max-height: 100vh;
height: 100%;
width: 100%;
margin: 0;
}
}
/* Very small phones */
@media (max-width: 320px) {
h1 {
font-size: 1.25rem;
}
.schedule-container {
padding: 0.75rem;
}
.event-card {
padding: 0.5rem;
min-height: 100px;
}
.stream-name {
display: block;
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
}
.event-title {
font-size: 0.85rem;
}
.event-with {
font-size: 0.7rem;
}
.learn-more {
font-size: 0.7rem;
}
}
Day 1
<div
class="legend-color"
style="background-color: var(--plenary-light); border: 2px solid var(--plenary-color);"
>
Plenary
<div
class="legend-color"
style="background-color: var(--foundations-color)"
>
Impact Investing For Advisers, Foundations, & Family Offices
<div
class="legend-color"
style="background-color: var(--climate-color)"
>
Climate
<div
class="legend-color"
style="background-color: var(--social-infra-color)"
>
