Omair Saleh
233e9320b5
LAYOUT: - Killed boring 2x2 grid boxes - Full-width alternating image/text rows (7:5 split) - Image left/text right on rows 1,3 — flipped on rows 2,4 - Creates visual rhythm like an editorial magazine spread - gap-px between rows for signature pattern - Images at 2:1 cinematic aspect, large and atmospheric CONTRAST FIX: - Pain stat 'before' text: gray-200 (invisible) -> gray-400 (readable) - 'Systems do.' heading: gray-300 -> gray-400 - Both stats now clearly visible while maintaining muted/bold contrast
1792 lines
104 KiB
HTML
1792 lines
104 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, 'js');</script>
|
|
<title>Charity Right</title>
|
|
<meta name='robots' content='max-image-preview:large' />
|
|
<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
|
|
|
|
<!--BEGIN: TRACKING CODE MANAGER (v2.4.0) BY INTELLYWP.COM IN HEAD//-->
|
|
<!-- Google Tag Manager -->
|
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
})(window,document,'script','dataLayer','GTM-PX5XJXX');</script>
|
|
<!-- End Google Tag Manager -->
|
|
<meta name="facebook-domain-verification" content="umic2aau4kjyuixjwre4x9gyli95lx" />
|
|
<meta name="google-site-verification" content="X5QJLnfmZdAfT1-kWyAM9PwNs4Pq3Wi-Y6hBVjVEP2Q" />
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// 1. Logo Replacement Logic
|
|
const originalSrc = "https://app.charityright.org.uk/app/assets/images/dhul-hijjah/logo.svg";
|
|
const newSrc = "https://app.charityright.org.uk/app/assets/campaigns/10-days-of-giving/logo.svg";
|
|
|
|
const replaceImage = () => {
|
|
const images = document.querySelectorAll('img');
|
|
images.forEach(img => {
|
|
const currentSrc = img.getAttribute('src') || img.getAttribute('data-src');
|
|
if (currentSrc && currentSrc.includes("dhul-hijjah/logo.svg")) {
|
|
img.setAttribute('src', newSrc);
|
|
if (img.hasAttribute('data-src')) {
|
|
img.setAttribute('data-src', newSrc);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
replaceImage();
|
|
setTimeout(replaceImage, 500);
|
|
setTimeout(replaceImage, 1000);
|
|
|
|
// --- 2. UPDATED BACKGROUND GRADIENT LOGIC ---
|
|
// We look for the unique container ID you provided, then find its parent Section
|
|
const thirtyNightsContainer = document.getElementById('thirtynights-container');
|
|
|
|
if (thirtyNightsContainer) {
|
|
// Find the closest parent <section> tag
|
|
const parentSection = thirtyNightsContainer.closest('section');
|
|
|
|
if (parentSection) {
|
|
parentSection.style.setProperty('background-image', 'linear-gradient(298deg,#2f135b 5.93%,#2d1259 71.41%,#e42281 130.5%)', 'important');
|
|
// Ensure the background covers the whole area
|
|
parentSection.style.setProperty('background-size', 'cover', 'important');
|
|
parentSection.style.setProperty('background-repeat', 'no-repeat', 'important');
|
|
}
|
|
}
|
|
|
|
// --- 3. Extra styling for card wrappers if they exist ---
|
|
const container = document.getElementById('vl-maxwidth-container-block_e6e11ba604ebc68847154e9959b5fcd1');
|
|
if (container) {
|
|
const wrappers = container.querySelectorAll('.card-wrapper');
|
|
wrappers.forEach(wrapper => {
|
|
wrapper.style.backgroundColor = '#e0efff';
|
|
wrapper.style.border = 'none';
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const donationContainers = document.querySelectorAll('div[x-data="AppealDonate"]');
|
|
|
|
donationContainers.forEach(container => {
|
|
const donationList = container.querySelector('ul.mt-4.space-y-4');
|
|
|
|
let isQurbaniSection = false;
|
|
let firstDonationItem = null;
|
|
|
|
if (donationList) {
|
|
const listItems = donationList.querySelectorAll('li');
|
|
|
|
if (listItems.length > 0) {
|
|
firstDonationItem = listItems[0];
|
|
|
|
for (let i = 0; i < listItems.length; i++) {
|
|
const item = listItems[i];
|
|
const descriptionSpan = item.querySelector('span:last-child');
|
|
|
|
if (descriptionSpan && descriptionSpan.textContent.includes("X Qurbani in")) {
|
|
isQurbaniSection = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (isQurbaniSection && firstDonationItem) {
|
|
|
|
const customAmountInput = container.querySelector('input#amount');
|
|
if (customAmountInput) {
|
|
const customInputWrapper = customAmountInput.closest('div.mt-4.group');
|
|
|
|
if (customInputWrapper) {
|
|
customInputWrapper.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
firstDonationItem.click();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
const url = location.href;
|
|
|
|
const allowed =
|
|
url.includes("/project/30-nights-of-giving") ||
|
|
url.includes("/project/night-of-power") ||
|
|
url.includes("/");
|
|
|
|
if (!allowed) return;
|
|
|
|
const spans = document.querySelectorAll('.text-center span');
|
|
|
|
spans.forEach(span => {
|
|
if (span.textContent.trim() === "RAMADAN 2025") {
|
|
span.textContent = "RAMADAN 2026";
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
window.addEventListener('load', function() {
|
|
// 1. CONFIGURATION
|
|
var minAmount = 60; // Set your minimum limit here
|
|
|
|
// 2. ELEMENT SELECTORS
|
|
var amountInput = document.getElementById('where-most-needed-amount-input');
|
|
var errorText = document.getElementById('amount-error');
|
|
var nextButton = document.querySelector('.thirtynights-card[data-page-name="select-amounts"] .thirtynights-forward');
|
|
var presetButtons = document.querySelectorAll('.thirtynights-single-project-amount');
|
|
|
|
if (!amountInput || !errorText) return;
|
|
|
|
// 3. MAIN VALIDATION FUNCTION
|
|
function validateCustomMinimum() {
|
|
var currentVal = parseFloat(amountInput.value);
|
|
|
|
if (!currentVal || currentVal < minAmount) {
|
|
errorText.style.display = 'block';
|
|
errorText.style.color = '#ef4444';
|
|
errorText.innerText = "Due to processing fees, the minimum donation amount is £" + minAmount;
|
|
|
|
if (nextButton) {
|
|
nextButton.setAttribute('disabled', 'disabled');
|
|
nextButton.style.opacity = '0.5';
|
|
nextButton.style.cursor = 'not-allowed';
|
|
}
|
|
} else {
|
|
errorText.style.display = 'none';
|
|
|
|
if (nextButton) {
|
|
nextButton.removeAttribute('disabled');
|
|
nextButton.style.opacity = '1';
|
|
nextButton.style.cursor = 'pointer';
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4. APPLY LISTENERS
|
|
validateCustomMinimum();
|
|
|
|
amountInput.addEventListener('input', validateCustomMinimum);
|
|
amountInput.addEventListener('change', validateCustomMinimum);
|
|
|
|
if (presetButtons) {
|
|
presetButtons.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
setTimeout(validateCustomMinimum, 100);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 5. OVERRIDE HTML ATTRIBUTE
|
|
amountInput.setAttribute('min', minAmount);
|
|
});
|
|
</script>
|
|
<!--END: https://wordpress.org/plugins/tracking-code-manager IN HEAD//--> <style id="cr-inapp-fixes">
|
|
/* === UNIVERSAL (safe for all browsers) === */
|
|
/* Prevent text inflation — harmless everywhere */
|
|
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
|
|
/* Livewire/Alpine flicker fix — always needed */
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* === IN-APP BROWSER ONLY (scoped via JS-added class) === */
|
|
/* Prevent auto-zoom on input focus — iOS in-app zooms on <16px */
|
|
.cr-is-inapp input, .cr-is-inapp select, .cr-is-inapp textarea {
|
|
font-size: max(16px, 1em) !important;
|
|
}
|
|
/* Safe area insets for notched devices in WebViews */
|
|
.cr-is-inapp body {
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
/* Fix rubber-banding scroll in WebViews */
|
|
.cr-is-inapp { overscroll-behavior-y: none; }
|
|
/* 100vh fix for WebViews */
|
|
.cr-is-inapp .min-h-screen,
|
|
.cr-is-inapp [style*="100vh"] {
|
|
min-height: 100vh; min-height: 100dvh;
|
|
}
|
|
/* Minimum touch targets — in-app only */
|
|
.cr-is-inapp a,
|
|
.cr-is-inapp button,
|
|
.cr-is-inapp [role="button"],
|
|
.cr-is-inapp input[type="submit"],
|
|
.cr-is-inapp input[type="button"] {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* === BANNER (hidden by default, shown by JS) === */
|
|
#cr-inapp-banner {
|
|
display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999999;
|
|
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
|
|
background: rgba(26,26,46,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
|
border-top: 1px solid rgba(228,34,129,.25);
|
|
text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
#cr-inapp-banner p {
|
|
color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 10px; line-height: 1.3;
|
|
}
|
|
#cr-inapp-banner .cr-iab-open {
|
|
display: inline-block; padding: 11px 28px;
|
|
background: #E42281; color: #fff !important; font-size: 13px; font-weight: 700;
|
|
border-radius: 8px; text-decoration: none !important; min-height: 44px; line-height: 22px;
|
|
}
|
|
#cr-inapp-banner .cr-iab-dismiss {
|
|
display: block; margin: 10px auto 0; background: none; border: none;
|
|
color: rgba(255,255,255,.35); font-size: 11px; cursor: pointer; padding: 6px;
|
|
min-height: 30px;
|
|
}
|
|
</style>
|
|
<link rel="preconnect" href="https://app.charityright.org.uk" crossorigin>
|
|
<link rel="dns-prefetch" href="https://app.charityright.org.uk">
|
|
<link rel="preconnect" href="https://js.stripe.com" crossorigin>
|
|
<link rel="dns-prefetch" href="https://js.stripe.com">
|
|
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
|
|
<link rel='stylesheet' id='wp-block-library-css' href='https://www.charityright.org.uk/wp-includes/css/dist/block-library/style.min.css?ver=6.8.1' type='text/css' media='all' />
|
|
<style id='global-styles-inline-css' type='text/css'>
|
|
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--color-white: #ffffff;--wp--preset--color--color-theme-black: #101010;--wp--preset--color--color-theme-background-blue: #EEF6FE;--wp--preset--color--color-theme-pastel-blue: #F0F6FE;--wp--preset--color--color-theme-dark-blue: #4CA4FD;--wp--preset--color--color-theme-light-blue: #D2E9FF;--wp--preset--color--color-theme-pink: #E42281;--wp--preset--color--color-theme-pink-grey: #FBDEED;--wp--preset--color--color-theme-rose: #FDF0F0;--wp--preset--color--color-theme-medium-rose: #C56D6D;--wp--preset--color--color-theme-dark-rose: #8B4747;--wp--preset--color--color-theme-green: #039A3F;--wp--preset--color--color-theme-lightpastel-green: #26C967;--wp--preset--color--color-theme-pastel-green: #D3F1D7;--wp--preset--color--color-theme-light-green: #E4FFEF;--wp--preset--color--color-theme-dark-green: #1C974D;--wp--preset--color--color-theme-red: #E42222;--wp--preset--color--color-theme-yellow: #F9C63B;--wp--preset--color--color-theme-light-yellow: #FCEEC3;--wp--preset--color--color-theme-grey: #D9D9D9;--wp--preset--color--color-theme-light-grey: #DAE0E5;--wp--preset--color--color-theme-dark-grey: #6E7481;--wp--preset--color--color-theme-purple: #ab1f91;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}.wp-block-heading{--wp--preset--font-family--epilogue-sans: "Epilogue", sans-serif;}:root { --wp--style--global--content-size: 900px;--wp--style--global--wide-size: 1280px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{font-family: var(--wp--preset--font-family--epilogue-sans);padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){text-decoration: underline;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;line-height: inherit;padding: calc(0.667em + 2px) calc(1.333em + 2px);text-decoration: none;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-color-white-color{color: var(--wp--preset--color--color-white) !important;}.has-color-theme-black-color{color: var(--wp--preset--color--color-theme-black) !important;}.has-color-theme-background-blue-color{color: var(--wp--preset--color--color-theme-background-blue) !important;}.has-color-theme-pastel-blue-color{color: var(--wp--preset--color--color-theme-pastel-blue) !important;}.has-color-theme-dark-blue-color{color: var(--wp--preset--color--color-theme-dark-blue) !important;}.has-color-theme-light-blue-color{color: var(--wp--preset--color--color-theme-light-blue) !important;}.has-color-theme-pink-color{color: var(--wp--preset--color--color-theme-pink) !important;}.has-color-theme-pink-grey-color{color: var(--wp--preset--color--color-theme-pink-grey) !important;}.has-color-theme-rose-color{color: var(--wp--preset--color--color-theme-rose) !important;}.has-color-theme-medium-rose-color{color: var(--wp--preset--color--color-theme-medium-rose) !important;}.has-color-theme-dark-rose-color{color: var(--wp--preset--color--color-theme-dark-rose) !important;}.has-color-theme-green-color{color: var(--wp--preset--color--color-theme-green) !important;}.has-color-theme-lightpastel-green-color{color: var(--wp--preset--color--color-theme-lightpastel-green) !important;}.has-color-theme-pastel-green-color{color: var(--wp--preset--color--color-theme-pastel-green) !important;}.has-color-theme-light-green-color{color: var(--wp--preset--color--color-theme-light-green) !important;}.has-color-theme-dark-green-color{color: var(--wp--preset--color--color-theme-dark-green) !important;}.has-color-theme-red-color{color: var(--wp--preset--color--color-theme-red) !important;}.has-color-theme-yellow-color{color: var(--wp--preset--color--color-theme-yellow) !important;}.has-color-theme-light-yellow-color{color: var(--wp--preset--color--color-theme-light-yellow) !important;}.has-color-theme-grey-color{color: var(--wp--preset--color--color-theme-grey) !important;}.has-color-theme-light-grey-color{color: var(--wp--preset--color--color-theme-light-grey) !important;}.has-color-theme-dark-grey-color{color: var(--wp--preset--color--color-theme-dark-grey) !important;}.has-color-theme-purple-color{color: var(--wp--preset--color--color-theme-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-color-white-background-color{background-color: var(--wp--preset--color--color-white) !important;}.has-color-theme-black-background-color{background-color: var(--wp--preset--color--color-theme-black) !important;}.has-color-theme-background-blue-background-color{background-color: var(--wp--preset--color--color-theme-background-blue) !important;}.has-color-theme-pastel-blue-background-color{background-color: var(--wp--preset--color--color-theme-pastel-blue) !important;}.has-color-theme-dark-blue-background-color{background-color: var(--wp--preset--color--color-theme-dark-blue) !important;}.has-color-theme-light-blue-background-color{background-color: var(--wp--preset--color--color-theme-light-blue) !important;}.has-color-theme-pink-background-color{background-color: var(--wp--preset--color--color-theme-pink) !important;}.has-color-theme-pink-grey-background-color{background-color: var(--wp--preset--color--color-theme-pink-grey) !important;}.has-color-theme-rose-background-color{background-color: var(--wp--preset--color--color-theme-rose) !important;}.has-color-theme-medium-rose-background-color{background-color: var(--wp--preset--color--color-theme-medium-rose) !important;}.has-color-theme-dark-rose-background-color{background-color: var(--wp--preset--color--color-theme-dark-rose) !important;}.has-color-theme-green-background-color{background-color: var(--wp--preset--color--color-theme-green) !important;}.has-color-theme-lightpastel-green-background-color{background-color: var(--wp--preset--color--color-theme-lightpastel-green) !important;}.has-color-theme-pastel-green-background-color{background-color: var(--wp--preset--color--color-theme-pastel-green) !important;}.has-color-theme-light-green-background-color{background-color: var(--wp--preset--color--color-theme-light-green) !important;}.has-color-theme-dark-green-background-color{background-color: var(--wp--preset--color--color-theme-dark-green) !important;}.has-color-theme-red-background-color{background-color: var(--wp--preset--color--color-theme-red) !important;}.has-color-theme-yellow-background-color{background-color: var(--wp--preset--color--color-theme-yellow) !important;}.has-color-theme-light-yellow-background-color{background-color: var(--wp--preset--color--color-theme-light-yellow) !important;}.has-color-theme-grey-background-color{background-color: var(--wp--preset--color--color-theme-grey) !important;}.has-color-theme-light-grey-background-color{background-color: var(--wp--preset--color--color-theme-light-grey) !important;}.has-color-theme-dark-grey-background-color{background-color: var(--wp--preset--color--color-theme-dark-grey) !important;}.has-color-theme-purple-background-color{background-color: var(--wp--preset--color--color-theme-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-color-white-border-color{border-color: var(--wp--preset--color--color-white) !important;}.has-color-theme-black-border-color{border-color: var(--wp--preset--color--color-theme-black) !important;}.has-color-theme-background-blue-border-color{border-color: var(--wp--preset--color--color-theme-background-blue) !important;}.has-color-theme-pastel-blue-border-color{border-color: var(--wp--preset--color--color-theme-pastel-blue) !important;}.has-color-theme-dark-blue-border-color{border-color: var(--wp--preset--color--color-theme-dark-blue) !important;}.has-color-theme-light-blue-border-color{border-color: var(--wp--preset--color--color-theme-light-blue) !important;}.has-color-theme-pink-border-color{border-color: var(--wp--preset--color--color-theme-pink) !important;}.has-color-theme-pink-grey-border-color{border-color: var(--wp--preset--color--color-theme-pink-grey) !important;}.has-color-theme-rose-border-color{border-color: var(--wp--preset--color--color-theme-rose) !important;}.has-color-theme-medium-rose-border-color{border-color: var(--wp--preset--color--color-theme-medium-rose) !important;}.has-color-theme-dark-rose-border-color{border-color: var(--wp--preset--color--color-theme-dark-rose) !important;}.has-color-theme-green-border-color{border-color: var(--wp--preset--color--color-theme-green) !important;}.has-color-theme-lightpastel-green-border-color{border-color: var(--wp--preset--color--color-theme-lightpastel-green) !important;}.has-color-theme-pastel-green-border-color{border-color: var(--wp--preset--color--color-theme-pastel-green) !important;}.has-color-theme-light-green-border-color{border-color: var(--wp--preset--color--color-theme-light-green) !important;}.has-color-theme-dark-green-border-color{border-color: var(--wp--preset--color--color-theme-dark-green) !important;}.has-color-theme-red-border-color{border-color: var(--wp--preset--color--color-theme-red) !important;}.has-color-theme-yellow-border-color{border-color: var(--wp--preset--color--color-theme-yellow) !important;}.has-color-theme-light-yellow-border-color{border-color: var(--wp--preset--color--color-theme-light-yellow) !important;}.has-color-theme-grey-border-color{border-color: var(--wp--preset--color--color-theme-grey) !important;}.has-color-theme-light-grey-border-color{border-color: var(--wp--preset--color--color-theme-light-grey) !important;}.has-color-theme-dark-grey-border-color{border-color: var(--wp--preset--color--color-theme-dark-grey) !important;}.has-color-theme-purple-border-color{border-color: var(--wp--preset--color--color-theme-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.wp-block-heading.has-epilogue-sans-font-family{font-family: var(--wp--preset--font-family--epilogue-sans) !important;}
|
|
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
|
|
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
|
|
:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
|
|
</style>
|
|
<link rel='stylesheet' id='contact-form-7-css' href='https://www.charityright.org.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.0.5' type='text/css' media='all' />
|
|
<link rel='stylesheet' id='vl-30nightsofgiving-styles-css' href='https://www.charityright.org.uk/wp-content/plugins/vl-plugin-30nightsofgiving/src/../build/entry.css?ver=1.0.0-69a6ef687a1f1' type='text/css' media='all' />
|
|
<link rel='stylesheet' id='app-css' href='https://www.charityright.org.uk/wp-content/themes/vl-theme-cr/build/app.css?ver=2.0.15' type='text/css' media='all' />
|
|
<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
|
|
<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/plugins/vl-plugin-30nightsofgiving/src/../build/entry.js?ver=1.0.0-69a6ef687a1d9" id="vl-30nightsofgiving-scripts-js"></script>
|
|
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style><!-- SEO meta tags powered by SmartCrawl https://wpmudev.com/project/smartcrawl-wordpress-seo/ -->
|
|
<!-- /SEO -->
|
|
<link rel="icon" href="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon-150x150.png" sizes="32x32" />
|
|
<link rel="icon" href="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon.png" sizes="192x192" />
|
|
<link rel="apple-touch-icon" href="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon.png" />
|
|
<meta name="msapplication-TileImage" content="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon.png" />
|
|
<style type="text/css" id="wp-custom-css">
|
|
.30-nights-of-giving {
|
|
background: linear-gradient(298deg, rgba(47, 19, 91, 0.8) 5.93%, rgba(45, 18, 89, 0.8) 71.41%, rgba(228, 34, 129, 0.8) 130.5%);
|
|
} </style>
|
|
<link rel="prefetch" href="https://js.stripe.com/v3/" as="script">
|
|
</head>
|
|
<body class="wp-custom-logo wp-theme-vl-theme-cr cr-header-offset">
|
|
<div id="cr-inapp-banner" role="complementary" aria-label="Open in browser">
|
|
<p>For the best experience, open in your browser</p>
|
|
<a id="cr-iab-open" class="cr-iab-open" href="#">Open in Safari ↗</a>
|
|
<button class="cr-iab-dismiss" id="cr-iab-dismiss" aria-label="Dismiss">Continue here</button>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var ua=navigator.userAgent||"";
|
|
var isInApp=false;
|
|
// Detect all major in-app browsers
|
|
if(/FBAN|FBAV/i.test(ua)) isInApp=true; // Facebook
|
|
if(/Instagram/i.test(ua)) isInApp=true; // Instagram
|
|
if(/TikTok|BytedanceWebview|musical_ly/i.test(ua)) isInApp=true; // TikTok
|
|
if(/Snapchat/i.test(ua)) isInApp=true; // Snapchat
|
|
if(/Twitter|Threads/i.test(ua)) isInApp=true; // Twitter/Threads
|
|
if(/Line\//i.test(ua)) isInApp=true; // LINE
|
|
if(/\bwv\b|WebView/i.test(ua)) isInApp=true; // Generic Android WebView
|
|
if(/LinkedIn/i.test(ua)) isInApp=true; // LinkedIn
|
|
if(/Pinterest/i.test(ua)) isInApp=true; // Pinterest
|
|
if(/Telegram/i.test(ua)) isInApp=true; // Telegram
|
|
// iOS: has iPhone/iPad but NOT Safari = in-app WebView
|
|
if(!isInApp&&/iPhone|iPad/.test(ua)&&!/Safari/i.test(ua)) isInApp=true;
|
|
|
|
// CRITICAL: Only add the class + show banner if actually in-app
|
|
if(!isInApp) return;
|
|
|
|
// Add scoping class to <html> so CSS fixes activate
|
|
document.documentElement.classList.add("cr-is-inapp");
|
|
|
|
// Bail early if user already dismissed
|
|
if(sessionStorage.getItem("cr_iab_off")) return;
|
|
|
|
var b=document.getElementById("cr-inapp-banner");
|
|
var o=document.getElementById("cr-iab-open");
|
|
var d=document.getElementById("cr-iab-dismiss");
|
|
if(!b||!o) return;
|
|
|
|
var url=window.location.href;
|
|
if(/iPhone|iPad|iPod/i.test(ua)){
|
|
o.href=url; o.setAttribute("target","_blank"); o.textContent="Open in Safari \u2197";
|
|
} else {
|
|
o.href="intent:"+url.replace(/^https?/,"")+"#Intent;scheme=https;end";
|
|
o.textContent="Open in Chrome \u2197";
|
|
}
|
|
b.style.display="block";
|
|
|
|
if(d) d.addEventListener("click",function(){
|
|
b.style.display="none";
|
|
sessionStorage.setItem("cr_iab_off","1");
|
|
});
|
|
|
|
// Intercept window.open for donate buttons (in-app only)
|
|
var _origOpen = window.open;
|
|
window.open = function(url, target) {
|
|
if(url && typeof url === "string" && (url.indexOf("app.charityright.org.uk") > -1 || url.indexOf("/donate") > -1)) {
|
|
window.location.href = url;
|
|
return null;
|
|
}
|
|
return _origOpen.apply(window, arguments);
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
body { padding-top: 80px !important; margin-top: 0 !important; }
|
|
@media (max-width: 768px) { body { padding-top: 60px !important; } }
|
|
body:has(.rm) { padding-top: 0 !important; }
|
|
body:has(.fk) { padding-top: 0 !important; }
|
|
body:has(.page-margin) { padding-top: 0 !important; }
|
|
body:has(.cp) { padding-top: 0 !important; }
|
|
.page-margin { margin-top: 60px !important; }
|
|
@media (min-width: 769px) { .page-margin { margin-top: 80px !important; } }
|
|
/* === CR HEADER === */
|
|
.cr-header {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
|
|
background: #fff;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
.cr-header *, .cr-header *::before, .cr-header *::after { box-sizing: border-box; }
|
|
.cr-header a, .cr-header a:visited, .cr-header a:link { text-decoration: none; }
|
|
|
|
.cr-header-inner {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
max-width: 1200px; margin: 0 auto;
|
|
padding: 0 24px; height: 80px; position: relative;
|
|
}
|
|
.cr-header-left, .cr-header-right { display: flex; align-items: center; gap: 8px; }
|
|
.cr-header-left nav ul, .cr-header-right nav ul {
|
|
display: flex; list-style: none; margin: 0; padding: 0; gap: 4px;
|
|
}
|
|
.cr-header-left nav ul li a, .cr-header-right nav ul li a {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 8px 16px; font-size: 0.88rem; font-weight: 600;
|
|
color: #1a1a1a !important; transition: color 0.2s; white-space: nowrap; line-height: 1;
|
|
}
|
|
.cr-header-left nav ul li a:hover, .cr-header-right nav ul li a:hover { color: #e42281 !important; }
|
|
|
|
/* Chevron */
|
|
.cr-chev { width: 16px; height: 16px; transition: transform 0.2s; flex-shrink: 0; color: #1a1a1a; }
|
|
.menu-item.has-sub:hover .cr-chev { transform: rotate(180deg); }
|
|
|
|
/* Logo — big and readable */
|
|
.cr-header-logo { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
|
|
.cr-header-logo img { height: 72px; width: auto; }
|
|
|
|
/* Donate button */
|
|
.cr-header-donate,
|
|
a.cr-header-donate,
|
|
a.cr-header-donate:link,
|
|
a.cr-header-donate:visited,
|
|
a.cr-header-donate:hover,
|
|
a.cr-header-donate:active {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
background: #e42281; color: #fff !important; font-size: 0.82rem; font-weight: 700;
|
|
padding: 12px 28px; border-radius: 2px; text-decoration: none !important;
|
|
transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
|
|
letter-spacing: 0.3px; line-height: 1;
|
|
}
|
|
a.cr-header-donate:hover { background: #c2185b; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(228,34,129,0.25); }
|
|
|
|
/* Login icon */
|
|
.cr-header-login {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 40px; height: 40px; margin-right: 10px;
|
|
color: #1a1a1a; text-decoration: none !important;
|
|
transition: color 0.2s ease; flex-shrink: 0;
|
|
}
|
|
.cr-header-login:hover { color: #e42281; }
|
|
.cr-header-login svg { width: 22px; height: 22px; }
|
|
|
|
/* Burger (mobile) */
|
|
.cr-header-burger {
|
|
display: none; flex-direction: column; gap: 5px; padding: 8px;
|
|
background: none; border: none; cursor: pointer;
|
|
}
|
|
.cr-header-burger span { display: block; width: 22px; height: 2px; background: #1a1a1a; border-radius: 1px; }
|
|
|
|
/* === MEGA MENU === */
|
|
.menu-item.has-sub { position: static; }
|
|
.menu-item.has-sub > a { position: relative; z-index: 101; }
|
|
|
|
/* Invisible hover bridge - fills gap between nav item and mega dropdown */
|
|
.menu-item.has-sub::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100px; /* generous bridge covering header height + gap */
|
|
z-index: 99;
|
|
pointer-events: none;
|
|
}
|
|
.menu-item.has-sub:hover::after {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.cr-mega {
|
|
display: none;
|
|
position: absolute;
|
|
top: 76px; left: 0; right: 0; padding-top: 4px;
|
|
background: #fff;
|
|
border-top: 1px solid rgba(0,0,0,0.04);
|
|
box-shadow: 0 24px 64px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
|
|
padding: 0;
|
|
z-index: 100;
|
|
animation: crMegaIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
@keyframes crMegaIn {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.menu-item.has-sub:hover .cr-mega { display: block; }
|
|
|
|
/* Reset all mega children */
|
|
.cr-mega, .cr-mega * { margin: 0; padding: 0; text-indent: 0; list-style: none; }
|
|
|
|
.cr-mega-inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
min-height: 320px;
|
|
}
|
|
|
|
/* LEFT: Campaigns */
|
|
.cr-mega-campaigns {
|
|
padding: 36px 40px 32px;
|
|
border-right: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
.cr-mega-label {
|
|
font-size: 0.58rem;
|
|
font-weight: 700;
|
|
|
|
letter-spacing: 3px;
|
|
color: #bbb;
|
|
margin-bottom: 24px !important;
|
|
display: block;
|
|
}
|
|
|
|
/* Campaign card — hover reveals pink left border */
|
|
.cr-mega-item {
|
|
display: block;
|
|
padding: 14px 16px;
|
|
margin: 0 -16px 4px !important;
|
|
border-radius: 2px;
|
|
border-left: 3px solid transparent;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none !important;
|
|
cursor: pointer;
|
|
}
|
|
.cr-mega-item:last-child { margin-bottom: 0 !important; }
|
|
.cr-mega-item:hover {
|
|
background: rgba(228, 34, 129, 0.03);
|
|
border-left-color: #e42281;
|
|
}
|
|
.cr-mega-item-title {
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
color: #1a1a1a !important;
|
|
line-height: 1.2;
|
|
margin-bottom: 3px !important;
|
|
display: block;
|
|
transition: color 0.2s;
|
|
}
|
|
.cr-mega-item:hover .cr-mega-item-title { color: #e42281 !important; }
|
|
.cr-mega-item-desc {
|
|
font-size: 0.75rem;
|
|
color: #999;
|
|
line-height: 1.45;
|
|
font-weight: 400;
|
|
display: block;
|
|
}
|
|
|
|
/* RIGHT: Countries */
|
|
.cr-mega-countries {
|
|
padding: 36px 40px 32px;
|
|
background: #fafafa;
|
|
}
|
|
.cr-mega-country-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
.cr-mega-country-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
margin: 0 -12px !important;
|
|
border-radius: 2px;
|
|
transition: background 0.2s;
|
|
text-decoration: none !important;
|
|
cursor: pointer;
|
|
}
|
|
.cr-mega-country-item:hover { background: rgba(0,0,0,0.04); }
|
|
.cr-mega-country-item img {
|
|
width: 26px; height: 18px;
|
|
object-fit: cover; border-radius: 2px;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
|
|
}
|
|
.cr-mega-country-item span {
|
|
font-size: 0.84rem;
|
|
font-weight: 500;
|
|
color: #333 !important;
|
|
transition: color 0.2s;
|
|
line-height: 1;
|
|
}
|
|
.cr-mega-country-item:hover span { color: #e42281 !important; }
|
|
|
|
/* View All — full width bottom bar */
|
|
.cr-mega-bottom {
|
|
grid-column: 1 / -1;
|
|
border-top: 1px solid rgba(0,0,0,0.06);
|
|
padding: 16px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.cr-mega-viewall, .cr-mega-viewall:visited, .cr-mega-viewall:link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: #e42281 !important;
|
|
text-decoration: none !important;
|
|
transition: gap 0.2s;
|
|
}
|
|
.cr-mega-viewall:hover { gap: 10px; }
|
|
.cr-mega-viewall svg { width: 14px; height: 14px; }
|
|
|
|
/* Mobile nav */
|
|
.mobile-nav {
|
|
position: fixed; top: 76px; left: 0; right: 0; padding-top: 4px; bottom: 0;
|
|
background: #fff; z-index: 9998; overflow-y: auto;
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.mobile-nav.collapsed { transform: translateX(-100%); opacity: 0; pointer-events: none; }
|
|
.cr-mobile-buttons { display: none !important; }
|
|
|
|
@media (max-width: 768px) {
|
|
.cr-header-inner { padding: 0 16px; height: 60px; }
|
|
.cr-header-left nav { display: none; }
|
|
.cr-header-right nav { display: none; }
|
|
.cr-header-burger { display: flex; }
|
|
.cr-header-logo { position: static; transform: none; }
|
|
.cr-header-logo img { height: 40px; }
|
|
.cr-header-donate { font-size: 0.72rem; padding: 8px 18px; }
|
|
.cr-header-login { width: 34px; height: 34px; margin-right: 8px; }
|
|
.cr-header-login svg { width: 20px; height: 20px; }
|
|
.cr-mobile-buttons { display: flex !important; }
|
|
.mobile-nav { top: 60px; }
|
|
}
|
|
|
|
/* === HEADER FIXES (2026-02-19) === */
|
|
/* Fix 1: Mobile nav override - works on ALL pages, not just home */
|
|
.cr-header .mobile-nav {
|
|
position: fixed !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
background: #fff !important;
|
|
z-index: 9998 !important;
|
|
overflow-y: auto !important;
|
|
transition: transform 0.3s ease, opacity 0.3s ease !important;
|
|
}
|
|
.cr-header .mobile-nav:not(.collapsed) {
|
|
transform: translateX(0) !important;
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
.cr-header .mobile-nav.collapsed {
|
|
transform: translateX(-100%) !important;
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Fix 2: Login/account icon always visible */
|
|
a.cr-header-login {
|
|
display: inline-flex !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Fix 3: Logo align left on mobile, account icon right of donate */
|
|
@media (max-width: 768px) {
|
|
.cr-header-logo {
|
|
position: static !important;
|
|
transform: none !important;
|
|
margin-right: auto !important;
|
|
}
|
|
.cr-header-inner {
|
|
justify-content: flex-start !important;
|
|
gap: 8px;
|
|
}
|
|
.cr-header-right {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
/* === END HEADER FIXES === */
|
|
|
|
</style>
|
|
|
|
<header class="cr-header" x-data="HeaderMenu">
|
|
<div class="cr-header-inner" style="position:relative;">
|
|
<!-- Left: Burger (mobile) + Nav (desktop) -->
|
|
<div class="cr-header-left">
|
|
<button class="cr-header-burger" aria-label="Toggle menu" @click="toggle()">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<nav>
|
|
<ul>
|
|
<li class="menu-item has-sub">
|
|
<a href="https://www.charityright.org.uk/projects/">
|
|
Our Work
|
|
<svg class="cr-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
|
|
</a>
|
|
<div class="cr-mega">
|
|
<div class="cr-mega-inner">
|
|
<div class="cr-mega-campaigns">
|
|
<div class="cr-mega-label">Campaigns</div>
|
|
<a href="https://www.charityright.org.uk/project/school-meals/" class="cr-mega-item">
|
|
<span class="cr-mega-item-title">School Meals</span>
|
|
<span class="cr-mega-item-desc">Daily meals keeping children in school and focused on their education.</span>
|
|
</a>
|
|
<a href="https://www.charityright.org.uk/project/health-hifz-happiness/" class="cr-mega-item">
|
|
<span class="cr-mega-item-title">Hifz Meals</span>
|
|
<span class="cr-mega-item-desc">Sponsor a hifz student's meals with regular progress updates.</span>
|
|
</a>
|
|
<a href="https://www.charityright.org.uk/campaigns/tech-team-for-meals-4/" class="cr-mega-item" data-cl="true">
|
|
<span class="cr-mega-item-title">Tech Meals</span>
|
|
<span class="cr-mega-item-desc">School meals + coding education for Rohingya refugee children.</span>
|
|
</a>
|
|
</div>
|
|
<div class="cr-mega-countries">
|
|
<div class="cr-mega-label">Countries</div>
|
|
<div class="cr-mega-country-grid">
|
|
<a href="https://www.charityright.org.uk/countries/afghanistan/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/08/afghanistan-b.png" alt="Afghanistan"><span>Afghanistan</span></a>
|
|
<a href="https://www.charityright.org.uk/countries/bangladesh/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/08/bangladesh-b.png" alt="Bangladesh"><span>Bangladesh</span></a>
|
|
<a href="https://www.charityright.org.uk/countries/ethiopia/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/ethiopia-b.png" alt="Ethiopia"><span>Ethiopia</span></a>
|
|
<a href="https://www.charityright.org.uk/countries/malawi/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/malawi-b.png" alt="Malawi"><span>Malawi</span></a>
|
|
<a href="https://www.charityright.org.uk/countries/pakistan/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2025/01/32px-Flag_of_Pakistan.svg_.webp" alt="Pakistan"><span>Pakistan</span></a>
|
|
<a href="https://www.charityright.org.uk/countries/palestine/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/palestine-b.png" alt="Palestine"><span>Palestine</span></a>
|
|
<a href="https://www.charityright.org.uk/countries/turkey/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/turkey-b.png" alt="Turkey"><span>Turkey</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="cr-mega-bottom">
|
|
<a href="https://www.charityright.org.uk/projects" class="cr-mega-viewall">
|
|
View all projects
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="https://www.charityright.org.uk/zakat" data-cl="true">Give Zakat</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Center: Logo -->
|
|
<a href="https://www.charityright.org.uk" class="cr-header-logo" aria-label="Charity Right home">
|
|
<img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-logo-tagline-black.svg" alt="Charity Right">
|
|
</a>
|
|
|
|
<!-- Right: Nav + Donate -->
|
|
<div class="cr-header-right">
|
|
<nav>
|
|
<ul>
|
|
<li><a href="https://www.charityright.org.uk/events/">Events</a></li>
|
|
</ul>
|
|
</nav>
|
|
<a href="https://app.charityright.org.uk/login" class="cr-header-login" aria-label="Login" title="Login"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></a>
|
|
<a href="https://app.charityright.org.uk/donate/" class="cr-header-donate">Donate</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile nav (Alpine.js) -->
|
|
<div :class="collapsed ? 'collapsed' : ''" class="mobile-nav collapsed">
|
|
<div class="container">
|
|
<div class="flex flex-col h-[calc(100dvh-4.3rem)] pt-12 sm:pt-16 pb-12 overflow-y-auto sm:pb-20">
|
|
<ul>
|
|
<li class="mb-4" @click="selected != 9498 ? selected = 9498 : selected = null">
|
|
<div class="flex items-center justify-between cursor-pointer">
|
|
<span class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold">Our Work</span>
|
|
<svg :class="selected == 9498 ? 'rotate-45' : ''" class="text-theme_dark_grey w-4 mb-1.5 mr-4 transition duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>
|
|
</div>
|
|
<div x-ref="container9498" x-bind:style="selected == 9498 ? 'max-height: ' + ($refs.container9498.scrollHeight + 24) + 'px' : ''" class="overflow-hidden transition-all duration-300 max-h-0">
|
|
<div class="flex flex-col mt-4 last:mb-6 last:mt-0">
|
|
<span class="block mt-4 mb-6 text-[13px] sm:text-sm text-theme_dark_grey uppercase font-semibold">CAMPAIGNS</span>
|
|
<div class="flex flex-col">
|
|
<div class="!mb-4">
|
|
<h3><a href="https://www.charityright.org.uk/project/school-meals/" class="text-lg transition duration-300 sm:text-xl text-theme_black hover:text-theme_pink link-color">School Meals</a></h3>
|
|
<p class="max-w-[470px] !mt-1 text-sm xs:text-base xs:!mt-2 text-theme_dark_grey">Provide daily meals to children, helping them stay in school and focus on their education.</p>
|
|
</div>
|
|
<div class="!mb-4">
|
|
<h3><a href="https://www.charityright.org.uk/project/health-hifz-happiness/" class="text-lg transition duration-300 sm:text-xl text-theme_black hover:text-theme_pink link-color">Hifz Meals</a></h3>
|
|
<p class="max-w-[470px] !mt-1 text-sm xs:text-base xs:!mt-2 text-theme_dark_grey">Sponsor a hifz student's meals and receive regular updates about their progress.</p>
|
|
</div>
|
|
<div class="!mb-4">
|
|
<h3><a href="https://www.charityright.org.uk/campaigns/tech-team-for-meals-4/" class="text-lg transition duration-300 sm:text-xl text-theme_black hover:text-theme_pink link-color" data-cl="true">Tech Meals</a></h3>
|
|
<p class="max-w-[470px] !mt-1 text-sm xs:text-base xs:!mt-2 text-theme_dark_grey">Give Rohingya refugee children in Bangladesh the fuel to learn - daily school meals and coding education.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col mt-4 last:mb-6 last:mt-0">
|
|
<span class="block mt-4 mb-6 text-[13px] sm:text-sm text-theme_dark_grey uppercase font-semibold">COUNTRIES</span>
|
|
<div class="grid gap-y-4 grid-cols-2">
|
|
<div><a href="https://www.charityright.org.uk/countries/afghanistan/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/08/afghanistan-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Afghanistan"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Afghanistan</div></a></div>
|
|
<div><a href="https://www.charityright.org.uk/countries/bangladesh/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/08/bangladesh-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Bangladesh"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Bangladesh</div></a></div>
|
|
<div><a href="https://www.charityright.org.uk/countries/ethiopia/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/ethiopia-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Ethiopia"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Ethiopia</div></a></div>
|
|
<div><a href="https://www.charityright.org.uk/countries/malawi/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/malawi-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Malawi"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Malawi</div></a></div>
|
|
<div><a href="https://www.charityright.org.uk/countries/pakistan/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2025/01/32px-Flag_of_Pakistan.svg_.webp" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Pakistan"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Pakistan</div></a></div>
|
|
<div><a href="https://www.charityright.org.uk/countries/palestine/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/palestine-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Palestine"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Palestine</div></a></div>
|
|
<div><a href="https://www.charityright.org.uk/countries/turkey/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/turkey-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Turkey"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Turkey</div></a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="mb-4">
|
|
<a href="https://www.charityright.org.uk/zakat" class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold" data-cl="true">Give Zakat</a>
|
|
</li>
|
|
<li class="mb-4"><a href="https://www.charityright.org.uk/events/" class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold">Events</a></li>
|
|
</ul>
|
|
<div class="mt-6 xs:mt-8 sm:mt-10">
|
|
<a href="https://app.charityright.org.uk/login" class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold" >Login/Register</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<script>
|
|
(function(){
|
|
var burger = document.querySelector('.cr-header-burger');
|
|
var nav = document.querySelector('.mobile-nav');
|
|
if(!burger || !nav) return;
|
|
burger.addEventListener('click', function(e){
|
|
e.stopPropagation();
|
|
nav.classList.toggle('collapsed');
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--pl-navy: #0B1026;
|
|
--pl-navy-d: #080C1E;
|
|
--pl-coral: #FFBC91;
|
|
--pl-coral-d: #E8A670;
|
|
--pl-coral-glow: rgba(255,188,145,.35);
|
|
--pl-cream: #FAF5EF;
|
|
--pl-wh: #fff;
|
|
--pl-ff: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--pl-ease: cubic-bezier(.22, 1, .36, 1);
|
|
}
|
|
|
|
body:has(.pl) { padding-top: 0 !important; margin-top: 0 !important; }
|
|
/* In-app browser fixes */
|
|
.pl input, .pl select, .pl textarea { font-size: 16px !important; }
|
|
.pl { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0); }
|
|
.pl-w-amt, .pl-w-go, .pl-w-toggle { min-height: 44px; }
|
|
.pl-story-pin { -webkit-overflow-scrolling: touch; }
|
|
|
|
.pl section, .pl div { margin-top: 0; margin-bottom: 0; }
|
|
.pl { font-family: var(--pl-ff); -webkit-font-smoothing: antialiased; background: var(--pl-navy); color: #fff; overflow-x: hidden; line-height: 1.5; }
|
|
.pl h1, .pl h2, .pl h3, .pl p, .pl span, .pl button, .pl a, .pl label, .pl div { color: inherit; }
|
|
.pl img { max-width: 100%; display: block; }
|
|
.pl a { text-decoration: none !important; color: inherit; }
|
|
.pl section::before { display: none !important; content: none !important; }
|
|
|
|
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
HERO
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
|
|
|
|
.pl-hero {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100vh; height: 100dvh; min-height: 100dvh;
|
|
overflow: hidden;
|
|
background: var(--pl-navy);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.pl-hero-slides {
|
|
position: absolute; inset: 0; z-index: 0;
|
|
}
|
|
.pl-hero-slide {
|
|
position: absolute; inset: 0;
|
|
opacity: 0; transition: opacity 1.4s ease-in-out;
|
|
}
|
|
.pl-hero-slide.active { opacity: 1; }
|
|
.pl-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
.pl-hero-overlay {
|
|
position: absolute; inset: 0; z-index: 1;
|
|
background:
|
|
linear-gradient(90deg,
|
|
rgba(11,16,38,.95) 0%,
|
|
rgba(11,16,38,.88) 25%,
|
|
rgba(11,16,38,.6) 48%,
|
|
rgba(11,16,38,.3) 65%,
|
|
rgba(11,16,38,.1) 80%,
|
|
transparent 100%
|
|
),
|
|
linear-gradient(0deg,
|
|
rgba(11,16,38,.6) 0%,
|
|
transparent 30%,
|
|
transparent 85%,
|
|
rgba(11,16,38,.4) 100%
|
|
);
|
|
}
|
|
|
|
.pl-hero::before {
|
|
content: ''; position: absolute; inset: 0; z-index: 2;
|
|
pointer-events: none; opacity: .025;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
background-size: 128px;
|
|
}
|
|
|
|
.pl-hero-grid {
|
|
position: relative; z-index: 3;
|
|
display: grid; grid-template-columns: 1fr 400px;
|
|
gap: 60px; align-items: center;
|
|
max-width: 1280px; margin: 0 auto;
|
|
padding: 0 clamp(24px, 5vw, 80px);
|
|
min-height: 100vh; height: 100dvh; min-height: 100dvh;
|
|
}
|
|
|
|
.pl-hero-text { padding: 5vh 0; }
|
|
|
|
/* Co-brand logos */
|
|
.pl-hero-logos {
|
|
display: flex; align-items: center; gap: 20px;
|
|
margin-bottom: 56px;
|
|
opacity: 0; animation: plFadeUp .9s .15s var(--pl-ease) forwards;
|
|
}
|
|
.pl-hero-logos img { height: 52px; }
|
|
.pl-hero-logos .pl-x {
|
|
font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.3);
|
|
letter-spacing: 2px; text-transform: uppercase;
|
|
}
|
|
|
|
.pl-hero-label {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
margin-bottom: 20px;
|
|
opacity: 0; animation: plFadeUp .9s .3s var(--pl-ease) forwards;
|
|
}
|
|
.pl-hero-label-line { width: 32px; height: 1px; background: var(--pl-coral); }
|
|
.pl-hero-label-text {
|
|
font-size: .6rem; font-weight: 700; letter-spacing: 4px;
|
|
text-transform: uppercase; color: var(--pl-coral);
|
|
}
|
|
|
|
.pl-hero-h1 {
|
|
font-size: clamp(2.4rem, 5vw, 4.5rem);
|
|
font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
|
|
margin-top: 8px; margin-bottom: 24px; color: #fff !important;
|
|
opacity: 0; animation: plFadeUp .9s .45s var(--pl-ease) forwards;
|
|
}
|
|
.pl-hero-h1 em { font-style: normal; color: var(--pl-coral); }
|
|
|
|
.pl-hero-sub {
|
|
font-size: clamp(.9rem, 1.6vw, 1.1rem);
|
|
font-weight: 300; color: rgba(255,255,255,.55);
|
|
max-width: 400px; line-height: 1.7; margin-bottom: 36px;
|
|
opacity: 0; animation: plFadeUp .9s .6s var(--pl-ease) forwards;
|
|
}
|
|
|
|
.pl-hero-dots {
|
|
display: flex; gap: 10px; margin-top: 40px;
|
|
opacity: 0; animation: plFadeUp .9s 1s var(--pl-ease) forwards;
|
|
}
|
|
.pl-hero-dot {
|
|
width: 40px; height: 3px; background: rgba(255,255,255,.15);
|
|
border: none; cursor: pointer; transition: all .5s var(--pl-ease);
|
|
position: relative; overflow: hidden; padding: 0;
|
|
}
|
|
.pl-hero-dot::after {
|
|
content: ''; position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 0%; background: var(--pl-coral); transition: width .3s;
|
|
}
|
|
.pl-hero-dot.active { background: rgba(255,255,255,.08); }
|
|
.pl-hero-dot.active::after { animation: plDotFill 6s linear forwards; }
|
|
@keyframes plDotFill { from { width: 0%; } to { width: 100%; } }
|
|
@keyframes plFadeUp {
|
|
from { opacity: 0; transform: translateY(25px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Widget */
|
|
.pl-hero-widget {
|
|
opacity: 0; animation: plWidgetIn 1s .5s var(--pl-ease) forwards;
|
|
}
|
|
@keyframes plWidgetIn {
|
|
from { opacity: 0; transform: translateY(30px) scale(.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.pl-w {
|
|
background: rgba(11,16,38,.92);
|
|
backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
overflow: hidden;
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 24px 80px rgba(0,0,0,.5);
|
|
}
|
|
|
|
.pl-w-header { padding: 28px 28px 0; text-align: center; }
|
|
.pl-w-title {
|
|
font-size: 1.5rem; font-weight: 700; line-height: 1.2;
|
|
letter-spacing: -.3px; margin: 0 0 4px; color: #fff !important;
|
|
}
|
|
.pl-w-badge {
|
|
display: inline-block; margin-top: 10px; margin-bottom: 4px;
|
|
font-size: .6rem; font-weight: 700; letter-spacing: 1.5px;
|
|
text-transform: uppercase; color: var(--pl-coral);
|
|
padding: 5px 14px;
|
|
background: rgba(255,188,145,.08);
|
|
border: 1px solid rgba(255,188,145,.2);
|
|
}
|
|
|
|
.pl-w-body { padding: 28px 28px 32px; }
|
|
|
|
.pl-w-amounts { display: flex; gap: 8px; margin: 0 0 20px; }
|
|
.pl-w-amt {
|
|
flex: 1; padding: 14px 6px; background: rgba(255,255,255,.04);
|
|
border: 1.5px solid rgba(255,188,145,.2);
|
|
color: #fff; font-family: var(--pl-ff); font-size: 1.1rem; font-weight: 700;
|
|
cursor: pointer; transition: all .25s var(--pl-ease); text-align: center;
|
|
}
|
|
.pl-w-amt:hover { border-color: rgba(255,188,145,.3); background: rgba(255,188,145,.04); }
|
|
.pl-w-amt.active {
|
|
border-color: var(--pl-coral); background: rgba(255,188,145,.1);
|
|
box-shadow: 0 0 0 1px var(--pl-coral), 0 4px 20px rgba(255,188,145,.15);
|
|
}
|
|
.pl-w-amt small { display: block; font-size: .55rem; font-weight: 400; opacity: .5; margin-top: 3px; }
|
|
|
|
.pl-w-custom { position: relative; margin: 0 0 24px; }
|
|
.pl-w-custom-curr {
|
|
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
|
|
color: rgba(255,255,255,.25); font-size: 1rem; font-weight: 600;
|
|
}
|
|
.pl-w-custom input {
|
|
width: 100%; padding: 14px 14px 14px 28px;
|
|
background: rgba(255,255,255,.04); border: 1px solid rgba(255,188,145,.15);
|
|
color: #fff; font-family: var(--pl-ff); font-size: 1rem; outline: none;
|
|
transition: border-color .25s; -moz-appearance: textfield;
|
|
}
|
|
.pl-w-custom input::-webkit-outer-spin-button,
|
|
.pl-w-custom input::-webkit-inner-spin-button { -webkit-appearance: none; }
|
|
.pl-w-custom input::placeholder { color: rgba(255,255,255,.3); }
|
|
.pl-w-custom input:focus { border-color: var(--pl-coral); }
|
|
|
|
.pl-w-sep { height: 1px; background: rgba(255,188,145,.1); margin: 0 0 24px; }
|
|
|
|
.pl-w-toggles { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
|
|
.pl-w-toggle {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 10px 14px; background: rgba(255,255,255,.02);
|
|
border: 1px solid rgba(255,188,145,.12);
|
|
cursor: pointer; transition: all .25s; user-select: none;
|
|
}
|
|
.pl-w-toggle.active { border-color: rgba(255,188,145,.2); background: rgba(255,188,145,.04); }
|
|
.pl-w-toggle-info { display: flex; flex-direction: column; gap: 1px; }
|
|
.pl-w-toggle-label { font-size: .8rem; font-weight: 600; color: #fff !important; }
|
|
.pl-w-toggle-desc { font-size: .6rem; color: rgba(255,255,255,.45); }
|
|
.pl-w-switch {
|
|
width: 36px; height: 20px; border-radius: 999px;
|
|
background: rgba(255,255,255,.1); position: relative;
|
|
transition: background .25s; flex-shrink: 0; margin-left: 12px;
|
|
}
|
|
.pl-w-switch::after {
|
|
content: ''; position: absolute; top: 2px; left: 2px;
|
|
width: 16px; height: 16px; border-radius: 50%;
|
|
background: #fff; transition: transform .25s var(--pl-ease);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.25);
|
|
}
|
|
.pl-w-toggle.active .pl-w-switch { background: var(--pl-coral); }
|
|
.pl-w-toggle.active .pl-w-switch::after { background: var(--pl-navy); }
|
|
.pl-w-toggle.active .pl-w-switch::after { transform: translateX(16px); }
|
|
|
|
.pl-w-total {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 16px; background: rgba(255,255,255,.02);
|
|
border: 1px solid rgba(255,188,145,.15); margin: 0 0 24px;
|
|
}
|
|
.pl-w-total-label { font-size: .65rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
|
|
.pl-w-total-amount { font-size: 1.4rem; font-weight: 800; color: var(--pl-coral); }
|
|
|
|
.pl-w-go, .pl-w-go:hover, .pl-w-go:visited, .pl-w-go:active, .pl-w-go:focus {
|
|
color: var(--pl-navy) !important;
|
|
}
|
|
.pl-w-go {
|
|
width: 100%; padding: 16px; background: var(--pl-coral); color: var(--pl-navy) !important; border: none;
|
|
font-family: var(--pl-ff); font-size: .8rem; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 2px; cursor: pointer;
|
|
transition: all .35s var(--pl-ease); position: relative; overflow: hidden;
|
|
}
|
|
.pl-w-go::after {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
|
|
transform: translateX(-100%); transition: transform .6s;
|
|
}
|
|
.pl-w-go:hover { background: var(--pl-coral-d); color: var(--pl-navy) !important; transform: translateY(-2px); box-shadow: 0 8px 30px var(--pl-coral-glow); }
|
|
.pl-w-go:hover::after { transform: translateX(100%); }
|
|
|
|
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
SECTION 2: HIGH STAKES
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
|
|
|
|
.pl-stakes {
|
|
background: var(--pl-navy-d);
|
|
padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 80px);
|
|
border-top: 1px solid rgba(255,255,255,.03);
|
|
}
|
|
.pl-stakes-inner {
|
|
max-width: 1100px; margin: 0 auto;
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
|
|
align-items: center;
|
|
}
|
|
.pl-stakes-text h2 {
|
|
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
|
|
font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
|
|
margin-bottom: 24px; color: #fff !important;
|
|
}
|
|
.pl-stakes-text h2 em { font-style: normal; color: var(--pl-coral); }
|
|
.pl-stakes-copy {
|
|
font-size: 1.1rem; color: rgba(255,255,255,.5); line-height: 1.9;
|
|
font-weight: 300;
|
|
}
|
|
.pl-stakes-copy strong { color: #fff; font-weight: 600; }
|
|
.pl-stakes-copy p + p { margin-top: 24px; }
|
|
.pl-stakes-highlight {
|
|
margin-top: 48px !important; padding: 48px 52px !important;
|
|
background: rgba(255,188,145,.04) !important;
|
|
border: 2.5px solid rgba(255,188,145,.35) !important;
|
|
border-radius: 0 !important;
|
|
position: relative !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
.pl-stakes-highlight::before {
|
|
content: '£150' !important;
|
|
display: block !important;
|
|
font-size: 2.4rem !important; font-weight: 900 !important; color: var(--pl-coral) !important;
|
|
letter-spacing: -.02em !important; line-height: 1 !important;
|
|
margin: 0 0 24px 0 !important; padding: 0 !important;
|
|
}
|
|
.pl-stakes-highlight p {
|
|
font-size: 1.05rem !important; color: rgba(255,255,255,.7) !important; line-height: 2.1 !important;
|
|
font-weight: 400 !important; margin: 0 !important; padding: 0 !important;
|
|
}
|
|
.pl-stakes-highlight strong { color: #fff !important; font-weight: 700 !important; display: none !important; }
|
|
|
|
/* Nuclear override for stakes section spacing */
|
|
.pl .pl-stakes-text p,
|
|
.pl .pl-stakes-highlight p,
|
|
.pl .pl-stakes-copy p {
|
|
margin-top: 0 !important; margin-bottom: 0 !important;
|
|
}
|
|
.pl .pl-stakes-copy p + p { margin-top: 24px !important; }
|
|
.pl .pl-stakes-text h2 { margin-top: 0 !important; }
|
|
|
|
.pl-stakes-img {
|
|
position: relative; overflow: hidden; aspect-ratio: 4/5;
|
|
}
|
|
.pl-stakes-img img { width: 100%; height: 100%; object-fit: cover; }
|
|
.pl-stakes-img::after {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: linear-gradient(0deg, rgba(11,16,38,.4) 0%, transparent 50%);
|
|
}
|
|
|
|
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
SECTION 3: CONFIDENCE
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
|
|
|
|
.pl-confidence {
|
|
background: var(--pl-navy);
|
|
padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 80px);
|
|
text-align: center;
|
|
border-top: 1px solid rgba(255,255,255,.03);
|
|
border-bottom: 1px solid rgba(255,255,255,.03);
|
|
}
|
|
.pl-confidence-inner { max-width: 700px; margin: 0 auto; }
|
|
.pl-confidence h2 {
|
|
font-size: clamp(2rem, 4vw, 3.2rem) !important;
|
|
font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.02em !important;
|
|
margin: 0 0 28px 0 !important; color: #fff !important;
|
|
}
|
|
.pl-confidence h2 em { font-style: normal; color: var(--pl-coral); }
|
|
.pl-confidence p {
|
|
font-size: 1.1rem !important; color: rgba(255,255,255,.45) !important; line-height: 1.8 !important;
|
|
font-weight: 300 !important; max-width: 520px !important; margin: 0 auto !important;
|
|
}
|
|
.pl-confidence-stats {
|
|
display: flex; justify-content: center; gap: 60px; margin-top: 72px !important;
|
|
}
|
|
.pl-confidence-stat { text-align: center; }
|
|
.pl-confidence-stat .num {
|
|
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
|
|
font-weight: 800; color: var(--pl-coral); line-height: 1; letter-spacing: -.02em;
|
|
}
|
|
.pl-confidence-stat .label {
|
|
font-size: .7rem; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 2px; color: rgba(255,255,255,.3); margin-top: 8px;
|
|
}
|
|
|
|
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
SECTION 4: SCROLL STORY
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
|
|
|
|
.pl-story { position: relative; background: var(--pl-navy-d); margin-top: -1px; }
|
|
.pl-story-pin {
|
|
height: 100vh; height: 100dvh;
|
|
display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden; text-align: center;
|
|
padding: 0 clamp(24px, 8vw, 120px);
|
|
position: relative; flex-direction: column; gap: 40px;
|
|
}
|
|
|
|
.pl-story-line {
|
|
font-size: clamp(2rem, 4.5vw, 3.8rem);
|
|
font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
|
|
color: #fff !important; position: absolute; max-width: 900px;
|
|
opacity: 0; transform: translateY(30px);
|
|
transition: opacity .6s var(--pl-ease), transform .6s var(--pl-ease);
|
|
}
|
|
.pl-story-line.active { opacity: 1; transform: translateY(0); }
|
|
.pl-story-line.exit { opacity: 0; transform: translateY(-30px); }
|
|
|
|
.pl-story-cta {
|
|
position: absolute; bottom: 15vh; left: 50%; transform: translateX(-50%);
|
|
display: flex; gap: 16px;
|
|
opacity: 0; pointer-events: none;
|
|
transition: opacity .5s var(--pl-ease); z-index: 5;
|
|
}
|
|
.pl-story-cta.visible { opacity: 1; pointer-events: auto; }
|
|
.pl-story-cta a {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 16px 36px; font-family: var(--pl-ff); font-size: .75rem;
|
|
font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
|
|
border: none; cursor: pointer; transition: all .35s var(--pl-ease);
|
|
}
|
|
.pl-story-cta .primary, .pl-story-cta .primary:hover, .pl-story-cta .primary:visited { color: var(--pl-navy) !important; font-weight: 800; }
|
|
.pl-story-cta .primary { background: var(--pl-coral); }
|
|
.pl-story-cta .primary:hover { background: var(--pl-coral-d); transform: translateY(-2px); box-shadow: 0 12px 40px var(--pl-coral-glow); }
|
|
.pl-story-cta .secondary, .pl-story-cta .secondary:visited { color: #fff !important; background: transparent; border: 1px solid rgba(255,255,255,.2); }
|
|
.pl-story-cta .secondary:hover { border-color: var(--pl-coral); color: var(--pl-coral) !important; }
|
|
|
|
.pl-story-counter {
|
|
position: absolute; bottom: clamp(24px, 5vh, 48px); right: clamp(24px, 5vw, 60px);
|
|
z-index: 3; display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.pl-story-counter-bar { width: 80px; height: 2px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
|
|
.pl-story-counter-fill { height: 100%; width: 25%; background: var(--pl-coral); transition: width .6s var(--pl-ease); box-shadow: 0 0 8px rgba(255,188,145,.4); }
|
|
.pl-story-counter-num { font-size: .8rem; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.3); font-variant-numeric: tabular-nums; }
|
|
.pl-story-counter-num span { color: #fff; }
|
|
|
|
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
RESPONSIVE
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
|
|
|
|
@media (max-width: 900px) {
|
|
.pl-hero-grid { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding-top: 120px; padding-bottom: 60px; }
|
|
.pl-hero-widget { max-width: 400px; }
|
|
.pl-stakes-inner { grid-template-columns: 1fr; gap: 40px; }
|
|
.pl-stakes-img { max-height: 400px; }
|
|
.pl-confidence-stats { gap: 30px; }
|
|
.pl-story-cta { flex-direction: column; align-items: center; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.pl-hero-h1 { font-size: 2.2rem; }
|
|
.pl-w-amounts { flex-direction: column; }
|
|
.pl-confidence-stats { flex-direction: column; gap: 24px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="pl">
|
|
|
|
|
|
<!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
HERO
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
|
|
<section class="pl-hero">
|
|
<div class="pl-hero-slides">
|
|
<div class="pl-hero-slide active"><img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-meals.jpg" alt="School meals being prepared" loading="eager" style="object-position: center center;"></div>
|
|
<div class="pl-hero-slide"><img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-wrong-1.jpg" alt="Meals being served" loading="lazy" style="object-position: 40% center;"></div>
|
|
<div class="pl-hero-slide"><img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-wrong-4.jpg" alt="Children eating" loading="lazy" style="object-position: 30% center;"></div>
|
|
</div>
|
|
|
|
<div class="pl-hero-overlay"></div>
|
|
|
|
<div class="pl-hero-grid">
|
|
<div class="pl-hero-text">
|
|
<!-- Co-brand logos -->
|
|
<div class="pl-hero-logos">
|
|
<img src="https://cdn.prod.website-files.com/604d480efd2aff6558953436/606b7279c7427afa5054f8bd_large%20logo.png" alt="Pillars" style="height:52px; border-radius: 10px;">
|
|
<span class="pl-x">×</span>
|
|
<img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-logo-tagline-white.svg" alt="CharityRight" style="height:44px;">
|
|
</div>
|
|
|
|
<div class="pl-hero-label">
|
|
<span class="pl-hero-label-line"></span>
|
|
<span class="pl-hero-label-text">Pay your zakat</span>
|
|
</div>
|
|
|
|
<h1 class="pl-hero-h1">
|
|
Purify Your Wealth.<br><em>Feed Children.</em>
|
|
</h1>
|
|
|
|
<p class="pl-hero-sub">100% Zakat. Daily school meals. Every pound you give feeds a child at school.</p>
|
|
|
|
<div class="pl-hero-dots" id="pl-dots">
|
|
<button class="pl-hero-dot active" data-slide="0"></button>
|
|
<button class="pl-hero-dot" data-slide="1"></button>
|
|
<button class="pl-hero-dot" data-slide="2"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Widget -->
|
|
<div class="pl-hero-widget">
|
|
<div class="pl-w">
|
|
<div class="pl-w-header">
|
|
<h2 class="pl-w-title">Make It <span style="color:var(--pl-coral)">Right</span></h2>
|
|
<div class="pl-w-badge">✓ 100% Zakat Eligible</div>
|
|
</div>
|
|
<div class="pl-w-body">
|
|
<div class="pl-w-amounts">
|
|
<button class="pl-w-amt" data-amount="150">£150<small>1 Child. 1 Year.</small></button>
|
|
<button class="pl-w-amt active" data-amount="300">£300<small>2 Children.</small></button>
|
|
<button class="pl-w-amt" data-amount="750">£750<small>5 Children.</small></button>
|
|
</div>
|
|
|
|
<div class="pl-w-custom">
|
|
<span class="pl-w-custom-curr">£</span>
|
|
<input type="number" id="pl-input" min="1" placeholder="Or enter a custom amount">
|
|
</div>
|
|
|
|
<div class="pl-w-sep"></div>
|
|
|
|
<div class="pl-w-toggles">
|
|
<div class="pl-w-toggle active" id="pl-zakat">
|
|
<div class="pl-w-toggle-info">
|
|
<span class="pl-w-toggle-label">100% Zakat Eligible</span>
|
|
<span class="pl-w-toggle-desc">Every pound goes directly to feeding children</span>
|
|
</div>
|
|
<div class="pl-w-switch"></div>
|
|
</div>
|
|
<div class="pl-w-toggle active" id="pl-admin">
|
|
<div class="pl-w-toggle-info">
|
|
<span class="pl-w-toggle-label">Cover admin costs (15%)</span>
|
|
<span class="pl-w-toggle-desc">So 100% feeds children</span>
|
|
</div>
|
|
<div class="pl-w-switch"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pl-w-total">
|
|
<span class="pl-w-total-label">Total</span>
|
|
<span class="pl-w-total-amount" id="pl-total">£345</span>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin:24px 0 20px;padding:0;background:none;border:none;">
|
|
<span style="font-family:Poppins,sans-serif;font-size:12px;font-weight:500;color:rgba(255,255,255,.35);letter-spacing:.3px;line-height:1;display:block;">Pillars community · fighting child hunger</span>
|
|
</div>
|
|
|
|
<button class="pl-w-go" id="pl-go">Give Zakat Now →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
SECTION 2: HIGH STAKES
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
|
|
<section class="pl-stakes">
|
|
<div class="pl-stakes-inner">
|
|
<div class="pl-stakes-text">
|
|
<h2>Zakat That Feeds.<br><em>Every Day.</em></h2>
|
|
<div class="pl-stakes-copy">
|
|
<p>Hunger is the reason they miss school.<br>
|
|
Not lack of ability.<br>
|
|
Not lack of ambition.<br>
|
|
<strong>Food.</strong></p>
|
|
<br>
|
|
<p>Your Zakat removes that barrier.</p>
|
|
</div>
|
|
|
|
<div class="pl-stakes-highlight">
|
|
<p>Daily school meals<br>
|
|
Full attendance<br>
|
|
A child who stays in school for one year</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pl-stakes-img">
|
|
<img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-hunger6-zakat.jpg" alt="Children at school" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
SECTION 3: CONFIDENCE
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
|
|
<section class="pl-confidence">
|
|
<div class="pl-confidence-inner">
|
|
<h2>100% Zakat.<br><em>No Deductions.</em></h2>
|
|
<p>Every pound of your Zakat goes directly to feeding children. No admin taken.</p>
|
|
|
|
<div class="pl-confidence-stats">
|
|
<div class="pl-confidence-stat">
|
|
<div class="num">100%</div>
|
|
<div class="label">Zakat policy</div>
|
|
</div>
|
|
<div class="pl-confidence-stat">
|
|
<div class="num">60M+</div>
|
|
<div class="label">Meals served</div>
|
|
</div>
|
|
<div class="pl-confidence-stat">
|
|
<div class="num">7</div>
|
|
<div class="label">Countries</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
|
|
SECTION 4: SCROLL STORY + CTA
|
|
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
|
|
<section class="pl-story" id="pl-story">
|
|
<div class="pl-story-pin">
|
|
<h2 class="pl-story-line" data-line="0">School meals.</h2>
|
|
<h2 class="pl-story-line" data-line="1">Every day.</h2>
|
|
<h2 class="pl-story-line" data-line="2">All year.</h2>
|
|
<h2 class="pl-story-line" data-line="3">Purify your wealth.<br><span style="color:var(--pl-coral)">Feed children.</span></h2>
|
|
|
|
<div class="pl-story-cta" id="pl-story-cta">
|
|
<a href="https://app.charityright.org.uk/donate/?amount=150&type=one-off&zakat=1&admin=1&ref=pillars" class="primary" >Give Zakat Now →</a>
|
|
</div>
|
|
|
|
<div class="pl-story-counter">
|
|
<div class="pl-story-counter-bar"><div class="pl-story-counter-fill" id="pl-story-fill"></div></div>
|
|
<div class="pl-story-counter-num"><span id="pl-story-cur">01</span> / 04</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
|
|
<script>
|
|
(function(){
|
|
'use strict';
|
|
|
|
/* â•â•â• HERO SLIDER â•â•â• */
|
|
var slides = document.querySelectorAll('.pl-hero-slide');
|
|
var dots = document.querySelectorAll('.pl-hero-dot');
|
|
var current = 0;
|
|
var timer;
|
|
|
|
function goTo(idx) {
|
|
if (idx === current) return;
|
|
slides[current].classList.remove('active');
|
|
dots[current].classList.remove('active');
|
|
void dots[idx].offsetWidth;
|
|
slides[idx].classList.add('active');
|
|
dots[idx].classList.add('active');
|
|
current = idx;
|
|
}
|
|
function next() { goTo((current + 1) % slides.length); }
|
|
function startTimer() { clearInterval(timer); timer = setInterval(next, 6000); }
|
|
dots.forEach(function(dot) {
|
|
dot.addEventListener('click', function() { goTo(+this.dataset.slide); startTimer(); });
|
|
});
|
|
startTimer();
|
|
|
|
/* â•â•â• WIDGET â•â•â• */
|
|
var amt = 300, zakat = true, admin = true;
|
|
function fmt(n) { return n % 1 === 0 ? n.toString() : n.toFixed(2); }
|
|
|
|
function updateTotal() {
|
|
var t = admin ? Math.round(amt * 1.15 * 100) / 100 : amt;
|
|
document.getElementById('pl-total').textContent = '\u00A3' + fmt(t);
|
|
}
|
|
|
|
document.querySelectorAll('.pl-w-amt').forEach(function(b) {
|
|
b.addEventListener('click', function() {
|
|
document.querySelectorAll('.pl-w-amt').forEach(function(x) { x.classList.remove('active'); });
|
|
this.classList.add('active');
|
|
amt = +this.dataset.amount;
|
|
document.getElementById('pl-input').value = '';
|
|
updateTotal();
|
|
});
|
|
});
|
|
|
|
document.getElementById('pl-input').addEventListener('input', function() {
|
|
if (this.value) {
|
|
document.querySelectorAll('.pl-w-amt').forEach(function(x) { x.classList.remove('active'); });
|
|
amt = +this.value;
|
|
updateTotal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('pl-zakat').addEventListener('click', function() {
|
|
zakat = !zakat; this.classList.toggle('active', zakat);
|
|
});
|
|
document.getElementById('pl-admin').addEventListener('click', function() {
|
|
admin = !admin; this.classList.toggle('active', admin); updateTotal();
|
|
});
|
|
|
|
document.getElementById('pl-go').addEventListener('click', function() {
|
|
window.location.href = 'https://app.charityright.org.uk/donate/?amount=' + (amt || 150) + '&type=one-off&zakat=' + (zakat ? '1' : '0') + '&admin=' + (admin ? '1' : '0') + '&ref=pillars';
|
|
});
|
|
updateTotal();
|
|
|
|
/* â•â•â• SCROLL STORY â•â•â• */
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
var section = document.getElementById('pl-story');
|
|
if (!section) return;
|
|
var storyLines = section.querySelectorAll('.pl-story-line');
|
|
var numLines = storyLines.length;
|
|
var storyPin = section.querySelector('.pl-story-pin');
|
|
var storyFill = document.getElementById('pl-story-fill');
|
|
var storyCur = document.getElementById('pl-story-cur');
|
|
var currentLine = -1;
|
|
|
|
ScrollTrigger.create({
|
|
trigger: storyPin,
|
|
start: 'top top',
|
|
end: '+=' + (numLines * 100) + '%',
|
|
pin: true,
|
|
scrub: 0.1,
|
|
onUpdate: function(self) {
|
|
var p = self.progress;
|
|
var idx = Math.min(Math.floor(p * numLines), numLines - 1);
|
|
storyFill.style.width = ((idx + 1) / numLines * 100) + '%';
|
|
storyCur.textContent = ('0' + (idx + 1)).slice(-2);
|
|
if (idx !== currentLine) {
|
|
if (currentLine >= 0 && currentLine < numLines) {
|
|
storyLines[currentLine].classList.remove('active');
|
|
storyLines[currentLine].classList.add('exit');
|
|
(function(old) { setTimeout(function() { storyLines[old].classList.remove('exit'); }, 600); })(currentLine);
|
|
}
|
|
storyLines[idx].classList.add('active');
|
|
currentLine = idx;
|
|
}
|
|
var ctaEl = document.getElementById('pl-story-cta');
|
|
if (idx === numLines - 1) ctaEl.classList.add('visible');
|
|
else ctaEl.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
/* â•â•â• FADE IN ON SCROLL â•â•â• */
|
|
var fadeEls = document.querySelectorAll('.pl-stakes-text, .pl-stakes-img, .pl-confidence-inner');
|
|
fadeEls.forEach(function(el) {
|
|
el.style.opacity = '0'; el.style.transform = 'translateY(40px)';
|
|
el.style.transition = 'opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)';
|
|
});
|
|
var obs = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(e) {
|
|
if (e.isIntersecting) { e.target.style.opacity = '1'; e.target.style.transform = 'translateY(0)'; obs.unobserve(e.target); }
|
|
});
|
|
}, { threshold: 0.15 });
|
|
fadeEls.forEach(function(el) { obs.observe(el); });
|
|
setTimeout(function() { fadeEls.forEach(function(el) { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }); }, 5000);
|
|
})();
|
|
</script>
|
|
|
|
|
|
<style>
|
|
/* === CR FOOTER === */
|
|
.cr-footer {
|
|
background: #000;
|
|
color: #fff;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.cr-footer { margin-top: 0 !important; }
|
|
.cr-footer *, .cr-footer *::before, .cr-footer *::after { box-sizing: border-box; }
|
|
.cr-footer a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
|
|
.cr-footer a:hover { color: #e42281; }
|
|
.cr-footer a:visited, .cr-footer a:link { color: rgba(255,255,255,0.65) !important; }
|
|
.cr-footer a:visited:hover, .cr-footer a:link:hover { color: #e42281 !important; }
|
|
.cr-footer-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px 0; }
|
|
.cr-footer-top {
|
|
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
|
gap: 48px; padding-bottom: 48px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
/* Brand */
|
|
.cr-footer-brand img { height: 38px; margin: 0 0 20px; display: block; }
|
|
.cr-footer-brand p {
|
|
font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.45);
|
|
margin: 0 0 28px; max-width: 320px; font-weight: 400;
|
|
}
|
|
.cr-footer-social { display: flex; gap: 12px; }
|
|
.cr-footer-social a {
|
|
display: flex; align-items: center; justify-content: center;
|
|
width: 38px; height: 38px; border-radius: 2px;
|
|
background: rgba(255,255,255,0.06); transition: all 0.25s;
|
|
}
|
|
.cr-footer-social a:hover { background: rgba(228,34,129,0.15); }
|
|
.cr-footer-social svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.55); }
|
|
.cr-footer-social a:hover svg { fill: #e42281; }
|
|
|
|
/* Columns */
|
|
.cr-footer-col h4 {
|
|
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: 2.5px; color: rgba(255,255,255,0.3); margin: 0 0 24px;
|
|
}
|
|
.cr-footer-col ul { list-style: none; padding: 0; margin: 0; }
|
|
.cr-footer-col li { margin: 0 0 14px; }
|
|
.cr-footer-col li:last-child { margin: 0; }
|
|
.cr-footer-col li a { font-size: 0.88rem; font-weight: 400; line-height: 1; }
|
|
|
|
/* CTA button */
|
|
.cr-footer-cta-btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: #e42281; color: #fff !important; padding: 12px 24px;
|
|
border-radius: 2px; font-size: 0.75rem; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 0.5px; margin-top: 24px;
|
|
transition: all 0.25s cubic-bezier(0.16,1,0.3,1); text-decoration: none !important;
|
|
}
|
|
.cr-footer-cta-btn:visited, .cr-footer-cta-btn:link { color: #fff !important; }
|
|
.cr-footer-cta-btn:hover { background: #c2185b; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(228,34,129,0.25); color: #fff !important; }
|
|
.cr-footer-cta-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
|
|
/* Bottom bar */
|
|
.cr-footer-bottom {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 28px 0;
|
|
}
|
|
.cr-footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.25); margin: 0; font-weight: 400; }
|
|
.cr-footer-bottom-links { display: flex; gap: 28px; }
|
|
.cr-footer-bottom-links a { font-size: 0.78rem; color: rgba(255,255,255,0.25); font-weight: 400; }
|
|
.cr-footer-bottom-links a:hover { color: rgba(255,255,255,0.5); }
|
|
.cr-footer-bottom-links a:visited, .cr-footer-bottom-links a:link { color: rgba(255,255,255,0.25) !important; }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 900px) {
|
|
.cr-footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
|
|
.cr-footer-inner { padding: 48px 24px 0; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.cr-footer-inner { padding: 40px 20px 0; }
|
|
.cr-footer-top { grid-template-columns: 1fr; gap: 32px; }
|
|
.cr-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
|
|
.cr-footer-bottom-links { justify-content: center; }
|
|
}
|
|
</style>
|
|
|
|
<footer class="cr-footer">
|
|
<div class="cr-footer-inner">
|
|
<div class="cr-footer-top">
|
|
<!-- Brand Column -->
|
|
<div class="cr-footer-brand">
|
|
<a href="https://www.charityright.org.uk/">
|
|
<img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-logo-tagline-white.svg" alt="Charity Right">
|
|
</a>
|
|
<p>Every child deserves a daily meal. We provide school meals to children in some of the world's most vulnerable communities.</p>
|
|
<div class="cr-footer-social">
|
|
<a href="https://www.youtube.com/c/CharityRightUK-official" target="_blank" rel="noopener" aria-label="YouTube">
|
|
<svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
|
|
</a>
|
|
<a href="https://instagram.com/charityrightuk/" target="_blank" rel="noopener" aria-label="Instagram">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"></path></svg>
|
|
</a>
|
|
<a href="https://www.facebook.com/charityrightuk" target="_blank" rel="noopener" aria-label="Facebook">
|
|
<svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg>
|
|
</a>
|
|
<a href="https://uk.linkedin.com/company/charity-right" target="_blank" rel="noopener" aria-label="LinkedIn">
|
|
<svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects Column -->
|
|
<div class="cr-footer-col">
|
|
<h4>Our Work</h4>
|
|
<ul>
|
|
<li><a href="https://www.charityright.org.uk/projects/">30 Nights of Giving</a></li>
|
|
<li><a href="https://app.charityright.org.uk/foodfridays/donate">Food Fridays</a></li>
|
|
<li><a href="https://www.charityright.org.uk/project/school-meals/">School Meals</a></li>
|
|
<li><a href="https://www.charityright.org.uk/project/health-hifz-happiness/">Hifz Programme</a></li>
|
|
<li><a href="https://www.charityright.org.uk/zakat">Give Zakat</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Company Column -->
|
|
<div class="cr-footer-col">
|
|
<h4>Charity</h4>
|
|
<ul>
|
|
<li><a href="https://www.charityright.org.uk/projects/">Our Projects</a></li>
|
|
<li><a href="https://www.charityright.org.uk/fundraising/">Fundraising</a></li>
|
|
<li><a href="https://www.charityright.org.uk/blog/">Blog</a></li>
|
|
<li><a href="https://www.charityright.org.uk/about-us/">About Us</a></li>
|
|
<li><a href="https://www.charityright.org.uk/privacy-policy/">Privacy Policy</a></li>
|
|
<li><a href="http://www.charityright.org.uk/wp-content/uploads/2024/09/charity_right_zakat_policy.pdf" target="_blank" data-cl="true">Our Zakat Policy</a></li>
|
|
<li><a href="https://www.charityright.org.uk/terms-and-conditions/">Terms and Conditions</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- CTA Column -->
|
|
<div class="cr-footer-col">
|
|
<h4>Take Action</h4>
|
|
<ul>
|
|
<li><a href="https://app.charityright.org.uk/donate/">Donate Now</a></li>
|
|
<li><a href="https://www.charityright.org.uk/fundraising">Start Fundraising</a></li>
|
|
<li><a href="https://www.charityright.org.uk/get-involved">Volunteer</a></li>
|
|
</ul>
|
|
<a href="https://app.charityright.org.uk/donate/" class="cr-footer-cta-btn">
|
|
Feed a Child
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Bar -->
|
|
<div class="cr-footer-bottom">
|
|
<p>© 2026 Charity Right · Registered Charity No. 1163944</p>
|
|
<div class="cr-footer-bottom-links">
|
|
<a href="https://www.charityright.org.uk/privacy-policy">Privacy</a>
|
|
<a href="https://www.charityright.org.uk/terms-and-conditions">Terms</a>
|
|
<a href="http://www.charityright.org.uk/wp-content/uploads/2024/09/charity_right_zakat_policy.pdf">Zakat Policy</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<!--BEGIN: TRACKING CODE MANAGER (v2.4.0) BY INTELLYWP.COM IN FOOTER//-->
|
|
<script>
|
|
(function(w, d, s, c, u) {
|
|
let f = d.body.getElementsByTagName(s)[0], j = d.createElement(s);
|
|
j.async = true;
|
|
j.src = u;
|
|
j.type = "text/javascript";
|
|
f.parentNode.insertBefore(j, f);
|
|
|
|
j.onload = function() {
|
|
if (w.n3o_attribution && typeof w.n3o_attribution.init === 'function') {
|
|
w.n3o_attribution.init(c);
|
|
}
|
|
}
|
|
})(window, document, 'script', null, 'https://unpkg.com/@n3oltd/link-builder/umd/n3o-attribution.js');
|
|
</script>
|
|
<!-- This site is converting visitors into subscribers and customers with OptinMonster - https://optinmonster.com -->
|
|
<script>(function(d,u,ac){var s=d.createElement('script');s.type='text/javascript';s.src='https://a.omappapi.com/app/js/api.min.js';s.async=true;s.dataset.user=u;s.dataset.account=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,360447,380926);</script>
|
|
<!-- / OptinMonster -->
|
|
<!--END: https://wordpress.org/plugins/tracking-code-manager IN FOOTER//--><script type="speculationrules">
|
|
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/vl-theme-cr\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
|
|
</script>
|
|
<script type="text/javascript" src="https://www.charityright.org.uk/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
|
|
<script type="text/javascript" src="https://www.charityright.org.uk/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
|
|
<script type="text/javascript" id="wp-i18n-js-after">
|
|
/* <![CDATA[ */
|
|
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
|
|
/* ]]> */
|
|
</script>
|
|
<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.0.5" id="swv-js"></script>
|
|
<script type="text/javascript" id="contact-form-7-js-before">
|
|
/* <![CDATA[ */
|
|
var wpcf7 = {
|
|
"api": {
|
|
"root": "https:\/\/www.charityright.org.uk\/wp-json\/",
|
|
"namespace": "contact-form-7\/v1"
|
|
}
|
|
};
|
|
/* ]]> */
|
|
</script>
|
|
<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.0.5" id="contact-form-7-js"></script>
|
|
<script type="text/javascript" id="app-js-extra">
|
|
/* <![CDATA[ */
|
|
var crAppParams = {"platform_base_url":"https:\/\/app.charityright.org.uk\/"};
|
|
/* ]]> */
|
|
</script>
|
|
<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/themes/vl-theme-cr/build/app.js?ver=2.0.15" id="app-js"></script>
|
|
<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/themes/vl-theme-cr/build/gute.js?ver=6.8.1&bust=20260218d" id="vl_new_acf_blocks-js"></script>
|
|
<script>
|
|
(function(){
|
|
var utmParams = ['utm_source','utm_medium','utm_campaign','utm_term','utm_content','utm_id'];
|
|
var stored = {};
|
|
|
|
// 1. Check URL for UTM params
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
var hasNew = false;
|
|
utmParams.forEach(function(p) {
|
|
var v = urlParams.get(p);
|
|
if (v) { stored[p] = v; hasNew = true; }
|
|
});
|
|
|
|
// 2. If new UTMs found, save to localStorage
|
|
if (hasNew) {
|
|
localStorage.setItem('cr_utm', JSON.stringify(stored));
|
|
localStorage.setItem('cr_utm_ts', Date.now());
|
|
} else {
|
|
// 3. Load from localStorage (expire after 30 days)
|
|
try {
|
|
var s = localStorage.getItem('cr_utm');
|
|
var ts = localStorage.getItem('cr_utm_ts');
|
|
if (s && ts && (Date.now() - ts) < 30*86400000) {
|
|
stored = JSON.parse(s);
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
|
|
// 4. Nothing stored? Exit
|
|
if (!Object.keys(stored).length) return;
|
|
|
|
// 5. Append UTMs to all links pointing to app.charityright.org.uk
|
|
function tagLinks() {
|
|
var links = document.querySelectorAll('a[href*="app.charityright.org.uk"]');
|
|
links.forEach(function(a) {
|
|
try {
|
|
var url = new URL(a.href);
|
|
var changed = false;
|
|
Object.keys(stored).forEach(function(k) {
|
|
if (!url.searchParams.has(k)) {
|
|
url.searchParams.set(k, stored[k]);
|
|
changed = true;
|
|
}
|
|
});
|
|
if (changed) a.href = url.toString();
|
|
} catch(e) {}
|
|
});
|
|
}
|
|
|
|
// Run on load and observe DOM changes
|
|
tagLinks();
|
|
var observer = new MutationObserver(function() { tagLinks(); });
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|