/* VFC polish overrides — measured at 1280x720 and 375x667. */
@media (min-width: 1200px) {
/* Seven real nav items. Template allocated 6/12 columns to six demo items. */
/* Dark logo panel rises into utility bar; move CIN clear of it. */
.header_top_menu { padding-left: calc(22vw + 18px); }
.charina_nav_manu .row > .col-lg-6 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.charina_nav_manu .row > .col-lg-2:nth-of-type(3) { flex: 0 0 8.333333%; max-width: 8.333333%; }
.charina_nav_manu .slider-button-title { display: none; }
.charina_menu > ul > li > a { margin-left: 7px; margin-right: 7px; white-space: nowrap; }
}
/* MeanMenu hard-coded the purchased template name into the mobile header. */
.mean-container .mean-bar::before {
content: "VFC Social Care Foundation";
color: #fff;
font-family: "Playfair Display", serif;
font-size: 18px;
font-weight: 700;
left: 14px;
top: 18px;
}
/* Text badge replaces broken optional Flaticon glyphs. */
.vfc-flaticon-badge span {
color: #fff;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
text-align: center;
letter-spacing: .02em;
max-width: 74px;
}
/* Template body copy was 14px/low contrast in several sections. */
.about-section p,
.blog-section p,
.donate-section p,
.contact-us-section p,
.service-content p,
.contact-us-section .form-box input,
.contact-us-section .form-box textarea,
.contact-us-section .form-box select {
color: #485d52;
}
.service-content p,
.contact-us-section p,
.donate-section p,
.blog-section p { font-size: 16px; line-height: 1.65; }
.contact-us-section .form-box input,
.contact-us-section .form-box textarea,
.contact-us-section .form-box select { border-color: #9eafa5; }
.contact-us-section .form-box input::placeholder,
.contact-us-section .form-box textarea::placeholder { color: #60736a; opacity: 1; }
.vfc-page-media img {
display: block;
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(27, 52, 52, .12);
}
.vfc-page-media .col-lg-4 img { height: 270px; }
.vfc-media-caption {
margin: 14px 0 0;
color: #43584d;
font-size: 15px;
line-height: 1.55;
}
.charina_nav_manu .logo img,
.footer-section .charina-logo img {
background: #fff9f0;
border-radius: 50%;
object-fit: contain;
}
/* Client, 2026-09-23: "Black background in logo not good".
FOUND, after two wrong guesses. It is NOT the logo PNG (a pale cream seal with
real transparency) and NOT breatcome-bg.png. It is `.charina_nav_manu:before`
in style.css:111 -- an absolutely-positioned 22%-wide, 175%-tall block of
`#1B2B2B` at z-index:-1, the template's dark logo column. Measured live over
CDP as rgb(27,43,43), 278x154px, sitting exactly behind the logo.
Two earlier readings missed it because elementFromPoint and a DOM background
sweep both skip a z-index:-1 pseudo-element: the DOM reported white while the
rendered pixels were near-black. Only a full unclipped screenshot caught it.
Brand green instead, so the cream seal reads as intentional. */
.charina_nav_manu:before {
display: none !important;
}
.charina_nav_manu {
background: #ffffff !important;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
position: relative !important;
z-index: 999 !important;
}
.charina_nav_manu .logo {
margin-top: 0 !important;
padding: 6px 0 !important;
display: flex !important;
align-items: center !important;
}
.charina_nav_manu .logo img {
width: 68px !important;
height: 68px !important;
border-radius: 50% !important;
background: transparent !important;
object-fit: contain !important;
}
nav.charina_menu > ul {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
nav.charina_menu > ul > li {
padding: 24px 8px !important;
display: inline-block !important;
}
nav.charina_menu > ul > li > a {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #17402a !important;
white-space: nowrap !important;
letter-spacing: -0.2px !important;
padding: 4px 6px !important;
transition: color 0.2s ease !important;
}
nav.charina_menu > ul > li > a:hover,
nav.charina_menu > ul > li.current_page_item > a {
color: #fe7f4c !important;
}
/* The template's breadcrumb band. Its h1 and links are #fff, so this CANNOT go
cream -- that is the mistake that made the contact band unreadable. */
.breatcam-section {
background: linear-gradient(118deg, #2f7d5b 0%, #35624f 52%, #2c5748 100%) !important;
height: 300px !important;
}
.breatcam-section::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle at 82% 22%, rgba(253, 127, 75, .16), transparent 58%);
}
/* The template's breadcrumb accent is #FD7E4B, which only reaches 1.96:1 on the
lighter end of the new gradient. Measured, not guessed. Lift it to a pale
cream so the current-page label stays legible on every stop of the band. */
.breatcam-menu ul li { color: #ffe9dc; }
.charina_nav_manu .logo img { width: 92px; height: 92px; }
.footer-section .charina-logo img { width: 112px; height: 112px; }
.vfc-director-photo {
display: block;
width: 100%;
height: 360px;
object-fit: contain;
object-position: center center;
background: #f6f3ed;
border-radius: 12px 12px 0 0;
}
.vfc-video-row video {
display: block;
width: 100%;
max-height: 420px;
background: #142a20;
border-radius: 14px;
}
/* Home CTA had custom markup but no corresponding Charina rule. */
.call-section {
padding: 76px 0;
background: linear-gradient(110deg, rgba(13,40,27,.94), rgba(20,70,45,.88)),
url("../images/vfc/winter-blankets-04.jpg") center/cover no-repeat;
}
.call-section .charina-section-title { margin: 0 auto; max-width: 760px; }
.call-section .charina-section-title h1,
.call-section .charina-section-title p { color: #fff; }
.call-section .charina-section-title p { font-size: 18px; line-height: 1.6; margin: 16px auto 26px; }
.call-section .donate-btn {
display: inline-block; padding: 14px 30px; border-radius: 30px;
background: #fd7e4b; color: #fff; font-weight: 700;
}
/* Charina's call-bg.png is a raw dimension placeholder. */
.call-to-action {
background: linear-gradient(110deg, rgba(13,40,27,.95), rgba(20,70,45,.90)),
url("../images/vfc/winter-blankets-03.jpg") center/cover no-repeat;
}
.call-to-action .call-to-title h2,
.call-to-action .call-to-desc p { color: #fff; }
/* Equal editorial geometry stops two posts looking like unfinished masonry. */
.blogs-section .row { align-items: stretch; }
.blogs-section .col-lg-6 { display: flex; }
.blogs-section .charina-single-blog-box { width: 100%; background: #fff; }
.blogs-section .charina-single-blog-box::before { display: none; }
.blogs-section .blog-thumb img {
display: block; width: 100%; height: 360px; object-fit: cover; object-position: center;
}
.blogs-section .blog-content { padding: 24px 26px 30px; }
/* Deliberate equal-height photo grid instead of accidental whitespace holes. */
.gallery-page .galary-thumb img { display: block; width: 100%; height: 290px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(27, 52, 52, .08); }
.gallery-page .galary-single-box { height: 100%; transition: transform 0.3s ease; }
.gallery-page .galary-single-box:hover { transform: translateY(-4px); }
/* Footer links existed but dark-on-dark styling made them look absent. */
.footer-section .company-info-desc p,
.footer-section .footer-info-desc p,
.footer-section .footer-info-desc a,
.footer-section .widget-thumb-menu p,
.footer-section .widget-thumb-menu a,
.footer-section ul.footer-widget-list li a { color: #fff; opacity: .9; }
.footer-section .widget-thumb-menu a { text-decoration: underline; text-underline-offset: 4px; }
.footer-shape, .footer-shape2 { display: none; }
.footer-section { padding-bottom: 46px; }
/* Put the supplied seal in the mobile header too; keep the organization name beside it. */
.mean-container .mean-bar::before {
content: "";
width: 46px;
height: 46px;
left: 10px;
top: 9px;
border-radius: 50%;
background: transparent url("../images/vfc-brand/official-logo-header.png") center/contain no-repeat;
}
.mean-container .mean-bar::after {
display: block;
content: "VFC Social Care Foundation";
color: #fff;
font: 700 16px/1.2 "Playfair Display", serif;
left: 66px;
top: 22px;
position: absolute;
}
.programme-detail-image { width: 100%; height: 460px; object-fit: cover; border-radius: 16px; }
.vfc-programme-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vfc-programme-chip, .programme-more {
display: inline-block; padding: 9px 15px; border-radius: 22px;
color: #17402a; background: #e9f6ef; font-weight: 650;
}
.programme-more { margin-top: 12px; font-size: 14px; }
.blog-section img,
.blog-section .venobox img { max-width: 100%; height: auto; }
.blog-section .venobox { display: block; max-width: 100%; overflow: hidden; }
.vfc-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* Visible, persistent field labels. Placeholders alone disappear on first keystroke. */
.vfc-field-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; color: #1b1b1b; }
/* The contact-info band is dark green, but the template styled its phone numbers
#1b3434 (near-black) and its labels #b9babc — both intended for a light panel. On the
dark band they were unreadable. Measured with getComputedStyle, not eyeballed. */
.contact-info-section .contacts-title h6 a,
.contact-info-section .contact-information a { color: #ffffff; }
.contact-info-section .contacts-title h6 a:hover,
.contact-info-section .contact-information a:hover { color: #fe7f4c; }
.contact-info-section .contact-information h5 { color: #e8efe9; }
/* Template defaults that fail readability, found by measuring computed colour pairs
across every page rather than by eye:
- white on the mint button #53c99f measured 2.05:1
- the orange eyebrow #fe7f4c on cream #fff7f5 measured 2.38:1
Darkening the button green and the eyebrow orange fixes both while keeping the brand
palette recognisable. */
.hero-button a, .about-button a, .galary-button a, .blog-button a,
.call-button a, .donate-button a, .service-button a, .vfc-cta a {
background-color: #158a5f !important;
color: #ffffff !important;
}
.hero-button a:hover, .about-button a:hover, .galary-button a:hover, .blog-button a:hover,
.call-button a:hover, .donate-button a:hover, .service-button a:hover, .vfc-cta a:hover {
background-color: #0f6b49 !important;
}
.charina-section-title h4, .section-title h4 { color: #c4491c; }
/* Homepage "From our drives" grid mixes 16:9, 4:3 and portrait phone photos. Forcing
them into one equal-height row stretched each one out of shape (measured: a 1.78
source rendering at 1.04). Crop to fill instead of distorting. */
.galary-thumb { overflow: hidden; }
.galary-thumb img { width: 100%; height: 260px; object-fit: cover; object-position: center; display: block; }
@media (max-width: 991px) {
.galary-thumb img { height: 240px; }
}
@media (max-width: 575px) {
.galary-thumb img { height: 220px; }
}
/* Events timeline — deliberately a different shape from the Our Work card grid so the
two navigation items do not look like the same page shipped twice. */
.vfc-timeline-row { display: flex; gap: 28px; align-items: flex-start; border-left: 3px solid #1f7a4c; padding: 18px 0 18px 24px; }
.vfc-timeline-when { min-width: 210px; }
.vfc-timeline-when strong { display: block; font-size: 18px; color: #1f7a4c; }
.vfc-timeline-when span { display: block; font-size: 14px; color: #555; margin-top: 4px; }
.vfc-timeline-what h3 { margin: 0 0 8px; font-size: 22px; }
.vfc-timeline-what h3 a { color: #1b1b1b; }
.vfc-timeline-link { display: inline-block; margin-top: 6px; font-weight: 600; color: #1f7a4c; }
@media (max-width: 767px) {
.vfc-timeline-row { flex-direction: column; gap: 10px; padding-left: 16px; }
.vfc-timeline-when { min-width: 0; }
}
@media (max-width: 767px) {
/* Template JS makes the mobile bar fixed after scroll. It then covers footer
links and content; keep it in normal document flow on small screens. */
.mobile-menu-area.sticky,
.mean-container.sticky,
.mobile-menu-area .sticky { position: relative !important; top: auto !important; }
.hero-sub-title h5 { font-size: 15px; line-height: 1.45; }
.hero-title h1 { line-height: 1.12; }
.service-content p,
.contact-us-section p,
.donate-section p,
.blog-section p { font-size: 15px; line-height: 1.6; }
.vfc-flaticon-badge {
width: 112px; height: 64px; border-radius: 32px;
display: flex; align-items: center; justify-content: center;
}
.vfc-flaticon-badge span { max-width: 98px; font-size: 11px; }
.vfc-page-media img,
.vfc-page-media .col-lg-4 img { height: 230px; margin-bottom: 14px; }
.vfc-director-photo { height: 340px; }
.call-section { padding: 54px 0; }
.call-section .charina-section-title p { font-size: 16px; }
.blogs-section .blog-thumb img { height: 260px; }
.gallery-page .galary-thumb img { height: 260px; }
.programme-detail-image { height: 280px; margin-bottom: 24px; }
}
/* The sticky-header copy of the logo measured 0x0 in live CDP and never rendered.
Give it the same box as the static one so the brand mark survives scrolling. */
.main_sticky img, a.main_sticky img { width: 92px; height: 92px; }
/* ---- Donation form (client spec, WhatsApp 2026-09-23) ----
Colours reuse the values already contrast-checked for this site: button green
#158a5f and text #1b3434 on cream. Do NOT swap these for the template's
mint/orange without re-running _cms/tests/check_contrast.py. */
.vfc-tabs { display: flex; gap: 10px; margin: 0 0 22px; flex-wrap: wrap; }
.vfc-tab {
border: 1px solid #cfdcd3; background: #fff; color: #1b3434;
font: 600 15px/1 "Jost", sans-serif; padding: 13px 22px; border-radius: 8px; cursor: pointer;
}
.vfc-tab.is-active { background: #158a5f; border-color: #158a5f; color: #fff; }
.vfc-pane { display: none; }
.vfc-pane.is-active { display: block; }
.vfc-fieldset { border: 1px solid #e2e9e4; border-radius: 10px; padding: 16px 18px 18px; margin: 0 0 20px; }
.vfc-fieldset legend { font: 600 15px/1 "Jost", sans-serif; color: #1b3434; padding: 0 8px; width: auto; margin: 0; }
.vfc-amounts { display: flex; gap: 20px; flex-wrap: wrap; }
.vfc-amounts label { display: flex; align-items: center; gap: 8px; color: #43584d; font-size: 16px; margin: 0; }
.vfc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0 0 18px; }
.vfc-grid-wide { grid-column: 1 / -1; }
.vfc-field { display: block; font: 600 14px/1.3 "Jost", sans-serif; color: #1b3434; margin: 0 0 6px; }
.vfc-input {
width: 100%; padding: 12px 14px; border: 1px solid #cfdcd3; border-radius: 8px;
font-size: 16px; color: #1b3434; background: #fff;
}
.vfc-input:focus { outline: 2px solid #158a5f; outline-offset: 1px; border-color: #158a5f; }
.vfc-check { display: flex; gap: 10px; align-items: flex-start; color: #43584d; font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.vfc-check input { margin-top: 4px; flex: 0 0 auto; }
.vfc-form-note { background: #f4f8f5; border-left: 3px solid #158a5f; padding: 12px 16px; color: #43584d; font-size: 15px; border-radius: 0 6px 6px 0; margin: 4px 0 20px; }
.vfc-pledge-form button[type="submit"] {
background: #158a5f; color: #fff; border: 0; border-radius: 8px;
font: 600 16px/1 "Jost", sans-serif; padding: 16px 32px; cursor: pointer;
}
.vfc-pledge-form button[type="submit"]:hover { background: #106b4c; }
@media (max-width: 767px) { .vfc-grid { grid-template-columns: 1fr; } }
/* Article hero photograph. Client 2026-09-23: "Photo not clear".
The old inline rule forced width:100% on a 554px-wide portrait -- a 2x upscale
measured live, then object-fit:cover letterboxed a tall photo. A photograph
must never render wider than its own pixels. */
.vfc-article-hero {
background: #f2f5f3;
border-radius: 12px;
text-align: center;
overflow: hidden;
}
.vfc-article-hero img {
display: block;
margin: 0 auto;
max-width: 100%;
width: auto; /* never stretch past the source width */
max-height: 620px;
object-fit: contain; /* show the whole frame, do not crop faces out */
}
/* Homepage photo grid — client reversed the slider request on 2026-09-24 ("no slider").
The template only ever styled `.galary-list` as an Owl stage, so once the owl-carousel
class is dropped its children need real grid rules or they stack full-width. */
.vfc-photo-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.vfc-photo-grid .galary-single-box { width: 100%; }
.vfc-photo-grid .galary-thumb img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: 10px;
display: block;
}
@media (max-width: 991px) { .vfc-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .vfc-photo-grid { grid-template-columns: 1fr; } }
/* Foreign-donor bank details (client request 2026-09-24: "just mention the account
details"). A definition list so a screen reader pairs each label with its value, and
the account number stays selectable text rather than an image. */
.vfc-bank {
display: grid;
grid-template-columns: max-content 1fr;
gap: 10px 22px;
margin: 0 0 20px;
padding: 18px 20px;
background: #f4f8f5;
border-left: 3px solid #158a5f;
border-radius: 0 8px 8px 0;
}
.vfc-bank dt { font: 600 14px/1.4 "Jost", sans-serif; color: #1b3434; margin: 0; }
.vfc-bank dd {
margin: 0;
color: #1b3434;
font-size: 16px;
font-variant-numeric: tabular-nums;
word-break: break-word;
user-select: all;
}
@media (max-width: 575px) { .vfc-bank { grid-template-columns: 1fr; gap: 2px 0; } .vfc-bank dd { margin-bottom: 10px; } }
/* Used by apply_content.py to hide a block whose CMS values are not filled in yet,
WITHOUT deleting the markup. Deleting it was the first attempt and it broke the
filled state permanently: apply_content rewrites files in place, so removed markup
never comes back when the admin later enters the values. */
.vfc-hidden { display: none !important; }
/* Enforce perfectly smooth continuous sliding for gallery carousels */
.galary-list.owl-carousel .owl-stage { transition-timing-function: linear !important; }
/* ──────────────── Center Image with Always-Active Orange Animation ──────────────── */
.vfc-center-showcase {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px 15px;
}
.vfc-center-img-wrapper {
position: relative;
width: 320px;
height: 320px;
margin: 0 auto 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Pulsating glowing orange aura */
.vfc-orange-aura {
position: absolute;
top: -16px;
left: -16px;
right: -16px;
bottom: -16px;
border-radius: 50%;
background: radial-gradient(circle, rgba(254, 127, 76, 0.45) 0%, rgba(254, 127, 76, 0.15) 60%, transparent 75%);
animation: vfcOrangeAura 2.2s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
@keyframes vfcOrangeAura {
0% {
transform: scale(0.95);
opacity: 0.65;
filter: drop-shadow(0 0 15px rgba(254, 127, 76, 0.5));
}
100% {
transform: scale(1.12);
opacity: 1;
filter: drop-shadow(0 0 38px rgba(254, 127, 76, 0.95));
}
}
/* Rotating outer orange dashed orbit ring */
.vfc-orange-orbit {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border-radius: 50%;
border: 3px dashed #fe7f4c;
animation: vfcOrangeSpin 14s linear infinite;
z-index: 2;
pointer-events: none;
}
/* Rotating counter orbit */
.vfc-orange-orbit-inner {
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border-radius: 50%;
border: 2px solid rgba(254, 127, 76, 0.6);
border-top-color: #ff5722;
border-bottom-color: #ffa000;
animation: vfcOrangeSpinReverse 7s linear infinite;
z-index: 2;
pointer-events: none;
}
@keyframes vfcOrangeSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes vfcOrangeSpinReverse {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
/* Center circular image */
.vfc-center-showcase {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 10px !important;
max-width: 320px !important;
margin: 0 auto !important;
}
.vfc-center-img-wrapper {
position: relative !important;
width: 250px !important;
height: 250px !important;
max-width: 250px !important;
max-height: 250px !important;
margin: 0 auto 16px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vfc-center-img {
width: 230px !important;
height: 230px !important;
max-width: 230px !important;
max-height: 230px !important;
object-fit: cover !important;
border-radius: 50% !important;
border: 5px solid #ffffff !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), 0 0 25px rgba(254, 127, 76, 0.8) !important;
position: relative !important;
z-index: 3 !important;
display: block !important;
transition: transform 0.4s ease !important;
}
.vfc-center-img:hover {
transform: scale(1.04) !important;
}
/* Footer Photo Stream Grid */
.vfc-footer-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 14px;
}
.vfc-footer-gallery a {
display: block;
border-radius: 6px;
overflow: hidden;
height: 60px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.vfc-footer-gallery img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.3s ease;
}
.vfc-footer-gallery a:hover img {
transform: scale(1.12);
}
/* Floating orange badge */
.vfc-center-badge {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #fe7f4c 0%, #e65100 100%);
color: #ffffff;
font-weight: 700;
font-size: 13px;
padding: 6px 20px;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(230, 81, 0, 0.45);
z-index: 4;
white-space: nowrap;
letter-spacing: 0.5px;
animation: vfcBadgeFloat 3s ease-in-out infinite;
}
@keyframes vfcBadgeFloat {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-6px); }
}
.vfc-center-title {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-top: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
/* ──────────────── Crowdfunding Campaigns Section ──────────────── */
.vfc-campaign-section {
padding: 80px 0;
background: #f7faf8;
}
.vfc-campaign-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 22px rgba(0, 0, 0, 0.06);
border: 1px solid #e1ebe4;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.vfc-campaign-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}
.vfc-campaign-thumb {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
}
.vfc-campaign-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.vfc-campaign-card:hover .vfc-campaign-thumb img {
transform: scale(1.05);
}
.vfc-campaign-badge {
position: absolute;
top: 14px;
left: 14px;
background: #fe7f4c;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.vfc-campaign-body {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.vfc-campaign-title {
font-size: 20px;
font-weight: 700;
color: #17281c;
margin-bottom: 12px;
line-height: 1.35;
}
.vfc-campaign-title a {
color: inherit;
text-decoration: none;
}
.vfc-campaign-title a:hover {
color: #fe7f4c;
}
.vfc-campaign-desc {
font-size: 14px;
color: #485d52;
line-height: 1.6;
margin-bottom: 18px;
flex-grow: 1;
}
.vfc-progress-wrap {
margin-bottom: 16px;
}
.vfc-progress-bar {
width: 100%;
height: 10px;
background: #e6ede8;
border-radius: 6px;
overflow: hidden;
margin-bottom: 8px;
}
.vfc-progress-fill {
height: 100%;
background: linear-gradient(90deg, #53c99f 0%, #fe7f4c 100%);
border-radius: 6px;
transition: width 1s ease-in-out;
}
.vfc-progress-stats {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: #244431;
}
.vfc-campaign-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid #f0f4f1;
}
.vfc-btn-donate {
background: #fe7f4c;
color: #fff;
padding: 10px 22px;
border-radius: 25px;
font-weight: 700;
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.2s ease, transform 0.2s ease;
border: 0;
cursor: pointer;
}
.vfc-btn-donate:hover {
background: #e65100;
color: #fff;
transform: scale(1.04);
}
.vfc-btn-details {
color: #17402a;
font-weight: 600;
font-size: 13px;
text-decoration: none;
}
.vfc-btn-details:hover {
text-decoration: underline;
color: #fe7f4c;
}
/* Dynamic Gallery Groups & Loading Speed Controls */
.vfc-gallery-group-header {
margin-bottom: 24px;
}
.vfc-load-more-btn {
background: #e8efe9;
color: #17402a;
border: 1px solid #c8d9cc;
padding: 10px 28px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
margin-top: 15px;
}
.vfc-load-more-btn:hover {
background: #17402a;
color: #ffffff;
}
/* Footer Photographs Grid Widget */
.footer-photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-top: 14px;
}
.footer-photo-grid a {
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.16);
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.footer-photo-grid a:hover {
transform: scale(1.08);
border-color: #fe7f4c;
box-shadow: 0 4px 12px rgba(254, 127, 76, 0.35);
z-index: 2;
position: relative;
}
.footer-photo-grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.footer-photo-sub {
margin-bottom: 4px;
font-size: 13px;
color: #c9dbcf;
}
.footer-photo-sub a {
color: #fe7f4c !important;
font-weight: 600;
text-decoration: none;
}
.footer-photo-sub a:hover {
text-decoration: underline;
}
/* Attached Visual Gallery for Campaigns & Programs */
.campaign-attached-gallery {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #dfeae2;
}
.campaign-attached-gallery h3 {
font-size: 22px;
font-weight: 700;
color: #17402a;
margin: 0 0 6px;
}
.attached-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin-top: 16px;
}
.attached-gallery-card {
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #e1ebe3;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.attached-gallery-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(23, 64, 42, 0.15);
}
.attached-gallery-card img {
width: 100%;
height: 130px;
object-fit: cover;
display: block;
}
.attached-gallery-caption {
font-size: 11.5px;
padding: 6px 10px;
background: #fff;
color: #496352;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =====================================================================================
2026-10-06 P0 fixes (VFC Builder 1): Donate everywhere, readable hero buttons, header at 1024
===================================================================================== */
/* Donate buttons: white text on the old orange was 2.5:1; this orange is 5.2:1 (WCAG AA). */
.vfc-btn-donate { background: #c2410c; }
.vfc-btn-donate:hover { background: #9a3412; }
.vfc-btn-block { display: flex; width: 100%; justify-content: center; padding: 14px; font-size: 16px; border-radius: 8px; box-sizing: border-box; }
/* Home hero buttons had no style rules at all, so they inherited the dark link colour on the dark photo. */
.hero-button-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.vfc-hero-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 12px 24px; border-radius: 30px; border: 2px solid transparent;
font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center;
}
.vfc-hero-btn.primary { background: #fff; color: #14391f; border-color: #fff; }
.vfc-hero-btn.secondary { background: #c2410c; color: #fff; border-color: #c2410c; }
.vfc-hero-btn.outline { background: rgba(14, 36, 21, .6); color: #fff; border-color: #fff; }
.vfc-hero-btn:hover, .vfc-hero-btn:focus { text-decoration: none; filter: brightness(.92); }
.vfc-hero-btn.primary:hover, .vfc-hero-btn.primary:focus { color: #14391f; }
.vfc-hero-btn.secondary:hover, .vfc-hero-btn.outline:hover, .vfc-hero-btn.secondary:focus, .vfc-hero-btn.outline:focus { color: #fff; }
/* While online donations are closed: a calm notice instead of the form. */
.vfc-closed-notice { max-width: 720px; margin: 0 auto; padding: 28px 24px; text-align: center; background: #f4faf5; border: 2px solid #c9dacc; border-radius: 12px; }
.vfc-closed-notice h3 { margin: 0 0 8px; color: #17402a; }
.vfc-closed-notice p { margin: 0 0 16px; font-size: 18px; color: #203b29; }
/* Phones and tablets (the menu bar below 992 px): a Donate pill beside the menu button. */
:where(.mobile-menu-area) { position: relative; }
.vfc-mobile-donate { display: none; }
@media (max-width: 991px) {
.vfc-mobile-donate {
display: inline-flex; align-items: center; gap: 6px;
position: absolute; top: 12px; right: 64px; z-index: 1000;
min-height: 40px; padding: 0 14px; border-radius: 22px;
background: #fff; color: #a63a0a; font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none;
}
.vfc-mobile-donate:hover { color: #7c2d12; text-decoration: none; }
.mean-container .mean-nav ul li.vfc-menu-donate a { font-weight: 700; color: #a63a0a; }
}
/* Narrow phones: wrap the organisation name onto two lines so it never runs under the Donate pill. */
@media (max-width: 480px) {
.mean-container .mean-bar::after { font-size: 13px; line-height: 1.15; max-width: 130px; top: 14px; white-space: normal; }
}
/* Phones (767 px and below): sticky Donate bar at the bottom. The page gets matching bottom padding so it never hides content. */
.vfc-donate-bar { display: none; }
@media (max-width: 767px) {
.vfc-donate-bar {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
}
.vfc-donate-bar-btn {
display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 30px;
background: #c2410c; color: #fff; font-weight: 700; font-size: 17px; text-decoration: none;
}
.vfc-donate-bar-btn:hover { color: #fff; text-decoration: none; background: #9a3412; }
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
/* VFC-27 (client call 5 Oct) floated the Donate Now link bottom-left from 768 px up. VFC-42 (13 Oct, "its all busted"): switched off from
768 px up, because it sat on top of the page text at every width below about 1400 px, and a Donate button is already on screen there:
768-991 px the fixed menu bar carries a Donate pill; from 992 px the header carries Donate Now and the page has Donate buttons in the
body and footer. Phones (767 px and below) keep the full-width bottom bar above. The markup (src/page.ts DONATE_BAR) is unchanged, so
restoring the float is the old rules back in this block (git show 80dbb3c:assets/css/vfc-polish.css). */
@media (min-width: 768px) {
.vfc-donate-bar { display: none; }
}
/* Header at 992-1199 px. The template gives the logo, the menu, the phone block and the Donate button fixed twelfths of the row; with eight
menu items the centred list is wider than its twelfths and spills left over the logo ("Home" under the logo on the Programmes, Our Work
and field-report pages). Here the phone block goes (the number is in the top bar and the footer), the logo and Donate columns shrink to
their content, the menu takes whatever is left, and its spacing and type tighten so eight items fit between 992 and 1199 px. */
@media (min-width: 992px) and (max-width: 1199px) {
.charina_nav_manu .header-right-button-box { display: none; }
.charina_nav_manu .row > .col-lg-2:nth-of-type(2) { display: none; }
.charina_nav_manu .row > .col-lg-2:first-child,
.charina_nav_manu .row > .col-lg-2:last-child { flex: 0 0 auto; width: auto; max-width: none; }
.charina_nav_manu .row > .col-lg-6 { flex: 1 1 0; min-width: 0; max-width: none; }
nav.charina_menu > ul { justify-content: space-between !important; }
nav.charina_menu > ul > li { padding: 24px 1px !important; }
nav.charina_menu > ul > li > a { font-size: 12.5px !important; letter-spacing: -0.3px !important; padding: 4px 3px !important; }
.charina_nav_manu .header-button a { padding-left: 14px; padding-right: 14px; }
}
/* The animated orange rings on the home hero stuck out 8-24 px past the screen on phones (sideways scroll). */
.hero-section { overflow-x: clip; }
/* ---- Payment engine (Builder 2): form messages, 80G fields, campaign pop-up, thank-you / failed pages, legal pages ---- */
.vfc-form-error { background: #fdeaea; border: 1px solid #e6a6a6; color: #7f1d1d; padding: 12px 16px; border-radius: 8px; margin: 0 0 16px; font-weight: 600; }
.vfc-form-error[hidden] { display: none; }
.vfc-field-error { display: block; color: #9b1c1c; font-size: 14px; margin: 4px 0 0; }
.vfc-pledge-form [aria-invalid="true"] { border-color: #b91c1c; }
.vfc-form-status { min-height: 1.4em; color: #1b3434; font-weight: 600; margin: 0 0 10px; }
.vfc-cause { margin: 0 0 18px; }
select.vfc-input { appearance: auto; background: #fff; }
.vfc-80g-fields[hidden] { display: none; }
.vfc-80g-fields { border: 1px dashed #9db3a4; border-radius: 10px; padding: 14px 16px 4px; margin: 0 0 16px; background: #fbfdfb; }
.vfc-pledge-form button[type="submit"][disabled] { opacity: .65; cursor: progress; }
.vfc-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: 20px 12px; overflow-y: auto; }
.vfc-modal[hidden] { display: none; }
.vfc-modal-card { position: relative; background: #fff; border-radius: 12px; width: 100%; max-width: 560px; padding: 28px 24px 24px; box-shadow: 0 15px 40px rgba(0, 0, 0, .3); margin: auto 0; }
.vfc-modal-close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #43584d; }
.vfc-modal-title { font-size: 20px; font-weight: 700; color: #17402a; margin: 0 40px 6px 0; }
.vfc-modal-sub { font-size: 14px; color: #43584d; margin: 0 0 16px; }
.vfc-modal-card .vfc-grid { grid-template-columns: 1fr; }
.vfc-modal-card .vfc-fieldset { padding: 12px 14px 14px; }
.vfc-result-card { background: #fff; border: 1px solid #c9dacc; border-radius: 12px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.vfc-result-title { font-size: 28px; font-weight: 700; color: #17402a; margin: 0 0 12px; }
.vfc-result-lead { font-size: 18px; color: #203b29; }
.vfc-result-reason { color: #7f1d1d; }
.vfc-result-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; color: #203b29; }
.vfc-result-facts dt { font-weight: 600; }
.vfc-result-facts dd { margin: 0; word-break: break-all; }
.vfc-result-link { color: #0b5e3b; text-decoration: underline; }
.vfc-result-btn { display: inline-block; background: #158a5f; color: #fff; border-radius: 8px; padding: 14px 26px; font-weight: 600; text-decoration: none; margin-right: 12px; }
.vfc-result-btn:hover { background: #106b4c; color: #fff; text-decoration: none; }
.vfc-legal { background: #fff; border: 1px solid #dfe6e0; border-radius: 12px; padding: 28px 28px 20px; }
.vfc-legal-title { font-size: 30px; font-weight: 700; color: #17402a; margin: 0 0 16px; }
.vfc-legal h3 { font-size: 20px; color: #17402a; margin: 22px 0 8px; }
.vfc-legal p, .vfc-legal li { font-size: 16px; line-height: 1.7; color: #283a2d; }
@media (max-width: 575px) { .vfc-result-card, .vfc-legal { padding: 22px 16px; } .vfc-result-title { font-size: 24px; } }
/* =====================================================================================
2026-10-13 VFC-42 layout fixes (lane D1): top bar, header, phone double Donate, mint block, home call-to-action, buttons, footer, filter tabs
===================================================================================== */
/* D-3 / D-3b top bar. The links sat 7 px higher than the CIN text because .menu-text is an inline-block inside a line box, and the CIN text was
pushed in by the width of a dark logo panel that vfc-polish.css removed earlier. Now: one baseline, both ends lined up with the header
(left = logo edge, right = the Donate Now button edge). */
.header_top_menu_icon .menu-text { display: block; margin-right: 0; }
.header_top_menu_text p, .header_top_menu_icon .menu-text p { margin: 0; line-height: 28px; }
@media (min-width: 1200px) {
.header_top_menu { padding-left: 75px; padding-right: 50px; }
}
/* D-2 the template's 1x40 px divider next to a phone block that is switched off (it left a stray line before Donate Now). */
.header-right-button-box:before { display: none; }
/* Phones: the bottom bar carries Donate Now, so the header pill goes (one Donate control per phone screen). 768-991 px keeps the pill. */
@media (max-width: 767px) {
.vfc-mobile-donate { display: none; }
}
/* D-4 about-bg.jpg is only a 340 px mint block that belonged to a photo the template put beside the text; with no photo there it cut through
the heading and paragraph. Plain white section instead. */
.about-section { background-image: none; background-color: #fff; }
/* D-9 the Volunteer / Support-a-drive blocks on the home page: the floated icon is taller than the title, so the first line of the text
wrapped beside it and was indented. The text now starts below the icon. */
.call-to-desc { clear: both; }
/* D-11 side-by-side buttons touched each other (3 px of white space). */
.hero-button { display: flex; flex-wrap: wrap; gap: 12px; }
.text-center .hero-button { justify-content: center; }
.call-to-action .call-to-button a { margin: 0; }
/* D-14 footer bottom line: "All rights reserved" wrapped onto a second line in a half-width column. */
@media (min-width: 992px) {
.footer-bottom-area .row > .col-lg-6:first-child { flex: 0 0 75%; max-width: 75%; }
.footer-bottom-area .row > .col-lg-6:last-child { flex: 0 0 25%; max-width: 25%; }
}
/* D-7 campaign filter tabs had no styling at all (grey default buttons, stacked on phones). Same pill look as the other site buttons. */
.vfc-campaign-filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 8px; }
.vfc-filter-btn {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 30px;
border: 1px solid #c8d9cc; background: #fff; color: #17402a; font: 600 15px/1.2 "Jost", sans-serif; cursor: pointer;
}
.vfc-filter-btn:hover { background: #e9f6ef; }
.vfc-filter-btn.active { background: #158a5f; border-color: #158a5f; color: #fff; }
.vfc-filter-btn.active i { color: #fff !important; }
.vfc-filter-btn:focus-visible { outline: 3px solid #158a5f; outline-offset: 2px; }
/* D-8 Contact page: the heading ran straight into the address lines, and "Contact the organisation directly" into its text. */
.contact-us-section .row.pb-40 .charina-section-title { margin-bottom: 18px; }
.vfc-page-media h3 { margin-bottom: 10px; }
/* D-3b at 992-1199 px the header is tighter than at 1200+ (logo at 27 px, Donate Now ends at the screen edge less 15 px), so the top bar follows it. */
@media (min-width: 992px) and (max-width: 1199px) {
.header_top_menu { padding-left: 12px; padding-right: 0; }
}
/* =====================================================================================
2026-10-13 VFC-42 layout fixes (lane D2): cards and grids. Look only; no wording, number or photo changes.
===================================================================================== */
/* D-5 Recent work (home, .blog-section) and Our Work (blog.html, .blogs-section): one card pattern. Same height per row, photo cropped to a fixed
height (object-fit: cover, so a portrait phone photo no longer makes one card 1,300 px tall), no stray line (the template's :before rule sat 68 px
above the card bottom and showed up as a line after the heading), and Read more as a proper button pinned to the card bottom. */
.blog-section .row > .col-lg-6, .blogs-section .row > .col-lg-6 { display: flex; }
.blog-section .charina-single-blog-box, .blogs-section .charina-single-blog-box {
display: flex; flex-direction: column; width: 100%; margin-bottom: 0; background: #fff;
border: 1px solid #e1ebe4; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 22px rgba(0, 0, 0, .06);
}
.blog-section .charina-single-blog-box::before, .blogs-section .charina-single-blog-box::before { display: none; }
.blog-section .blog-thumb, .blogs-section .blog-thumb { margin: 0; line-height: 0; }
.blog-section .blog-thumb img, .blogs-section .blog-thumb img {
display: block; width: 100%; height: 320px; object-fit: cover; object-position: center 35%;
}
.blog-section .blog-content, .blogs-section .blog-content { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 26px 26px; }
.blog-section .blog-content h3, .blogs-section .blog-content h3 { font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; color: #17281c; }
.blog-section .blog-content h3 a, .blogs-section .blog-content h3 a { color: inherit; text-decoration: none; }
.blog-section .blog-content h3 a:hover, .blogs-section .blog-content h3 a:hover { color: #c4491c; }
.blog-section .drive-meta, .blogs-section .drive-meta { font-size: 14px; line-height: 1.5; color: #485d52; margin: 0 0 8px; }
.blog-section .blog-content p, .blogs-section .blog-content p { flex-grow: 0; }
.blog-section .blog-button, .blogs-section .blog-button { margin-top: auto; padding-top: 16px; }
.blog-section .blog-button a, .blogs-section .blog-button a {
float: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
border-radius: 30px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.blog-section .blog-button a:focus-visible, .blogs-section .blog-button a:focus-visible { outline: 3px solid #158a5f; outline-offset: 2px; }
@media (max-width: 575px) {
.blog-section .blog-thumb img, .blogs-section .blog-thumb img { height: 240px; }
}
/* D-12 Our Programmes (home and service.html): the eight cards had eight different heights, so the rows looked ragged. Equal height per row; the
"View programme details" button (service.html) sits at the bottom of every card. */
.service-section:not(.programme-detail) .row:not(.vfc-page-media) > .col-lg-4 { display: flex; }
.service-section:not(.programme-detail) .service-single-box { display: flex; flex-direction: column; width: 100%; }
.service-section:not(.programme-detail) .service-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.service-section:not(.programme-detail) .service-content > p:has(> .programme-more) { margin-top: auto; padding-top: 6px; }
/* D-13 Home "From our drives": the photo rows touched each other (no vertical gap); same 30 px as between the columns. */
.galary-section:not(.style-three) .galary-single-box { margin-bottom: 30px; }
.galary-section:not(.style-three) .galary-thumb img { border-radius: 12px; }
/* D-15 Gallery strips: the sliding strip was 30 px wider than the text above it and cut tiles off hard at both ends. It now ends where the text
column ends and the end tiles fade out instead of being sliced. The strip still slides (assets/js/theme.js:238 is unchanged). */
.gallery-page .galary-list { flex: 0 0 calc(100% - 30px); max-width: calc(100% - 30px); margin: 0 15px; }
@media (min-width: 768px) {
.gallery-page .galary-list .owl-stage-outer {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
}
/* D-5b Programme cards on /campaigns.html: the status / region line had no CSS (large grey text, region wrapped onto a second line). */
.vfc-impact-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: #244431; }
.vfc-impact-row i { color: #158a5f; }
/* D-1c (found in D2): D1's flex .hero-button put the two stacked buttons of the programme page "Support this Programme" box side by side at some widths;
the page's own markup asks for two full-width stacked buttons. */
.card .hero-button a { flex: 1 1 100%; }
/* D-15b Gallery "Load all N photographs": the opened grid is a row inside a row, so it stuck out 15 px further than the text on each side and, on a
phone, made the page scroll sideways by 15 px (measured: scrollWidth 405 at 390 px). Without the extra negative margin it lines up with the text. */
.gallery-page .row[id^="more-photos-"] { margin-left: 0; margin-right: 0; }
/* =====================================================================================
2026-10-13 VFCQUAL1 lane B1: the site-wide system. Look only; no wording, number or photo is added.
Sizes follow the Charina template (T.md section 4): container 1140, section title 42/52 -> 30/38 on phones, pill buttons, one card pattern,
30 px gaps. VFC colours stay: green = explore, orange = give.
===================================================================================== */
:root { --vfc-donate: #c2410c; --vfc-donate-dark: #9a3412; --vfc-green: #158a5f; --vfc-ink: #17402a; --vfc-line: #e1ebe4; }
/* ---- Q-17 / Q-18: the menu and footer markup is now identical on every page (same files, one canonical copy). Highlight = current section. ---- */
/* ---- The Donate colour: every "give" control is the VFC orange, so one colour means one action. (The template mint sweep on hover becomes dark orange.) ---- */
.header-button a, .footer-button a { background-color: var(--vfc-donate) !important; color: #fff !important; }
.header-button a:before, .header-button a:after, .footer-button a:before, .footer-button a:after { background-color: var(--vfc-donate-dark) !important; }
.header-button a:focus-visible, .footer-button a:focus-visible, .vfc-donate-btn:focus-visible, .vfc-donate-bar-btn:focus-visible { outline: 3px solid #17402a; outline-offset: 3px; }
/* ---- Typography scale (Charina: section title 42/52, kicker 18 Lobster, body 16/28) ---- */
body { font-size: 16px; }
.charina-section-title h2 { font-size: 42px; line-height: 52px; font-weight: 800; }
@media (max-width: 991px) { .charina-section-title h2 { font-size: 34px; line-height: 44px; } }
@media (max-width: 575px) { .charina-section-title h2 { font-size: 30px; line-height: 38px; } }
/* ---- Page banner: compact on phones so at least three content blocks fit one screen (Charina's 450 px leaves less than two) ---- */
.breatcam-section { height: 300px !important; }
@media (max-width: 991px) { .breatcam-section { height: 240px !important; } }
@media (max-width: 575px) { .breatcam-section { height: 200px !important; } }
/* ---- Section rhythm: 100/70 on desktop (Charina), tighter on phones ---- */
@media (max-width: 767px) {
.about-section, .service-section, .vfc-campaign-section, .blog-section, .blogs-section, .contact-us-section, .call-to-action, .galary-section .container { padding-top: 56px; padding-bottom: 48px; }
.footer-section { padding-top: 56px; padding-bottom: 28px; }
.footer-section .widget-title { margin-bottom: 18px; }
.footer-section .row.footer-bg > [class*="col-"] { margin-bottom: 18px; }
}
/* ---- Phones and tablets below 992 px: ONE donate control. The header Donate goes (also inside the opened menu); the bottom bar carries it. ---- */
@media (max-width: 991px) {
.vfc-mobile-donate, .mean-container .mean-nav ul li.vfc-menu-donate { display: none !important; }
.vfc-donate-bar {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
}
.vfc-donate-bar-btn {
display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 30px;
background: var(--vfc-donate); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none;
}
.vfc-donate-bar-btn:hover { color: #fff; text-decoration: none; background: var(--vfc-donate-dark); }
/* room under the page for the bar, inside the dark footer strip (a body padding would show a white band under the footer) */
body { padding-bottom: 0; }
.footer-bottom-area { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
/* ---- Desktop 992 px and up: a small floating pill, bottom right, with room reserved under the page so it never hides the footer line.
The header button stays at the top, so the two are never close to each other. ---- */
@media (min-width: 992px) {
.vfc-donate-bar { display: block; position: fixed; right: 18px; bottom: 18px; left: auto; z-index: 9990; padding: 0; background: transparent; box-shadow: none; }
.vfc-donate-bar-btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 30px;
background: var(--vfc-donate); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.vfc-donate-bar-btn:hover { color: #fff; text-decoration: none; background: var(--vfc-donate-dark); }
body { padding-bottom: 0; }
.footer-bottom-area { padding-bottom: 78px; }
}
/* ---- Tap targets (Q-13): 44 px minimum for the links in the footer, the breadcrumb and the top bar ---- */
.footer-widget-list a, .footer-bottom-menu a, .breatcam-menu a, .header_top_menu_icon a, .footer-photo-sub a, .footer-info-desc a {
display: inline-flex; align-items: center; min-height: 44px;
}
.footer-widget-list li { margin-bottom: 0; }
.footer-bottom-menu ul li { display: inline-block; }
.vfc-footer-reg { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #b2ceba; }
/* ---- Shared donate pieces for the page lanes (B2, B3). Every one links to /donate.html. ---- */
.vfc-donate-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 30px; border-radius: 30px; border: 0;
background: var(--vfc-donate); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background .25s;
}
.vfc-donate-btn:hover, .vfc-donate-btn:focus { background: var(--vfc-donate-dark); color: #fff; text-decoration: none; }
.vfc-donate-btn--sm { min-height: 44px; padding: 0 22px; font-size: 15px; }
/* Full-width band between sections / above the footer: */
.vfc-donate-band { background: linear-gradient(110deg, #0d281b, #145c3b); color: #fff; padding: 44px 0; }
.vfc-donate-band .container { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.vfc-donate-band p { margin: 0; color: #fff; font-size: 26px; line-height: 34px; font-weight: 800; }
@media (max-width: 767px) {
.vfc-donate-band { padding: 32px 0; text-align: center; }
.vfc-donate-band .container { justify-content: center; }
.vfc-donate-band p { font-size: 22px; line-height: 30px; }
}
/* Box at the end of an article / in a sidebar: */
.vfc-donate-box { margin: 32px 0 0; padding: 28px 26px; border: 1px solid var(--vfc-line); border-left: 5px solid var(--vfc-donate); border-radius: 12px; background: #fff; box-shadow: 0 5px 22px rgba(0, 0, 0, .06); }
.vfc-donate-box h3 { margin: 0 0 14px; font-size: 24px; line-height: 32px; font-weight: 800; color: var(--vfc-ink); }
.vfc-donate-box p { margin: 0 0 16px; }
/* ---- One card pattern (Charina: same image ratio in a grid, text, actions pinned to the bottom, 30 px gaps).
Markup: ---- */
.vfc-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--vfc-line); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 22px rgba(0, 0, 0, .06); }
.vfc-card__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.vfc-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.vfc-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.vfc-card__body h3 { margin: 0 0 10px; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--vfc-ink); }
.vfc-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 16px; }
.vfc-card__more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 30px; background: var(--vfc-green); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.vfc-card__more:hover { background: #106b4c; color: #fff; text-decoration: none; }
/* The same pairing on the existing campaign cards: Read more + Donate side by side */
.vfc-campaign-card .vfc-card__actions, .vfc-campaign-card .hero-button { margin-top: 14px; }
/* ---- Photos in cards and tiles: faces sit in the top third, so crops start near the top (images lane M-4, M-6, M-7, M-10, M-11) ---- */
.vfc-campaign-thumb img, .blog-section .blog-thumb img, .blogs-section .blog-thumb img, .galary-thumb img, .footer-photo-grid img { object-position: center 20%; }
.vfc-campaign-thumb img[src*="clothes-for-children-06"], .blog-thumb img[src*="clothes-for-children-06"], .galary-thumb img[src*="clothes-for-children-06"] { object-position: center 0%; }
/* ---- M-14: the contact band's photo was a flat dark-green JPG shown 1.5x too big on phones; the same colours as a plain gradient ---- */
.contact-info-section { background: linear-gradient(180deg, #102f1d 0%, #0e291a 50%, #0a2014 100%); }
/* ---- Q-13 / Q-15 leftovers that belong to shared parts: the "Full Story" link and the programme badge labels (11 px) ---- */
.vfc-btn-details { display: inline-flex; align-items: center; min-height: 44px; }
.vfc-flaticon-badge span { font-size: 12px; }
/* ---- Every in-page "give" button uses the same orange as the header one ---- */
.call-section .donate-btn, .card .hero-button a[href*="donate"] { background: var(--vfc-donate); border-color: var(--vfc-donate); color: #fff; }
.call-section .donate-btn:hover, .card .hero-button a[href*="donate"]:hover { background: var(--vfc-donate-dark); border-color: var(--vfc-donate-dark); color: #fff; }
/* =====================================================================================
2026-10-13 VFCQUAL1 lane B2: home, about, campaigns, campaign detail, donate. Look only; no wording, number or photo is added.
===================================================================================== */
/* ---- Home hero: Donate Now is the FIRST button (orange = give), Explore is white, About Us green; the hero photo is a little lighter on phones (M-3) ---- */
.vfc-hero-btn.donate { background: var(--vfc-donate); color: #fff; border-color: var(--vfc-donate); }
.vfc-hero-btn.donate:hover, .vfc-hero-btn.donate:focus { color: #fff; }
.vfc-hero-btn.secondary { background: var(--vfc-green); border-color: var(--vfc-green); }
@media (max-width: 575px) {
.hero-section {
background-image: linear-gradient(135deg, rgba(14, 36, 21, .76) 0%, rgba(14, 36, 21, .7) 100%), url(../images/vfc/winter-blankets-19.jpg) !important;
background-position: 50% center !important;
}
}
/* ---- Q-2 Home "Our Programmes": the last row of 2 cards is centred, and every card title takes two lines so the descriptions start at the same height ---- */
.vfc-prog-grid { justify-content: center; }
@media (min-width: 768px) {
.vfc-prog-grid .service-content h4 { min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
}
/* ---- Home gallery strip: portrait photos keep the faces in the crop (M-5) ---- */
.galary-section:not(.style-three) .galary-thumb img[src*="clothes-for-children"] { object-position: center 20%; }
/* ---- Home "Recent work" cards: Read more + Donate side by side ---- */
.blog-section .blog-button, .blogs-section .blog-button { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.blog-section .blog-button a.vfc-donate-btn, .blogs-section .blog-button a.vfc-donate-btn { background: var(--vfc-donate); color: #fff; min-height: 44px; padding: 0 22px; }
.blog-section .blog-button a.vfc-donate-btn:hover, .blogs-section .blog-button a.vfc-donate-btn:hover { background: var(--vfc-donate-dark); }
/* ---- Q-5 /campaigns.html: the campaign cards and the programme cards are one grid; the last row (2 cards) is centred, the photo crop keeps heads (M-4) ---- */
#vfc-campaigns-container, #vfc-home-campaigns-row { justify-content: center; }
.vfc-campaign-thumb img[src*="clothes-for-children"] { object-position: center 15%; }
.vfc-campaign-badge i { margin-right: 4px; }
/* ---- Campaign detail: the donate box under the story ---- */
.about-section .vfc-donate-box { max-width: 520px; }
/* ---- About: two photos under the introduction (existing photos, fixed ratio) ---- */
.vfc-about-media img { height: auto; aspect-ratio: 3 / 2; object-position: center 25%; }
/* ---- Donate page (Q-11): the two information blocks sit side by side as cards; the closed notice is centred; photo crops keep heads (M-7) ---- */
.vfc-closed-notice .hero-button { justify-content: center; }
.vfc-info-card { height: 100%; padding: 26px 28px; background: #fff; border: 1px solid var(--vfc-line); border-radius: 12px; box-shadow: 0 5px 22px rgba(0, 0, 0, .06); }
.vfc-info-card .charina-section-title h3 { margin-top: 0; }
.vfc-donate-info { margin-bottom: 24px; }
.donate-section .vfc-page-media img { height: auto; aspect-ratio: 3 / 2; object-position: center 20%; }
.donate-section .vfc-page-media img[src*="clothes-for-children-06"] { object-position: center 28%; }
/* the band between "Our Programmes" and "From our drives" needs the same room above the next section as the other sections have */
.vfc-donate-band + .galary-section { padding-top: 70px; }
@media (max-width: 767px) { .vfc-donate-band + .galary-section { padding-top: 40px; } }
/* ---- Q-13 on the B2 pages: card titles, the breadcrumb "Home" and the donate page link reach 44 px ---- */
.vfc-campaign-title a { display: inline-flex; align-items: center; min-height: 44px; }
.breatcam-menu li:first-child a { min-width: 44px; justify-content: center; }
.vfc-info-card .mission-list + p a { display: inline-flex; align-items: center; min-height: 44px; }
/* =====================================================================================================================
VFCQUAL1 lane B3 -- gallery, Our Work, blog details, events, contact, programme pages (13 Oct 2026)
===================================================================================================================== */
/* ---- Q-7 Events: rows with a photo and a date badge (Charina events page: image left, text right, one card per row) ---- */
.vfc-event-row { align-items: center; gap: 28px; padding: 20px; border-left: 0; border-radius: 10px; background: #fff; box-shadow: 0 8px 26px rgba(27, 52, 52, .09); }
.vfc-event-img { position: relative; flex: 0 0 349px; max-width: 349px; aspect-ratio: 10 / 7; overflow: hidden; border-radius: 8px; }
.vfc-event-img a { display: block; width: 100%; height: 100%; }
.vfc-event-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.vfc-event-badge { position: absolute; top: 14px; left: 14px; min-width: 56px; padding: 7px 8px; border-radius: 6px; background: var(--vfc-green); color: #fff; font-size: 13px; line-height: 16px; font-weight: 700; text-align: center; text-transform: uppercase; }
.vfc-event-badge b { display: block; font-size: 20px; line-height: 24px; }
.vfc-event-row .vfc-timeline-when { min-width: 190px; }
.vfc-event-row .vfc-timeline-what { flex: 1 1 auto; }
.vfc-event-row .vfc-timeline-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 991px) {
.vfc-event-row { gap: 22px; }
.vfc-event-img { flex-basis: 280px; max-width: 280px; }
}
@media (max-width: 767px) {
.vfc-event-row { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
.vfc-event-img { flex: none; max-width: none; width: 100%; }
.vfc-event-row .vfc-timeline-when { min-width: 0; }
}
/* ---- Q-16 / M-13 programme pages: one photo ratio, never shown larger than the file ---- */
.vfc-prog-photo { display: block; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; }
.vfc-prog-photo[src*="clothes-for-children"] { max-width: 554px; }
.vfc-prog-photo[src*="self-defence-training"] { object-position: center 30%; }
/* ---- M-10 gallery tiles: one 4:3 ratio (was a 262 x 290 slot that cut half of every landscape photo); portrait photos keep heads ---- */
.gallery-page .galary-thumb img { height: auto; aspect-ratio: 4 / 3; object-position: center 18%; }
@media (max-width: 991px) { .gallery-page .galary-thumb img { height: auto; } }
@media (max-width: 575px) { .gallery-page .galary-thumb img { height: auto; } }
/* ---- Donate band on the pages that end in a plain list: no gap between the last section and the band ---- */
.blogs-section + .vfc-donate-band, .contact-us-section + .vfc-donate-band, .galary-section + .vfc-donate-band { margin-top: 0; }
.blog-section .vfc-donate-box { max-width: 560px; }
.blog-details-area .vfc-donate-box { max-width: 560px; }
.programme-detail .vfc-donate-box, .service-section .vfc-donate-box { margin-top: 36px; }
/* ---- Q-13 tap targets on contact: phone numbers, WhatsApp link, form labels ---- */
.contact-us-section p a[href^="tel:"], .contact-us-section p a[href*="wa.me"], .contact-us-section p a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
.contact-us-section .vfc-field-label { display: block; min-height: 44px; padding-top: 12px; }
.contact-us-section select.form-control, .contact-us-section input, .contact-us-section textarea { min-height: 44px; }
/* the older "all blog buttons are green" rule uses !important, so the Donate button next to Read more needs the same weight to stay orange */
.blog-button a.vfc-donate-btn { background-color: var(--vfc-donate) !important; color: #fff !important; }
.blog-button a.vfc-donate-btn:hover { background-color: var(--vfc-donate-dark) !important; color: #fff !important; }
/* Programme pages on a phone: the sidebar card drops under the story and sits right above the end-of-page box, so the box carries the one donate button there (desktop keeps both: card top right, box at the end) */
@media (max-width: 991px) { .vfc-prog-side-donate { display: none !important; } }
/* ---- Q-13 leftovers found by B3: the logo link in the phone bar (22 px high on every page), the contact info band links, and the programme links on service.html ---- */
@media (max-width: 991px) { .charina-logo a.logo_img { display: inline-flex; align-items: center; min-height: 44px; } }
h6 > a[href^="tel:"], h6 > a[href*="wa.me"], h6 > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
a.programme-more, .vfc-programme-chip { display: inline-flex; align-items: center; min-height: 44px; }
.service-single-box .service-content h4 a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; }
/* =====================================================================================================================
VFCQUAL1 lane F (fix round after checker K, 13 Oct 2026)
===================================================================================================================== */
/* ---- Q-2 Our Programmes page: the eight cards sit like the home grid (last row of 2 centred) ---- */
/* (the .vfc-prog-grid rules above already centre the row and give every title two lines) */
/* ---- Q-13 / Q-15 / Q-20 programme and campaign photo album: two tiles per row on phones, square crops that keep heads, 12 px captions, 44 px album link ---- */
.attached-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.attached-gallery-card img { height: auto; aspect-ratio: 1 / 1; object-position: center 15%; }
.attached-gallery-caption { font-size: 12px; line-height: 1.5; }
.vfc-album-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 575px) {
.attached-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* ---- M-7 donate page: both photos are 9:10 so the man's head and the boy's whole face are in the crop ---- */
.donate-section .vfc-page-media img { aspect-ratio: 9 / 10; }
.donate-section .vfc-page-media img[src*="winter-blankets-07"] { object-position: 58% 20%; }
.donate-section .vfc-page-media img[src*="clothes-for-children-06"] { object-position: center 0%; }
/* =====================================================================================================================
VFCDEPLOY1 lane F2 (13 Oct 2026): small leftovers from CHECK-2.md section 9
===================================================================================================================== */
/* ---- Home "Who we are" block: Charina's about layout - text on the left, one of VFC's own photos on the right (stacks under the text on phones).
The photo is 1200 x 900 and shows at most about 445 px wide, so it is never enlarged; 4:3 like the file, so nothing is cut off. ---- */
.vfc-home-about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; border-radius: 16px; box-shadow: 0 12px 30px rgba(27, 52, 52, .12); }
@media (max-width: 767px) { .vfc-home-about-photo { margin-top: 8px; } }
/* ---- Q-13 the two links inside the sentence under "Our Programmes" on the home page: 44 px tall tap area on phones; margins cancel the padding
so the line spacing and the words stay as they are. Desktop is unchanged. ---- */
@media (max-width: 767px) {
.vfc-programmes-note a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
/* ---- Album captions on phones: show the whole caption (two short lines) instead of cutting it with "..."; the words were already in the page ---- */
@media (max-width: 575px) {
.attached-gallery-caption { white-space: normal; overflow: visible; text-overflow: clip; }
}