that has
its own margin-bottom. */
blockquote > *:last-child {
margin-bottom: 0;
}
/* Remove top margin when heading is first element in a container or column */
.container > h2:first-child,
.container > h3:first-child,
.container > h4:first-child,
.container-fluid > h2:first-child,
.container-fluid > h3:first-child,
.container-fluid > h4:first-child,
[class*="col-"] > h2:first-child,
[class*="col-"] > h3:first-child,
[class*="col-"] > h4:first-child {
margin-top: 0;
}
/* Block headline — underlined heading with dotted rule */
.headline {
display: block;
margin: 10px 0 25px 0;
border-bottom: 1px dotted #a7a9ac;
}
.headline h2, .headline h3 {
margin: 0 0 -2px 0;
padding-bottom: 5px;
display: inline-block;
font-weight: 700;
border-bottom: 2px solid #eaeec5;
bottom: .5px;
position: relative;
}
.headline h2 {
font-size: var(--icf-h2);
}
main .headline h2, main .headline h3 {
margin-top: 30px;
}
.container > .headline:first-child {
margin-top: 0;
}
.container > .headline:first-child h2,
.container > .headline:first-child h3 {
margin-top: 0;
}
/* =====================================================================
ACCESSIBILITY
===================================================================== */
#skiptocontent a {
padding: 6px;
position: absolute;
top: -100px;
left: 0px;
color: white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-bottom-right-radius: 8px;
background: #000;
transition: top 1s ease-out, background 1s linear;
z-index: 10000000;
}
#skiptocontent a:focus {
position: absolute;
left: 0px;
top: 0px;
box-shadow: 0 0 2px 3px var(--icf-focus);
background-color: #fff !important;
color: #2a2a2a !important;
outline: 0;
transition: top .1s ease-in, background .5s linear;
}
/* =====================================================================
CONTENT
===================================================================== */
/* Component page intro callout */
.icf-intro-callout {
background: #fffbeb;
border: 1px solid #f0e4b8;
border-radius: 8px;
padding: 1rem 1.25rem;
color: #5a4e2f;
line-height: 1.6;
}
.icf-intro-callout i {
color: #d4a017;
margin-right: 6px;
}
/* Default photo styling in main content */
main img {
border-radius: 0;
box-shadow: none;
}
/* Placeholder for pending photos */
.icf-coming-soon {
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
color: #6c757d;
font-style: italic;
font-size: 1.1rem;
}
/* Content photos in row/col layouts: safety cap for pathologically tall
photos only. 900px is the minimum that lets every in-spec photo at
every breakpoint render at natural aspect ratio without cropping:
- Small/Medium/Large landscape all render under 450px tall at
mobile stacked full width (666 px container → 444 tall at 3:2)
- Small portrait renders 888 tall at mobile stacked (666 × 4/3)
- Medium portrait also renders 888 tall at mobile stacked
Photos that exceed 900 tall after width scaling get shrunk
proportionally by the browser (no crop, no aspect distortion) —
this is the visible signal that a photo is out of spec and should
be re-exported to the size standards on /photos. */
.icf-block .row img.img-fluid,
.icf-section .row img.img-fluid {
max-height: 900px;
}
/* Legacy opt-out kept as a no-op defensive class: the 900px cap
doesn't affect any in-spec photo, but .icf-photo-natural can still
be used to explicitly disable the cap on specific images without
changing visual rendering. */
.icf-block .row img.icf-photo-natural,
.icf-section .row img.icf-photo-natural {
max-height: none;
}
/* Portrait display-width caps. Apply to the .position-relative
wrapper (not the img) so the photo caption overlay stays tight to
the image. Below 992px the wrapper expands to full column width
(portrait caps only apply on desktop). Sizes match the rendered
headshots on the /about board grid; Small is ~30% smaller than
Large for inline / secondary use. See /photos for reference. */
@media (min-width: 992px) {
.icf-photo-portrait-small {
max-width: 170px;
margin-left: auto;
margin-right: auto;
}
.icf-photo-portrait-large {
max-width: 240px;
margin-left: auto;
margin-right: auto;
}
}
/* Override: remove shadow when not wanted */
.img-plain, .img-plain img {
box-shadow: none;
}
/* Main content links */
main a, main a:active, main p a, main li a {
color: #7d1c49;
text-decoration: underline;
}
main a:hover {
text-decoration: none;
}
/* External link, PDF, and Word document icons (auto-added by link-icons.js) */
a .bi-box-arrow-up-right,
a .bi-file-earmark-pdf,
a .bi-file-earmark-word {
text-decoration: none !important;
display: inline-block;
margin-left: 4px;
font-size: 0.85em;
-webkit-text-stroke: 0.3px;
}
a .bi-file-earmark-pdf { color: #c0392b; } /* PDF red */
a .bi-file-earmark-word { color: #2b579a; } /* MS Word blue */
/* Buttons and quicklinks: icon inherits text color and size */
.btn-icf [class*="bi-"],
.btn-icf-inverse [class*="bi-"],
.icf-quicklink [class*="bi-"] {
color: inherit;
font-size: inherit;
margin-left: 5px;
-webkit-text-stroke: 0.3px;
}
/* Tighten spacing between paragraph and following list (proximity) */
main p + ul,
main p + ol {
margin-top: -0.75rem;
}
/* List bullets
---
Bullet indent uses MARGIN-LEFT on the li (not padding-left) so that
any page-level "padding: X 0" shorthand on a .xyz li rule CANNOT
collapse the bullet gutter. Historical bug: using padding-left here
meant every page that set "padding: 0.25rem 0" to adjust vertical
list rhythm accidentally wiped the bullet space, causing bullet and
text to overlap. Do NOT revert to padding-left without also locking
it down with !important or a more specific selector chain.
To OPT OUT of the custom bullet on a specific list, add its class to
the suppression rule below (matches .icf-member-list, .icf-donor-list
et al). Inline `style="list-style: none"` is also honored. */
main ul,
main ol {
padding-left: 0;
list-style-position: inside;
}
main li {
line-height: 1.35;
margin-bottom: 5px;
}
main li:last-child {
margin-bottom: 0;
}
main ul li {
list-style: none;
margin-left: 1.2em;
position: relative;
}
main ul li::before {
content: "\2022";
color: #ae1f65;
position: absolute;
left: -1em;
}
/* Suppress custom bullets on intentionally unstyled lists */
main .icf-member-list li::before,
main .icf-donor-list li::before,
main .blog-sidebar-list li::before,
main .icf-error-links li::before,
main .icf-fund-accordion li::before,
main .icf-timeline li::before,
main .icf-timeline-alt li::before,
main .icf-timeline-horiz li::before,
main ul[style*="list-style: none"] li::before {
/* content: none stays off — but .icf-timeline* variants re-declare
their own ::before later in the cascade, so this is just the
default-off position before custom markers replace it. */
content: none;
}
/* Suppression / custom-marker lists also need their margin-left reset
so the row hugs the left edge (no phantom bullet gutter, and custom
markers like the timeline spine line up correctly). */
main .icf-member-list li,
main .icf-donor-list li,
main .blog-sidebar-list li,
main .icf-error-links li,
main .icf-fund-accordion li,
main .icf-timeline li,
main .icf-timeline-alt li,
main .icf-timeline-horiz li {
margin-left: 0;
}
/* =====================================================================
BUTTONS
===================================================================== */
/* Primary button — white border default (visible against burgundy bg).
Hover: burgundy border on light bgs, white on dark bgs. */
.btn-icf,
.btn-icf-outline {
display: inline-flex;
align-items: center;
padding: 14px 32px;
background-color: #7d1c49;
color: #fff;
border: 2px solid white;
border-radius: 0;
font-family: 'Inter', sans-serif;
font-size: var(--icf-btn);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
cursor: pointer;
min-height: 44px;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-icf:hover, .btn-icf:active, .btn-icf:focus,
.btn-icf-outline:hover, .btn-icf-outline:active, .btn-icf-outline:focus {
background-color: var(--icf-moss-light);
color: #1d3b3b;
border-color: #1d3b3b;
text-decoration: none;
}
/* Content-area buttons: smaller by default (heroes/quicklinks/footer stay full size) */
.icf-block .btn-icf,
.icf-block .btn-icf-outline,
.icf-accordion-panel .btn-icf,
.icf-accordion-panel .btn-icf-outline {
padding: 10px 18px 8px;
min-height: auto;
}
/* Override: force full-size button in content areas when needed */
.btn-icf-lg {
padding: 14px 32px;
}
/* Legacy smaller class (used on grantee-toolkit) */
.btn-icf-smaller {
padding: 10px 20px;
}
@media (max-width: 550px) {
.btn-icf-outline { font-size: var(--icf-btn-sm); padding: 12px 24px; }
}
/* Inverse button: Moss 20% bg + Evergreen border/text → Rose 100% bg + white text on hover */
.btn-icf-inverse {
display: inline-flex;
align-items: center;
padding: 14px 32px;
background-color: var(--icf-moss-light);
color: #1d3b3b;
border: 2px solid #1d3b3b;
border-radius: 0;
font-family: 'Inter', sans-serif;
font-size: var(--icf-btn);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
cursor: pointer;
min-height: 44px;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-icf-inverse:hover, .btn-icf-inverse:active, .btn-icf-inverse:focus {
background-color: var(--icf-burgundy);
color: #fff;
border-color: var(--icf-burgundy);
text-decoration: none;
}
/* Buttons on evergreen backgrounds: white border */
.icf-bg-evergreen .btn-icf,
.icf-bg-evergreen .btn-icf-outline {
border-color: white;
}
.icf-bg-evergreen .btn-icf:hover,
.icf-bg-evergreen .btn-icf:active,
.icf-bg-evergreen .btn-icf:focus {
border-color: white;
}
/* Buttons on burgundy/alpine: auto-inverse (no rose on rose, no rose on alpine) */
.icf-bg-burgundy .btn-icf,
.icf-bg-alpine .btn-icf,
.icf-banner-text.icf-bg-burgundy .btn-icf,
.icf-banner-text.icf-bg-alpine .btn-icf {
background-color: var(--icf-mint);
color: #1d3b3b;
border-color: #1d3b3b;
}
.icf-bg-burgundy .btn-icf:hover,
.icf-bg-burgundy .btn-icf:active,
.icf-bg-burgundy .btn-icf:focus,
.icf-bg-alpine .btn-icf:hover,
.icf-bg-alpine .btn-icf:active,
.icf-bg-alpine .btn-icf:focus,
.icf-banner-text.icf-bg-burgundy .btn-icf:hover,
.icf-banner-text.icf-bg-burgundy .btn-icf:active,
.icf-banner-text.icf-bg-burgundy .btn-icf:focus,
.icf-banner-text.icf-bg-alpine .btn-icf:hover,
.icf-banner-text.icf-bg-alpine .btn-icf:active,
.icf-banner-text.icf-bg-alpine .btn-icf:focus {
background-color: var(--icf-moss-light);
color: #1d3b3b;
border-color: #1d3b3b;
text-decoration: none;
}
/* =====================================================================
COLOR UTILITIES
===================================================================== */
.icf-yellow {
color: #986301;
}
/* =====================================================================
HERO COMPONENT
Variants: 4-photo, 3-photo, full-width photo, single photo, text-only
===================================================================== */
/* --- Grid: text + photos side by side on desktop --- */
.icf-hero-grid {
display: grid;
grid-template-columns: 1fr;
}
.icf-hero-text {
background-color: var(--icf-moss-light);
padding: 3rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.icf-hero-text h1 {
font-size: var(--icf-h1);
line-height: 1.1;
margin-bottom: 1.5rem;
}
.icf-hero-text p,
.icf-hero-text li {
font-size: 20px;
}
/* --- Photo grid shared --- */
.icf-hero-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: max(280px, 35vw);
position: relative;
}
/* Optional photo caption overlay */
.icf-hero-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 6px 10px;
background: #496262;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-style: italic;
line-height: 1.3;
}
/* Underline accent (pen stroke SVG) */
.icf-hero-accent {
text-decoration: none;
}
/* 4-photo: 2x2 grid */
.icf-hero-photos-4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
}
/* 3-photo: 1 tall left + 2 stacked right */
.icf-hero-photos-3 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
}
.icf-hero-photos-3 .icf-hero-img-tall {
grid-row: 1 / -1;
}
/* --- Quick links bar --- */
.icf-hero-links {
padding: 1.5rem 0;
}
.icf-hero-links-grid {
display: grid;
gap: 0.75rem;
}
.icf-hero-links-4 {
grid-template-columns: 1fr 1fr;
}
.icf-hero-links-3 {
grid-template-columns: 1fr;
}
.icf-hero-link {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px 32px;
background-color: var(--icf-burgundy);
color: #fff;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: var(--icf-btn);
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
border: 2px solid white;
border-radius: 0;
cursor: pointer;
min-height: 56px;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.icf-hero-link:hover, .icf-hero-link:active, .icf-hero-link:focus {
background-color: var(--icf-moss-light);
color: var(--icf-burgundy);
border-color: white;
}
/* --- Full-width photo hero --- */
.icf-hero-fullwidth {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
display: flex;
align-items: flex-end;
}
/* Option A: inline span background per line */
.icf-hero-inline-bg span {
background-color: rgba(29, 59, 59, 0.92);
color: #fff;
padding: 0.15em 0.4em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.icf-hero-inline-bg {
line-height: 1.5;
}
h1.icf-hero-inline-bg {
font-size: var(--icf-h2);
margin-bottom: 0.5rem;
}
h1.icf-hero-inline-bg span {
font-size: inherit;
}
p.icf-hero-inline-bg {
font-size: 18px;
max-width: 600px;
}
/* Option B: solid background box on top of photo */
.icf-hero-fullwidth-textbox {
background-color: rgba(29, 59, 59, 0.92);
padding: 2rem 2.5rem;
margin-bottom: 2rem;
max-width: 600px;
}
.icf-hero-fullwidth-textbox h1 {
font-size: var(--icf-h2);
line-height: 1.15;
color: #fff;
margin-bottom: 0.5rem;
}
.icf-hero-fullwidth-textbox p {
font-size: 18px;
color: #fff;
}
.icf-hero-fullwidth-textbox p:last-child {
margin-bottom: 0;
}
/* Option B: solid band below photo */
.icf-hero-fullwidth-band {
padding: 2.5rem 0;
}
.icf-hero-fullwidth-band h1 {
font-size: var(--icf-h1);
line-height: 1.1;
margin-bottom: 0.75rem;
}
.icf-hero-fullwidth-band p {
font-size: 20px;
max-width: 700px;
}
/* --- Text-only hero (colored background) --- */
.icf-hero-textonly {
padding: 4rem 0;
}
.icf-hero-textonly h1 {
font-size: var(--icf-h1);
line-height: 1.1;
margin-bottom: 0.75rem;
}
.icf-hero-textonly p {
font-size: 20px;
max-width: 700px;
margin-bottom: 0;
}
/* --- Video hero: text + embedded video side by side --- */
.icf-hero-video-wrap {
background-color: #000;
align-self: center;
}
/* --- Desktop: side-by-side layout --- */
@media (min-width: 992px) {
.icf-hero-grid {
grid-template-columns: 1fr 1fr;
min-height: 500px;
}
.icf-hero-text {
padding: 2.5rem 3rem;
overflow: visible;
}
.icf-hero-img {
min-height: 0;
}
.icf-hero-links-4 {
grid-template-columns: repeat(4, 1fr);
}
.icf-hero-links-3 {
grid-template-columns: repeat(3, 1fr);
}
.icf-hero-fullwidth {
min-height: 400px;
}
}
/* =====================================================================
LAYOUT: QUOTES
===================================================================== */
.icf-quotes {
display: grid;
grid-template-columns: 280px 1fr;
gap: 1.5rem;
align-items: start;
margin: 40px auto 10px;
}
.icf-quotes h3 {
margin-bottom: 0px;
color: #1d3b3b;
}
.icf-quotes-photo img {
width: 280px;
height: auto;
margin-top: 15px;
}
.icf-quotes-text h3 {
color: #1d3b3b;
}
@media (max-width: 767px) {
.icf-quotes {
grid-template-columns: 1fr;
text-align: center;
}
.icf-quotes-photo img {
width: 200px;
height: auto;
}
}
/* =====================================================================
VIDEO EMBED
===================================================================== */
.icf-embed-video {
position: relative;
padding-top: 56.25%;
height: 0;
overflow: hidden;
border: 1px solid #ccc;
}
.icf-embed-video iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
/* =====================================================================
TESTIMONIAL SLIDER
===================================================================== */
.testimonial-slider {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.testimonial-slider-inner {
display: flex;
align-items: center;
position: relative;
}
.testimonial-slides {
flex: 1;
display: grid;
overflow: hidden;
align-items: start;
}
.testimonial-slide {
grid-area: 1 / 1;
width: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.testimonial-slide.active {
visibility: visible;
opacity: 1;
}
.testimonial-nav {
background: rgba(29,59,59,0.1);
border: none;
color: #1d3b3b;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.testimonial-nav:hover {
background: #1d3b3b;
color: #fff;
}
.testimonial-nav:focus-visible {
outline-offset: 0;
}
.testimonial-prev { margin-right: 15px; }
.testimonial-next { margin-left: 15px; }
.testimonial-pagination {
display: flex;
justify-content: center;
gap: 0;
margin-top: 0;
}
.testimonial-dot {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
position: relative;
transition: background-color 0.2s;
}
.testimonial-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #1d3b3b;
background: transparent;
transition: background-color 0.2s;
}
.testimonial-dot:hover::after {
background: rgba(29,59,59,0.3);
}
.testimonial-dot.active::after {
background: #1d3b3b;
}
.testimonial-dot:focus-visible {
outline-offset: 0;
}
@media (max-width: 767px) {
.testimonial-slides { display: block; }
.testimonial-slide { display: none; visibility: visible; opacity: 1; }
.testimonial-slide.active { display: block; }
.testimonial-nav { width: 36px; height: 36px; }
.testimonial-prev { margin-right: 10px; }
.testimonial-next { margin-left: 10px; }
}
@media (max-width: 500px) {
.testimonial-slider-inner { flex-wrap: wrap; }
.testimonial-slides { order: 1; width: 100%; }
.testimonial-nav { width: 40px; height: 40px; }
.testimonial-prev { order: 2; margin: 15px 10px 0 0; }
.testimonial-next { order: 3; margin: 15px 0 0 10px; }
.testimonial-pagination { order: 4; width: 100%; }
}
/* BS5 modals: raise above sticky header (z-index: 9999) */
.modal { z-index: 10000; --bs-modal-padding: 2rem; }
.modal-backdrop { z-index: 9999; }
/* =====================================================================
FOCUS STYLES
Yellow ring on keyboard focus only. Mouse clicks don't trigger.
===================================================================== */
*:focus {
outline: none;
}
*:focus-visible {
outline: 3px solid var(--icf-focus);
outline-offset: 2px;
}
/* =====================================================================
SECTION BACKGROUNDS
One class per background. Dark ones set white text.
Usage: default bottom margin */
}
.icf-stat-label {
font-size: 15px;
line-height: 1.4;
margin-top: 0.25rem;
margin-bottom: 0;
}
/* =====================================================================
CONTENT UTILITIES
===================================================================== */
/* --- Decorative graphic (SVG centering for use in BS5 columns) --- */
.icf-content-graphic {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
.icf-content-graphic img {
max-width: 200px;
}
.icf-content-graphic img.img-full {
max-width: 100%;
}
/* --- Photo caption overlay (matches hero caption style) --- */
.icf-photo-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 6px 10px;
background: #496262;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-style: italic;
line-height: 1.3;
text-align: left;
}
/* --- Ruled separator above section --- */
.icf-section-ruled {
border-top: 1px solid #ccc;
}
/* =====================================================================
SECTION BANNERS — Full-width photo + text break sections
Variants: overlay (text over photo), split-left, split-right
===================================================================== */
/* --- Shared banner base --- */
.icf-banner {
display: grid;
grid-template-columns: 1fr;
min-height: 280px;
}
/* --- Banner text block --- */
.icf-banner-text {
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.icf-banner-text h2 {
font-family: var(--icf-serif);
font-style: italic;
margin-bottom: 1rem;
}
.icf-banner-text p {
font-size: 18px;
}
.icf-banner-text p:last-child {
margin-bottom: 0;
}
/* --- Banner photo (used in split variants) --- */
.icf-banner-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 240px;
position: relative;
}
.icf-banner-img .icf-hero-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
/* --- Variant: full-width photo with overlay text --- */
.icf-banner-overlay {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 320px;
display: flex;
align-items: center;
}
.icf-banner-overlay .icf-banner-text {
position: relative;
z-index: 1;
max-width: 560px;
margin-left: auto;
color: #fff;
padding: 2.5rem 2rem;
}
.icf-banner-overlay .icf-banner-text h2 {
color: #fff;
}
.icf-banner-overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
/* Overlay color modifiers */
.icf-banner-overlay.icf-overlay-burgundy::before {
background-color: rgba(125, 27, 73, 0.8);
}
.icf-banner-overlay.icf-overlay-evergreen::before {
background-color: rgba(29, 59, 59, 0.8);
}
.icf-banner-overlay.icf-overlay-alpine::before {
background-color: rgba(26, 94, 138, 0.8);
}
/* --- Split variants: color + text on one side, photo on the other --- */
/* Split colors (text block inherits section background color) */
.icf-banner .icf-banner-text.icf-bg-evergreen,
.icf-banner .icf-banner-text.icf-bg-burgundy {
color: #fff;
}
.icf-banner .icf-banner-text.icf-bg-alpine {
color: #000;
}
.icf-banner .icf-banner-text.icf-bg-evergreen h2,
.icf-banner .icf-banner-text.icf-bg-burgundy h2 {
color: #fff;
}
.icf-banner .icf-banner-text.icf-bg-alpine h2 {
color: #000;
}
/* Banner buttons inherit dark bg rules from .icf-bg-* on .icf-banner-text */
/* Desktop: side-by-side layout */
@media (min-width: 992px) {
.icf-banner {
grid-template-columns: 1fr 1fr;
min-height: 360px;
}
.icf-banner-text {
padding: 3rem;
}
.icf-banner-img {
min-height: 0;
}
/* Photo right (default): text first, photo second */
/* Photo left: photo first, text second */
.icf-banner-photo-left .icf-banner-img {
order: -1;
}
/* Overlay: text positioned over right half */
.icf-banner-overlay {
min-height: 420px;
}
.icf-banner-overlay .icf-banner-text {
padding: 3rem;
}
}
/* =====================================================================
ACCORDION — Vertical tabs (sidebar nav + content panel)
Desktop: left nav + right content. Mobile: stacked.
===================================================================== */
/* --- Section wrapper --- */
.icf-accordion {
padding: 0 0 2.5rem;
}
.icf-accordion-heading {
margin-top: 2rem;
margin-bottom: 0.75rem;
}
/* --- Body: holds nav + panels --- */
.icf-accordion-body {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
border-top: 2px solid #1d3b3b;
}
/* --- Nav: stacked buttons --- */
.icf-accordion-nav {
display: flex;
flex-direction: column;
gap: 0;
padding-top: 1.5rem;
}
.icf-accordion-tab {
position: relative;
overflow: visible;
display: block;
width: 100%;
text-align: left;
padding: 0.85rem 1.25rem;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
border: none;
border-bottom: 1px solid #ddd;
background-color: transparent;
color: #1d3b3b;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.icf-accordion-tab:hover {
background-color: #f0f0f0;
}
.icf-accordion-tab.active {
background-color: var(--icf-burgundy);
color: #fff;
border-bottom-color: var(--icf-burgundy);
border-right: 3px solid var(--icf-burgundy);
}
/* --- Panels container: stack all panels in same cell --- */
.icf-accordion-panels {
position: relative;
display: grid;
}
/* --- Panels --- */
.icf-accordion-panel {
padding: 1.5rem 1.5rem 1.5rem 2rem;
display: none;
}
.icf-member-list {
list-style: none;
padding-left: 0;
}
.icf-accordion-panel.active {
display: block;
}
.icf-accordion-panel > *:first-child,
.icf-text-accordion-inner > *:first-child {
margin-top: 0;
}
.icf-accordion-panel h3,
.icf-text-accordion-inner h3 {
margin-top: 0;
margin-bottom: 0.25rem;
letter-spacing: 0;
font-size: var(--icf-h4);
}
.icf-accordion-panel p,
.icf-text-accordion-inner p {
margin-bottom: 0.6rem;
}
.icf-accordion-panel hr,
.icf-text-accordion-inner hr {
border: none;
border-top: 1px solid #888;
margin: 0.75rem 0;
}
/* Auto-separator between fund groups (no
needed) */
.icf-accordion-panel h3 ~ h3,
.icf-text-accordion-inner > h3 ~ h3 {
border-top: 1px solid #888;
padding-top: 1rem;
margin-top: 1rem;
}
/* When funds are wrapped in article or div elements */
.icf-text-accordion-inner > .fund-entry + .fund-entry,
.icf-text-accordion-inner > .fund-item + .fund-item {
border-top: 1px solid #888;
padding-top: 1rem;
margin-top: 1rem;
}
.icf-accordion-panel > *:last-child,
.icf-text-accordion-inner > *:last-child {
margin-bottom: 0;
}
/* Photos inside accordion panels */
.icf-accordion-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1.25rem;
}
.icf-accordion-photos img {
width: 100%;
height: auto;
display: block;
}
.icf-accordion-photo-inline {
float: right;
width: 45%;
height: auto;
margin: 0 0 1rem 1.25rem;
}
/* --- Desktop: side-by-side layout --- */
@media (min-width: 992px) {
.icf-accordion-body {
grid-template-columns: 1fr 2fr;
gap: 0;
align-items: start;
}
.icf-accordion-nav {
position: relative;
z-index: 1;
}
.icf-accordion-tab {
font-size: 13px;
padding: 0.75rem 1.1rem;
}
.icf-accordion-panel {
padding: 1.5rem 2rem 1.5rem 3rem;
display: none;
}
.icf-accordion-panel.active {
display: block;
}
.icf-accordion-tab.active::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -26px;
width: 24px;
height: calc(100% + 2px);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 204' preserveAspectRatio='none'%3E%3Cpath fill='%237d1c49' d='M0,0 L0,204 L105,110.9 C110.2,106.2,110.2,98,105,93.2 L0,0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
z-index: 2;
}
}
/* =====================================================================
TEXT ACCORDION — FAQ-style expand/collapse
Click a question to reveal the answer. One item open at a time.
===================================================================== */
.icf-text-accordion {
margin-top: 0;
}
.icf-text-accordion-item {
background: #fff;
border: 1px solid #ccc;
border-top: none;
}
.icf-text-accordion-item:first-child {
border-top: 1px solid #ccc;
}
.icf-text-accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 1.5rem;
font-family: 'Inter', sans-serif;
font-size: var(--icf-h4);
font-weight: 700;
color: var(--icf-burgundy);
text-align: left;
background: #f5f5f5;
border: none;
cursor: pointer;
transition: color 0.2s, background-color 0.2s;
}
.icf-text-accordion-item.active > .icf-text-accordion-trigger {
padding-bottom: 1rem;
border-bottom: 1px solid #ddd;
}
.icf-text-accordion-trigger:hover {
color: #1d3b3b;
}
/* Plus/minus indicator */
.icf-text-accordion-trigger::after {
content: '+';
flex-shrink: 0;
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
font-weight: 300;
line-height: 1;
margin-left: 1rem;
color: var(--icf-burgundy);
}
.icf-text-accordion-item.active > .icf-text-accordion-trigger::after {
content: '\2013';
}
/* Content panel — animated with grid-template-rows */
.icf-text-accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.icf-text-accordion-item.active > .icf-text-accordion-content {
grid-template-rows: 1fr;
}
.icf-text-accordion-inner {
overflow: hidden;
padding: 0 1.5rem;
transition: padding 0.3s ease;
}
.icf-text-accordion-item.active > .icf-text-accordion-content > .icf-text-accordion-inner {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.icf-text-accordion-content p:last-child {
margin-bottom: 0;
}
/* Region-level variant (burgundy headers) */
.region-level > .icf-text-accordion-trigger {
background: #7d1c49; color: #fff;
font-family: 'Lora', serif; font-weight: 700;
}
.region-level > .icf-text-accordion-trigger:hover {
background: #5e1537; color: #fff;
}
.region-level > .icf-text-accordion-trigger::after { color: #fff; }
.region-level.active > .icf-text-accordion-trigger {
border-bottom-color: #7d1c49;
}
.region-level[id] { scroll-margin-top: 120px; }
/* Vertical timeline */
.icf-timeline {
list-style: none;
position: relative;
margin: 2rem 0;
padding: 0 0 0 2rem;
}
.icf-timeline::before {
content: '';
position: absolute;
left: 5px;
top: 10px;
bottom: 10px;
width: 3px;
background: var(--icf-burgundy);
}
.icf-timeline li {
position: relative;
padding: 0 0 1.25rem 0;
}
.icf-timeline li:last-child {
padding-bottom: 0;
}
.icf-timeline li::before {
content: '';
position: absolute;
left: -2rem;
top: 4px;
width: 13px;
height: 13px;
background: var(--icf-burgundy);
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--icf-burgundy);
z-index: 1;
}
.icf-timeline li strong {
color: var(--icf-burgundy);
}
/* =====================================================================
QUICK LINKS COMPONENT
Variants: 4-across, 3-across, 2x4, 2x3, text+2x2, 1-wide+2-below
===================================================================== */
/* --- Section wrapper --- */
.icf-quicklinks {
padding: 2rem 0;
}
/* --- Shared grid --- */
.icf-quicklinks-grid {
display: grid;
gap: 0.75rem;
}
/* --- Individual link button --- */
/* Quick links are always on dark backgrounds, so white default border.
Hover always shows burgundy border (button itself turns light). */
.icf-quicklink {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px 32px;
background-color: var(--icf-burgundy);
color: #fff;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: var(--icf-btn);
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
border: 2px solid white;
border-radius: 0;
min-height: 56px;
line-height: 1.3;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.icf-quicklink:hover, .icf-quicklink:active, .icf-quicklink:focus {
background-color: var(--icf-moss-light);
color: #1d3b3b;
border-color: white;
text-decoration: none;
}
.icf-quicklink:focus-visible {
outline-offset: 0;
}
/* Alpine/burgundy backgrounds: moss button instead of burgundy */
.icf-bg-alpine .icf-quicklink,
.icf-bg-burgundy .icf-quicklink,
.icf-quicklinks-split .icf-quicklink {
background-color: var(--icf-mint);
color: #1d3b3b;
border-color: #1d3b3b;
}
.icf-bg-alpine .icf-quicklink:hover,
.icf-bg-alpine .icf-quicklink:active,
.icf-bg-alpine .icf-quicklink:focus,
.icf-bg-burgundy .icf-quicklink:hover,
.icf-bg-burgundy .icf-quicklink:active,
.icf-bg-burgundy .icf-quicklink:focus,
.icf-quicklinks-split .icf-quicklink:hover,
.icf-quicklinks-split .icf-quicklink:active,
.icf-quicklinks-split .icf-quicklink:focus {
background-color: var(--icf-moss-light);
color: #1d3b3b;
border-color: #1d3b3b;
text-decoration: none;
}
/* --- 4-across: 2 cols mobile, 4 cols desktop --- */
.icf-quicklinks-4 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* --- 3-across: 1 col mobile, 3 cols desktop --- */
.icf-quicklinks-3 {
grid-template-columns: minmax(0, 1fr);
}
/* --- 4x2 grid: 2 cols mobile, 4 cols desktop (8 items, wide) --- */
.icf-quicklinks-4x2 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* --- 2x4 grid: 1 col mobile, 2 cols desktop (8 items) --- */
.icf-quicklinks-2x4 {
grid-template-columns: minmax(0, 1fr);
}
/* --- 2x3 grid: 1 col mobile, 2 cols desktop (6 items) --- */
.icf-quicklinks-2x3 {
grid-template-columns: minmax(0, 1fr);
}
/* --- 2x2 grid (used inside text+grid layout): 1 col mobile, 2 cols desktop --- */
.icf-quicklinks-2x2 {
grid-template-columns: minmax(0, 1fr);
}
/* --- Text + 2x2 layout: stacked on mobile, side-by-side on desktop --- */
.icf-quicklinks-with-text {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.icf-quicklinks-intro h2 {
margin-top: 0;
margin-bottom: 0.75rem;
}
.icf-quicklinks-intro p {
font-size: 18px;
margin-bottom: 0;
}
/* --- Split background: two colors on text+grid layout --- */
/* Mobile: uses --split-left as single color (stacked content won't align with 50% split) */
/* Desktop: left/right gradient aligned with the 1fr 1fr grid */
/* Usage: