Omair Saleh
c18dc50657
SECTION REDESIGN: - Killed standalone dashboard image (fake AI laptop, added nothing) - New gap-px grid (signature pattern 2) with border-l-2 accents (pattern 1) - Numbered anchors (01-04) as visual rhythm per brand guide - Wider container: max-w-7xl matches hero width PERSONA CHANGES: - Renamed 'Organisation' -> 'Programme Manager' - Reorder: Charity Manager, Programme Manager, Personal Fundraiser, Volunteer - Updated /for/organisations page content to match PHOTOGRAPHY (4 new images via gemini-3-pro-image-preview): - persona-charity-manager.jpg — hijabi woman at mosque office desk - persona-programme-manager.jpg — man at desk with campaign calendar - persona-fundraiser.jpg — woman on London park bench with phone - persona-volunteer.jpg — young man handing card at charity gala - All optimized: 2.7MB -> 342KB (87% reduction via sharp) - Consistent documentary candid style, 3:2 landscape, warm tones FOOTER: - 'Organisations' -> 'Programme Managers' in nav links
298 lines
8.4 KiB
PHP
298 lines
8.4 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: Fidya Kaffarah
|
|
*/
|
|
get_header();
|
|
$site_url = get_site_url();
|
|
?>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
.fk, .fk * {
|
|
box-sizing: border-box;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
margin: 0; padding: 0;
|
|
}
|
|
.fk, .fk h1, .fk h2, .fk h3, .fk h4, .fk span, .fk div, .fk p, .fk li, .fk strong, .fk .fk-amount, .fk .fk-card-label { color: #fff !important; }
|
|
.fk {
|
|
padding: 76px 20px 80px !important;
|
|
background: #0a0a0a !important;
|
|
color: #fff;
|
|
min-height: 100vh; height: 100dvh; min-height: 100dvh;
|
|
}
|
|
.fk-inner {
|
|
max-width: 1200px;
|
|
padding: 0 24px;
|
|
margin: 0 auto;
|
|
}
|
|
.fk h1 {
|
|
color: #fff !important;
|
|
font-size: clamp(2rem, 5vw, 3.2rem);
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.fk h1 span { color: #e42281 !important; }
|
|
.fk .fk-sub {
|
|
font-size: 1.05rem;
|
|
color: #aaa !important;
|
|
font-weight: 300;
|
|
line-height: 1.6;
|
|
max-width: 600px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
/* Cards */
|
|
.fk-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
margin-bottom: 60px;
|
|
}
|
|
.fk-card {
|
|
background: #141414;
|
|
border: 1px solid #222;
|
|
padding: 40px 32px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s, background 0.3s;
|
|
}
|
|
.fk-card:hover {
|
|
border-color: #e42281 !important;
|
|
background: #1a1a1a;
|
|
}
|
|
.fk-card-label {
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
color: #e42281 !important;
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
}
|
|
.fk-card h2 {
|
|
color: #fff !important;
|
|
font-size: 1.6rem;
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.fk-card p {
|
|
font-size: 0.92rem;
|
|
color: #999 !important;
|
|
line-height: 1.65;
|
|
margin-bottom: 24px;
|
|
font-weight: 300;
|
|
}
|
|
.fk-card .fk-amount {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 8px;
|
|
}
|
|
.fk-card .fk-amount span {
|
|
color: #e42281 !important;
|
|
font-size: 1.4rem;
|
|
}
|
|
.fk-card .fk-calc {
|
|
font-size: 0.82rem;
|
|
color: #666 !important;
|
|
margin-bottom: 28px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.fk-btn {
|
|
display: inline-block;
|
|
background: #e42281;
|
|
color: #fff !important;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
padding: 14px 32px;
|
|
text-decoration: none !important;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
border-radius: 2px;
|
|
transition: background 0.2s, transform 0.2s;
|
|
}
|
|
.fk-btn:hover {
|
|
background: #c2185b;
|
|
transform: translateY(-1px);
|
|
}
|
|
.fk-btn:visited { color: #fff !important; }
|
|
|
|
/* Who is this for sections */
|
|
.fk-who {
|
|
margin-top: 20px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid #222;
|
|
}
|
|
.fk-who-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: #555 !important;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
}
|
|
.fk-who ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.fk-who li {
|
|
font-size: 0.85rem;
|
|
color: #bbb !important;
|
|
line-height: 1.5;
|
|
padding: 6px 0 6px 20px;
|
|
position: relative;
|
|
font-weight: 400;
|
|
}
|
|
.fk-who li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #e42281;
|
|
}
|
|
|
|
/* Bottom quote */
|
|
.fk-quote {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
border-top: 1px solid #1a1a1a;
|
|
}
|
|
.fk-quote p {
|
|
font-size: 0.95rem;
|
|
color: #777 !important;
|
|
font-style: italic;
|
|
line-height: 1.7;
|
|
font-weight: 300;
|
|
}
|
|
.fk-quote .fk-attr {
|
|
font-size: 0.8rem;
|
|
color: #555 !important;
|
|
font-style: normal;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Back link */
|
|
|
|
/* Not sure section */
|
|
.fk-unsure {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
padding: 32px;
|
|
background: #141414;
|
|
border: 1px solid #222;
|
|
}
|
|
.fk-unsure h3 {
|
|
color: #fff !important;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
color: #fff;
|
|
}
|
|
.fk-unsure p {
|
|
font-size: 0.92rem;
|
|
color: #999 !important;
|
|
line-height: 1.6;
|
|
margin-bottom: 12px;
|
|
font-weight: 300;
|
|
}
|
|
.fk-unsure p:last-child { margin-bottom: 0; }
|
|
.fk-unsure strong {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.fk-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.fk, .fk h1, .fk h2, .fk h3, .fk h4, .fk span, .fk div, .fk p, .fk li, .fk strong, .fk .fk-amount, .fk .fk-card-label { color: #fff !important; }
|
|
.fk {
|
|
padding: 76px 20px 80px !important; padding: 40px 16px 60px; }
|
|
.fk-card { padding: 32px 24px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="fk">
|
|
<div class="fk-inner">
|
|
|
|
|
|
<h1>Missed Fasts?<br><span>Make it Right.</span></h1>
|
|
<p class="fk-sub">If you are unable to fast during Ramadan, or have broken a fast without a valid reason, Islam provides a way to fulfil your obligation. Choose the option that applies to you.</p>
|
|
|
|
<div class="fk-cards">
|
|
|
|
<!-- FIDYA -->
|
|
<div class="fk-card">
|
|
<span class="fk-card-label">Fidya</span>
|
|
<h2>I am unable to fast<br>and cannot make it up.</h2>
|
|
<p>Fidya is a <strong style="color:#fff;font-weight:600;">compensation</strong> for those who cannot fast during Ramadan due to a long-term illness, old age, or a condition that is not expected to improve. For each day of fasting missed, you are required to feed one person in need.</p>
|
|
|
|
<div class="fk-amount"><span>£5</span> per missed fast</div>
|
|
<div class="fk-calc">Feeds one person for each day you are unable to fast</div>
|
|
|
|
<a href="https://app.charityright.org.uk/donate/?v=2&project=18" class="fk-btn">Pay Fidya</a>
|
|
|
|
<div class="fk-who">
|
|
<span class="fk-who-label">This applies if you</span>
|
|
<ul>
|
|
<li>Have a long-term or chronic illness with no expectation of recovery</li>
|
|
<li>Are elderly and physically unable to fast</li>
|
|
<li>Have a medical condition requiring daily medication that prevents fasting</li>
|
|
<li>Have been advised by a doctor that fasting would be harmful to your health</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KAFFARAH -->
|
|
<div class="fk-card">
|
|
<span class="fk-card-label">Kaffarah</span>
|
|
<h2>I deliberately broke<br>my fast without reason.</h2>
|
|
<p>Kaffarah is an <strong style="color:#fff;font-weight:600;">expiation</strong> required when a person deliberately breaks their Ramadan fast without a valid Islamic reason. The obligation is to fast for 60 consecutive days. If you are genuinely unable to do so, you must feed 60 people in need for each fast broken.</p>
|
|
|
|
<div class="fk-amount"><span>£300</span> per broken fast</div>
|
|
<div class="fk-calc">Equivalent to feeding 60 people in need</div>
|
|
|
|
<a href="https://app.charityright.org.uk/donate/?v=2&project=28" class="fk-btn">Pay Kaffarah</a>
|
|
|
|
<div class="fk-who">
|
|
<span class="fk-who-label">This applies if you</span>
|
|
<ul>
|
|
<li>Deliberately ate or drank during fasting hours without a valid reason</li>
|
|
<li>Intentionally broke your fast in a way that invalidates it</li>
|
|
<li>Are unable to fast for 60 consecutive days as the primary expiation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="fk-unsure">
|
|
<h3>Can you make up your fasts?</h3>
|
|
<p>If you missed fasts due to a <strong>temporary</strong> illness, travel, menstruation, or pregnancy, you are expected to make up the missed days before the next Ramadan. In this case, neither Fidya nor Kaffarah is required.</p>
|
|
<p>Fidya applies only when you are <strong>permanently unable</strong> to fast. Kaffarah applies only when you <strong>deliberately</strong> broke a fast without a valid reason. If you are unsure, consult a scholar.</p>
|
|
</div>
|
|
|
|
<div class="fk-quote">
|
|
<p>“And upon those who are able [to fast, but with hardship] — a ransom of feeding a poor person.”</p>
|
|
<p class="fk-attr">— Qur’an, Surah Al-Baqarah (2:184)</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<?php get_footer(); ?>
|