/*==============================================================
End Poverty — UI Refresh Layer
Loaded LAST. Additive, non-destructive modernisation pass over
the purchased charity template. Anchored to the visual language
already used on the About / Contact pages.
==============================================================*/
:root {
/* Brand */
--ep-primary: #1893c7;
--ep-primary-rgb: 24, 147, 199;
--ep-primary-dark: #10739c;
--ep-primary-darker: #0c5b7d;
--ep-accent: #ffa415;
--ep-accent-rgb: 255, 164, 21;
/* Ink & surfaces */
--ep-ink: #10243a; /* headings */
--ep-ink-soft: #1d3a52;
--ep-body: #46586c; /* body copy — WCAG AA on white */
--ep-muted: #6b7b8d;
--ep-white: #ffffff;
--ep-surface: #ffffff;
--ep-surface-2: #f3f8fb; /* tinted section band */
--ep-surface-3: #eaf3f8;
--ep-line: rgba(16, 36, 58, .10);
--ep-line-strong: rgba(16, 36, 58, .16);
/* Shape */
--ep-radius-xs: 8px;
--ep-radius-sm: 12px;
--ep-radius: 16px;
--ep-radius-lg: 22px;
--ep-pill: 999px;
/* Elevation */
--ep-shadow-sm: 0 4px 14px rgba(16, 36, 58, .06);
--ep-shadow: 0 16px 40px rgba(16, 36, 58, .09);
--ep-shadow-lg: 0 28px 64px rgba(16, 36, 58, .14);
/* Rhythm */
--ep-section-y: clamp(60px, 8vw, 110px);
--ep-container: 1240px;
--ep-ease: cubic-bezier(.22, 1, .36, 1);
/* Repair the theme's broken primary-rgb (was 255,85,40 -> orange). */
--givewell-primary-rgb: 24, 147, 199;
}
/*--------------------------------------------------------------
1. Base / typography hardening
--------------------------------------------------------------*/
body {
color: var(--ep-body);
background-color: var(--ep-white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
color: var(--ep-ink);
letter-spacing: -.02em;
}
p { color: var(--ep-body); }
a { transition: color .25s var(--ep-ease); }
img { max-width: 100%; height: auto; }
::selection { background: rgba(var(--ep-primary-rgb), .18); }
/* Keep container widths a touch roomier and consistent. */
@media (min-width: 1200px) {
.container { max-width: var(--ep-container); }
}
/* Firm up faint / low-contrast copy that appears across module CSS. */
.about-three__text,
.about-two__text-1,
.about-two__text,
.services-one__text,
.blog-three__text,
.section-title p,
.pricing-one__points li p,
.need-help__points li p,
.about-two__points-list li p {
color: var(--ep-body);
}
/*--------------------------------------------------------------
2. Animation safety net
The GSAP SplitText + WOW/AOS combo leaves headings and blocks
stuck at opacity:0 when a script hiccups or on slow connections.
Guarantee content is always visible; keep a gentle CSS fade.
--------------------------------------------------------------*/
.wow { visibility: visible !important; }
[data-aos]:not(.aos-animate) {
opacity: 1 !important;
transform: none !important;
}
.sec-title-animation .title-animation,
.title-animation,
.title-animation .split-line,
.title-animation .split-line * {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
/* Stop SplitText's per-line overflow:hidden from clipping revealed text.
Do NOT touch display/width/white-space here — that reflows /
. */
.title-animation,
.title-animation .split-line {
overflow: visible !important;
}
@keyframes ep-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/*--------------------------------------------------------------
3. Section rhythm & headings
--------------------------------------------------------------*/
.about-three,
.services-one,
.about-two,
.counter-one,
.blog-three,
.pricing-one,
.need-help,
.testimonial-one,
.team-one {
padding-top: var(--ep-section-y);
padding-bottom: var(--ep-section-y);
}
.section-title { margin-bottom: 44px; }
.section-title__tagline {
display: inline-block;
padding: 7px 16px;
border-radius: var(--ep-pill);
background: rgba(var(--ep-accent-rgb), .14);
color: #a5670a;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .78rem;
}
.section-title__tagline-icon { display: none; }
.section-title__title {
color: var(--ep-ink);
margin-top: 16px;
}
/*--------------------------------------------------------------
4. Buttons — one system
--------------------------------------------------------------*/
.thm-btn,
.about-three__btn,
.about-two__btn,
.pricing-one__btn,
.blog-three__btn,
.main-slider-three__btn,
.need-help__btn,
.services-one__btn,
.page-header .thm-btn,
button.thm-btn,
input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 28px;
border: 1px solid transparent;
border-radius: var(--ep-pill);
background-color: var(--ep-primary);
background-image: none;
color: var(--ep-white);
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
box-shadow: 0 10px 24px rgba(var(--ep-primary-rgb), .28);
transition: transform .28s var(--ep-ease),
box-shadow .28s var(--ep-ease),
background-color .28s var(--ep-ease);
cursor: pointer;
}
.thm-btn:hover,
.about-three__btn:hover,
.about-two__btn:hover,
.pricing-one__btn:hover,
.blog-three__btn:hover,
.main-slider-three__btn:hover,
.need-help__btn:hover,
.services-one__btn:hover,
button.thm-btn:hover,
input[type="submit"]:hover {
background-color: var(--ep-primary-dark);
color: var(--ep-white);
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(var(--ep-primary-rgb), .36);
}
/* Kill the template's rotating fill pseudo-elements on buttons. */
.thm-btn > i,
.about-three__btn > i,
.about-two__btn > i,
.pricing-one__btn > i,
.main-slider-three__btn > i {
display: none !important;
}
.thm-btn .icon-arrow-right,
.thm-btn .fas,
.about-three__btn .icon-arrow-right,
.about-two__btn .icon-arrow-right,
.pricing-one__btn .icon-arrow-right {
transition: transform .28s var(--ep-ease);
}
.thm-btn:hover .icon-arrow-right,
.thm-btn:hover .fas,
.about-three__btn:hover .icon-arrow-right,
.about-two__btn:hover .icon-arrow-right,
.pricing-one__btn:hover .icon-arrow-right {
transform: translateX(4px);
}
/*--------------------------------------------------------------
5. Header / navigation
Keep the template's white-logo + blue-bar identity; only refine.
--------------------------------------------------------------*/
.main-header-three { position: relative; z-index: 999; }
.main-menu-three__wrapper-inner { gap: 20px; }
.main-menu-three__main-menu-box {
box-shadow: 0 14px 34px rgba(var(--ep-primary-rgb), .22);
}
.main-menu-three .main-menu__list > li > a { font-weight: 600; }
/* Dropdown panels */
.main-menu .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul {
border-radius: var(--ep-radius-sm);
box-shadow: var(--ep-shadow) !important;
padding: 12px !important;
min-width: 244px;
}
.main-menu .main-menu__list > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li + li { margin-top: 4px; }
.main-menu .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a {
display: block;
padding: 10px 14px;
border-radius: var(--ep-radius-xs);
color: var(--ep-body);
transition: background-color .2s var(--ep-ease), color .2s var(--ep-ease);
}
.main-menu .main-menu__list > li > ul > li > a:hover,
.stricky-header .main-menu__list > li > ul > li > a:hover {
background: var(--ep-surface-3);
color: var(--ep-primary-dark);
}
/* Donate block in the bar — keep orange, add motion */
.main-menu-three__btn {
transition: transform .28s var(--ep-ease), box-shadow .28s var(--ep-ease),
background-color .28s var(--ep-ease);
}
.main-menu-three__btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(var(--ep-accent-rgb), .4);
background-color: #ef8a0e;
}
/* "Great place to work" badge — keep tidy, never cropped */
.main-menu-photo img { width: auto; height: 54px; object-fit: contain; }
/* Sticky header */
.stricky-header.stricky-fixed,
.stricky-header.stricked-menu.stricky-fixed {
background: rgba(255, 255, 255, .94);
backdrop-filter: saturate(160%) blur(10px);
box-shadow: 0 10px 30px rgba(16, 36, 58, .1);
}
/*--------------------------------------------------------------
6. Page header (inner-page banners)
Works for both photo backgrounds and the older baked-in text
banner images — a consistent scrim makes both read as intentional.
--------------------------------------------------------------*/
.page-header {
padding: clamp(150px, 20vw, 240px) 0 clamp(64px, 9vw, 120px);
margin-top: 0;
}
.page-header__bg {
background-size: cover;
background-position: center;
}
.page-header__bg::after {
background-image: linear-gradient(
180deg,
rgba(8, 20, 33, .30) 0%,
rgba(8, 20, 33, .58) 60%,
rgba(8, 20, 33, .74) 100%
);
}
.page-header__bg::before { display: none; }
/* .page-header1 / .page-header__bg1 keep the template's own treatment
(used by News, Annual Reports, Newsletters — pages whose banner art
already carries the title text). */
.page-header__inner h1,
.page-header__inner h2 {
color: var(--ep-white);
font-weight: 700;
letter-spacing: -.03em;
text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
margin-bottom: 18px;
}
/* Pages whose banner is an empty