/**
* Nashua PAL Core — front-end styles
* Brand: navy #071F3F | yellow #F4A51C | white #FFFFFF
*/
:root {
--pal-navy: #071F3F;
--pal-navy-2: #0E2A52;
--pal-yellow: #F4A51C;
--pal-yellow-dark: #d68f0e;
--pal-white: #ffffff;
--pal-gray-50: #F7F9FC;
--pal-gray-100: #ECEFF4;
--pal-gray-300: #C4CCD8;
--pal-gray-700: #4A5568;
--pal-radius: 8px;
--pal-radius-lg: 12px;
--pal-shadow: 0 6px 22px rgba(7, 31, 63, 0.08);
}
/* ----------- LOGO RENDERING -----------
Sharpness hints for the PAL logo wherever it appears. Browsers default to
a low-quality bilinear filter when downscaling, which produces visible
moiré on detailed marks like the PAL badge. These hints request the best
available filter at the cost of slight CPU overhead — totally fine for
≤512px logos. Pair with a high-res source uploaded under
Settings → Site Logo (1024px+ recommended) for maximum sharpness. */
.pal-logo img,
.pal-mobile-menu__logo img,
img.pal-logo-img {
image-rendering: -webkit-optimize-contrast;
image-rendering: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0); /* GPU-accelerated layer for crisper text/edges */
}
/* ----------- PROMO BAR ----------- */
.pal-promo {
background: var(--pal-yellow);
color: var(--pal-navy);
padding: 10px 20px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.3;
text-align: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.pal-promo[hidden] { display: none !important; }
.pal-promo__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--pal-navy);
flex-shrink: 0;
}
.pal-promo__icon svg { width: 20px; height: 20px; display: block; }
.pal-promo__text {
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 768px) {
.pal-promo {
flex-wrap: nowrap;
gap: 8px;
padding: 8px 12px;
font-size: 12px;
justify-content: flex-start;
}
.pal-promo__icon svg { width: 16px; height: 16px; }
.pal-promo__text {
flex: 1 1 auto;
text-align: left;
letter-spacing: 0.03em;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide the optional CTA button on mobile — keeps the bar
visually tight (icon + text only on phone). */
.pal-promo .pal-promo-btn { display: none; }
}
/* AGGRESSIVE GAP KILL: every Elementor wrapper around a full-bleed bar has
its margin/padding zeroed so the bars render flush with no white strip
above or below. */
.elementor-section:has(.pal-promo),
.elementor-section:has(.pal-alert),
.elementor-section:has(.pal-stats),
.elementor-section:has(.pal-partners) {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
.elementor-section:has(.pal-promo) > .elementor-container,
.elementor-section:has(.pal-alert) > .elementor-container,
.elementor-section:has(.pal-stats) > .elementor-container,
.elementor-section:has(.pal-partners) > .elementor-container,
.elementor-section:has(.pal-promo) .elementor-row,
.elementor-section:has(.pal-alert) .elementor-row,
.elementor-section:has(.pal-stats) .elementor-row,
.elementor-section:has(.pal-partners) .elementor-row,
.elementor-section:has(.pal-promo) .elementor-column,
.elementor-section:has(.pal-alert) .elementor-column,
.elementor-section:has(.pal-stats) .elementor-column,
.elementor-section:has(.pal-partners) .elementor-column,
.elementor-section:has(.pal-promo) .elementor-column-wrap,
.elementor-section:has(.pal-alert) .elementor-column-wrap,
.elementor-section:has(.pal-stats) .elementor-column-wrap,
.elementor-section:has(.pal-partners) .elementor-column-wrap,
.elementor-section:has(.pal-promo) .elementor-widget-wrap,
.elementor-section:has(.pal-alert) .elementor-widget-wrap,
.elementor-section:has(.pal-stats) .elementor-widget-wrap,
.elementor-section:has(.pal-partners) .elementor-widget-wrap {
padding: 0 !important;
margin: 0 !important;
}
.elementor-section:has(.pal-promo) .elementor-widget,
.elementor-section:has(.pal-alert) .elementor-widget,
.elementor-section:has(.pal-stats) .elementor-widget,
.elementor-section:has(.pal-partners) .elementor-widget {
margin: 0 !important;
}
.elementor-section:has(.pal-promo) .elementor-widget-container,
.elementor-section:has(.pal-alert) .elementor-widget-container,
.elementor-section:has(.pal-stats) .elementor-widget-container,
.elementor-section:has(.pal-partners) .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
/* Fallback selectors for older browsers without :has() — match by widget content. */
.elementor-widget-shortcode .pal-promo,
.elementor-widget-shortcode .pal-alert,
.elementor-widget-shortcode .pal-stats,
.elementor-widget-shortcode .pal-partners { margin: 0 !important; }
.elementor-widget-html > .elementor-widget-container > p:empty { display: none; }
.pal-promo a.pal-promo-btn {
background: var(--pal-navy);
color: var(--pal-white);
padding: 6px 14px;
border-radius: var(--pal-radius);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
text-decoration: none;
transition: background .15s ease;
}
.pal-promo a.pal-promo-btn:hover { background: #fff; color: var(--pal-navy); }
/* ----------- ALERT POPUP MODAL ----------- */
/* Defensive: any element inside the modal with the [hidden] attribute MUST
be hidden, even if a more specific class rule sets display:flex/block.
Without this, .pal-alert-modal__left's `display:flex` (same specificity as
[hidden] but later in the cascade) was winning over the hidden attribute,
causing both the simple-mode image and the structured left panel to render
simultaneously when the JS tried to hide one. */
.pal-alert-modal [hidden],
.pal-alert-preview-frame [hidden] { display: none !important; }
.pal-alert-modal {
position: fixed;
inset: 0;
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.pal-alert-modal[hidden] { display: none; }
.pal-alert-modal.is-open { opacity: 1; pointer-events: auto; }
.pal-alert-modal__overlay {
position: absolute; inset: 0;
background: rgba(7, 31, 63, 0.55);
cursor: pointer;
}
.pal-alert-modal__panel {
position: relative;
background: #fff;
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
max-width: 940px;
width: 100%;
max-height: calc(100vh - 40px);
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(8px) scale(0.985);
transition: transform .25s ease;
}
.pal-alert-modal.is-open .pal-alert-modal__panel { transform: none; }
/* Close button lives at the top-right corner OF THE PANEL (the white card),
not the screen. Positioned relative to .pal-alert-modal__panel which is
already `position: relative`. Navy disc + white X reads cleanly on the
white right-panel background, which is where the corner lands in the
default two-column layout. */
.pal-alert-modal__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50% !important;
background: var(--pal-navy) !important;
color: #fff !important;
border: 0 !important;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, transform .15s ease;
-webkit-appearance: none;
appearance: none;
box-shadow: 0 2px 8px rgba(7, 31, 63, 0.18);
}
.pal-alert-modal__close:hover {
background: #0E2A52 !important;
color: #fff !important;
border: 0 !important;
transform: scale(1.06);
}
/* Explicit white X — !important so a theme's `button svg { fill: ... }` rule
can't repaint it the same color as the disc. */
.pal-alert-modal__close svg {
width: 16px !important;
height: 16px !important;
fill: none !important;
stroke: #fff !important;
stroke-width: 2.4 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
display: block;
}
/* On mobile (stacked layout) the panel's top-right corner sits over the
navy left panel, where a navy disc would disappear. Switch to a white
disc with a navy X in that case so it's always visible. */
@media (max-width: 759px) {
.pal-alert-modal--with-image .pal-alert-modal__close {
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.pal-alert-modal--with-image .pal-alert-modal__close svg {
stroke: var(--pal-navy) !important;
}
}
.pal-alert-modal__image {
display: none;
background-size: cover;
background-position: center;
background-color: var(--pal-navy);
}
.pal-alert-modal--with-image .pal-alert-modal__image { display: block; }
/* Image-only mode — just one designed graphic, no structured fields */
.pal-alert-modal--image-only .pal-alert-modal__panel {
max-width: 640px;
background: transparent;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
border-radius: 14px;
overflow: visible;
}
.pal-alert-modal__full {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
max-height: calc(100vh - 60px);
object-fit: contain;
}
.pal-alert-modal__full-link {
display: block;
line-height: 0;
cursor: pointer;
}
.pal-alert-modal__full-link:hover .pal-alert-modal__full { opacity: 0.96; }
/* Floating close button — sits OUTSIDE the panel at the top-right of the
modal backdrop area, so it's always visible regardless of how dark the
uploaded graphic is. */
.pal-alert-modal__close--floating {
position: absolute;
top: 14px;
right: 14px;
z-index: 10;
background: rgba(0, 0, 0, 0.45) !important;
border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.pal-alert-modal__close--floating svg { stroke: #fff !important; }
/* Structured left panel */
.pal-alert-modal__left {
display: flex;
flex-direction: column;
background-color: var(--pal-navy);
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
min-height: 220px;
}
.pal-alert-modal__left-inner {
flex: 1 1 auto;
padding: 28px 26px 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.pal-alert-modal__left-logo {
max-width: 88px;
max-height: 88px;
margin-bottom: 6px;
display: block;
}
.pal-alert-modal__left-subtitle {
margin: 0;
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.pal-alert-modal__left-title {
margin: 4px 0 0;
color: #fff;
font-size: 24px;
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.pal-alert-modal__left-script {
margin: -2px 0 0;
color: var(--pal-yellow);
font-family: "Allura", "Brush Script MT", "Lucida Handwriting", cursive;
font-style: normal;
font-size: var(--pal-script-size, 56px);
line-height: 1;
font-weight: 400;
letter-spacing: 0.01em;
overflow-wrap: break-word;
word-break: break-word;
max-width: 100%;
}
.pal-alert-modal__left-year {
margin: 4px 0 0;
color: var(--pal-yellow);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.08em;
border-top: 1px solid rgba(244, 165, 28, 0.4);
padding-top: 6px;
min-width: 120px;
}
.pal-alert-modal__left-details {
list-style: none;
margin: 16px 0 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.pal-alert-modal__left-details li {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 13px;
line-height: 1.3;
}
.pal-alert-modal__left-detail-icon {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(244, 165, 28, 0.18);
color: var(--pal-yellow);
display: inline-flex;
align-items: center;
justify-content: center;
}
.pal-alert-modal__left-detail-icon svg { width: 14px; height: 14px; }
.pal-alert-modal__left-detail-icon i { font-size: 12px; }
.pal-alert-modal__left-detail-text { flex: 1 1 auto; font-weight: 600; letter-spacing: 0.02em; }
.pal-alert-modal__left-strip {
background: var(--pal-yellow);
color: var(--pal-navy);
padding: 10px 16px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
}
/* Right panel feature icons row */
.pal-alert-modal__features {
list-style: none;
margin: 4px 0;
padding: 4px 0 8px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 12px;
border-top: 1px solid #EEF2F7;
padding-top: 16px;
}
.pal-alert-modal__feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.pal-alert-modal__feature-icon {
width: 56px; height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pal-alert-modal__feature-icon svg { width: 24px; height: 24px; }
.pal-alert-modal__feature-icon i { font-size: 22px; }
.pal-alert-modal__feature--navy .pal-alert-modal__feature-icon { background: var(--pal-navy); color: var(--pal-yellow); }
.pal-alert-modal__feature--yellow .pal-alert-modal__feature-icon { background: var(--pal-yellow); color: var(--pal-navy); }
.pal-alert-modal__feature--navy .pal-alert-modal__feature-icon svg { stroke: var(--pal-yellow) !important; }
.pal-alert-modal__feature--yellow .pal-alert-modal__feature-icon svg { stroke: var(--pal-navy) !important; }
.pal-alert-modal__feature-label {
color: var(--pal-navy);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.pal-alert-modal__content {
padding: 36px 32px 28px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.pal-alert-modal__eyebrow {
margin: 0;
color: var(--pal-yellow);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pal-alert-modal__title {
margin: 0;
color: var(--pal-navy);
font-size: 28px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}
.pal-alert-modal__text {
color: #3D4A57;
font-size: 15px;
line-height: 1.55;
}
.pal-alert-modal__text p { margin: 0 0 8px; }
.pal-alert-modal__text p:last-child { margin-bottom: 0; }
.pal-alert-modal__actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid #EEF2F7;
}
.pal-alert-modal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
box-sizing: border-box;
}
.pal-alert-modal__btn:hover { transform: translateY(-1px); }
.pal-alert-modal__btn--primary {
background: var(--pal-yellow);
color: var(--pal-navy);
border: 2px solid var(--pal-yellow);
}
.pal-alert-modal__btn--primary:hover { background: #E2940F; border-color: #E2940F; color: var(--pal-navy); }
.pal-alert-modal__btn--secondary {
background: #fff;
color: var(--pal-navy);
border: 2px solid var(--pal-navy);
}
.pal-alert-modal__btn--secondary:hover { background: var(--pal-navy); color: #fff; }
.pal-alert-modal__footer {
margin: 6px 0 0;
display: inline-flex;
align-items: center;
gap: 6px;
color: #5D6B7A;
font-size: 12px;
text-align: center;
justify-content: center;
}
.pal-alert-modal__footer-icon { color: var(--pal-yellow); flex-shrink: 0; }
/* Two-column layout when a left panel is set — desktop only */
@media (min-width: 760px) {
.pal-alert-modal--with-image .pal-alert-modal__panel {
flex-direction: row;
}
.pal-alert-modal--with-image .pal-alert-modal__image,
.pal-alert-modal--with-image .pal-alert-modal__left {
flex: 0 0 46%;
min-height: 540px;
}
.pal-alert-modal--with-image .pal-alert-modal__content {
flex: 1 1 auto;
padding: 44px 38px 32px;
}
.pal-alert-modal__title { font-size: 32px; }
.pal-alert-modal__left-inner { padding: 36px 30px 26px; gap: 10px; }
.pal-alert-modal__left-title { font-size: 30px; }
.pal-alert-modal__left-script { font-size: var(--pal-script-size-desktop, 72px); }
.pal-alert-modal__left-logo { max-width: 100px; max-height: 100px; }
}
/* Mobile: left panel on top, content below */
@media (max-width: 759px) {
.pal-alert-modal__panel { max-width: 460px; }
.pal-alert-modal--with-image .pal-alert-modal__image,
.pal-alert-modal--with-image .pal-alert-modal__left {
min-height: 220px;
}
.pal-alert-modal__content { padding: 24px 22px 20px; }
.pal-alert-modal__title { font-size: 22px; }
.pal-alert-modal__close { top: 8px; right: 8px; width: 32px; height: 32px; }
.pal-alert-modal__feature-icon { width: 48px; height: 48px; }
.pal-alert-modal__feature-icon svg { width: 20px; height: 20px; }
}
/* Lock background scroll while popup is open */
body.pal-alert-locked { overflow: hidden; }
/* Elementor popup / lightbox close button — brand color, not pink */
.dialog-lightbox-widget .dialog-close-button,
.dialog-lightbox-widget .dialog-close-button i,
.dialog-lightbox-widget .dialog-close-button svg,
.elementor-popup-modal .dialog-close-button,
.elementor-popup-modal .dialog-close-button i,
.elementor-popup-modal .dialog-close-button svg {
color: var(--pal-navy, #071F3F) !important;
fill: var(--pal-navy, #071F3F) !important;
}
.dialog-lightbox-widget .dialog-close-button:hover,
.dialog-lightbox-widget .dialog-close-button:hover i,
.elementor-popup-modal .dialog-close-button:hover,
.elementor-popup-modal .dialog-close-button:hover i {
color: var(--pal-yellow, #F4A51C) !important;
fill: var(--pal-yellow, #F4A51C) !important;
}
/* ----------- DEFENSIVE OUTLINE-SVG STYLING -----------
Force outline rendering to win over any global CSS that may apply
fill: currentColor (which would override our inline fill="none" and
make icons appear filled or invisible). */
.pal-stat__icon svg,
.pal-getinvolved__icon svg,
.pal-icon-img,
.pal-search svg,
.pal-language svg,
.pal-icon-field svg,
.pal-icon-modal svg {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* (Image-style "icons" — for partner/uploaded custom icons — should still allow fill.) */
.pal-icon-img { fill: initial !important; stroke: initial !important; }
/* ----------- STATS BAR ----------- */
.pal-stats {
background: var(--pal-navy);
color: #fff;
padding: 36px 20px;
/* Break out of Elementor's boxed-section container so the navy bar
stretches edge-to-edge regardless of how the section is configured. */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
}
.pal-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.pal-stat {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
padding: 6px 24px;
border-right: 1px solid rgba(255,255,255,0.25);
}
.pal-stat:last-child { border-right: 0; }
.pal-stat__text { display: flex; flex-direction: column; align-items: flex-start; }
.pal-stat__icon {
width: 44px;
height: 44px;
color: var(--pal-yellow);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
line-height: 1;
}
.pal-stat__icon i,
.pal-stat__icon .fas,
.pal-stat__icon .fab,
.pal-stat__icon .far { font-size: 32px; line-height: 1; }
.pal-stat__icon svg { width: 36px; height: 36px; display: block; }
.pal-stat__number {
font-size: 34px;
font-weight: 900;
letter-spacing: 0;
color: var(--pal-yellow);
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1;
}
.pal-stat__label {
font-size: 13px;
color: #ffffff;
text-transform: none;
letter-spacing: 0.02em;
margin-top: 6px;
font-weight: 600;
}
@media (max-width: 768px) {
.pal-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
.pal-stat { padding: 8px 12px; }
.pal-stat:nth-child(2) { border-right: 0; }
.pal-stat__number { font-size: 24px; }
}
/* ----------- PROGRAM CARDS ----------- */
.pal-programs {
max-width: 1200px;
margin: 0 auto;
}
/* Default (no modifier) keeps the legacy 4-up grid for back-compat with
templates already using [pal_program_cards] without view/columns args.
Uses flexbox so fewer-than-column-count cards center automatically. */
.pal-programs:not(.pal-programs--list):not(.pal-programs--grid),
.pal-programs--grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
}
.pal-programs:not(.pal-programs--list):not(.pal-programs--grid) > .pal-program-card,
.pal-programs--grid > .pal-program-card,
.pal-programs:not(.pal-programs--list):not(.pal-programs--grid) > .pal-program-card-link,
.pal-programs--grid > .pal-program-card-link {
width: calc((100% - 22px * (var(--pal-prog-cols, 4) - 1)) / var(--pal-prog-cols, 4));
min-width: 0;
}
.pal-programs--grid.pal-programs--cols-1 { --pal-prog-cols: 1; }
.pal-programs--grid.pal-programs--cols-2 { --pal-prog-cols: 2; }
.pal-programs--grid.pal-programs--cols-3 { --pal-prog-cols: 3; }
.pal-programs--grid.pal-programs--cols-4 { --pal-prog-cols: 4; }
/* List view: each card becomes a horizontal row — image left, body right */
.pal-programs--list {
display: flex;
flex-direction: column;
gap: 14px;
}
.pal-programs--list .pal-program-card {
display: grid;
grid-template-columns: 240px 1fr;
min-height: auto;
border-radius: var(--pal-radius-lg);
}
.pal-programs--list .pal-program-card__media {
min-height: 100%;
aspect-ratio: auto;
}
.pal-programs--list .pal-program-card__body {
padding: 22px 26px;
text-align: left;
}
@media (max-width: 640px) {
.pal-programs--list .pal-program-card { grid-template-columns: 1fr; }
.pal-programs--list .pal-program-card__media { min-height: 180px; aspect-ratio: 16/10; }
}
/* Program card link wrapper */
.pal-program-card-link {
text-decoration: none;
color: inherit;
display: block;
border-radius: 14px;
}
.pal-program-card-link:hover,
.pal-program-card-link:focus,
.pal-program-card-link:visited { text-decoration: none; color: inherit; }
.pal-program-card {
background: #fff;
border: 0;
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(7,31,63,0.10);
transition: transform .25s ease, box-shadow .25s ease;
cursor: pointer;
}
.pal-program-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(7,31,63,0.18); }
.pal-program-card__media {
min-height: 220px;
aspect-ratio: 4/3;
background: var(--pal-gray-100) center 25%/140% no-repeat;
position: relative;
z-index: 1;
}
@media (max-width: 1024px) { .pal-program-card__media { min-height: 180px; } }
.pal-program-card__media--solid {
background: linear-gradient(135deg, var(--pal-navy) 0%, var(--pal-navy-2) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.pal-program-card__icon--inline {
position: static;
transform: none;
width: 64px;
height: 64px;
font-size: 28px;
border: none;
background: rgba(244,165,28,0.18);
color: var(--pal-yellow);
box-shadow: none;
}
.pal-program-card__icon {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -26px;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--pal-navy);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 14px rgba(7,31,63,0.25);
border: 3px solid #fff;
z-index: 2;
}
.pal-program-card__icon svg {
width: 24px; height: 24px; display: block;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.pal-program-card__body { padding: 38px 20px 24px; flex: 1; display: flex; flex-direction: column; text-align: center; position: relative; z-index: 0; }
.pal-program-card__title { font-weight: 800; color: var(--pal-navy); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.pal-program-card__desc { color: var(--pal-gray-700); font-size: 14px; margin: 0 0 16px; flex: 1; line-height: 1.55; }
.pal-program-card__cta {
color: var(--pal-navy);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
align-self: center;
}
.pal-program-card__cta:hover { color: var(--pal-yellow-dark); }
/* Responsive for grid mode only — list mode handled in its own media query above */
@media (max-width: 1024px) {
.pal-programs:not(.pal-programs--list):not(.pal-programs--list-skip) > .pal-program-card,
.pal-programs--grid > .pal-program-card,
.pal-programs:not(.pal-programs--list):not(.pal-programs--list-skip) > .pal-program-card-link,
.pal-programs--grid > .pal-program-card-link {
width: calc((100% - 22px) / 2);
}
}
@media (max-width: 600px) {
.pal-programs:not(.pal-programs--list):not(.pal-programs--list-skip) > .pal-program-card,
.pal-programs--grid > .pal-program-card,
.pal-programs:not(.pal-programs--list):not(.pal-programs--list-skip) > .pal-program-card-link,
.pal-programs--grid > .pal-program-card-link {
width: 100%;
}
}
/* ----------- EVENTS LIST ----------- */
.pal-events { list-style: none; margin: 0; padding: 0; }
.pal-event {
position: relative; /* anchor for the stretched-link pseudo-element below */
display: grid;
grid-template-columns: 60px 1fr;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--pal-gray-100);
align-items: center;
}
/* Card-wide click target — the title's grows a pseudo-element that
covers the entire .pal-event, so clicking anywhere on the row/card
navigates to the event URL. The visible text is unchanged; only
its hit area expands. Skipped for events without a URL via the
.pal-event--clickable class added in PHP. */
.pal-event--clickable { cursor: pointer; }
.pal-event--clickable .pal-event__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* Keep the title clearly readable as a link target — but let the click
land on the wider pseudo-element above. */
.pal-event__link { text-decoration: none; }
.pal-event--clickable .pal-event__link:hover { color: var(--pal-yellow-dark); }
.pal-event:last-child { border-bottom: 0; }
.pal-event__date {
background: var(--pal-yellow);
color: var(--pal-navy);
border-radius: var(--pal-radius);
text-align: center;
padding: 8px 0;
line-height: 1;
}
.pal-event__date-month { display:block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pal-event__date-day { display:block; font-size: 22px; font-weight: 800; margin-top: 3px; }
.pal-event__title { color: var(--pal-navy); font-weight: 700; font-size: 14px; margin: 0 0 4px; line-height: 1.3; }
.pal-event__title a { color: inherit; text-decoration: none; }
.pal-event__title a:hover { color: var(--pal-yellow-dark); }
.pal-event__meta { color: var(--pal-gray-700); font-size: 12px; }
/* Optional featured image — opt in via [pal_upcoming_events show_image="yes"]
Adds an image column to the left of the date pill. */
.pal-events--with-images .pal-event {
grid-template-columns: 80px 60px 1fr;
}
.pal-event--with-image .pal-event__media,
.pal-events--with-images .pal-event__media {
display: block;
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
background-color: var(--pal-gray-100);
border-radius: var(--pal-radius);
flex-shrink: 0;
text-decoration: none;
}
.pal-event__media:hover { opacity: 0.92; }
/* When show_image is on but a particular row has no image (e.g. a Google
Calendar event), keep the row aligned by leaving the first column empty. */
.pal-events--with-images .pal-event:not(.pal-event--with-image) .pal-event__date { grid-column: 1 / span 2; max-width: 60px; }
.pal-events--with-images .pal-event:not(.pal-event--with-image) .pal-event__body { grid-column: 3; }
.pal-event__body { min-width: 0; }
@media (max-width: 520px) {
.pal-events--with-images .pal-event { grid-template-columns: 64px 56px 1fr; gap: 10px; }
.pal-event--with-image .pal-event__media,
.pal-events--with-images .pal-event__media { width: 64px; height: 64px; }
}
/* ----------- EVENTS GRID VIEW -----------
Opt in via [pal_upcoming_events view="grid" columns="3"]. Each event
becomes a card: image on top (full-width), date pill overlaid in the
top-left, title + meta below in a body block. */
.pal-events--grid {
display: grid;
grid-template-columns: repeat(var(--pal-event-cols, 3), minmax(0, 1fr));
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.pal-events--grid.pal-events--cols-1 { --pal-event-cols: 1; }
.pal-events--grid.pal-events--cols-2 { --pal-event-cols: 2; }
.pal-events--grid.pal-events--cols-3 { --pal-event-cols: 3; }
.pal-events--grid.pal-events--cols-4 { --pal-event-cols: 4; }
.pal-events--grid .pal-event {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border: 1px solid var(--pal-gray-100);
border-radius: var(--pal-radius);
overflow: hidden;
background: #fff;
box-shadow: var(--pal-shadow);
position: relative;
transition: transform .15s ease, box-shadow .15s ease;
}
.pal-events--grid .pal-event:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(7, 31, 63, 0.12);
}
.pal-events--grid .pal-event__media {
display: block;
width: 100%;
height: 180px;
background-size: cover;
background-position: center;
background-color: var(--pal-gray-100);
border-radius: 0;
}
.pal-events--grid .pal-event:not(.pal-event--with-image) .pal-event__media { display: none; }
/* No-image card visual treatment so it doesn't look broken — soft gradient +
yellow top accent stripe so the card reads as intentional, not "missing image". */
.pal-events--grid .pal-event:not(.pal-event--with-image) {
background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
border-top: 3px solid var(--pal-yellow);
}
/* Date pill overlays the image (or sits at the top-left when no image). */
.pal-events--grid .pal-event__date {
position: absolute;
top: 12px;
left: 12px;
background: var(--pal-yellow);
color: var(--pal-navy);
border-radius: var(--pal-radius);
padding: 8px 10px;
min-width: 52px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
max-width: none;
z-index: 2;
}
.pal-events--grid .pal-event__body {
padding: 16px 18px 18px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
}
/* When the card has NO image, body needs extra left padding so the
absolutely-positioned date pill doesn't overlap the title text. */
.pal-events--grid .pal-event:not(.pal-event--with-image) .pal-event__body {
padding-left: 80px;
min-height: 88px;
}
.pal-events--grid .pal-event__title { font-size: 16px; }
.pal-events--grid .pal-event__meta { font-size: 13px; }
/* Reset list-view-only column rules when in grid mode */
.pal-events--grid .pal-event,
.pal-events--grid.pal-events--with-images .pal-event {
grid-template-columns: none;
border-bottom: 1px solid var(--pal-gray-100);
}
/* Responsive grid: 4 → 2 → 1 as viewport narrows */
@media (max-width: 900px) {
.pal-events--grid.pal-events--cols-3,
.pal-events--grid.pal-events--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.pal-events--grid { grid-template-columns: 1fr !important; }
.pal-events--grid .pal-event__media { height: 160px; }
}
/* Past-vs-upcoming styling for [pal_events] (full archive shortcode) */
.pal-event--past { opacity: 0.78; }
.pal-event--past:hover { opacity: 1; }
.pal-event--past .pal-event__media { filter: saturate(0.8); }
.pal-event--past:hover .pal-event__media { filter: none; }
.pal-event__status {
display: inline-block;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 6px;
width: fit-content;
}
.pal-event__status--upcoming { background: var(--pal-yellow); color: var(--pal-navy); }
.pal-event__status--past { background: #E4EAF2; color: #5D6B7A; }
.pal-event__excerpt {
color: var(--pal-gray-700);
font-size: 13px;
line-height: 1.5;
margin: 6px 0 0;
}
/* ----------- SINGLE PROGRAM (full detail) ----------- */
.pal-program-single {
max-width: 980px;
margin: 0 auto;
background: #fff;
overflow: hidden;
}
.pal-program-single__media {
position: relative;
min-height: 320px;
aspect-ratio: 16/8;
background-color: var(--pal-gray-100);
background-size: cover;
background-position: center;
}
.pal-program-single__icon {
position: absolute;
top: 18px; left: 18px;
width: 56px; height: 56px;
border-radius: 14px;
background: var(--pal-yellow);
color: var(--pal-navy);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(7,31,63,0.18);
}
.pal-program-single__icon svg { width: 30px; height: 30px; }
.pal-program-single__body { padding: 36px 38px 40px; }
.pal-program-single__title {
font-size: 32px; font-weight: 800;
color: var(--pal-navy);
margin: 0 0 12px;
letter-spacing: -0.01em;
line-height: 1.1;
}
.pal-program-single__short {
color: var(--pal-gray-700);
font-size: 17px; line-height: 1.55;
margin: 0 0 18px;
}
.pal-program-single__content { color: #1d2327; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.pal-program-single__content p { margin: 0 0 14px; }
.pal-program-single__locations { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--pal-gray-100); }
.pal-program-single__locations-heading {
color: var(--pal-navy);
font-size: 18px; font-weight: 700;
margin: 0 0 14px;
}
.pal-program-single__locations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.pal-program-single__location {
background: var(--pal-gray-50);
border-radius: var(--pal-radius);
padding: 16px 18px;
}
.pal-program-single__location-name { color: var(--pal-navy); font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.pal-program-single__location-address,
.pal-program-single__location-when { color: var(--pal-gray-700); font-size: 13px; margin: 0 0 4px; line-height: 1.5; }
.pal-program-single__location-link {
display: inline-block;
margin-top: 6px;
color: var(--pal-yellow-dark);
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.pal-program-single__location-link:hover { color: var(--pal-navy); }
.pal-program-single__cta-wrap { margin-top: 28px; }
/* Season / age pills on single program page */
.pal-program-single__meta-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 14px;
}
.pal-program-single__pill {
display: inline-block;
background: var(--pal-yellow);
color: var(--pal-navy);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 999px;
line-height: 1.4;
}
/* Contacts on single program page */
.pal-program-single__contacts {
background: var(--pal-gray-50);
border-radius: var(--pal-radius);
padding: 18px 20px;
margin: 20px 0;
border-left: 4px solid var(--pal-yellow);
}
.pal-program-single__contacts h3 {
font-size: 15px;
font-weight: 700;
color: var(--pal-navy);
margin: 0 0 10px;
}
.pal-program-single__contact {
font-size: 14px;
line-height: 1.65;
margin-bottom: 8px;
color: var(--pal-gray-700);
}
.pal-program-single__contact:last-child { margin-bottom: 0; }
.pal-program-single__contact a {
color: var(--pal-yellow-dark);
text-decoration: none;
font-weight: 600;
}
.pal-program-single__contact a:hover { color: var(--pal-navy); }
/* Accreditation on single program page */
.pal-program-single__accreditation {
font-size: 13px;
color: var(--pal-gray-700);
background: var(--pal-gray-50);
border-radius: var(--pal-radius);
padding: 10px 14px;
margin: 14px 0;
}
@media (max-width: 700px) {
.pal-program-single__body { padding: 24px 22px 28px; }
.pal-program-single__title { font-size: 26px; }
.pal-program-single__media { min-height: 220px; aspect-ratio: 16/9; }
}
/* ----------- INFO CARDS (Program Additional Info) ----------- */
.pal-info-cards-section {
background: var(--pal-gray-50);
padding: 48px 24px;
margin: 40px 0 0;
}
.pal-info-cards {
max-width: 980px;
margin: 0 auto;
padding: 0;
}
.pal-info-cards--nested {
max-width: none;
margin: 20px 0 0;
padding: 24px 0 0;
}
.pal-info-cards__heading {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pal-navy);
margin: 0 0 10px;
line-height: 1.2;
}
.pal-info-cards__heading::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--pal-yellow);
border-radius: 2px;
margin: 12px auto 28px;
}
.pal-info-cards__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pal-info-card {
background: #fff;
border-radius: var(--pal-radius-lg);
border-top: 4px solid var(--pal-yellow);
box-shadow: 0 4px 20px rgba(7,31,63,0.08);
padding: 30px 24px 26px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pal-info-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(7,31,63,0.14);
}
.pal-info-card__icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--pal-navy);
color: var(--pal-yellow);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
flex-shrink: 0;
}
.pal-info-card__icon svg {
width: 28px;
height: 28px;
stroke: var(--pal-yellow) !important;
}
.pal-info-card__icon i {
font-size: 24px;
color: var(--pal-yellow);
}
.pal-info-card__icon img {
width: 30px;
height: 30px;
object-fit: contain;
}
.pal-info-card__title {
font-size: 17px;
font-weight: 700;
color: var(--pal-navy);
margin: 0 0 10px;
line-height: 1.3;
}
.pal-info-card__desc {
font-size: 14px;
line-height: 1.6;
color: var(--pal-gray-700) !important;
margin: 0 0 18px;
flex: 1;
}
.pal-info-card__desc-text {
max-height: calc(1.6em * 4);
overflow: hidden;
transition: max-height 0.3s ease;
color: var(--pal-gray-700) !important;
}
.pal-info-card__desc-text p { margin: 0 0 0.6em; }
.pal-info-card__desc-text p:last-child { margin-bottom: 0; }
.pal-info-card__desc-text ul,
.pal-info-card__desc-text ol { margin: 0 0 0.6em; padding-left: 1.4em; text-align: left; }
.pal-info-card__desc-text strong,
.pal-info-card__desc-text b { font-weight: 700; }
.pal-info-card__desc-text.is-expanded {
max-height: none;
overflow: visible;
}
button.pal-info-card__desc-toggle,
.pal-info-card__desc-toggle {
display: inline-block !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
margin-top: 6px !important;
color: var(--pal-yellow-dark) !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
box-shadow: none !important;
line-height: 1.4 !important;
}
button.pal-info-card__desc-toggle:hover,
.pal-info-card__desc-toggle:hover {
color: var(--pal-navy) !important;
background: none !important;
}
.pal-info-card__btn {
display: inline-block;
background: var(--pal-navy);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 10px 22px;
border-radius: 6px;
text-decoration: none;
transition: background 0.2s ease;
margin-top: auto;
}
.pal-info-card__btn:hover {
background: var(--pal-navy-2);
color: #fff;
}
@media (max-width: 900px) {
.pal-info-cards__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
.pal-info-cards__grid { grid-template-columns: 1fr; }
.pal-info-cards__heading { font-size: 17px; }
}
/* ----------- PROGRAM FEATURED IMAGE WIDGET ----------- */
.pal-program-featured-img {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 4px 24px rgba(7,31,63,0.10), 0 1px 4px rgba(7,31,63,0.06);
position: sticky;
top: 20px;
}
.pal-program-featured-img__img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 14px;
}
.pal-program-featured-img__icon {
position: absolute;
top: 12px; left: 12px;
width: 44px; height: 44px;
border-radius: 11px;
background: var(--pal-yellow);
color: var(--pal-navy);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(7,31,63,0.22);
z-index: 1;
}
.pal-program-featured-img__icon svg { width: 24px; height: 24px; }
@media (max-width: 767px) {
.pal-program-featured-img { position: static; margin-bottom: 24px; }
}
/* ----------- PROGRAMS PAGE (category-grouped accordion layout) ----------- */
.pal-progpage {
max-width: 960px;
margin: 0 auto;
}
/* Category section */
.pal-progpage__section {
margin-bottom: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--pal-gray-100);
}
.pal-progpage__section:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.pal-progpage__header {
margin-bottom: 24px;
}
.pal-progpage__image {
margin-bottom: 18px;
border-radius: var(--pal-radius-lg);
overflow: hidden;
}
.pal-progpage__image img {
display: block;
width: 100%;
max-height: 360px;
object-fit: cover;
border-radius: var(--pal-radius-lg);
}
.pal-progpage__title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 28px;
color: var(--pal-navy);
margin: 0 0 12px;
letter-spacing: -0.01em;
line-height: 1.15;
}
.pal-progpage__desc {
color: var(--pal-gray-700);
font-size: 15px;
line-height: 1.65;
margin: 0 0 4px;
}
.pal-progpage__desc p {
margin: 0 0 10px;
}
.pal-progpage__desc p:last-child {
margin-bottom: 0;
}
/* Accordion component */
.pal-progpage__accordions {
display: flex;
flex-direction: column;
gap: 8px;
}
.pal-accordion {
background: var(--pal-gray-50);
border-radius: var(--pal-radius-lg);
border: 1px solid var(--pal-gray-100);
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.pal-accordion:has(.pal-accordion__trigger[aria-expanded="true"]) {
box-shadow: 0 4px 16px rgba(7,31,63,0.08);
}
.pal-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 20px;
background: none;
border: 0;
cursor: pointer;
text-align: left;
gap: 12px;
font-family: inherit;
font-size: 15px;
color: var(--pal-navy);
transition: background 0.15s ease;
}
.pal-accordion__trigger:hover {
background: rgba(7,31,63,0.03);
}
.pal-accordion__trigger[aria-expanded="true"] {
background: #fff;
border-bottom: 1px solid var(--pal-gray-100);
}
.pal-accordion__label {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.pal-accordion__name {
font-weight: 700;
font-size: 15px;
color: var(--pal-navy);
line-height: 1.3;
}
.pal-accordion__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pal-accordion__tag {
display: inline-block;
background: var(--pal-yellow);
color: var(--pal-navy);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
line-height: 1.4;
}
.pal-accordion__subtitle {
font-size: 13px;
color: var(--pal-gray-700);
line-height: 1.45;
}
.pal-accordion__chevron {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--pal-gray-700);
transition: transform 0.25s ease;
}
.pal-accordion__trigger[aria-expanded="true"] .pal-accordion__chevron {
transform: rotate(180deg);
}
.pal-accordion__panel {
background: #fff;
}
.pal-accordion__body {
padding: 20px 24px 24px;
}
.pal-accordion__content {
font-size: 14px;
line-height: 1.65;
color: #1d2327;
margin-bottom: 16px;
}
.pal-accordion__content p { margin: 0 0 12px; }
.pal-accordion__content p:last-child { margin-bottom: 0; }
/* Contacts block inside accordion */
.pal-accordion__contacts {
background: var(--pal-gray-50);
border-radius: var(--pal-radius);
padding: 16px 18px;
margin: 16px 0;
border-left: 4px solid var(--pal-yellow);
}
.pal-accordion__contacts-heading {
font-size: 14px;
font-weight: 700;
color: var(--pal-navy);
margin: 0 0 8px;
}
.pal-accordion__contact {
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
color: var(--pal-gray-700);
}
.pal-accordion__contact:last-child { margin-bottom: 0; }
.pal-accordion__contact a {
color: var(--pal-yellow-dark);
text-decoration: none;
font-weight: 600;
}
.pal-accordion__contact a:hover { color: var(--pal-navy); }
/* Accreditation */
.pal-accordion__accreditation {
font-size: 13px;
color: var(--pal-gray-700);
background: var(--pal-gray-50);
border-radius: var(--pal-radius);
padding: 10px 14px;
margin: 12px 0;
}
/* Locations inside accordion */
.pal-accordion__locations {
margin: 16px 0;
}
.pal-accordion__locations h4 {
font-size: 14px;
font-weight: 700;
color: var(--pal-navy);
margin: 0 0 8px;
}
.pal-accordion__locations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.pal-accordion__location {
background: var(--pal-gray-50);
border-radius: var(--pal-radius);
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--pal-gray-700);
}
.pal-accordion__location strong { color: var(--pal-navy); }
.pal-accordion__location a {
color: var(--pal-yellow-dark);
font-weight: 600;
text-decoration: none;
}
.pal-accordion__location a:hover { color: var(--pal-navy); }
/* CTA inside accordion */
.pal-accordion__cta-wrap {
margin-top: 16px;
}
/* Responsive */
@media (max-width: 700px) {
.pal-progpage__title { font-size: 24px; }
.pal-progpage__image img { max-height: 240px; }
.pal-accordion__trigger { padding: 14px 16px; }
.pal-accordion__body { padding: 16px 16px 20px; }
.pal-accordion__name { font-size: 14px; }
}
/* ----------- GET INVOLVED LIST ----------- */
.pal-getinvolved { list-style: none; margin: 0; padding: 0; }
.pal-getinvolved li {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--pal-gray-100);
}
.pal-getinvolved li:last-child { border-bottom: 0; }
.pal-getinvolved__icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(244, 165, 28, 0.18);
color: var(--pal-yellow-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: 0 0 40px;
}
.pal-getinvolved__icon svg { width: 20px; height: 20px; display: block; }
.pal-getinvolved__name { font-weight: 700; color: var(--pal-navy); font-size: 14px; }
.pal-getinvolved__desc { font-size: 12px; color: var(--pal-gray-700); }
/* ----------- LATEST NEWS ----------- */
.pal-news { max-width: 1200px; margin: 0 auto; }
.pal-news:not(.pal-news--list):not(.pal-news--grid),
.pal-news--grid {
display: grid;
grid-template-columns: repeat(var(--pal-news-cols, 3), minmax(0, 1fr));
gap: 28px;
}
.pal-news--grid.pal-news--cols-1 { --pal-news-cols: 1; }
.pal-news--grid.pal-news--cols-2 { --pal-news-cols: 2; }
.pal-news--grid.pal-news--cols-3 { --pal-news-cols: 3; }
.pal-news--grid.pal-news--cols-4 { --pal-news-cols: 4; }
.pal-news--list {
display: flex;
flex-direction: column;
gap: 14px;
}
.pal-news--list .pal-news-card {
display: grid;
grid-template-columns: 220px 1fr;
}
.pal-news--list .pal-news-card__media { aspect-ratio: auto; min-height: 100%; }
.pal-news--list .pal-news-card__body { padding: 18px 22px; }
@media (max-width: 900px) {
.pal-news:not(.pal-news--list):not(.pal-news--grid),
.pal-news--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 560px) {
.pal-news:not(.pal-news--list):not(.pal-news--grid),
.pal-news--grid { grid-template-columns: 1fr; }
.pal-news--list .pal-news-card { grid-template-columns: 1fr; }
.pal-news--list .pal-news-card__media { min-height: 180px; aspect-ratio: 16/10; }
}
.pal-news-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(7,31,63,0.10);
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease;
}
.pal-news-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(7,31,63,0.16); }
.pal-news-card__media { aspect-ratio: 16/10; min-height: 200px; background: var(--pal-gray-100) center/cover no-repeat; }
.pal-news-card__body { padding: 22px 24px 24px; }
.pal-news-card__title { font-size: 17px; font-weight: 700; color: var(--pal-navy); margin: 0 0 8px; line-height: 1.35; }
.pal-news-card__title a { color: inherit; text-decoration: none; }
.pal-news-card__title a:hover { color: var(--pal-yellow-dark); }
.pal-news-card__date { color: var(--pal-gray-700); font-size: 12px; letter-spacing: 0.02em; }
@media (max-width: 1024px) { .pal-news { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pal-news { grid-template-columns: 1fr; } }
/* News CTA (newsletter sign-up) */
.pal-news-cta {
text-align: center;
margin: var(--pal-space-lg, 40px) auto 0;
max-width: 600px;
}
.pal-news-cta p {
color: var(--pal-gray-700, #555);
font-size: 15px;
margin: 0 0 var(--pal-space-sm, 16px);
line-height: 1.6;
}
/* --- News card type badge --- */
.pal-news-card__media { position: relative; }
.pal-news-card__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
z-index: 1;
}
.pal-news-card__badge--news { background: var(--pal-navy, #071F3F); color: #fff; }
.pal-news-card__badge--newsletter { background: var(--pal-yellow, #F4A51C); color: var(--pal-navy, #071F3F); }
/* --- News filter tabs --- */
.pal-news-filter {
display: flex;
gap: 8px;
justify-content: center;
margin: 0 0 24px;
}
.pal-news-filter__btn {
background: var(--pal-gray-100, #F3F5F8);
border: 1px solid var(--pal-gray-300, #D4DAE1);
border-radius: 20px;
padding: 6px 18px;
font-size: 13px;
font-weight: 600;
color: var(--pal-gray-700, #555);
cursor: pointer;
transition: all .2s ease;
}
.pal-news-filter__btn:hover {
border-color: var(--pal-navy, #071F3F);
color: var(--pal-navy, #071F3F);
}
.pal-news-filter__btn.is-active {
background: var(--pal-navy, #071F3F);
border-color: var(--pal-navy, #071F3F);
color: #fff;
}
.pal-news-card.is-filtered-out { display: none; }
/* ----------- PARTNER SLIDER (auto-scrolling, 6 visible at a time) ----------- */
.pal-partners {
background: var(--pal-gray-50);
padding: 38px 0;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
overflow: hidden;
}
.pal-partners__title {
text-align: center;
color: var(--pal-navy);
font-weight: 800;
margin: 0 0 24px;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.pal-partners__viewport {
overflow: hidden;
padding: 0 20px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.pal-partners__track {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
}
.pal-partners__track.is-scrolling {
justify-content: flex-start;
width: max-content;
animation: pal-partners-scroll var(--pal-speed, 30s) linear infinite;
}
.pal-partners__track.is-scrolling:hover { animation-play-state: paused; }
@keyframes pal-partners-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.pal-partners__item {
flex: 0 0 calc((min(100vw, 1300px) - 20px * 2 - 40px * (var(--pal-visible) - 1)) / var(--pal-visible));
height: 80px;
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(0.15);
opacity: 0.92;
transition: filter .2s ease, opacity .2s ease;
}
.pal-partners__item:hover { filter: none; opacity: 1; }
.pal-partners__item img {
max-width: 100%;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.pal-partners__placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
max-height: 70px;
padding: 8px 14px;
background: #fff;
color: var(--pal-navy);
border: 1px solid var(--pal-gray-100);
border-radius: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
box-sizing: border-box;
}
@media (max-width: 1200px) {
.pal-partners__viewport { --pal-visible: 4 !important; }
}
@media (max-width: 768px) {
.pal-partners__viewport { --pal-visible: 3 !important; }
.pal-partners__track { gap: 24px; }
.pal-partners__item { height: 60px; }
.pal-partners__item img { max-height: 50px; }
}
@media (max-width: 480px) {
.pal-partners__viewport { --pal-visible: 1 !important; }
.pal-partners__item { height: 56px; }
.pal-partners__item img { max-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.pal-partners__track.is-scrolling { animation: none; }
}
/* ----------- COMMUNITY PARTNERS PAGE (tier-grouped grid) ----------- */
.pal-community-partners {
max-width: var(--pal-content-wide, 1200px);
margin: 0 auto;
padding: 0 var(--pal-space-sm, 16px);
}
.pal-partner-logo.is-featured {
box-shadow: 0 0 0 3px var(--pal-yellow, #F4A51C), var(--pal-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.pal-partner-logo.is-featured img { max-height: 100px; }
/* ----------- SINGLE PARTNER PROFILE ----------- */
/* Container */
.pal-pp { max-width: var(--pal-content-max, 900px); margin: 0 auto; }
/* Header: logo + tier/tagline/website — matches program single style */
.pal-pp__header {
display: flex;
align-items: center;
gap: 24px;
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid #E6ECF3;
}
.pal-pp__logo {
flex-shrink: 0;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #E6ECF3;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.pal-pp__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pal-pp__meta { flex: 1; }
.pal-pp__tier {
display: inline-block;
padding: 4px 12px;
background: var(--pal-navy, #071F3F);
color: var(--pal-yellow, #F4A51C);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
border-radius: 999px;
margin-bottom: 6px;
}
.pal-pp__tagline {
font-size: 15px;
color: var(--pal-gray-700, #555);
margin: 4px 0 0;
line-height: 1.5;
}
.pal-pp__website {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--pal-yellow, #F4A51C);
text-decoration: none;
margin-top: 6px;
}
.pal-pp__website:hover { text-decoration: underline; }
.pal-pp__socials { display: flex; gap: 6px; margin-top: 10px; }
.pal-pp__socials a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--pal-gray-100, #F4F5F7);
color: var(--pal-navy, #071F3F);
transition: background .15s, color .15s;
}
.pal-pp__socials a:hover { background: var(--pal-navy, #071F3F); color: #fff; }
/* Two-column body */
.pal-pp__body {
display: grid;
grid-template-columns: 1fr 260px;
gap: 32px;
align-items: start;
}
.pal-pp__body--full { grid-template-columns: 1fr; }
/* Main content */
.pal-pp__heading {
font-size: 18px;
font-weight: 800;
color: var(--pal-navy, #071F3F);
margin: 0 0 14px;
}
.pal-pp__content { font-size: 15px; line-height: 1.75; color: var(--pal-gray-800, #333); }
.pal-pp__content p:last-child { margin-bottom: 0; }
.pal-pp__empty { color: var(--pal-gray-500, #888); font-style: italic; margin: 0; }
/* Sidebar */
.pal-pp__sidebar { display: flex; flex-direction: column; gap: 14px; }
.pal-pp__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
background: var(--pal-navy, #071F3F);
color: #fff;
font-weight: 700;
font-size: 14px;
border-radius: 8px;
text-decoration: none;
transition: background .15s;
}
.pal-pp__btn:hover { background: #0A2D5C; }
.pal-pp__card {
background: var(--pal-gray-50, #F7F9FC);
border: 1px solid #E6ECF3;
border-radius: 10px;
padding: 18px;
}
.pal-pp__card-title {
font-size: 12px;
font-weight: 800;
color: var(--pal-navy, #071F3F);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 10px;
}
.pal-pp__row { font-size: 14px; margin: 0 0 6px; color: var(--pal-gray-700, #555); }
.pal-pp__row:last-child { margin-bottom: 0; }
.pal-pp__row a { color: var(--pal-navy, #071F3F); text-decoration: none; }
.pal-pp__row a:hover { text-decoration: underline; }
.pal-pp__social-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pal-pp__social-list a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1px solid #E6ECF3;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: var(--pal-navy, #071F3F);
text-decoration: none;
transition: border-color .15s;
}
.pal-pp__social-list a:hover { border-color: var(--pal-navy, #071F3F); }
@media (max-width: 768px) {
.pal-pp__header { flex-direction: column; text-align: center; }
.pal-pp__logo { margin: 0 auto; }
.pal-pp__socials { justify-content: center; }
.pal-pp__body { grid-template-columns: 1fr; }
}
/* ----------- DONATE CARD (centered "Your Support Changes Lives") ----------- */
.pal-donate-card {
background: var(--pal-navy);
color: #fff;
border-radius: var(--pal-radius-lg);
padding: 26px 22px;
text-align: center;
}
.pal-donate-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
.pal-donate-card p { font-size: 13px; color: #C4CCD8; margin: 0 0 16px; }
.pal-donate-card .pal-btn-yellow { background: var(--pal-yellow); color: var(--pal-navy); }
/* ----------- BUTTONS (shared) ----------- */
.pal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--pal-radius);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
text-decoration: none;
transition: background .15s, color .15s, box-shadow .15s;
}
.pal-btn-yellow { background: var(--pal-yellow); color: var(--pal-navy); }
.pal-btn-yellow:hover { background: var(--pal-yellow-dark); color: #fff; }
.pal-btn-navy { background: var(--pal-navy); color: #fff; }
.pal-btn-navy:hover { background: #0e2a52; }
.pal-btn-outline { background: transparent; color: #fff; border: 1.5px solid #fff; }
.pal-btn-outline:hover { background: #fff; color: var(--pal-navy); }
/* ----------- GOLD-OUTLINE BUTTON UTILITY -----------
Uses 3-class specificity (0,3,0) to beat child-theme elementor-buttons.css
which uses 2-class (0,2,0). Both use !important, so higher specificity wins. */
.pal-hero .elementor-widget-button .elementor-button,
.pal-hero .elementor-button-wrapper .elementor-button,
.pal-hero-split .elementor-widget-button .elementor-button,
.pal-hero-split .elementor-button-wrapper .elementor-button,
.pal-dark-bg .elementor-widget-button .elementor-button,
.pal-dark-bg .elementor-button-wrapper .elementor-button,
.pal-donate-card .elementor-widget-button .elementor-button,
.pal-donate-card .elementor-button-wrapper .elementor-button,
.elementor-widget-button .elementor-button.pal-btn-gold-outline {
background: transparent !important;
border: 2px solid var(--pal-yellow) !important;
color: #fff !important;
border-radius: var(--pal-radius-md, 12px) !important;
font-size: 14px !important;
padding: 12px 28px !important;
}
.pal-hero .elementor-widget-button .elementor-button:hover,
.pal-hero .elementor-button-wrapper .elementor-button:hover,
.pal-hero-split .elementor-widget-button .elementor-button:hover,
.pal-hero-split .elementor-button-wrapper .elementor-button:hover,
.pal-dark-bg .elementor-widget-button .elementor-button:hover,
.pal-dark-bg .elementor-button-wrapper .elementor-button:hover,
.pal-donate-card .elementor-widget-button .elementor-button:hover,
.pal-donate-card .elementor-button-wrapper .elementor-button:hover,
.elementor-widget-button .elementor-button.pal-btn-gold-outline:hover {
background: var(--pal-yellow) !important;
border-color: var(--pal-yellow) !important;
color: var(--pal-navy) !important;
}
.pal-hero .elementor-widget-button .elementor-button-icon,
.pal-hero .elementor-widget-button .elementor-button-text,
.pal-hero-split .elementor-widget-button .elementor-button-icon,
.pal-hero-split .elementor-widget-button .elementor-button-text,
.pal-dark-bg .elementor-widget-button .elementor-button-icon,
.pal-dark-bg .elementor-widget-button .elementor-button-text {
color: inherit !important;
}
/* Keep the yellow donate button solid gold */
.pal-hero .elementor-widget-button .elementor-button.pal-btn-yellow,
.pal-hero-split .elementor-widget-button .elementor-button.pal-btn-yellow,
.pal-dark-bg .elementor-widget-button .elementor-button.pal-btn-yellow {
background: var(--pal-yellow) !important;
border-color: var(--pal-yellow) !important;
color: var(--pal-navy) !important;
}
.pal-hero .elementor-widget-button .elementor-button.pal-btn-yellow:hover,
.pal-hero-split .elementor-widget-button .elementor-button.pal-btn-yellow:hover,
.pal-dark-bg .elementor-widget-button .elementor-button.pal-btn-yellow:hover {
background: var(--pal-yellow-dark) !important;
border-color: var(--pal-yellow-dark) !important;
}
/* ----------- HEADER (DARK TOOLBAR + OVERSIZED LOGO) ----------- */
.pal-toolbar--dark, .pal-toolbar--dark .elementor-container { color: #fff; }
.pal-toolbar--dark a { color: #fff; }
.pal-toolbar--dark .pal-search input[type="search"] {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
max-width: 240px;
}
.pal-toolbar--dark .pal-search input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }
.pal-toolbar--dark .pal-search .pal-search-icon { color: rgba(255,255,255,0.55); }
.pal-toolbar--dark .pal-language,
.pal-toolbar--dark .pal-language * { color: #fff; }
.pal-toolbar--dark .pal-socials a {
background: transparent;
color: #fff;
}
.pal-toolbar--dark .pal-socials a:hover { background: var(--pal-yellow); color: var(--pal-navy); }
/* Oversized PAL logo that extends well below the header into the hero (mockup match). */
.pal-header-main, .pal-header-main .elementor-container,
.pal-header-main .elementor-column, .pal-header-main .elementor-column-wrap,
.pal-header-main .elementor-widget-wrap, .pal-header-logo-col,
.pal-header-logo-col .elementor-widget-wrap {
overflow: visible !important;
}
.pal-header-main .pal-logo {
display: inline-block;
margin-bottom: -80px;
position: relative;
z-index: 10;
}
.pal-header-main .pal-logo img {
display: block;
max-width: none;
width: 200px !important;
height: auto;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.22));
}
@media (max-width: 1024px) {
.pal-header-main .pal-logo { margin-bottom: -40px; }
.pal-header-main .pal-logo img { width: 120px !important; }
}
@media (max-width: 600px) {
.pal-header-main .pal-logo { margin-bottom: 0; }
.pal-header-main .pal-logo img { width: 52px !important; height: auto !important; }
}
/* ----------- HERO ANIMATED UNDERLINE (continuous loop) -----------
Draws left → right, holds, then erases left → right, repeating.
clip-path makes the line appear to be drawn, not just scaled. */
.pal-hero-underline {
position: relative;
display: inline-block;
white-space: nowrap;
}
.pal-hero-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.08em;
height: 0.08em;
min-height: 4px;
background: var(--pal-yellow);
border-radius: 4px;
pointer-events: none;
animation: pal-hero-underline-loop 4.5s cubic-bezier(0.65, 0, 0.35, 1) 0.4s infinite;
clip-path: inset(0 100% 0 0);
will-change: clip-path;
}
@keyframes pal-hero-underline-loop {
0% { clip-path: inset(0 100% 0 0); } /* hidden, collapsed left */
30% { clip-path: inset(0 0 0 0); } /* fully drawn */
55% { clip-path: inset(0 0 0 0); } /* hold at full */
85% { clip-path: inset(0 0 0 100%); } /* erased, collapsed right */
100% { clip-path: inset(0 100% 0 0); } /* reset for next loop (jump-cut, invisible) */
}
@media (prefers-reduced-motion: reduce) {
.pal-hero-underline::after { animation: none; clip-path: inset(0 0 0 0); }
}
/* ----------- HERO (50/50 split, navy gradient left + photo right + curved swoosh) ----------- */
.pal-hero,
.pal-hero-split {
overflow: hidden !important;
position: relative;
}
.pal-hero .elementor-heading-title { letter-spacing: -0.005em; }
.pal-hero-split,
.elementor-section.pal-hero-split,
.elementor-section.pal-hero-split > .elementor-container { background: #071F3F !important; }
/* Defensive: force the LEFT (text) column navy in case Elementor's gradient
setting fails to apply or a theme overrides it. */
.pal-hero-split > .elementor-container > .elementor-column:first-child,
.pal-hero-split > .elementor-container > .elementor-column:first-child > .elementor-column-wrap,
.pal-hero-split > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
background: linear-gradient(135deg, #071F3F 0%, #0E2A52 100%);
}
/* Image column: works whether the photo is set as a column background image
OR as an Elementor Image widget inside the column. Both paths get the same
"cover" behavior so the photo auto-resizes to fit the column on any screen. */
.pal-hero-image {
position: relative;
overflow: hidden;
min-height: 540px;
}
/* If user drops an Image widget into this column, force it to fill + cover. */
.pal-hero-image > .elementor-widget-wrap,
.pal-hero-image .elementor-widget-image,
.pal-hero-image .elementor-widget-image > .elementor-widget-container,
.pal-hero-image .elementor-widget-image .elementor-image,
.pal-hero-image .elementor-widget-image .elementor-image a {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pal-hero-image .elementor-widget-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
max-width: none !important;
}
@media (max-width: 768px) {
.pal-hero-image, .pal-hero-image .elementor-widget-image img { min-height: 280px; }
}
/* Soft gradient blend so the photo fades into the navy column on its left edge. */
.pal-hero-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #071F3F 0%, rgba(7,31,63,0.65) 12%, rgba(7,31,63,0) 38%);
z-index: 1;
pointer-events: none;
}
/* Curved white swoosh with gold border-top, sitting BELOW the photo column.
bottom:-81px + height:113px positions the swoosh past the image edge so the
curve forms the transition into the navy stats bar (matches mockup). */
.pal-hero-image::after {
content: "";
position: absolute;
left: -8%;
right: -3%;
bottom: -81px;
height: 113px;
background: #ffffff;
border-top: 5px solid var(--pal-yellow);
border-radius: 60% 0 0 0;
transform: skewY(-6deg);
transform-origin: left bottom;
z-index: 2;
pointer-events: none;
}
@media (max-width: 768px) {
/* Mobile hero: photo column first (top), text column second (bottom).
Matches the mobile design mockup — image fills the upper half, the
navy text block sits below with the title, paragraph, and side-by-side
buttons. We reverse the column order via flex `order` since Elementor
stacks columns text-first by default on mobile. */
.pal-hero-split > .elementor-container {
display: flex !important;
flex-direction: column !important;
}
.pal-hero-image,
.pal-hero-image > .elementor-element-populated,
.pal-hero-image > .elementor-widget-wrap,
.pal-hero-image .elementor-element-populated {
order: -1 !important;
min-height: 380px !important;
max-height: 56vh;
}
/* Elementor stores the column's background-image on the inner
.elementor-element-populated wrap, NOT the .elementor-column itself.
Force `cover` sizing on the wrap so the photo fills regardless of
whether Elementor's mobile-responsive bg-size control was set. */
.pal-hero-image > .elementor-element-populated {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.pal-hero-image .elementor-widget-image img { min-height: 380px; }
/* Stronger top-to-bottom overlay on mobile so logo / promo bar above stay
readable, and so the photo blends cleanly into the navy text block. */
.pal-hero-image::before {
background: linear-gradient(180deg, rgba(7,31,63,0.15) 0%, rgba(7,31,63,0) 35%, rgba(7,31,63,0.6) 100%) !important;
}
/* Repositioned swoosh: now bridges photo → navy text column instead of
photo → next section. Smaller and tighter to match mobile proportions. */
.pal-hero-image::after {
height: 50px !important;
bottom: -30px !important;
left: -10% !important;
right: -10% !important;
border-top-width: 4px !important;
border-radius: 50% 50% 0 0 !important;
transform: none !important;
}
/* Text column: tighter padding, room above for the swoosh transition */
.pal-hero-split > .elementor-container > .elementor-column:first-child > .elementor-element-populated,
.pal-hero-split > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
padding: 38px 22px 36px !important;
gap: 14px;
}
.pal-hero h1 { font-size: 36px !important; line-height: 1.05 !important; }
.pal-hero h2,
.pal-hero .elementor-heading-title { font-size: 32px !important; line-height: 1.05 !important; }
.pal-hero p,
.pal-hero .elementor-text-editor { font-size: 14px !important; line-height: 1.5 !important; }
/* Hero buttons row — side by side on mobile (was stacking). Targets both
Elementor button widgets and our [pal_donate_button] / .pal-btn anchors
inside the hero. Each button gets equal width via flex:1. */
.pal-hero .elementor-widget-html,
.pal-hero .elementor-widget-button + .elementor-widget-button,
.pal-hero .pal-hero-buttons {
/* If wrapped in .pal-hero-buttons or two-button HTML widgets, lay out flex */
}
.pal-hero .pal-hero-buttons,
.pal-hero .elementor-widget-html .elementor-widget-container > p:has(> a + a),
.pal-hero .elementor-widget-wrap > .elementor-element.elementor-widget-button:nth-of-type(1),
.pal-hero .elementor-widget-wrap > .elementor-element.elementor-widget-button:nth-of-type(2) {
display: inline-flex;
gap: 10px;
align-items: stretch;
flex-wrap: wrap;
}
/* If two Elementor button widgets are siblings, force them into a row */
.pal-hero .elementor-widget-button {
flex: 1 1 calc(50% - 5px);
min-width: 0;
}
.pal-hero .elementor-widget-button .elementor-button {
width: 100%;
justify-content: center;
padding: 12px 14px !important;
font-size: 13px !important;
letter-spacing: 0.06em;
}
/* Single shortcode-rendered button row (HTML widget with [pal_donate_button] + plain anchor) */
.pal-hero .elementor-widget-html .pal-btn,
.pal-hero .pal-hero-buttons > a {
flex: 1 1 calc(50% - 5px);
text-align: center;
justify-content: center;
padding: 12px 14px;
font-size: 13px;
min-width: 0;
}
/* ----- Mobile header tune-up -----
Targets the existing nashua-pal-header-v2 sections so the logo +
search/language/hamburger row matches the mobile mockup proportions.
Hides the desktop WordPress nav menu column on mobile (it's redundant
with the [pal_mobile_menu] drawer). */
.pal-header-main > .elementor-container {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 8px;
}
.pal-header-main > .elementor-container > .pal-header-logo-col {
flex: 0 0 auto !important;
width: auto !important;
}
/* The desktop nav-menu column — hide on mobile since the drawer handles
navigation. (Has no class hook, so we target by widget type within
.pal-header-main, skipping the logo column and the rightmost shortcode
column.) */
.pal-header-main > .elementor-container > .elementor-column:not(.pal-header-logo-col):has(.elementor-widget-nav-menu) {
display: none !important;
}
.pal-header-main > .elementor-container > .elementor-column:last-child {
flex: 1 1 auto !important;
justify-content: flex-end;
display: flex !important;
}
.pal-header-main .elementor-widget-wrap {
justify-content: flex-end;
gap: 6px;
}
/* Logo size on mobile — keep it readable but don't dominate */
.pal-header-main .pal-header-logo-col img,
.pal-header-main .pal-header-logo-col .pal-logo img {
max-height: 56px;
width: auto !important;
height: auto !important;
}
/* Tighter section padding on mobile so the header doesn't take half the screen */
.pal-header-main {
padding: 8px 14px !important;
}
.pal-toolbar {
padding: 6px 14px !important;
}
}
/* ----------- DONATE ROW (3-column: events 24% / donate 52% / get-involved 24%)
Lock these widths so Elementor's `structure: 33` (equal 3-col) preset can't
override the per-column _inline_size settings in the homepage template.
The donate column must read as the visual centerpiece — bigger than both
sides combined. */
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .elementor-column:not(.pal-donate-col) {
width: 24% !important;
max-width: 24% !important;
}
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .pal-donate-col {
width: 52% !important;
max-width: 52% !important;
}
/* Equal-height: force all 3 cards (Events / Donate / Get Involved) to match
the tallest column. Without this the donate inner section comes up short
because it has less content than the side cards. */
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container {
align-items: stretch !important;
}
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .elementor-column > .elementor-column-wrap,
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .elementor-column > .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
height: auto;
}
.pal-donate-col,
.pal-donate-col > .elementor-column-wrap,
.pal-donate-col > .elementor-widget-wrap {
flex: 1 1 auto;
}
.pal-donate-col .pal-donate-card {
flex: 1 1 auto;
height: 100% !important;
}
.pal-donate-col .pal-donate-card > .elementor-container {
height: 100% !important;
align-items: stretch !important;
}
.pal-donate-col .pal-donate-card .pal-donate-card__photo,
.pal-donate-col .pal-donate-card .pal-donate-card__text {
align-self: stretch !important;
}
@media (max-width: 1024px) {
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .elementor-column:not(.pal-donate-col),
.elementor-section:has(> .elementor-container > .pal-donate-col) > .elementor-container > .pal-donate-col {
width: 100% !important;
max-width: 100% !important;
}
}
/* ----------- DONATE CARD (text left + Thank You photo right, mockup match) ----------- */
.pal-donate-card {
border-radius: var(--pal-radius-lg);
overflow: hidden !important;
}
.pal-donate-card__text {
color: #fff;
text-align: center !important;
}
.pal-donate-card__text .elementor-heading-title,
.pal-donate-card__text .elementor-widget-text-editor,
.pal-donate-card__text .elementor-widget-divider,
.pal-donate-card__text .elementor-widget-button {
text-align: center !important;
}
.pal-donate-card__text .elementor-widget-shortcode .pal-btn,
.pal-donate-card__text .elementor-widget-button .elementor-button-wrapper {
display: flex !important;
justify-content: center !important;
}
/* "Become a Sponsor" — CTA in the donate section */
.pal-equal-height .elementor-widget-button .elementor-button.elementor-size-sm,
.pal-donate-col .elementor-widget-button .elementor-button.elementor-size-sm,
.pal-donate-card__text .elementor-widget-button .elementor-button.elementor-size-sm {
background: transparent !important;
border: 2px solid var(--pal-yellow) !important;
color: var(--pal-navy) !important;
padding: 15px 30px !important;
}
.pal-equal-height .elementor-widget-button .elementor-button.elementor-size-sm:hover,
.pal-donate-col .elementor-widget-button .elementor-button.elementor-size-sm:hover,
.pal-donate-card__text .elementor-widget-button .elementor-button.elementor-size-sm:hover {
background: var(--pal-yellow) !important;
color: var(--pal-navy) !important;
border-color: var(--pal-yellow) !important;
}
.pal-donate-card__photo {
min-height: 400px;
overflow: hidden;
}
/* Same dual-mode behavior — works for column background OR Image widget. */
.pal-donate-card__photo > .elementor-widget-wrap,
.pal-donate-card__photo .elementor-widget-image,
.pal-donate-card__photo .elementor-widget-image > .elementor-widget-container,
.pal-donate-card__photo .elementor-widget-image .elementor-image {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pal-donate-card__photo .elementor-widget-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
max-width: none !important;
}
@media (max-width: 768px) {
.pal-donate-card__photo { min-height: 240px; aspect-ratio: 4/3; }
}
/* ----------- CARD HEADER (small caps + right-aligned link) ----------- */
.pal-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.pal-card-head h3 {
color: var(--pal-navy);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
}
.pal-card-head a {
color: var(--pal-yellow-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
}
.pal-card-head a:hover { color: var(--pal-navy); }
/* ----------- SECTION HEADER (h2 + right link, "Latest News") ----------- */
.pal-section-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
max-width: 1200px;
margin: 0 auto 24px;
flex-wrap: wrap;
}
.pal-section-head h2 {
color: var(--pal-navy);
font-size: 28px;
font-weight: 800;
margin: 0;
}
.pal-section-head a {
color: var(--pal-yellow-dark);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
}
.pal-section-head a:hover { color: var(--pal-navy); }
/* ----------- HEADER TOOLS (search + language + socials) -----------
These render only inside the navy toolbar, so they're styled for dark
backgrounds unconditionally — no need for a .pal-toolbar--dark parent. */
.pal-search {
position: relative;
display: inline-flex;
align-items: center;
max-width: 240px;
width: 100%;
}
.pal-search input[type="search"] {
width: 100%;
padding: 8px 36px 8px 36px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--pal-radius);
font-size: 13px;
background: rgba(255,255,255,0.08);
color: #fff;
}
.pal-search input[type="search"]::placeholder { color: rgba(255,255,255,0.6); }
.pal-search input[type="search"]:focus {
outline: none;
border-color: var(--pal-yellow);
background: rgba(255,255,255,0.12);
}
.pal-search .pal-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.7);
pointer-events: none;
}
.pal-language {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #fff;
cursor: pointer;
position: relative;
padding: 4px 6px;
}
.pal-language:hover { color: var(--pal-yellow); }
.pal-language__icon { display: inline-flex; align-items: center; }
.pal-language__icon svg { width: 16px; height: 16px; color: #fff; }
.pal-language__label {
color: #fff;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.pal-language__chevron { color: #fff; flex-shrink: 0; transition: transform .18s ease; }
.pal-language--open .pal-language__chevron { transform: rotate(180deg); }
.pal-language:hover .pal-language__icon svg,
.pal-language:hover .pal-language__label,
.pal-language:hover .pal-language__chevron { color: var(--pal-yellow); }
/* Custom dropdown trigger — replaces the invisible-overlay