tags, so the last item is flagged server-side —
:last-of-type matched per tag and dropped mid-list dividers (86bbb9cuy). */
.fund-type-item--last {
border-bottom: none;
}
.fund-cta-btn {
margin-top: 20px;
}
/* ---- 11. Seasonal CTA ---- */
/* Background + side wedges are CSS-generated (not a baked image) so both colors
are controllable from the block's Colors tab via these custom properties. */
.seasonal-cta {
--seasonal-bg: var(--color-dusk);
--seasonal-shape: var(--color-plum);
padding: 80px 0;
background: var(--seasonal-bg);
text-align: center;
color: var(--color-white);
position: relative;
overflow: hidden;
}
/* Diagonal wedges on the left and right sides. */
.seasonal-cta::before,
.seasonal-cta::after {
content: "";
position: absolute;
inset: 0;
background: var(--seasonal-shape);
z-index: 0;
pointer-events: none;
}
.seasonal-cta::before {
clip-path: polygon(0 0, 3% 0, 20% 100%, 0 100%);
}
.seasonal-cta::after {
clip-path: polygon(97% 0, 100% 0, 100% 100%, 80% 100%);
}
/* Keep content above the wedges. */
.seasonal-cta .container {
position: relative;
z-index: 1;
}
.seasonal-cta h2 {
color: var(--color-white);
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
}
.seasonal-cta p {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
margin-bottom: 30px;
}
/* Seasonal CTA uses the shared button variants (its bespoke --seasonal-btn-*
properties were the prototype for the global token system). */
/* ---- 12. Challenger Banner ---- */
.challenger-banner {
padding: 40px 0;
background: var(--color-dark-pine);
}
.challenger-banner h3 {
color: var(--color-white);
font-size: 36px;
font-weight: 700;
margin: 0;
}
/* No block-scoped repaint of .theme_btn_bg here: this banner sits on Dark Pine,
but "default to Light" is now the ACF field's default_value (fields.php), not a
CSS override. The override silently turned an editor's explicit "Primary
(filled)" pick back into the Light button — ClickUp 86bancu4f. */
/* Outline on this dark panel reads white rather than red. */
.challenger-banner .theme_btn.theme_btn3 {
--btn-text: var(--color-white);
--btn-border: var(--color-white);
--btn-icon: var(--color-white);
--btn-hover-bg: var(--color-white);
--btn-hover-text: var(--color-graphite);
}
/* ---- 12b. Tin Cup Challenge Banner ---- */
.tcc-banner {
position: relative;
padding: 36px 0;
background: #f0b94a;
overflow: hidden;
}
.tcc-banner__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.tcc-banner__content {
flex: 1 1 auto;
text-align: left;
}
.tcc-banner__cta {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 28px;
}
.tcc-banner__media {
flex: 0 0 auto;
}
.tcc-banner__media img {
display: block;
width: 150px;
max-width: 100%;
height: auto;
}
.tcc-banner__heading {
font-family: var(--font-heading);
color: var(--color-graphite);
font-size: 64px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.3px;
margin: 0 0 16px;
}
.tcc-banner__content p {
color: var(--color-graphite);
font-size: 18px;
line-height: 1.6;
margin: 0;
}
/* Button uses the site's default orange theme_btn styling (matches the hero buttons) */
/* Tablet + mobile: stack so the content gets full width (container is narrow here) */
@media (max-width: 991px) {
.tcc-banner {
padding: 30px 0;
}
.tcc-banner__inner {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.tcc-banner__content {
max-width: 100%;
}
.tcc-banner__heading {
font-size: 48px;
}
.tcc-banner__cta {
justify-content: flex-start;
gap: 30px;
}
.tcc-banner__media img {
width: 140px;
}
}
@media (max-width: 575px) {
.tcc-banner__heading {
font-size: 36px;
}
.tcc-banner__cta {
gap: 16px;
}
.tcc-banner__media img {
width: 100px;
}
}
/* ---- 14. Footer Overrides ---- */
.cftv-footer {
background: var(--color-graphite) !important;
}
.cftv-footer .widget_address__icon i {
color: var(--color-primary) !important;
font-size: 22px !important;
}
.cftv-footer .footer-social {
text-align: left;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.cftv-footer .footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-clay);
color: var(--color-graphite) !important;
font-size: 18px !important;
margin: 0 !important;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.cftv-footer .footer-social a:hover,
.cftv-footer .footer-social a:focus {
background: var(--color-poppy);
color: var(--color-graphite) !important;
transform: translateY(-2px);
}
.cftv-footer .fot-list li a i {
color: var(--color-primary) !important;
font-size: 14px !important;
}
.cftv-footer .copy-right-area {
background: var(--color-graphite) !important;
border-radius: 0;
}
.cftv-footer .footer-logo img {
max-height: 75px;
width: 100%;
max-width: 300px;
height: auto;
object-fit: contain;
}
.cftv-footer .footer__widget h4 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-newsletter {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 25px 0;
margin-top: 40px;
text-align: center;
}
.footer-newsletter label {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #ccc;
margin-right: 15px;
}
.footer-newsletter .newsletter-form {
display: inline-flex;
gap: 0;
}
.footer-newsletter input[type="email"] {
padding: 10px 20px;
font-size: 13px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ccc;
border-radius: var(--radius-btn) 0 0 var(--radius-btn);
min-width: 250px;
}
.footer-newsletter input[type="email"]::placeholder {
color: #999;
}
.footer-newsletter button {
padding: 10px 25px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
background: var(--color-primary);
color: var(--color-white);
border: 1px solid var(--color-primary);
border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
cursor: pointer;
transition: background 0.3s ease;
}
.footer-newsletter button:hover {
background: var(--color-plum);
border-color: var(--color-plum);
}
.footer-ein {
font-size: 11px;
color: #777;
text-align: center;
padding: 10px 0 0;
}
/* ---- 15. Page Hero ---- */
.page-hero {
position: relative;
background: var(--color-plum);
overflow: hidden;
padding: 60px 0;
text-align: center;
}
.page-hero__diagonal {
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background: var(--color-pine);
clip-path: polygon(100% 0, 100% 100%, 40% 100%);
}
.page-hero__content {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
}
.page-hero__heading {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
margin-bottom: 15px;
}
.page-hero__text {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: var(--color-white);
}
/* ---- 16. Content Split ---- */
.content-split {
display: flex;
align-items: stretch;
}
.content-split--reverse {
flex-direction: row-reverse;
}
.content-split__image {
width: 50%;
min-width: 50%;
overflow: hidden;
position: relative;
}
.content-split__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* Image caption overlay */
.content-split__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 14px 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
font-style: italic;
line-height: 1.5;
z-index: 1;
}
/* Wide screens (ClickUp 86bbtxu2m): the photo used to be cropped to
whatever height the text column produced, so on 1920px+ monitors the
960px-wide image lost ~180px top and bottom (heads cut off). Each block now
carries its own photo ratio (--cs-ratio from the image dimensions, set in
render.php); the column can't be shorter than that, so the whole photo
shows and the text centres beside it. Text-heavy blocks still stretch taller
and use the (mild) cover crop as before. Not for logo/badge variants. */
@media (min-width: 768px) {
.content-split__image:not(.content-split__image--contain):not(.content-split__image--badge) {
aspect-ratio: var(--cs-ratio, 4 / 3);
}
}
/* Image vertical alignment modifiers */
.content-split__image--top img {
/* Not 0%: keeps a little headroom above faces in portrait photos while
still favoring the top of the image (86bbba1vx). */
object-position: center 18%;
}
/* Mission & Vision swim-lesson photo (86bbba1vx round 3): the instructor's
hair starts ~7% into the frame and the child's chin sits at ~45%, so the
18% "top" anchor clips the hair on desktop widths. Tighter 8% anchor keeps
the hair; the aspect-ratio floor stops the short text column from squeezing
the crop window below the hair-to-chin span on very wide screens (the
mobile stack keeps the global 5/4 ratio). */
#priorities .content-split__image--top img {
object-position: center 8%;
}
@media (min-width: 768px) {
#priorities .content-split__image {
aspect-ratio: 16 / 9;
}
}
.content-split__image--center img {
object-position: center center;
}
.content-split__image--bottom img {
object-position: center bottom;
}
.content-split__content {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 120px 80px;
background: var(--color-dusk);
}
.content-split__eyebrow {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--color-poppy);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
}
.content-split__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-white);
margin-bottom: 16px;
}
.content-split__list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.content-split__list li {
font-family: var(--font-body);
font-size: 18px;
color: var(--color-cirrus);
padding: 5px 0 5px 20px;
position: relative;
line-height: 1.5;
}
.content-split__list li a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.content-split__list li a:hover {
color: #fff;
}
.content-split__list li::before {
content: "—";
position: absolute;
left: 0;
color: var(--color-poppy);
}
.content-split__buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Light background modifier — dark text for readability */
.content-split__content--light-bg {
background: var(--color-cirrus);
}
.content-split__content--light-bg .content-split__eyebrow {
color: var(--color-dusk);
}
.content-split__content--light-bg .content-split__heading {
color: var(--color-graphite);
}
.content-split__content--light-bg .content-split__list li {
color: var(--color-graphite);
}
.content-split__content--light-bg .content-split__list li::before {
color: var(--color-dusk);
}
/* Rich-text body (WYSIWYG) — matches .content-split__text styling */
.content-split__richtext {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
color: var(--color-cirrus);
margin-bottom: 24px;
}
.content-split__richtext p,
.content-split__richtext ul,
.content-split__richtext ol {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
margin: 0 0 24px;
}
.content-split__richtext > :last-child {
margin-bottom: 0;
}
.content-split__richtext a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.content-split__content--light-bg .content-split__richtext {
color: var(--color-graphite);
}
/* Grant cycle table — borderless, left-aligned (dates-deadlines page) */
.grant-table-wrap {
overflow-x: auto;
margin: 0 0 24px;
}
.content-split__richtext .grant-table-wrap:last-child {
margin-bottom: 0;
}
.grant-table {
width: 100%;
border-collapse: collapse;
}
.grant-table th,
.grant-table td {
text-align: left;
border: 0;
padding: 6px 14px 6px 0;
white-space: nowrap;
}
.grant-table th:last-child,
.grant-table td:last-child {
padding-right: 0;
}
.grant-table th {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-white);
}
.grant-table td {
font-family: var(--font-body);
font-size: 16px;
color: var(--color-cirrus);
}
.grant-table td a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.grant-table td a:hover {
color: #fff;
}
.grant-table__dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
vertical-align: -1px;
}
.grant-table__dot--closed { background: #c0453f; }
.grant-table__dot--soon { background: #e0a92e; }
.grant-table__dot--open { background: #3e8e5a; }
/* ---- 17. Quick Links ---- */
.quick-links {
background: #fff;
padding: 80px 0;
text-align: center;
}
.quick-links__eyebrow {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
}
.quick-links__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 50px;
}
.quick-links__grid {
display: flex;
gap: 24px;
margin-top: 40px;
}
.quick-links__card {
flex: 1;
background: var(--color-graphite);
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: box-shadow 0.3s, transform 0.3s;
}
.quick-links__card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
.quick-links__card-image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.quick-links__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.quick-links__card:hover .quick-links__card-image img {
transform: scale(1.05);
}
.quick-links__card-bottom {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 20px 24px;
background: var(--color-graphite);
text-align: left;
position: relative;
flex: 1;
}
.quick-links__card-bottom::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 50px solid var(--color-poppy-dark);
border-left: 50px solid transparent;
}
.quick-links__card-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--color-white);
margin-bottom: 2px;
}
.quick-links__card-text {
font-family: var(--font-body);
font-size: 18px;
color: var(--color-white);
}
/* ---- 17b. Community Calendar ---- */
.community-calendar {
padding: 80px 0;
background: var(--color-white);
}
.community-calendar__header {
text-align: center;
margin-bottom: 40px;
}
.community-calendar__hosted-by {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-body);
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.community-calendar__hosted-by a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.community-calendar__hosted-by a:hover,
.community-calendar__hosted-by a:focus-visible {
color: var(--color-dusk);
}
.community-calendar__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-dark);
text-transform: uppercase;
margin-bottom: 10px;
}
.community-calendar__text {
font-size: 18px;
color: var(--color-body);
}
.community-calendar__embed {
overflow: hidden;
height: 800px;
}
.community-calendar__embed iframe {
width: 100%;
height: 1020px;
border: none;
margin-top: -120px;
}
@media (max-width: 767px) {
.community-calendar {
padding: 50px 0;
}
.community-calendar__heading {
font-size: 28px;
}
.community-calendar__embed {
height: 600px;
}
.community-calendar__embed iframe {
height: 820px;
}
}
/* ---- 17c. Iframe Embed (External Content) ---- */
.iframe-embed {
padding: 60px 0;
background: #fff;
}
@media (max-width: 767px) {
.iframe-embed {
padding: 30px 0;
}
}
/* ---- Past Reports ---- */
.past-reports {
padding: 40px 0 50px;
}
.past-reports__heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-dusk);
margin-bottom: 16px;
}
.past-reports__list {
list-style: none;
padding: 0;
margin: 0;
}
.past-reports__list li + li {
margin-top: 10px;
}
.past-reports__list a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-dark-pine);
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.past-reports__list a:hover {
color: var(--color-poppy);
}
.past-reports__list svg {
flex-shrink: 0;
}
/* ---- 18. CTA Banner ---- */
.cta-banner {
background: var(--color-dark-pine);
padding: 60px 0;
}
.cta-banner .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.cta-banner__content {
flex: 1;
}
.cta-banner__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-white);
margin-bottom: 0;
}
.cta-banner__heading span {
color: var(--color-poppy);
}
.cta-banner__text {
font-family: var(--font-body);
font-size: 18px;
color: var(--color-cirrus);
margin-top: 8px;
}
.cta-banner__action {
flex-shrink: 0;
}
/* ---- 19. Light Button (for colored backgrounds) ----
Defined as a token variant alongside Primary and Outline in section 1. */
/* ---- 18. Subpage Nav ---- */
.subpage-nav {
background: var(--color-white);
}
.subpage-nav__list {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.subpage-nav__list li a {
display: block;
padding: 16px 24px;
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--color-body);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 3px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.subpage-nav__list li a:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* ---- 20. Team Preview ---- */
.team-preview {
background: var(--color-sand);
padding: 80px 0;
text-align: center;
}
.team-preview__header {
max-width: 600px;
margin: 0 auto 50px;
}
.team-preview__eyebrow {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
display: block;
}
.team-preview__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 16px;
}
.team-preview__text {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
color: var(--color-body);
}
.team-preview__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.team-preview__card {
background: var(--color-white);
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.team-preview__card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.team-preview__card-image {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
}
.team-preview__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.team-preview__card:hover .team-preview__card-image img {
transform: scale(1.05);
}
.team-preview__card-info {
padding: 20px 16px;
}
.team-preview__card-name {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 4px;
}
.team-preview__card-role {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-body);
margin: 0;
}
.team-preview__action {
text-align: center;
}
/* Team Preview — dark modifier (e.g. Board of Directors) */
.team-preview--dark {
background: var(--color-graphite);
}
.team-preview--dark .team-preview__heading {
color: var(--color-white);
}
.team-preview--dark .team-preview__eyebrow {
color: var(--color-poppy);
}
.team-preview--dark .team-preview__text {
color: var(--color-cirrus);
}
/* ---- 21. Content Split Image Modifiers ---- */
.content-split__image--contain {
background: var(--color-sand);
display: flex;
align-items: center;
justify-content: center;
}
.content-split__image--contain img {
position: static;
width: 55%;
height: auto;
object-fit: contain;
}
.content-split__image--badge {
background: var(--color-sand);
display: flex;
align-items: center;
justify-content: center;
}
.content-split__image--badge img {
position: static;
width: 195px;
height: auto;
object-fit: contain;
}
/* ---- 23. Post Grid & Post Cards ---- */
.post-grid {
padding: 80px 0;
}
.post-grid--alt {
background: var(--color-sand);
}
.post-grid__header {
margin-bottom: 40px;
}
.post-grid__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 8px;
}
.post-grid__text {
font-family: var(--font-body);
font-size: 18px;
color: var(--color-body);
}
.post-grid__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.post-grid__action {
text-align: center;
margin-top: 40px;
}
.post-grid__show-more {
border: none;
}
/* Post Card */
.post-card {
background: var(--color-white);
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: box-shadow 0.3s, transform 0.3s;
border: 1px solid #eee;
}
.post-grid--alt .post-card {
border-color: transparent;
}
.post-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.post-card:focus,
.post-card:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.post-card__image {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
position: relative;
}
.post-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.post-card:hover .post-card__image img {
transform: scale(1.05);
}
/* Top-anchored card image (e.g. square infographics) — standard card height, crops from the bottom */
.post-card__image--crop-top img {
object-position: top;
}
/* Search result with no image of its own (86bbtux9e): the Site Options
default photo fills the box; the logo fallback sits letterboxed on the
brand sand tone instead of being cover-cropped. */
.post-card__image--placeholder {
background: var(--color-sand);
}
.post-card__image--placeholder .post-card__logo-placeholder {
object-fit: contain;
padding: 14% 18%;
box-sizing: border-box;
}
/* Event teaser cards (86bbba4cy): flyer graphics must show whole and
full-width — the image's natural ratio sets the box height (no fixed
aspect, no cover-cropping, no letterbox bars). */
.post-card--event .post-card__image {
aspect-ratio: auto;
}
.post-card--event .post-card__image img {
display: block;
height: auto;
}
.post-card__body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.post-card__tag {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.post-card__title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: var(--color-dark);
line-height: 1.3;
margin-bottom: 12px;
transition: color 0.2s;
overflow-wrap: break-word;
}
.post-card:hover .post-card__title {
color: var(--color-primary);
}
.post-card__excerpt {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--color-body);
margin-bottom: 16px;
flex: 1;
}
.post-card__date {
font-family: var(--font-body);
font-size: 13px;
color: var(--color-body);
}
/* Results pagination (search + archives) — centred, larger, footer chevron
icons on Previous/Next, clear active page (86bbtux9e, Joyce 9/11). */
.post-grid__pagination {
margin-top: 40px;
}
/* the vendor CSS makes nav.pagination a flex row; centre its only child */
.post-grid__pagination .navigation.pagination {
display: flex;
justify-content: center;
width: 100%;
}
.post-grid__pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
}
.post-grid__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
height: 46px;
padding: 0 14px;
border: 2px solid var(--color-dark-pine);
border-radius: 2px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
line-height: 1;
color: var(--color-dark-pine);
background: var(--color-white);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.post-grid__pagination a.page-numbers:hover,
.post-grid__pagination a.page-numbers:focus-visible {
background: var(--color-dark-pine);
color: var(--color-white);
outline: none;
}
.post-grid__pagination .page-numbers.current {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.post-grid__pagination .page-numbers.dots {
border-color: transparent;
background: transparent;
min-width: 24px;
padding: 0;
}
.post-grid__pagination .page-numbers.prev,
.post-grid__pagination .page-numbers.next {
gap: 8px;
padding: 0 18px;
}
.post-grid__pagination .page-numbers i {
font-size: 14px;
color: var(--color-primary);
transition: color 0.2s ease;
}
.post-grid__pagination a.page-numbers:hover i,
.post-grid__pagination a.page-numbers:focus-visible i {
color: var(--color-white);
}
@media (max-width: 767px) {
.post-grid__pagination .page-numbers {
min-width: 40px;
height: 40px;
padding: 0 10px;
font-size: 15px;
}
.post-grid__pagination .page-numbers.prev,
.post-grid__pagination .page-numbers.next {
padding: 0 12px;
}
}
/* Post Card — Show More toggle */
.post-card--hidden {
display: none;
}
/* ---- 24. Post Detail ---- */
.post-detail {
padding: 60px 0;
}
.post-detail__inner {
max-width: 760px;
margin: 0 auto;
}
.post-detail__meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
/* Tag inside the meta row: cancel the card-context bottom margin and
match line-height so tag and date align vertically */
.post-detail__meta .post-card__tag {
margin-bottom: 0;
line-height: inherit;
}
.post-detail__date {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-body);
}
.post-detail__title {
font-family: var(--font-heading);
font-size: 42px;
font-weight: 700;
color: var(--color-dark);
line-height: 1.2;
margin-bottom: 30px;
}
.post-detail__featured-image {
margin-bottom: 40px;
}
.post-detail__featured-image img {
width: 100%;
height: auto;
display: block;
}
/* Inline post imagery — safety guard so imported/editor images never overflow the column */
.post-detail__content img {
max-width: 100%;
height: auto;
}
.post-detail__content {
font-family: var(--font-body);
font-size: 18px;
line-height: 29px;
color: var(--color-body);
overflow-wrap: break-word;
}
.post-detail__content h2 {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--color-dark);
margin-top: 40px;
margin-bottom: 16px;
}
/* Inherit the .post-detail__content base (18px, body color) so the vendor
`p{font-size:15px;color:#777}` rule doesn't shrink/grey the article body. */
.post-detail__content p {
font-size: inherit;
line-height: inherit;
color: inherit;
margin-bottom: 20px;
}
.post-detail__content a,
.post-detail__content a:hover {
text-decoration: underline;
}
.post-detail__content ul,
.post-detail__content ol {
margin-bottom: 20px;
padding-left: 24px;
}
.post-detail__content ul li,
.post-detail__content ol li {
font-size: inherit;
color: inherit;
margin-bottom: 8px;
line-height: inherit;
}
.post-detail__content ul li {
list-style: disc;
}
/* Nested lists — circle markers like the press-release sub-bullets */
.post-detail__content ul ul {
margin-top: 8px;
margin-bottom: 0;
}
.post-detail__content ul ul li {
list-style: circle;
}
.post-detail__back {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #eee;
}
/* ---- Utility: Screen Reader Only ---- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---- FAQ Accordion ---- */
.faq-accordion {
padding: 80px 0;
background: var(--color-white);
}
.faq-accordion__heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--color-graphite);
text-transform: uppercase;
text-align: center;
margin-bottom: 40px;
}
.faq-accordion__list {
max-width: 900px;
margin: 0 auto;
}
.faq-accordion__item {
border-bottom: 1px solid var(--color-fog);
}
.faq-accordion__item:first-child {
border-top: 1px solid var(--color-fog);
}
.faq-accordion__button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
gap: 16px;
}
.faq-accordion__question {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-graphite);
line-height: 1.3;
}
.faq-accordion__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
position: relative;
transition: transform 0.3s ease;
}
.faq-accordion__icon::before,
.faq-accordion__icon::after {
content: '';
position: absolute;
background: var(--color-poppy);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
.faq-accordion__icon::before {
width: 16px;
height: 2px;
}
.faq-accordion__icon::after {
width: 2px;
height: 16px;
}
.faq-accordion__button[aria-expanded="true"] .faq-accordion__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.faq-accordion__button:hover .faq-accordion__question {
color: var(--color-dark-pine);
}
.faq-accordion__answer {
padding: 0 0 24px;
}
.faq-accordion__answer p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-pine);
margin-bottom: 12px;
}
.faq-accordion__answer p:last-child {
margin-bottom: 0;
}
.faq-accordion__answer ul {
list-style: disc;
padding-left: 24px;
margin-bottom: 12px;
}
.faq-accordion__answer ul li {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-pine);
margin-bottom: 4px;
}
@media (max-width: 767px) {
.faq-accordion {
padding: 48px 0;
}
.faq-accordion__heading {
font-size: 28px;
margin-bottom: 24px;
}
.faq-accordion__question {
font-size: 18px;
}
.faq-accordion__button {
padding: 16px 0;
}
}
/* ---- 25. Responsive ---- */
@media (max-width: 1024px) {
.hero-split {
flex-direction: column;
}
.hero-split__static,
.hero-split__right {
width: 100%;
}
.hero-split__static {
padding: 35px 40px;
}
.hero-split__static h1 {
font-size: 48px;
}
.hero-split__right {
min-height: 350px;
}
.hero-split__buttons .theme_btn {
margin-bottom: 12px;
}
.hero-split__right-content {
left: auto;
right: 40px;
bottom: 60px;
text-align: right;
}
.hero-split__slider {
position: relative;
overflow: hidden;
}
.hero-split__dots {
display: none;
}
/* Team Preview — tablet: 2 columns */
.team-preview__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Content Split — reduce content padding on tablet */
.content-split__content {
padding: 80px 50px;
}
.content-split__heading {
font-size: 30px;
}
/* Post Grid — tablet: 2 columns */
.post-grid__cards {
grid-template-columns: repeat(2, 1fr);
}
.post-grid__heading {
font-size: 32px;
}
.post-detail__title {
font-size: 36px;
}
}
/* Tablet: keep the hero slider text inside the teal triangle */
@media (max-width: 1024px) and (min-width: 768px) {
.hero-split__right {
min-height: 560px;
}
/* Slides must fill the taller panel so no white gap appears below the slider */
.hero-split__slide {
min-height: 560px;
}
.hero-split__right-content {
right: 30px;
bottom: 45px;
max-width: 340px;
}
.hero-split__right-content h2 {
font-size: 36px;
line-height: 1.1;
margin-bottom: 10px;
}
.hero-split__right-content p {
font-size: 17px;
line-height: 1.4;
margin-bottom: 14px;
}
.hero-split__right-content--long h2 {
font-size: 28px;
}
}
@media (max-width: 767px) {
body {
overflow-x: hidden;
}
.utility-nav {
display: none;
}
.hero-split {
flex-direction: column;
}
.hero-split__static,
.hero-split__right {
width: 100%;
}
.hero-split__static {
padding: 50px 35px 30px;
}
.hero-split__static h1 {
font-size: 36px;
}
.hero-split__static p {
max-width: 100%;
}
.hero-split__buttons {
flex-direction: column;
align-items: flex-start;
}
.hero-split__buttons .theme_btn {
margin-bottom: 10px;
}
/* Keep the diagonal split on phones; size the teal text so it stays inside the triangle */
.hero-split__right {
min-height: 700px;
}
/* Slides must fill the right panel so no empty white space appears below the slider */
.hero-split__slide {
min-height: 700px;
}
.hero-split__right-content {
left: auto;
right: 22px;
bottom: 30px;
text-align: right;
max-width: 60%;
}
.hero-split__right-content h2 {
font-size: 30px;
line-height: 1.1;
margin-bottom: 8px;
}
.hero-split__right-content p {
font-size: 14px;
line-height: 1.4;
margin-bottom: 12px;
}
.hero-split__right-content--long h2 {
font-size: 23px;
}
.hero-split__slider {
position: relative;
overflow: hidden;
}
.hero-split__dots {
display: none;
}
.flip-card {
height: 280px;
}
.footer-newsletter .newsletter-form {
flex-direction: column;
align-items: center;
gap: 10px;
}
.footer-newsletter input[type="email"] {
border-radius: var(--radius-btn);
min-width: 100%;
}
.footer-newsletter button {
border-radius: var(--radius-btn);
width: 100%;
}
.seasonal-cta h2 {
font-size: 28px;
}
.page-hero {
padding: 60px 20px;
}
.page-hero__content {
max-width: 100%;
}
.page-hero__heading {
font-size: 36px;
}
.page-hero__text {
font-size: 18px;
}
.page-hero__diagonal {
width: 65%;
clip-path: polygon(100% 0, 100% 100%, 20% 100%);
}
.subpage-nav__list li a {
padding: 12px 14px;
font-size: 12px;
}
.cta-banner .container {
flex-direction: column;
text-align: center;
}
.cta-banner__heading {
font-size: 28px;
}
.quick-links {
padding: 50px 0;
}
.quick-links__grid {
flex-direction: column;
margin-top: 30px;
}
.quick-links__heading {
font-size: 28px;
}
.content-split,
.content-split--reverse {
flex-direction: column;
}
.content-split__image,
.content-split__content {
width: 100%;
}
.content-split__image {
aspect-ratio: 5 / 4;
}
.content-split__image img {
position: absolute;
}
.content-split__content {
padding: 80px 35px;
}
.content-split__heading {
font-size: 28px;
}
/* Impact Story — match content-split pattern: image edge-to-edge, text 35px padding */
.impact-story-area .row {
flex-direction: column;
}
.impact-story-area--reverse .row {
flex-direction: column;
}
.impact-story-area .about-wrapper,
.impact-story-area .about-wrapper.pl-50.pr-50.pt-50.pb-50 {
padding: 30px 35px !important;
}
.impact-story-area .about-img__thumb img {
max-height: 300px;
}
/* Fund Spotlight */
.fund-testimonial {
padding: 25px 25px;
margin-bottom: 30px;
}
.fund-testimonial blockquote {
font-size: 20px;
}
/* Standalone Testimonial */
.testimonial-card {
padding: 30px 8%;
}
.testimonial-card blockquote {
font-size: 18px;
}
.fund-types {
padding: 25px 25px;
}
/* Programs */
.programs-area .cases__box--img {
height: 200px;
}
/* Challenger Banner */
.challenger-banner {
text-align: center;
}
.challenger-banner .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.challenger-banner h3 {
font-size: 28px;
}
/* Team Preview */
.team-preview {
padding: 50px 20px;
}
.team-preview__header {
margin-bottom: 30px;
}
.team-preview__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.team-preview__heading {
font-size: 28px;
}
.team-preview__text {
font-size: 16px;
}
.team-preview__card-info {
padding: 14px 12px;
}
.team-preview__card-name {
font-size: 18px;
}
.team-preview__card-role {
font-size: 13px;
}
/* Content Split Image Modifiers — override 5:4 aspect on mobile stack */
.content-split__image--contain,
.content-split__image--badge {
aspect-ratio: auto;
min-height: 200px;
padding: 30px 20px;
}
.content-split__image--contain img {
width: 70%;
padding: 0;
}
.content-split__image--badge img {
width: 140px;
padding: 0;
}
/* Post Grid — mobile: 1 column */
.post-grid {
padding: 50px 0;
}
.post-grid__heading {
font-size: 28px;
}
.post-grid__cards {
grid-template-columns: 1fr;
}
.post-detail {
padding: 40px 0;
}
.post-detail__title {
font-size: 28px;
}
.post-detail__content {
font-size: 16px;
}
.post-detail__content h2 {
font-size: 24px;
}
}
/* ---- Nonprofit Directory ---- */
.np-directory {
background: var(--color-sand);
padding: 80px 0;
}
.np-directory__header {
text-align: center;
margin-bottom: 32px;
}
.np-directory__eyebrow {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 8px;
}
.np-directory__heading {
font-family: var(--font-heading);
font-size: 42px;
font-weight: 600;
color: var(--color-dark);
margin: 0;
}
/* Toolbar: search + sector dropdown + sort (86bbyg93w, after the Tin Cup
Challenge nonprofit page) */
.np-directory__toolbar {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
margin: 0 0 40px;
}
.np-directory__search {
position: relative;
}
.np-directory__search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--color-pine);
pointer-events: none;
}
.np-directory__search-input,
.np-directory__select {
width: 100%;
height: 56px;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-dark);
background: var(--color-white);
border: 1px solid var(--color-cirrus);
border-radius: 2px;
padding: 0 16px;
box-sizing: border-box;
transition: border-color 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.np-directory__search-input {
padding-left: 48px;
}
.np-directory__search-input::placeholder {
color: var(--color-pine);
opacity: 0.8;
}
.np-directory__search-input::-webkit-search-decoration {
-webkit-appearance: none;
}
.np-directory__select-wrap {
position: relative;
}
.np-directory__select-wrap::after {
content: '';
position: absolute;
right: 18px;
top: 50%;
width: 0;
height: 0;
margin-top: -2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--color-dark);
pointer-events: none;
}
.np-directory__select {
padding-right: 40px;
cursor: pointer;
}
.np-directory__search-input:focus,
.np-directory__select:focus {
outline: none;
border-color: var(--color-dark-pine);
box-shadow: 0 0 0 3px rgba(22, 65, 84, 0.12);
}
.np-directory__empty {
font-family: var(--font-body);
font-size: 16px;
color: var(--color-body);
text-align: center;
margin: 8px 0 24px;
}
/* Card grid */
.np-directory__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.np-directory__card {
background: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: box-shadow 0.25s ease, transform 0.25s ease;
position: relative;
}
.np-directory__card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.np-directory__card.is-hidden {
display: none;
}
/* Clickable card link (wraps logo + info) */
.np-directory__card-link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: inherit;
padding: 32px 24px 16px;
flex: 1;
width: 100%;
}
.np-directory__card-link--no-url {
cursor: default;
}
/* Logo */
.np-directory__card-logo {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-shrink: 0;
}
.np-directory__card-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.np-directory__card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-sand);
color: var(--color-nimbus);
font-size: 48px;
}
/* Card info */
.np-directory__card-info {
flex: 1;
}
.np-directory__card-name {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-dark);
margin: 0 0 6px;
line-height: 1.3;
}
.np-directory__card-sector {
display: inline-block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-primary);
}
/* Social icons row */
.np-directory__card-social {
display: flex;
justify-content: center;
gap: 4px;
padding: 12px 16px 16px;
width: 100%;
border-top: 1px solid var(--color-sand);
}
.np-directory__social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: var(--color-dusk);
font-size: 15px;
text-decoration: none;
transition: color 0.2s ease, background 0.2s ease;
position: relative;
z-index: 1;
}
.np-directory__social-icon:hover {
color: var(--color-primary);
}
/* Phone tooltip: desktop (hover-capable) only — mobile just taps to call */
@media (hover: hover) {
.np-directory__social-icon[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translate(-50%, 4px);
padding: 6px 10px;
border-radius: 4px;
background: var(--color-dusk);
color: var(--color-white);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 5;
}
.np-directory__social-icon[data-tooltip]::before {
content: "";
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--color-dusk);
border-bottom: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 5;
}
.np-directory__social-icon[data-tooltip]:hover::after,
.np-directory__social-icon[data-tooltip]:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.np-directory__social-icon[data-tooltip]:hover::before,
.np-directory__social-icon[data-tooltip]:focus-visible::before {
opacity: 1;
visibility: visible;
}
}
/* Count label */
.np-directory__count-label {
text-align: center;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-body);
margin-top: 32px;
}
/* Nonprofit Directory responsive */
@media (max-width: 991px) {
.np-directory__grid {
grid-template-columns: repeat(2, 1fr);
}
.np-directory__heading {
font-size: 36px;
}
}
@media (max-width: 991px) {
.np-directory__toolbar {
grid-template-columns: 1fr 1fr;
}
.np-directory__search {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.np-directory__toolbar {
grid-template-columns: 1fr;
gap: 12px;
}
.np-directory {
padding: 48px 0;
}
.np-directory__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.np-directory__card {
flex-direction: column;
}
.np-directory__card-link {
flex-direction: row;
text-align: left;
padding: 20px 20px 12px;
gap: 16px;
}
.np-directory__card-logo {
width: 80px;
height: 80px;
margin-bottom: 0;
}
.np-directory__card-name {
font-size: 17px;
}
.np-directory__card-social {
justify-content: flex-start;
padding: 0 20px 16px;
border-top: none;
gap: 2px;
}
.np-directory__heading {
font-size: 30px;
}
.np-directory__filters {
gap: 6px;
margin-bottom: 24px;
}
.np-directory__filter {
font-size: 12px;
padding: 6px 12px;
}
}
/* ---- Contact Info ---- */
.contact-info__heading {
font-family: var(--font-heading);
font-size: 38px;
font-weight: 700;
line-height: 1.1;
color: var(--color-dark);
margin-bottom: 12px;
}
.contact-info__text {
color: var(--color-body);
font-size: 17px;
line-height: 1.7;
margin-bottom: 32px;
}
.contact-info__list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info__item {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 28px;
}
.contact-info__icon {
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-sand);
color: var(--color-white);
font-size: 20px;
}
/* Each icon box gets a different brand color */
.contact-info__item:nth-child(1) .contact-info__icon {
background: var(--color-dusk);
}
.contact-info__item:nth-child(2) .contact-info__icon {
background: var(--color-poppy-dark);
}
.contact-info__item:nth-child(3) .contact-info__icon {
background: var(--color-dark-pine);
}
.contact-info__item:nth-child(4) .contact-info__icon {
background: var(--color-plum);
}
.contact-info__label {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--color-dark);
margin-bottom: 4px;
}
.contact-info__content p {
margin: 0;
color: var(--color-body);
line-height: 1.6;
}
.contact-info__content a {
color: var(--color-body);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.contact-info__content a:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.contact-info__map iframe {
width: 100%;
height: 450px;
display: block;
}
@media (max-width: 767px) {
.contact-info__map iframe {
height: 300px;
}
}
/* Contact page band (86bbbb2ug R2) — form left, Get in Touch + map stacked
right. The two child blocks each render their own section + .container, so
the band supplies the outer container and neutralizes the inner ones. */
.contact-page-band {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 60px;
max-width: 1140px;
margin: 0 auto;
padding: 80px 15px;
}
.contact-page-band > section {
padding: 0;
}
.contact-page-band .container {
max-width: 100%;
padding: 0;
}
/* Stack the contact-info block's internal columns vertically in the band */
.contact-page-band .contact-info .row {
display: block;
margin: 0;
}
.contact-page-band .contact-info .row > [class*="col-"] {
width: 100%;
max-width: 100%;
flex: none;
margin: 0;
padding: 0;
}
.contact-page-band .contact-info__map {
margin-top: 8px;
}
@media (max-width: 991px) {
.contact-page-band {
grid-template-columns: 1fr;
gap: 48px;
padding: 60px 15px;
}
}
/* ---- Accessibility ---- */
/* Skip Navigation */
.skip-nav {
position: absolute;
top: -100%;
left: 16px;
z-index: 10000;
padding: 12px 24px;
background: var(--color-dark);
color: #fff;
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 4px;
}
.skip-nav:focus {
top: 0;
color: #fff;
}
/* Global Focus Styles — overrides vendor outline:none */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.theme_btn:focus-visible,
.flip-card:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--color-dark-pine);
outline-offset: 2px;
}
/* Desktop nav keyboard accessibility — show submenu on focus-within */
.main-menu ul li:focus-within > .submenu {
top: 100%;
visibility: visible;
opacity: 1;
}
/* Mobile login toggle — button styled as link */
button.mobile-login-toggle {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
/* Button resets for converted a > button elements */
.hamburger-menu > button,
.close-mobile-menu > button,
.login-panel__close > button,
button.login-trigger {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.hamburger-menu > button {
display: inline-block;
font-size: 25px;
color: var(--color-body);
}
.close-mobile-menu > button {
color: var(--color-dark-pine);
position: relative;
z-index: 2;
font-size: 16px;
top: -10px;
left: 0;
}
.close-mobile-menu > button:hover {
color: var(--color-plum);
}
.login-panel__close button {
font-size: 20px;
color: var(--color-body);
transition: color 0.2s;
}
.login-panel__close button:hover {
color: var(--color-plum);
}
/* Mobile menu — submenu toggle button (chevron) */
.side-mobile-menu .has-dropdown {
position: relative;
}
.side-mobile-menu .submenu-toggle {
position: absolute;
right: 0;
top: 0;
width: 48px;
height: 48px;
background: none;
border: none;
color: var(--color-dark-pine);
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
padding: 0;
}
.side-mobile-menu .submenu-toggle:hover {
color: var(--color-plum);
}
.side-mobile-menu .submenu-toggle.is-open i {
transform: rotate(180deg);
}
/* Hide the vendor chevron pseudo-element since we use a button now */
.side-mobile-menu ul li.has-dropdown > a:after {
display: none !important;
}
/* Ensure parent link doesn't overlap the toggle button */
.side-mobile-menu ul li.has-dropdown > a {
padding-right: 56px;
}
/* Mobile menu — utility links section */
.side-mobile-menu__utility {
border-top: 1px solid var(--color-fog);
margin-top: 10px;
padding-top: 10px;
}
/* The last main-menu item's underline would double up with the utility
section's top border — keep the single divider line */
.side-mobile-menu > ul > li:last-child > a {
border-bottom: 0;
}
.side-mobile-menu__utility > a,
.side-mobile-menu__utility > .has-dropdown > a,
.side-mobile-menu__utility > .has-dropdown > .mobile-login-toggle {
padding: 13px 0;
display: block;
width: 100%;
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-size: 14px;
color: rgba(22, 65, 84, 0.8);
font-weight: 600;
text-transform: uppercase;
position: relative;
}
.side-mobile-menu__utility > a:hover,
.side-mobile-menu__utility > .has-dropdown > a:hover,
.side-mobile-menu__utility > .has-dropdown > .mobile-login-toggle:hover {
color: var(--color-plum);
}
.side-mobile-menu__utility .has-dropdown {
position: relative;
}
.side-mobile-menu__utility .submenu-toggle {
position: absolute;
right: 0;
top: 0;
width: 48px;
height: 48px;
background: none;
border: none;
color: rgba(22, 65, 84, 0.8);
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.side-mobile-menu__utility .submenu-toggle.is-open i {
transform: rotate(180deg);
}
.side-mobile-menu__utility .mobile-login-links {
list-style: none;
padding-left: 0;
}
.side-mobile-menu__utility .mobile-login-links li {
padding-left: 15px;
}
.side-mobile-menu__utility .mobile-login-links li a {
padding: 10px 0 10px 15px;
display: block;
font-size: 14px;
color: rgba(22, 65, 84, 0.8);
font-weight: 400;
text-transform: capitalize;
position: relative;
}
.side-mobile-menu__utility .mobile-login-links li a:before {
content: "";
width: 8px;
height: 8px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border: 2px solid var(--color-cirrus);
border-radius: 50%;
}
.side-mobile-menu__utility .mobile-login-links li a:hover {
color: var(--color-plum);
}
.side-mobile-menu__utility .mobile-login-links li a:hover:before {
background: var(--color-plum);
border-color: var(--color-plum);
}
/* Impact Stats — number styling (was h1, now p) */
.counetrs__number {
color: white;
font-size: 65px;
font-weight: 600;
margin-bottom: 0;
line-height: 1.2;
}
/* ---- Responsive: Quick-links tablet 2x2 ---- */
@media (max-width: 991px) and (min-width: 768px) {
.quick-links__grid {
flex-wrap: wrap;
}
.quick-links__card {
flex: 1 1 calc(50% - 12px);
}
}
/* ---- Responsive: Subpage nav horizontal scroll on small mobile ---- */
@media (max-width: 575px) {
.subpage-nav__list {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.subpage-nav__list::-webkit-scrollbar {
display: none;
}
.subpage-nav__list li {
flex-shrink: 0;
}
}
/* ---- 480px breakpoint removed: hero paragraph max-width: 100% now set at 767px ---- */
/* ---- Team Bio Modal ---- */
.team-preview__card[data-bio] {
cursor: pointer;
}
.team-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.team-modal[hidden] {
display: none;
}
.team-modal.is-open {
opacity: 1;
visibility: visible;
}
.team-modal__overlay {
position: absolute;
inset: 0;
background: rgba(29, 41, 46, 0.75);
}
.team-modal__content {
position: relative;
background: var(--color-white);
max-width: 780px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
transform: translateY(20px);
transition: transform 0.3s;
}
.team-modal.is-open .team-modal__content {
transform: translateY(0);
}
.team-modal__close {
position: absolute;
top: 12px;
right: 16px;
z-index: 1;
background: none;
border: none;
font-size: 32px;
line-height: 1;
color: var(--color-body);
cursor: pointer;
padding: 4px 8px;
transition: color 0.2s;
}
.team-modal__close:hover {
color: var(--color-primary);
}
.team-modal__inner {
display: flex;
gap: 0;
}
.team-modal__image {
flex: 0 0 280px;
min-height: 280px;
}
.team-modal__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-modal__body {
flex: 1;
padding: 40px 32px;
}
.team-modal__name {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 4px;
}
.team-modal__role {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.team-modal__contact {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-fog);
}
.team-modal__contact a {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-dark-pine);
text-decoration: none;
transition: color 0.2s;
}
.team-modal__contact a:hover {
color: var(--color-primary);
}
.team-modal__contact-sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-fog);
display: inline-block;
}
.team-modal__bio p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
color: var(--color-body);
margin-bottom: 14px;
}
.team-modal__bio p:last-child {
margin-bottom: 0;
}
/* Team Modal — tablet */
@media (max-width: 768px) {
.team-modal__inner {
flex-direction: column;
}
.team-modal__image {
flex: none;
max-height: 300px;
overflow: hidden;
}
.team-modal__body {
padding: 28px 24px;
}
.team-modal__name {
font-size: 24px;
}
}
/* Team Modal — mobile */
@media (max-width: 480px) {
.team-modal {
padding: 12px;
}
.team-modal__content {
max-height: 90vh;
}
.team-modal__body {
padding: 24px 20px;
}
.team-modal__bio p {
font-size: 14px;
}
}
/* ================================================
CFTV core-button styles
================================================ */
/* Registered on the core Button block (inc/blocks.php): "CFTV" reproduces the
.media-kit__btn brand skin, "CFTV PDF" adds the file-pdf glyph. Reusable on
any page — editors pick them from the Button block's Styles panel. */
.wp-block-button.is-style-cftv .wp-block-button__link,
.wp-block-button.is-style-cftv-pdf .wp-block-button__link {
display: inline-block;
padding: 10px 22px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: inherit;
color: #fff;
background: var(--color-dusk);
border: none;
border-radius: 0;
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.wp-block-button.is-style-cftv .wp-block-button__link:hover,
.wp-block-button.is-style-cftv-pdf .wp-block-button__link:hover {
background: var(--color-plum);
color: #fff;
transform: translateY(-1px);
}
/* PDF variant: Font Awesome 6 light file-pdf glyph before the label
(replaces the old inline
element). */
.wp-block-button.is-style-cftv-pdf .wp-block-button__link::before {
content: "\f1c1";
font-family: "Font Awesome 6 Pro";
font-weight: 300;
font-size: 16px;
line-height: 1;
display: inline-block;
margin-right: 8px;
vertical-align: -1px;
}
/* Core Buttons wrapper carrying the media-kit grid class: keep the old flex
layout (two classes out-specify WP's generated .wp-container-* rules). */
.wp-block-buttons.media-kit__buttons--grid {
justify-content: center;
gap: 12px;
margin-top: 28px;
}
@media (max-width: 768px) {
.wp-block-button.is-style-cftv .wp-block-button__link,
.wp-block-button.is-style-cftv-pdf .wp-block-button__link {
padding: 9px 18px;
font-size: 13px;
}
.wp-block-buttons.media-kit__buttons--grid {
gap: 10px;
}
}
@media (max-width: 480px) {
.wp-block-buttons.media-kit__buttons--grid {
flex-direction: column;
align-items: center;
}
.wp-block-buttons.media-kit__buttons--grid .wp-block-button,
.wp-block-buttons.media-kit__buttons--grid .wp-block-button__link {
width: 100%;
max-width: 280px;
text-align: center;
}
}
/* ================================================
Media Kit
================================================ */
.media-kit__section {
max-width: 800px;
margin: 0 auto;
}
/* Logos gallery spans the full container so each card fits its colorway +
4 download chips on one line, 4 variation cards per row on desktop */
.media-kit__section--wide {
max-width: none;
}
.media-kit__heading {
font-family: var(--font-display);
font-size: 42px;
font-weight: 400;
color: var(--color-dusk);
margin-bottom: 16px;
}
.media-kit__text {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-body);
max-width: 640px;
margin: 0 auto 24px;
}
/* WYSIWYG bodies render inside .media-kit__text; make inner
inherit so the
vendor `p{font-size:15px;color:#777}` rule doesn't shrink/grey the text. */
.media-kit__text p {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
max-width: none;
margin: 0 0 16px;
}
.media-kit__text > :last-child,
.media-kit__text p:last-child {
margin-bottom: 0;
}
/* WP's flow-layout rule (:root :where(.is-layout-flow) > :last-child) zeroes
the closing paragraph's bottom margin inside the rebuilt group sections;
restore the 24px so section gaps match the old block rendering. */
.media-kit__section > .media-kit__text:last-child {
margin-bottom: 24px;
}
.media-kit__text a {
color: var(--color-dusk);
text-decoration: underline;
font-weight: 600;
}
.media-kit__text a:hover {
color: var(--color-primary);
}
/* Instructions */
.media-kit__instructions {
text-align: left;
max-width: 540px;
margin: 24px auto 0;
border: 2px solid var(--color-cirrus);
padding: 24px 32px;
}
/* Steps as a core ordered list (standard-blocks rebuild): bold dusk numbers
via ::marker replace the old hand-numbered prefixes. */
.media-kit__instructions ol {
list-style: decimal inside;
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-body);
line-height: 1.7;
}
.media-kit__instructions li {
/* vendor style.css wipes markers with a bare `li { list-style: none }` */
list-style: inherit;
margin-bottom: 4px;
}
.media-kit__instructions li:last-child {
margin-bottom: 0;
}
.media-kit__instructions li::marker {
font-weight: 700;
color: var(--color-dusk);
}
/* Button grid */
.media-kit__buttons--grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 28px;
}
.media-kit__btn {
display: inline-block;
padding: 10px 22px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--color-dusk);
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.media-kit__btn:hover {
background: var(--color-plum);
color: #fff;
transform: translateY(-1px);
}
.media-kit__btn i {
color: #fff;
margin-right: 8px;
font-size: 16px;
}
/* Downloadable image thumbnails */
.media-kit__thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 28px;
}
.media-kit__thumb {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 200px;
text-decoration: none;
color: var(--color-body);
transition: transform 0.2s ease;
}
.media-kit__thumb img {
width: 200px;
height: 200px;
object-fit: cover;
border: 1px solid var(--color-fog);
background: var(--color-fog);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.media-kit__thumb:hover {
color: var(--color-dusk);
transform: translateY(-2px);
}
.media-kit__thumb:hover img {
border-color: var(--color-dusk);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.media-kit__thumb-label,
.media-kit__thumb figcaption {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-align: center;
}
/* Thumbs as core Image blocks (standard-blocks rebuild): make the
figure/figcaption markup render like the old cards. */
figure.media-kit__thumb {
margin: 0;
}
.media-kit__thumb > a {
display: block;
line-height: 0;
}
.media-kit__thumb figcaption {
margin: 0;
color: inherit;
}
/* Logo gallery — brand groups, colorway rows, format download links */
.media-kit__logos {
margin-top: 40px;
text-align: left;
}
.media-kit__logo-group {
margin-bottom: 48px;
}
.media-kit__logo-group:last-child {
margin-bottom: 0;
}
.media-kit__logo-brand {
font-family: var(--font-heading, var(--font-body));
font-size: 24px;
color: var(--color-dusk);
text-align: center;
margin: 0 0 24px;
}
.media-kit__logo-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.media-kit__logo-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-fog);
background: #fff;
}
.media-kit__logo-preview {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
min-height: 150px;
/* subtle checker so both light and dark logos read well */
background-color: #f4f4f5;
background-image:
linear-gradient(45deg, #e7e7e9 25%, transparent 25%),
linear-gradient(-45deg, #e7e7e9 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e7e7e9 75%),
linear-gradient(-45deg, transparent 75%, #e7e7e9 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.media-kit__logo-preview img {
max-width: 100%;
max-height: 120px;
height: auto;
width: auto;
}
.media-kit__logo-title {
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--color-dusk);
text-align: center;
margin: 14px 0 4px;
}
.media-kit__logo-variants {
padding: 8px 16px 16px;
}
.media-kit__logo-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--color-fog);
}
.media-kit__logo-row:first-child {
border-top: none;
}
.media-kit__logo-colorway {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--color-body);
}
.media-kit__logo-links {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.media-kit__logo-dl {
display: inline-block;
padding: 3px 9px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-dusk);
text-decoration: none;
border: 1px solid var(--color-fog);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.media-kit__logo-dl:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* Logo gallery — tablet & mobile */
@media (max-width: 768px) {
.media-kit__logo-cards {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px;
}
}
@media (max-width: 480px) {
.media-kit__logo-cards {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.media-kit__logo-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.media-kit__logo-links {
justify-content: flex-start;
}
}
/* Left-aligned text modifier */
.media-kit__text--left {
text-align: left;
max-width: 800px;
}
/* Guidelines list */
.media-kit__guidelines {
list-style: disc;
text-align: left;
max-width: 800px;
margin: 24px auto 0;
padding-left: 20px;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-body);
line-height: 1.7;
}
.media-kit__guidelines li {
margin-bottom: 16px;
}
.media-kit__guidelines li:last-child {
margin-bottom: 0;
}
/* Media Kit — tablet */
@media (max-width: 768px) {
.media-kit__heading {
font-size: 34px;
}
.media-kit__buttons--grid {
gap: 10px;
}
.media-kit__btn {
padding: 9px 18px;
font-size: 13px;
}
.media-kit__thumbs {
gap: 16px;
}
.media-kit__thumb,
.media-kit__thumb img {
width: 160px;
}
.media-kit__thumb img {
height: 160px;
}
}
/* Media Kit — mobile */
@media (max-width: 480px) {
.media-kit__heading {
font-size: 28px;
}
.media-kit__buttons--grid {
flex-direction: column;
align-items: center;
}
.media-kit__btn {
width: 100%;
max-width: 280px;
text-align: center;
}
.media-kit__thumbs {
gap: 14px;
}
.media-kit__thumb,
.media-kit__thumb img {
width: 140px;
}
.media-kit__thumb img {
height: 140px;
}
}
/* ---- 40. Nonprofit Job Board (WP Job Manager) ---- */
/* The "Nonprofit Job Board" page was migrated from the legacy site as Kadence
blocks, which reference Kadence's palette-color-N custom properties. This
theme uses named colour slugs instead, so those vars are undefined and the
affected text/links fall back to grey. Re-declare the handful the migrated
content uses so it renders on-brand (plum) again. */
:root {
--wp--preset--color--palette-color-6: #f2f5f7;
--wp--preset--color--palette-color-8: #ffffff;
--wp--preset--color--palette-color-14: #5a2a5c;
--wp--preset--color--palette-color-15: #773979;
}
/* Reported issue: block/content links (e.g. the "Post a Nonprofit Job" link in
the Sections sidebar) hid their own text on hover because the hover colour
matched the background. Force a high-contrast hover so the text stays legible.
Button links are excluded — red text on their red background would hide the
label; they get their own hover below. */
.wp-block-column a:hover:not(.wp-block-button__link):not(.wp-element-button),
.wp-block-columns a:hover:not(.wp-block-button__link):not(.wp-element-button) {
color: var(--color-primary, #c54337);
text-decoration: underline;
}
/* Button blocks on the Job Manager pages sat flush against the job filters /
listings below them (vendor CSS strips the core block margins). Give them
breathing room. */
.cftv-jm-content .wp-block-buttons {
margin-top: 10px;
margin-bottom: 36px;
}
/* Core button blocks (e.g. the Donate Now button): keep the label white and
darken the background on hover, matching the theme's primary buttons.
!important needed — WP's .has-*-background-color preset classes use it. */
.wp-block-button__link:hover,
.wp-element-button:hover {
background-color: #a8362c !important;
color: #ffffff !important;
text-decoration: none;
}
/* Reported issue: the Select2 dropdowns on the job submit form and the job
filters showed the highlighted option with dark text on a dark background.
Pin the highlighted/selected options to brand-contrast colours. Select2
renders its dropdown at the end of , so these rules must stay global. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background-color: var(--color-primary, #c54337) !important;
color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #f2f5f7;
color: #1d292e;
}
/* ================================================
Plain content pages (Privacy Policy & other default pages
without full-bleed blocks) — wrapped by page.php in
.container.cftv-page-content
================================================ */
.cftv-page-content {
max-width: 900px;
padding-top: 48px;
padding-bottom: 64px;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.7;
color: var(--color-body);
}
/* Vendor bare-p gotcha: p{font-size:15px;color:#777} — inherit instead */
.cftv-page-content p,
.cftv-page-content li {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.cftv-page-content p {
margin: 0 0 16px;
}
.cftv-page-content h2 {
font-size: 30px;
color: var(--color-dusk);
margin: 36px 0 14px;
}
.cftv-page-content h3 {
font-size: 23px;
color: var(--color-dusk);
margin: 28px 0 10px;
}
.cftv-page-content h2:first-child {
margin-top: 0;
}
.cftv-page-content ul,
.cftv-page-content ol {
margin: 0 0 16px;
padding-left: 24px;
}
.cftv-page-content a {
color: var(--color-primary);
text-decoration: underline;
}
.cftv-page-content a:hover {
color: var(--color-dark-pine);
}
/* ================================================
Header cart (WooCommerce) — icon + count badge +
hover mini-cart dropdown. Markup: cftv_header_cart()
in inc/woocommerce-theme.php, rendered by header.php
================================================ */
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
}
.cftv-header-cart {
position: relative;
}
.cftv-header-cart__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--color-dark-pine);
font-size: 20px;
transition: color 0.2s ease;
}
.cftv-header-cart__link:hover {
color: var(--color-primary);
}
/* Desktop instance lives in the utility bar — compact, aligned with the
utility links, immune to their 12px uppercase link styling */
.utility-links .cftv-header-cart__link {
width: 30px;
height: 30px;
margin: -8px 0;
font-size: 16px;
color: var(--color-graphite);
}
.utility-links .cftv-header-cart__link:hover {
color: var(--color-primary);
opacity: 1;
}
.utility-links .cftv-header-cart__count {
top: -5px;
right: -7px;
min-width: 16px;
height: 16px;
font-size: 10px;
}
.cftv-header-cart__count {
position: absolute;
top: 0;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: #fff;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 9px;
}
.cftv-header-cart__count.is-empty {
display: none;
}
/* Dropdown: hover / focus-within on desktop; hidden on touch widths where
the icon just links to the cart page */
.cftv-header-cart__dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1000;
width: 350px;
padding: 18px;
background: #fff;
border: 1px solid var(--color-fog);
border-top: 3px solid var(--color-primary);
box-shadow: 0 12px 30px rgba(29, 41, 46, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.cftv-header-cart:hover .cftv-header-cart__dropdown,
.cftv-header-cart:focus-within .cftv-header-cart__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mini-cart internals (WooCommerce widget markup) */
.cftv-header-cart ul.woocommerce-mini-cart {
list-style: none;
margin: 0 0 12px;
padding: 0;
max-height: 320px;
overflow-y: auto;
}
/* One item: thumbnail pinned left, remove × pinned right, name / booking
details / qty stacked between (the img lives INSIDE the product link, so
flex ordering can't lay this out — absolute positioning can).
Selector note: written as ul.woocommerce-mini-cart li.… (0,3,2+) because
Woo core's widget rules (.woocommerce ul.product_list_widget li …) load on
store pages at (0,2,2+) and the utility bar's uppercase link styling also
leaks in — both must lose. */
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
display: block;
position: relative;
padding: 14px 26px 14px 82px;
min-height: 92px;
margin: 0;
border-bottom: 1px solid var(--color-fog);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: var(--color-graphite);
text-align: left;
text-transform: none;
letter-spacing: 0;
}
/* single divider before the subtotal — the total row draws its own line */
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:last-child {
border-bottom: none;
}
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a {
display: block;
color: var(--color-graphite);
text-decoration: none;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a:hover {
color: var(--color-primary);
opacity: 1;
}
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
position: absolute;
left: 0;
top: 16px;
float: none;
width: 66px;
height: 66px;
margin: 0;
object-fit: cover;
border-radius: 2px;
}
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
position: absolute;
right: 0;
top: 13px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 21px;
font-weight: 400;
color: var(--color-primary) !important;
text-decoration: none;
line-height: 1;
}
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove:hover {
background: var(--color-primary);
color: #fff !important;
border-radius: 50%;
}
.cftv-header-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
display: block;
margin-top: 5px;
color: var(--color-body);
font-size: 14px;
font-weight: 400;
}
/* Workshop tickets (86bbyeb5a): the events add-on prints the event title as
a link followed by swatches
Rendered by the color-swatch enhancer in assets/js/admin-icon-modal.js
(enhanced Select2 color dropdowns, flagged .cftv-color-field): a small
color box next to the name, in both the option list and the selected value.
===================================================================== */
.cftv-color-opt {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cftv-color-sw {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.25);
flex: 0 0 auto;
}
.cftv-sw-dusk { background-color: #3d3454; }
.cftv-sw-plum { background-color: #644b62; }
.cftv-sw-poppy { background-color: #dd8b88; }
.cftv-sw-cirrus { background-color: #bdc8d2; }
.cftv-sw-clay { background-color: #a8886c; }
.cftv-sw-graphite { background-color: #1d292e; }
.cftv-sw-dark-pine { background-color: #164154; }
.cftv-sw-pine { background-color: #415e68; }
.cftv-sw-sand { background-color: #e5cec3; }
.cftv-sw-fog { background-color: #dbdcdd; }
.cftv-sw-white { background-color: #ffffff; }
/* Grey (not the admin accent color) for the hovered/active option, matching
the selected-option grey — scoped to the color dropdowns only. */
.cftv-color-dropdown .select2-results__option--highlighted,
.cftv-color-dropdown .select2-results__option--highlighted[aria-selected] {
background-color: #e2e2e4 !important;
color: #1d2327 !important;
}
/* ================================================
Listserv / Nonprofit Newsgroup page
================================================ */
/* Page /nonprofit-newsgroup/ is built from CORE blocks (ClickUp 86bavqkdd —
native rebuild of the legacy iframe page). Sections carry .listserv; the
subscribe form (core/html) POSTs to simplelists.com like the legacy site. */
.listserv {
padding: 70px 0;
}
.listserv + .listserv {
padding-top: 0;
}
.listserv .container {
max-width: 1170px;
}
/* Left rail — "join the community" kicker + Donate button (mirrors legacy) */
.listserv p.listserv__rail-heading {
margin: 0 0 20px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 1.5px;
line-height: 1.5;
text-transform: uppercase;
color: var(--color-plum);
}
.listserv__sticky {
position: sticky;
top: 120px;
}
/* Section headings pick up theme heading styles automatically; tighten flow */
.listserv h2.wp-block-heading,
.listserv h3.wp-block-heading {
margin-bottom: 18px;
}
.listserv .cftv-was-h6.wp-block-heading {
margin: 26px 0 10px;
font-size: 16px;
}
.listserv p,
.listserv ul,
.listserv ol {
color: var(--color-body);
}
/* Restore bullets/numbers for content lists — vendor style.css wipes markers
with a bare `li { list-style: none }`, so the li must inherit them back */
.listserv ul.wp-block-list {
list-style: disc;
}
.listserv ol.wp-block-list {
list-style: decimal;
}
.listserv ul,
.listserv ol {
padding-left: 22px;
margin-bottom: 18px;
}
.listserv li {
list-style: inherit;
margin-bottom: 8px;
line-height: 1.6;
}
.listserv .has-small-font-size {
font-size: 14px;
}
/* Content links underline (buttons keep their button skin) */
.listserv a:not(.wp-block-button__link):not(.theme_btn) {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Subscribe form — theme-styled inputs, stacked labels */
.listserv-form {
max-width: 560px;
margin: 28px 0 18px;
padding: 28px;
background: var(--color-white);
border: 1px solid var(--color-fog);
}
.listserv-form label {
display: block;
margin-bottom: 16px;
font-size: 14px;
font-weight: 600;
color: var(--color-dark);
}
.listserv-form input[type="text"],
.listserv-form input[type="email"] {
display: block;
width: 100%;
margin-top: 6px;
padding: 11px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--color-dark);
background: var(--color-white);
border: 1px solid var(--color-fog);
border-radius: 0;
transition: border-color 0.25s ease;
}
.listserv-form input[type="text"]:focus,
.listserv-form input[type="email"]:focus {
outline: none;
border-color: var(--color-dusk);
}
.listserv-form__digest {
font-weight: 500 !important;
}
.listserv-form__digest input[type="checkbox"] {
margin-right: 8px;
accent-color: var(--color-dusk);
vertical-align: -1px;
}
.listserv-form button.theme_btn {
padding: 12px 30px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* Tablet/mobile — core columns stack at 781px; keep rhythm tight */
@media (max-width: 781px) {
.listserv__sticky {
position: static;
}
.listserv__rail-heading br {
display: none;
}
.listserv-form {
max-width: 100%;
padding: 20px;
}
}
/* ================================================
CFTV Shortcode block
================================================ */
/* The cftv/shortcode block renders any shortcode inside the standard site
section + .container, so output follows the theme's width and responsive
behaviour like every other block. The rules below restyle Gravity Forms
output to the design system rather than GF's Orbital defaults (blue button,
rounded controls). Token-first where GF exposes a custom property (its
--gf-* CSS API); explicit rules — with !important where Orbital's own
selectors are too specific to beat — for everything else. The submit button
consumes the same --btn-* tokens as the theme button system, so the block's
ACF color overrides land inline on the wrapper without importance fights. */
.cftv-shortcode {
padding: 60px 0;
/* GF CSS API — accents, focus rings, control chrome */
--gf-color-primary: var(--color-dark-pine);
--gf-color-primary-rgb: 22, 65, 84;
--gf-radius: 0;
--gf-ctrl-radius: 0;
--gf-ctrl-btn-radius: 0;
--gf-ctrl-border-color: var(--color-fog);
--gf-ctrl-color: var(--color-graphite);
--gf-ctrl-label-color-primary: var(--color-dark-pine);
--gf-ctrl-label-color-secondary: var(--color-pine);
--gf-form-gap-y: 28px;
/* Theme button tokens (per-block ACF overrides arrive inline) */
--btn-bg: var(--color-primary);
--btn-text: var(--color-white);
--btn-hover-bg: var(--color-primary-hover);
--btn-hover-text: var(--color-white);
}
/* Form title/description (when the shortcode leaves them on) */
.cftv-shortcode .gform_title {
margin: 0 0 12px;
font-family: var(--font-heading);
font-size: 38px;
font-weight: 700;
line-height: 1.1;
color: var(--color-dark);
}
.cftv-shortcode .gform_description {
display: block;
margin-bottom: 6px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-body);
}
/* Labels — dark navy incl. the "(Required)" hint, per the legacy reference */
.cftv-shortcode .gform_wrapper .gfield_label,
.cftv-shortcode .gform_wrapper legend.gfield_label,
.cftv-shortcode .gform_wrapper .gform-field-label {
font-family: var(--font-body) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.2px;
color: var(--color-dark-pine) !important;
}
.cftv-shortcode .gform_wrapper .gfield_required {
color: var(--color-dark-pine) !important;
font-weight: 400 !important;
}
/* Text controls — square, fog border, dusk focus (mirrors .listserv-form) */
.cftv-shortcode .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.cftv-shortcode .gform_wrapper select,
.cftv-shortcode .gform_wrapper textarea {
width: 100%;
padding: 11px 14px !important;
font-family: var(--font-body) !important;
font-size: 15px !important;
color: var(--color-graphite) !important;
background: var(--color-white) !important;
border: 1px solid var(--color-fog) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: border-color 0.25s ease;
}
.cftv-shortcode .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus,
.cftv-shortcode .gform_wrapper select:focus,
.cftv-shortcode .gform_wrapper textarea:focus {
outline: none !important;
border-color: var(--color-dusk) !important;
box-shadow: none !important;
}
.cftv-shortcode .gform_wrapper .gfield input[type="checkbox"],
.cftv-shortcode .gform_wrapper .gfield input[type="radio"] {
accent-color: var(--color-dusk);
}
/* Vertical rhythm — Orbital lays fields out on a grid; the gap var above
covers it, this covers the legacy .gravity-theme markup too */
.cftv-shortcode .gform_wrapper .gform_fields {
grid-row-gap: 28px;
}
.cftv-shortcode .gform_wrapper .gform_footer {
margin-top: 30px;
padding: 0;
}
/* Submit (and multipage next/prev) — theme primary button, token-driven */
.cftv-shortcode .gform_wrapper input[type="submit"],
.cftv-shortcode .gform_wrapper .gform_button,
.cftv-shortcode .gform_wrapper .gform_next_button,
.cftv-shortcode .gform_wrapper .gform_previous_button {
padding: 13px 32px !important;
font-family: var(--font-body) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--btn-text) !important;
background: var(--btn-bg) !important;
border: 0 !important;
border-radius: 0 !important;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
}
.cftv-shortcode .gform_wrapper input[type="submit"]:hover,
.cftv-shortcode .gform_wrapper input[type="submit"]:focus,
.cftv-shortcode .gform_wrapper .gform_button:hover,
.cftv-shortcode .gform_wrapper .gform_button:focus,
.cftv-shortcode .gform_wrapper .gform_next_button:hover,
.cftv-shortcode .gform_wrapper .gform_previous_button:hover {
background: var(--btn-hover-bg) !important;
color: var(--btn-hover-text) !important;
}
/* Validation + confirmation — brand red/navy instead of GF orange */
.cftv-shortcode .gform_wrapper .gform_validation_errors {
background: var(--color-white) !important;
border: 1px solid var(--color-primary) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.cftv-shortcode .gform_wrapper .gform_validation_errors h2,
.cftv-shortcode .gform_wrapper .gfield_validation_message,
.cftv-shortcode .gform_wrapper .validation_message {
font-family: var(--font-body) !important;
color: var(--color-primary) !important;
}
.cftv-shortcode .gform_wrapper .gfield_validation_message {
background: none !important;
border: 0 !important;
padding: 6px 0 0 !important;
}
.cftv-shortcode .gform_wrapper .gfield_error input,
.cftv-shortcode .gform_wrapper .gfield_error select,
.cftv-shortcode .gform_wrapper .gfield_error textarea {
border-color: var(--color-primary) !important;
}
.cftv-shortcode .gform_confirmation_message {
font-family: var(--font-body);
font-size: 17px;
color: var(--color-dark-pine);
}
/* ================================================
Search Bar — Dropdown from Utility Icon
================================================ */
.search-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.search-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s ease;
padding: 0;
}
/* Utility bar version (desktop) */
.utility-search {
width: 30px;
height: 30px;
color: var(--color-graphite);
font-size: 16px;
margin: -8px 0;
}
.utility-search:hover {
opacity: 0.8;
}
/* Mobile header version */
.header-actions .search-trigger {
width: 42px;
height: 42px;
color: var(--color-dark-pine);
font-size: 18px;
}
.header-actions .search-trigger:hover {
color: var(--color-primary);
}
/* Dropdown search box — positioned absolutely below icon */
.header-search-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1000;
background: #fff;
border: 1px solid var(--color-fog);
border-top: 3px solid var(--color-primary);
box-shadow: 0 4px 12px rgba(29, 41, 46, 0.12);
padding: 10px;
border-radius: 0;
min-width: 200px;
animation: dropDown 0.25s ease;
}
@keyframes dropDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-form-dropdown {
display: flex;
align-items: center;
gap: 4px;
}
.search-field-dropdown {
flex: 1;
padding: 6px 8px;
font-family: var(--font-body);
font-size: 12px;
color: var(--color-graphite);
background: var(--color-white);
border: 1px solid var(--color-fog);
border-radius: 0;
transition: border-color 0.2s ease;
min-width: 100px;
height: 28px;
}
.search-field-dropdown::placeholder {
color: #a8a8a8;
opacity: 1;
}
.search-field-dropdown:focus {
outline: none;
border-color: var(--color-dark-pine);
box-shadow: 0 0 0 2px rgba(22, 65, 84, 0.08);
}
.search-submit-dropdown {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: var(--color-primary);
color: #fff;
border: none;
cursor: pointer;
font-size: 12px;
transition: background 0.2s ease;
flex-shrink: 0;
line-height: 1;
}
.search-submit-dropdown:hover {
background: var(--color-primary-hover);
}
/* Responsive adjustments — the compact desktop box is too small to use by
touch (ClickUp 86bbtux9e R2). Tablet: a larger box under the utility-bar
icon (tablet range starts at 1024px per user). Phone: a full-width bar
under the header, sized for thumbs. */
@media (max-width: 1024px) {
.header-search-dropdown {
min-width: 320px;
padding: 12px;
}
.search-form-dropdown {
gap: 6px;
}
.search-field-dropdown {
padding: 8px 12px;
font-size: 15px;
height: 40px;
}
.search-submit-dropdown {
width: 40px;
height: 40px;
font-size: 15px;
}
}
@media (max-width: 767.98px) {
/* Anchor the bar to the header instead of the icon. When the vendor JS
adds .sticky the header is already position:fixed, so leave it alone. */
.main-header-area:not(.sticky) {
position: relative;
}
.header-actions .search-wrapper {
position: static;
}
.header-search-dropdown {
top: 100%;
left: 0;
right: 0;
width: 100%;
min-width: 0;
padding: 12px 15px;
border-left: 0;
border-right: 0;
}
.search-field-dropdown {
padding: 10px 14px;
font-size: 16px; /* >= 16px so iOS doesn't zoom the page on focus */
height: 46px;
}
.search-submit-dropdown {
width: 46px;
height: 46px;
font-size: 17px;
}
}
/* ---- Wide screens (ClickUp 86b7fpjjm) ---------------------------------- */
/* The 50/50 split sections (content-split, get-involved CTA, hero) stay
full-bleed — the client rejected capping them at 1360px (Joyce, 9/1). What
still needs limiting on 2K/4K monitors is the text inside them: at 2560px a
half is 1,280px wide and paragraphs ran ~1,100px per line. Cap the text
block, not the section; below ~1,500px this never kicks in. */
.content-split__content > * {
width: 100%;
max-width: 640px;
}
.impact-story-area .about-wrapper > * {
max-width: 640px;
}
/* When the text sits in the LEFT half (image on the right), keep the block
next to the photo rather than parked against the far screen edge. The
content column is a flex column, so align its (full-width, capped) children
to the end; text inside stays left-aligned. */
.content-split--reverse .content-split__content {
align-items: flex-end;
}
.impact-story-area--reverse .about-wrapper > * {
margin-left: auto;
}
/* ---- Utility: mirror an image horizontally (editor class on an image
block / column: "andy-flip-img"; user request 9/4) ---------------------- */
.andy-flip-img img {
transform: scaleX(-1);
object-position: 100%;
}
/* Dated volunteer opportunities — "When: June 26, 2025 · 1:00 PM" in the
WP Job Manager meta rows (ClickUp 86bbu97pb). */
.single_job_listing .job-listing-meta li.cftv-job-datetime,
.job_listings .job_listing .meta li.cftv-job-datetime {
white-space: nowrap;
}
.cftv-job-datetime__label {
font-weight: 600;
color: var(--color-plum, #644b62);
}
.job_listings .job_listing .meta li.cftv-job-datetime {
display: block;
color: var(--color-body, #4a4a4a);
margin-top: 4px;
}
/* Expired listing page: the plugin notice is the only content — drop its
2em bottom margin and the 50px divider above the Back button so there is
no empty bordered strip (ClickUp 86bbu97pb follow-up). */
.cftv-listing-expired .single_job_listing .job-manager-info {
margin-bottom: 0;
}
.cftv-listing-expired .post-detail__back {
margin-top: 24px;
padding-top: 0;
border-top: 0;
}
/* ---- Heading-level fixes that must not change the look (ClickUp 86b7fpjjq) ----
Forum page: the hero heading is a (the forum plugin prints the H1), so
restore the two properties an
got from the vendor heading rule. */
.page-hero__heading--p {
line-height: 1.1;
letter-spacing: -0.3px;
}
/* Headings re-levelled for a correct outline keep the size of the level they
used to be (vendor sizes: h3 28 / h4 22 / h5 18 / h6 16). Used by the
Gutenberg heading blocks on the job-board pages and by the post-content
normaliser in inc/seo-headings.php. */
.cftv-was-h3 { font-size: 28px; }
.cftv-was-h4 { font-size: 22px; }
.cftv-was-h5 { font-size: 18px; }
.cftv-was-h6 { font-size: 16px; }
/* Inside an article the promoted tag would otherwise pick up the
.post-detail__content h2 styling (700 / dark / 40px top margin). */
.post-detail__content .cftv-was-h3,
.post-detail__content .cftv-was-h4,
.post-detail__content .cftv-was-h5,
.post-detail__content .cftv-was-h6 {
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.3px;
color: #001234;
margin-top: 0;
margin-bottom: 8px;
}
.post-detail__content .cftv-was-h3 { font-size: 28px; }
.post-detail__content .cftv-was-h4 { font-size: 22px; }
.post-detail__content .cftv-was-h5 { font-size: 18px; }
.post-detail__content .cftv-was-h6 { font-size: 16px; }