- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 462 of themes/gavias_kunco/gva_content_builder/gva_column.php).
element_gva_column->render_content(Array, '
:root {
--brand-primary: #6d2435;
--brand-secondary: #b2946b;
--brand-green: #617f67;
--brand-beige: #f2d7b4;
--brand-light: #f9fafb;
--brand-dark: #282828;
--glass-bg: rgba(255, 255, 255, 0.95);
}
.alzakat .zakat-reveal {
opacity: 1;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === Page Base === */
.kaffarah-page {
font-family: 'IBM Plex Sans Arabic', sans-serif;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #2d3436;
min-height: 100vh;
}
/* === Hero Section === */
.kaffarah-hero {
position: relative;
height: 450px;
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.kaffarah-hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transform: scale(1.1);
transition: transform 10s ease-out;
}
.kaffarah-hero:hover .kaffarah-hero-img {
transform: scale(1);
}
.kaffarah-hero-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 0 1rem;
}
.kaffarah-hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
background: rgba(178, 148, 107, 0.2);
border: 1px solid rgba(178, 148, 107, 0.4);
color: #b2946b;
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.kaffarah-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kaffarah-subtitle {
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* === Logo === */
.page-logo {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.page-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* === Main Container === */
.main-container {
margin-top: -5rem;
margin-bottom: 5rem;
position: relative;
z-index: 20;
}
/* === Glass Card === */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
margin-bottom: 2rem;
text-align: center;
}
/* === Type Selector === */
.type-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.type-btn {
background: #f9fafb;
border: 2px solid transparent;
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.type-btn:hover {
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.type-btn.active {
border-color: #b2946b;
background: #fff;
color: #6d2435;
box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);
}
.type-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
color: #b2bec3;
transition: color 0.3s ease;
}
.type-btn.active .type-icon {
color: #b2946b;
}
.type-label {
font-weight: bold;
font-size: 0.95rem;
}
.type-desc {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.25rem;
}
/* === Input Container === */
.input-container {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-form {
animation: fadeIn 0.5s ease-out;
}
.input-header {
text-align: center;
margin-bottom: 1.5rem;
}
.input-title {
font-size: 1.25rem;
font-weight: bold;
color: #1f2937;
}
.input-subtitle {
color: #6b7280;
margin-top: 0.5rem;
}
/* === Input Group === */
.input-group {
background: white;
border-radius: 1.25rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f2f6;
margin-bottom: 1.5rem;
}
.input-label {
display: block;
font-weight: bold;
color: #6d2435;
margin-bottom: 1rem;
text-align: center;
}
/* === Custom Number Input === */
.custom-number-input {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
padding: 0.5rem;
max-width: 200px;
margin: 1.5rem auto 0;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 0.625rem;
background: white;
color: #6d2435;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.qty-btn:hover {
transform: scale(1.1);
background: #6d2435;
color: white;
}
.qty-input {
width: 60px;
text-align: center;
background: transparent;
font-weight: 800;
font-size: 1.5rem;
color: #6d2435;
border: none;
outline: none;
}
/* === Custom Amount Input === */
.custom-amount-input {
max-width: 300px;
margin: 0 auto;
}
.amount-input-wrapper {
position: relative;
background: #f8fafc;
border-radius: 0.75rem;
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
}
.amount-input-wrapper:focus-within {
border-color: #6d2435;
box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);
}
.amount-input {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 1rem 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
}
.amount-currency {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
font-weight: bold;
}
/* === Info Text === */
.info-text {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
margin-top: 1rem;
}
.info-icon {
margin-right: 0.25rem;
}
/* === Summary Box === */
.summary-box {
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
color: white;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.summary-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
}
.summary-label {
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.total-amount {
font-size: 3.5rem;
font-weight: 900;
margin: 1rem 0;
line-height: 1;
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.summary-details {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0.5rem 0;
}
.summary-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* === Donate Button === */
.donate-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
font-weight: 800;
padding: 1.25rem;
border-radius: 1rem;
width: 100%;
font-size: 1.1rem;
transition: all 0.3s ease;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.donate-btn:active {
transform: translateY(-1px);
}
.donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.donate-btn:hover::before {
left: 100%;
}
.donate-text {
font-size: 1rem;
font-weight: bold;
}
.donate-icon {
font-size: 1.5rem;
}
/* === Animations === */
.floating {
animation: float 6s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* === Hidden Utility === */
.hidden {
display: none !important;
}
/* === Grid Layout === */
.main-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 8fr 4fr;
}
}
/* === Responsive === */
@media (max-width: 768px) {
.kaffarah-hero {
height: 350px;
}
.kaffarah-title {
font-size: 2rem;
}
.kaffarah-subtitle {
font-size: 1rem;
}
.main-container {
margin-top: -3rem;
}
.type-selector {
grid-template-columns: repeat(2, 1fr);
}
.total-amount {
font-size: 2.5rem;
}
.page-logo {
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 480px) {
.type-selector {
grid-template-columns: 1fr;
}
.kaffarah-hero {
height: 300px;
}
.kaffarah-title {
font-size: 1.75rem;
}
.donate-text {
font-size: 0.9rem;
}
}
Purification for the soul and mending of hearts
Expiation and Vows
Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
:root {
--brand-primary: #6d2435;
--brand-secondary: #b2946b;
--brand-green: #617f67;
--brand-beige: #f2d7b4;
--brand-light: #f9fafb;
--brand-dark: #282828;
--glass-bg: rgba(255, 255, 255, 0.95);
}
.alzakat .zakat-reveal {
opacity: 1;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === Page Base === */
.kaffarah-page {
font-family: 'IBM Plex Sans Arabic', sans-serif;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #2d3436;
min-height: 100vh;
}
/* === Hero Section === */
.kaffarah-hero {
position: relative;
height: 450px;
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.kaffarah-hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transform: scale(1.1);
transition: transform 10s ease-out;
}
.kaffarah-hero:hover .kaffarah-hero-img {
transform: scale(1);
}
.kaffarah-hero-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 0 1rem;
}
.kaffarah-hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
background: rgba(178, 148, 107, 0.2);
border: 1px solid rgba(178, 148, 107, 0.4);
color: #b2946b;
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.kaffarah-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kaffarah-subtitle {
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* === Logo === */
.page-logo {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.page-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* === Main Container === */
.main-container {
margin-top: -5rem;
margin-bottom: 5rem;
position: relative;
z-index: 20;
}
/* === Glass Card === */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
margin-bottom: 2rem;
text-align: center;
}
/* === Type Selector === */
.type-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.type-btn {
background: #f9fafb;
border: 2px solid transparent;
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.type-btn:hover {
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.type-btn.active {
border-color: #b2946b;
background: #fff;
color: #6d2435;
box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);
}
.type-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
color: #b2bec3;
transition: color 0.3s ease;
}
.type-btn.active .type-icon {
color: #b2946b;
}
.type-label {
font-weight: bold;
font-size: 0.95rem;
}
.type-desc {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.25rem;
}
/* === Input Container === */
.input-container {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-form {
animation: fadeIn 0.5s ease-out;
}
.input-header {
text-align: center;
margin-bottom: 1.5rem;
}
.input-title {
font-size: 1.25rem;
font-weight: bold;
color: #1f2937;
}
.input-subtitle {
color: #6b7280;
margin-top: 0.5rem;
}
/* === Input Group === */
.input-group {
background: white;
border-radius: 1.25rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f2f6;
margin-bottom: 1.5rem;
}
.input-label {
display: block;
font-weight: bold;
color: #6d2435;
margin-bottom: 1rem;
text-align: center;
}
/* === Custom Number Input === */
.custom-number-input {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
padding: 0.5rem;
max-width: 200px;
margin: 1.5rem auto 0;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 0.625rem;
background: white;
color: #6d2435;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.qty-btn:hover {
transform: scale(1.1);
background: #6d2435;
color: white;
}
.qty-input {
width: 60px;
text-align: center;
background: transparent;
font-weight: 800;
font-size: 1.5rem;
color: #6d2435;
border: none;
outline: none;
}
/* === Custom Amount Input === */
.custom-amount-input {
max-width: 300px;
margin: 0 auto;
}
.amount-input-wrapper {
position: relative;
background: #f8fafc;
border-radius: 0.75rem;
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
}
.amount-input-wrapper:focus-within {
border-color: #6d2435;
box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);
}
.amount-input {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 1rem 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
}
.amount-currency {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
font-weight: bold;
}
/* === Info Text === */
.info-text {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
margin-top: 1rem;
}
.info-icon {
margin-right: 0.25rem;
}
/* === Summary Box === */
.summary-box {
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
color: white;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.summary-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
}
.summary-label {
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.total-amount {
font-size: 3.5rem;
font-weight: 900;
margin: 1rem 0;
line-height: 1;
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.summary-details {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0.5rem 0;
}
.summary-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* === Donate Button === */
.donate-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
font-weight: 800;
padding: 1.25rem;
border-radius: 1rem;
width: 100%;
font-size: 1.1rem;
transition: all 0.3s ease;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.donate-btn:active {
transform: translateY(-1px);
}
.donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.donate-btn:hover::before {
left: 100%;
}
.donate-text {
font-size: 1rem;
font-weight: bold;
}
.donate-icon {
font-size: 1.5rem;
}
/* === Animations === */
.floating {
animation: float 6s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* === Hidden Utility === */
.hidden {
display: none !important;
}
/* === Grid Layout === */
.main-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 8fr 4fr;
}
}
/* === Responsive === */
@media (max-width: 768px) {
.kaffarah-hero {
height: 350px;
}
.kaffarah-title {
font-size: 2rem;
}
.kaffarah-subtitle {
font-size: 1rem;
}
.main-container {
margin-top: -3rem;
}
.type-selector {
grid-template-columns: repeat(2, 1fr);
}
.total-amount {
font-size: 2.5rem;
}
.page-logo {
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 480px) {
.type-selector {
grid-template-columns: 1fr;
}
.kaffarah-hero {
height: 300px;
}
.kaffarah-title {
font-size: 1.75rem;
}
.donate-text {
font-size: 0.9rem;
}
}
Purification for the soul and mending of hearts
Expiation and Vows
Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 463 of themes/gavias_kunco/gva_content_builder/gva_column.php).
element_gva_column->render_content(Array, '
:root {
--brand-primary: #6d2435;
--brand-secondary: #b2946b;
--brand-green: #617f67;
--brand-beige: #f2d7b4;
--brand-light: #f9fafb;
--brand-dark: #282828;
--glass-bg: rgba(255, 255, 255, 0.95);
}
.alzakat .zakat-reveal {
opacity: 1;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === Page Base === */
.kaffarah-page {
font-family: 'IBM Plex Sans Arabic', sans-serif;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #2d3436;
min-height: 100vh;
}
/* === Hero Section === */
.kaffarah-hero {
position: relative;
height: 450px;
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.kaffarah-hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transform: scale(1.1);
transition: transform 10s ease-out;
}
.kaffarah-hero:hover .kaffarah-hero-img {
transform: scale(1);
}
.kaffarah-hero-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 0 1rem;
}
.kaffarah-hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
background: rgba(178, 148, 107, 0.2);
border: 1px solid rgba(178, 148, 107, 0.4);
color: #b2946b;
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.kaffarah-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kaffarah-subtitle {
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* === Logo === */
.page-logo {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.page-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* === Main Container === */
.main-container {
margin-top: -5rem;
margin-bottom: 5rem;
position: relative;
z-index: 20;
}
/* === Glass Card === */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
margin-bottom: 2rem;
text-align: center;
}
/* === Type Selector === */
.type-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.type-btn {
background: #f9fafb;
border: 2px solid transparent;
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.type-btn:hover {
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.type-btn.active {
border-color: #b2946b;
background: #fff;
color: #6d2435;
box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);
}
.type-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
color: #b2bec3;
transition: color 0.3s ease;
}
.type-btn.active .type-icon {
color: #b2946b;
}
.type-label {
font-weight: bold;
font-size: 0.95rem;
}
.type-desc {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.25rem;
}
/* === Input Container === */
.input-container {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-form {
animation: fadeIn 0.5s ease-out;
}
.input-header {
text-align: center;
margin-bottom: 1.5rem;
}
.input-title {
font-size: 1.25rem;
font-weight: bold;
color: #1f2937;
}
.input-subtitle {
color: #6b7280;
margin-top: 0.5rem;
}
/* === Input Group === */
.input-group {
background: white;
border-radius: 1.25rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f2f6;
margin-bottom: 1.5rem;
}
.input-label {
display: block;
font-weight: bold;
color: #6d2435;
margin-bottom: 1rem;
text-align: center;
}
/* === Custom Number Input === */
.custom-number-input {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
padding: 0.5rem;
max-width: 200px;
margin: 1.5rem auto 0;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 0.625rem;
background: white;
color: #6d2435;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.qty-btn:hover {
transform: scale(1.1);
background: #6d2435;
color: white;
}
.qty-input {
width: 60px;
text-align: center;
background: transparent;
font-weight: 800;
font-size: 1.5rem;
color: #6d2435;
border: none;
outline: none;
}
/* === Custom Amount Input === */
.custom-amount-input {
max-width: 300px;
margin: 0 auto;
}
.amount-input-wrapper {
position: relative;
background: #f8fafc;
border-radius: 0.75rem;
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
}
.amount-input-wrapper:focus-within {
border-color: #6d2435;
box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);
}
.amount-input {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 1rem 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
}
.amount-currency {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
font-weight: bold;
}
/* === Info Text === */
.info-text {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
margin-top: 1rem;
}
.info-icon {
margin-right: 0.25rem;
}
/* === Summary Box === */
.summary-box {
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
color: white;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.summary-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
}
.summary-label {
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.total-amount {
font-size: 3.5rem;
font-weight: 900;
margin: 1rem 0;
line-height: 1;
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.summary-details {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0.5rem 0;
}
.summary-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* === Donate Button === */
.donate-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
font-weight: 800;
padding: 1.25rem;
border-radius: 1rem;
width: 100%;
font-size: 1.1rem;
transition: all 0.3s ease;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.donate-btn:active {
transform: translateY(-1px);
}
.donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.donate-btn:hover::before {
left: 100%;
}
.donate-text {
font-size: 1rem;
font-weight: bold;
}
.donate-icon {
font-size: 1.5rem;
}
/* === Animations === */
.floating {
animation: float 6s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* === Hidden Utility === */
.hidden {
display: none !important;
}
/* === Grid Layout === */
.main-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 8fr 4fr;
}
}
/* === Responsive === */
@media (max-width: 768px) {
.kaffarah-hero {
height: 350px;
}
.kaffarah-title {
font-size: 2rem;
}
.kaffarah-subtitle {
font-size: 1rem;
}
.main-container {
margin-top: -3rem;
}
.type-selector {
grid-template-columns: repeat(2, 1fr);
}
.total-amount {
font-size: 2.5rem;
}
.page-logo {
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 480px) {
.type-selector {
grid-template-columns: 1fr;
}
.kaffarah-hero {
height: 300px;
}
.kaffarah-title {
font-size: 1.75rem;
}
.donate-text {
font-size: 0.9rem;
}
}
Purification for the soul and mending of hearts
Expiation and Vows
Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
:root {
--brand-primary: #6d2435;
--brand-secondary: #b2946b;
--brand-green: #617f67;
--brand-beige: #f2d7b4;
--brand-light: #f9fafb;
--brand-dark: #282828;
--glass-bg: rgba(255, 255, 255, 0.95);
}
.alzakat .zakat-reveal {
opacity: 1;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === Page Base === */
.kaffarah-page {
font-family: 'IBM Plex Sans Arabic', sans-serif;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #2d3436;
min-height: 100vh;
}
/* === Hero Section === */
.kaffarah-hero {
position: relative;
height: 450px;
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.kaffarah-hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transform: scale(1.1);
transition: transform 10s ease-out;
}
.kaffarah-hero:hover .kaffarah-hero-img {
transform: scale(1);
}
.kaffarah-hero-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 0 1rem;
}
.kaffarah-hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
background: rgba(178, 148, 107, 0.2);
border: 1px solid rgba(178, 148, 107, 0.4);
color: #b2946b;
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.kaffarah-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kaffarah-subtitle {
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* === Logo === */
.page-logo {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.page-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* === Main Container === */
.main-container {
margin-top: -5rem;
margin-bottom: 5rem;
position: relative;
z-index: 20;
}
/* === Glass Card === */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
margin-bottom: 2rem;
text-align: center;
}
/* === Type Selector === */
.type-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.type-btn {
background: #f9fafb;
border: 2px solid transparent;
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.type-btn:hover {
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.type-btn.active {
border-color: #b2946b;
background: #fff;
color: #6d2435;
box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);
}
.type-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
color: #b2bec3;
transition: color 0.3s ease;
}
.type-btn.active .type-icon {
color: #b2946b;
}
.type-label {
font-weight: bold;
font-size: 0.95rem;
}
.type-desc {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.25rem;
}
/* === Input Container === */
.input-container {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-form {
animation: fadeIn 0.5s ease-out;
}
.input-header {
text-align: center;
margin-bottom: 1.5rem;
}
.input-title {
font-size: 1.25rem;
font-weight: bold;
color: #1f2937;
}
.input-subtitle {
color: #6b7280;
margin-top: 0.5rem;
}
/* === Input Group === */
.input-group {
background: white;
border-radius: 1.25rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f2f6;
margin-bottom: 1.5rem;
}
.input-label {
display: block;
font-weight: bold;
color: #6d2435;
margin-bottom: 1rem;
text-align: center;
}
/* === Custom Number Input === */
.custom-number-input {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
padding: 0.5rem;
max-width: 200px;
margin: 1.5rem auto 0;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 0.625rem;
background: white;
color: #6d2435;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.qty-btn:hover {
transform: scale(1.1);
background: #6d2435;
color: white;
}
.qty-input {
width: 60px;
text-align: center;
background: transparent;
font-weight: 800;
font-size: 1.5rem;
color: #6d2435;
border: none;
outline: none;
}
/* === Custom Amount Input === */
.custom-amount-input {
max-width: 300px;
margin: 0 auto;
}
.amount-input-wrapper {
position: relative;
background: #f8fafc;
border-radius: 0.75rem;
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
}
.amount-input-wrapper:focus-within {
border-color: #6d2435;
box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);
}
.amount-input {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 1rem 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
}
.amount-currency {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
font-weight: bold;
}
/* === Info Text === */
.info-text {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
margin-top: 1rem;
}
.info-icon {
margin-right: 0.25rem;
}
/* === Summary Box === */
.summary-box {
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
color: white;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.summary-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
}
.summary-label {
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.total-amount {
font-size: 3.5rem;
font-weight: 900;
margin: 1rem 0;
line-height: 1;
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.summary-details {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0.5rem 0;
}
.summary-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* === Donate Button === */
.donate-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
font-weight: 800;
padding: 1.25rem;
border-radius: 1rem;
width: 100%;
font-size: 1.1rem;
transition: all 0.3s ease;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.donate-btn:active {
transform: translateY(-1px);
}
.donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.donate-btn:hover::before {
left: 100%;
}
.donate-text {
font-size: 1rem;
font-weight: bold;
}
.donate-icon {
font-size: 1.5rem;
}
/* === Animations === */
.floating {
animation: float 6s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* === Hidden Utility === */
.hidden {
display: none !important;
}
/* === Grid Layout === */
.main-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 8fr 4fr;
}
}
/* === Responsive === */
@media (max-width: 768px) {
.kaffarah-hero {
height: 350px;
}
.kaffarah-title {
font-size: 2rem;
}
.kaffarah-subtitle {
font-size: 1rem;
}
.main-container {
margin-top: -3rem;
}
.type-selector {
grid-template-columns: repeat(2, 1fr);
}
.total-amount {
font-size: 2.5rem;
}
.page-logo {
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 480px) {
.type-selector {
grid-template-columns: 1fr;
}
.kaffarah-hero {
height: 300px;
}
.kaffarah-title {
font-size: 1.75rem;
}
.donate-text {
font-size: 0.9rem;
}
}
Purification for the soul and mending of hearts
Expiation and Vows
Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 462 of themes/gavias_kunco/gva_content_builder/gva_column.php).
element_gva_column->render_content(Array, '
Select Expiation Type
Expiation for Oath
Feeding 10 needy people
Fidya (Fasting Redemption)
For inability or illness
Expiation for Breaking Fast
For deliberate breaking
General Vows
Amount you specify
Expiation for Oath
For each oath you have broken, feed ten needy people
Number of oaths you wish to expiate
Cost of feeding one needy person: $5 (total $50 per oath)
Fidya (Fasting Redemption)
For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding
Number of days
Cost of feeding one needy person per day: $5
Major Expiation for Breaking Fast
For someone who deliberately breaks the fast in Ramadan through intercourse or similar
Number of days the fast was broken
Expiation: Feed 60 needy people per day ($300)
General Vows
Fulfilling a vow is an act of worship and a means of drawing closer to Allah
Value of the vow
$
Total Expiation Amount
$50
Expiation for Oath (1)
1 × $50
This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.
Contact us via WhatsApp for consultation and donation
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
Select Expiation Type
Expiation for Oath
Feeding 10 needy people
Fidya (Fasting Redemption)
For inability or illness
Expiation for Breaking Fast
For deliberate breaking
General Vows
Amount you specify
Expiation for Oath
For each oath you have broken, feed ten needy people
Number of oaths you wish to expiate
Cost of feeding one needy person: $5 (total $50 per oath)
Fidya (Fasting Redemption)
For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding
Number of days
Cost of feeding one needy person per day: $5
Major Expiation for Breaking Fast
For someone who deliberately breaks the fast in Ramadan through intercourse or similar
Number of days the fast was broken
Expiation: Feed 60 needy people per day ($300)
General Vows
Fulfilling a vow is an act of worship and a means of drawing closer to Allah
Value of the vow
$
Total Expiation Amount
$50
Expiation for Oath (1)
1 × $50
This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.
Contact us via WhatsApp for consultation and donation
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 463 of themes/gavias_kunco/gva_content_builder/gva_column.php).
element_gva_column->render_content(Array, '
Select Expiation Type
Expiation for Oath
Feeding 10 needy people
Fidya (Fasting Redemption)
For inability or illness
Expiation for Breaking Fast
For deliberate breaking
General Vows
Amount you specify
Expiation for Oath
For each oath you have broken, feed ten needy people
Number of oaths you wish to expiate
Cost of feeding one needy person: $5 (total $50 per oath)
Fidya (Fasting Redemption)
For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding
Number of days
Cost of feeding one needy person per day: $5
Major Expiation for Breaking Fast
For someone who deliberately breaks the fast in Ramadan through intercourse or similar
Number of days the fast was broken
Expiation: Feed 60 needy people per day ($300)
General Vows
Fulfilling a vow is an act of worship and a means of drawing closer to Allah
Value of the vow
$
Total Expiation Amount
$50
Expiation for Oath (1)
1 × $50
This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.
Contact us via WhatsApp for consultation and donation
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
Select Expiation Type
Expiation for Oath
Feeding 10 needy people
Fidya (Fasting Redemption)
For inability or illness
Expiation for Breaking Fast
For deliberate breaking
General Vows
Amount you specify
Expiation for Oath
For each oath you have broken, feed ten needy people
Number of oaths you wish to expiate
Cost of feeding one needy person: $5 (total $50 per oath)
Fidya (Fasting Redemption)
For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding
Number of days
Cost of feeding one needy person per day: $5
Major Expiation for Breaking Fast
For someone who deliberately breaks the fast in Ramadan through intercourse or similar
Number of days the fast was broken
Expiation: Feed 60 needy people per day ($300)
General Vows
Fulfilling a vow is an act of worship and a means of drawing closer to Allah
Value of the vow
$
Total Expiation Amount
$50
Expiation for Oath (1)
1 × $50
This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.
Contact us via WhatsApp for consultation and donation
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 462 of themes/gavias_kunco/gva_content_builder/gva_column.php).
element_gva_column->render_content(Array, '
// Config
const COST_PER_MEAL = 5; // $5 per meal
const COSTS = {
yameen: 10 * COST_PER_MEAL, // 10 meals = $50
fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5
sawm: 60 * COST_PER_MEAL // 60 meals = $300
};
let currentType = 'yameen';
// Initialize the page
function initPage() {
selectType('yameen');
attachEventListeners();
}
// Select type function
function selectType(type) {
currentType = type;
// Update UI Toggle
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${type}`).classList.add('active');
// Toggle Input Forms
document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));
const inputForm = document.getElementById(`input-${type}`);
inputForm.classList.remove('hidden');
inputForm.classList.add('fade-in');
calculate();
}
// Adjust quantity function
function adjustQty(delta) {
const input = document.getElementById(`qty-${currentType}`);
let val = parseInt(input.value) || 0;
val = Math.max(1, val + delta);
input.value = val;
calculate();
}
// Calculate total function
function calculate() {
let total = 0;
let summaryText = '';
let calcText = '';
if (currentType === 'nazr') {
total = parseFloat(document.getElementById('amount-nazr').value) || 0;
summaryText = 'Monetary vow';
calcText = `${total.toLocaleString()} $`;
} else {
const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;
const unitCost = COSTS[currentType];
total = qty * unitCost;
// Labels mapping
const labels = {
yameen: 'Expiation for Oath',
fidya: 'Fidya (Fasting Redemption)',
sawm: 'Major Expiation for Breaking Fast'
};
summaryText = `${labels[currentType]} (quantity ${qty})`;
calcText = `${qty} × ${unitCost}$`;
}
// Update UI
updateDisplay(total, summaryText, calcText);
}
// Update display function
function updateDisplay(total, summaryText, calcText) {
document.getElementById('total-display').textContent = total.toLocaleString() + ' $';
document.getElementById('summary-label').textContent = summaryText;
document.getElementById('summary-calc').textContent = calcText;
}
// Donate function
function donate() {
const amount = document.getElementById('total-display').textContent;
const summary = document.getElementById('summary-label').textContent;
const calc = document.getElementById('summary-calc').textContent;
if (parseFloat(amount) === 0) {
alert('Please specify a valid expiation amount');
return;
}
const message = `Peace be upon you, I wish to pay expiation:
${summary}
Details: ${calc}
Total amount: ${amount}
Can you provide me with the payment link or bank account?`;
const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
// Attach event listeners
function attachEventListeners() {
// Add input event listeners for all quantity inputs
['yameen', 'fidya', 'sawm'].forEach(type => {
const input = document.getElementById(`qty-${type}`);
if (input) {
input.addEventListener('input', calculate);
}
});
// Add input event listener for nazr amount
const nazrInput = document.getElementById('amount-nazr');
if (nazrInput) {
nazrInput.addEventListener('input', calculate);
}
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === '+') {
e.preventDefault();
adjustQty(1);
} else if (e.key === 'ArrowDown' || e.key === '-') {
e.preventDefault();
adjustQty(-1);
} else if (e.key === 'Escape') {
resetForm();
}
});
}
// Reset form function
function resetForm() {
selectType('yameen');
document.getElementById('qty-yameen').value = 1;
document.getElementById('amount-nazr').value = '';
calculate();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initPage);
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
// Config
const COST_PER_MEAL = 5; // $5 per meal
const COSTS = {
yameen: 10 * COST_PER_MEAL, // 10 meals = $50
fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5
sawm: 60 * COST_PER_MEAL // 60 meals = $300
};
let currentType = 'yameen';
// Initialize the page
function initPage() {
selectType('yameen');
attachEventListeners();
}
// Select type function
function selectType(type) {
currentType = type;
// Update UI Toggle
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${type}`).classList.add('active');
// Toggle Input Forms
document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));
const inputForm = document.getElementById(`input-${type}`);
inputForm.classList.remove('hidden');
inputForm.classList.add('fade-in');
calculate();
}
// Adjust quantity function
function adjustQty(delta) {
const input = document.getElementById(`qty-${currentType}`);
let val = parseInt(input.value) || 0;
val = Math.max(1, val + delta);
input.value = val;
calculate();
}
// Calculate total function
function calculate() {
let total = 0;
let summaryText = '';
let calcText = '';
if (currentType === 'nazr') {
total = parseFloat(document.getElementById('amount-nazr').value) || 0;
summaryText = 'Monetary vow';
calcText = `${total.toLocaleString()} $`;
} else {
const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;
const unitCost = COSTS[currentType];
total = qty * unitCost;
// Labels mapping
const labels = {
yameen: 'Expiation for Oath',
fidya: 'Fidya (Fasting Redemption)',
sawm: 'Major Expiation for Breaking Fast'
};
summaryText = `${labels[currentType]} (quantity ${qty})`;
calcText = `${qty} × ${unitCost}$`;
}
// Update UI
updateDisplay(total, summaryText, calcText);
}
// Update display function
function updateDisplay(total, summaryText, calcText) {
document.getElementById('total-display').textContent = total.toLocaleString() + ' $';
document.getElementById('summary-label').textContent = summaryText;
document.getElementById('summary-calc').textContent = calcText;
}
// Donate function
function donate() {
const amount = document.getElementById('total-display').textContent;
const summary = document.getElementById('summary-label').textContent;
const calc = document.getElementById('summary-calc').textContent;
if (parseFloat(amount) === 0) {
alert('Please specify a valid expiation amount');
return;
}
const message = `Peace be upon you, I wish to pay expiation:
${summary}
Details: ${calc}
Total amount: ${amount}
Can you provide me with the payment link or bank account?`;
const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
// Attach event listeners
function attachEventListeners() {
// Add input event listeners for all quantity inputs
['yameen', 'fidya', 'sawm'].forEach(type => {
const input = document.getElementById(`qty-${type}`);
if (input) {
input.addEventListener('input', calculate);
}
});
// Add input event listener for nazr amount
const nazrInput = document.getElementById('amount-nazr');
if (nazrInput) {
nazrInput.addEventListener('input', calculate);
}
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === '+') {
e.preventDefault();
adjustQty(1);
} else if (e.key === 'ArrowDown' || e.key === '-') {
e.preventDefault();
adjustQty(-1);
} else if (e.key === 'Escape') {
resetForm();
}
});
}
// Reset form function
function resetForm() {
selectType('yameen');
document.getElementById('qty-yameen').value = 1;
document.getElementById('amount-nazr').value = '';
calculate();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initPage);
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 463 of themes/gavias_kunco/gva_content_builder/gva_column.php).
element_gva_column->render_content(Array, '
// Config
const COST_PER_MEAL = 5; // $5 per meal
const COSTS = {
yameen: 10 * COST_PER_MEAL, // 10 meals = $50
fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5
sawm: 60 * COST_PER_MEAL // 60 meals = $300
};
let currentType = 'yameen';
// Initialize the page
function initPage() {
selectType('yameen');
attachEventListeners();
}
// Select type function
function selectType(type) {
currentType = type;
// Update UI Toggle
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${type}`).classList.add('active');
// Toggle Input Forms
document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));
const inputForm = document.getElementById(`input-${type}`);
inputForm.classList.remove('hidden');
inputForm.classList.add('fade-in');
calculate();
}
// Adjust quantity function
function adjustQty(delta) {
const input = document.getElementById(`qty-${currentType}`);
let val = parseInt(input.value) || 0;
val = Math.max(1, val + delta);
input.value = val;
calculate();
}
// Calculate total function
function calculate() {
let total = 0;
let summaryText = '';
let calcText = '';
if (currentType === 'nazr') {
total = parseFloat(document.getElementById('amount-nazr').value) || 0;
summaryText = 'Monetary vow';
calcText = `${total.toLocaleString()} $`;
} else {
const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;
const unitCost = COSTS[currentType];
total = qty * unitCost;
// Labels mapping
const labels = {
yameen: 'Expiation for Oath',
fidya: 'Fidya (Fasting Redemption)',
sawm: 'Major Expiation for Breaking Fast'
};
summaryText = `${labels[currentType]} (quantity ${qty})`;
calcText = `${qty} × ${unitCost}$`;
}
// Update UI
updateDisplay(total, summaryText, calcText);
}
// Update display function
function updateDisplay(total, summaryText, calcText) {
document.getElementById('total-display').textContent = total.toLocaleString() + ' $';
document.getElementById('summary-label').textContent = summaryText;
document.getElementById('summary-calc').textContent = calcText;
}
// Donate function
function donate() {
const amount = document.getElementById('total-display').textContent;
const summary = document.getElementById('summary-label').textContent;
const calc = document.getElementById('summary-calc').textContent;
if (parseFloat(amount) === 0) {
alert('Please specify a valid expiation amount');
return;
}
const message = `Peace be upon you, I wish to pay expiation:
${summary}
Details: ${calc}
Total amount: ${amount}
Can you provide me with the payment link or bank account?`;
const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
// Attach event listeners
function attachEventListeners() {
// Add input event listeners for all quantity inputs
['yameen', 'fidya', 'sawm'].forEach(type => {
const input = document.getElementById(`qty-${type}`);
if (input) {
input.addEventListener('input', calculate);
}
});
// Add input event listener for nazr amount
const nazrInput = document.getElementById('amount-nazr');
if (nazrInput) {
nazrInput.addEventListener('input', calculate);
}
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === '+') {
e.preventDefault();
adjustQty(1);
} else if (e.key === 'ArrowDown' || e.key === '-') {
e.preventDefault();
adjustQty(-1);
} else if (e.key === 'Escape') {
resetForm();
}
});
}
// Reset form function
function resetForm() {
selectType('yameen');
document.getElementById('qty-yameen').value = 1;
document.getElementById('amount-nazr').value = '';
calculate();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initPage);
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
// Config
const COST_PER_MEAL = 5; // $5 per meal
const COSTS = {
yameen: 10 * COST_PER_MEAL, // 10 meals = $50
fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5
sawm: 60 * COST_PER_MEAL // 60 meals = $300
};
let currentType = 'yameen';
// Initialize the page
function initPage() {
selectType('yameen');
attachEventListeners();
}
// Select type function
function selectType(type) {
currentType = type;
// Update UI Toggle
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${type}`).classList.add('active');
// Toggle Input Forms
document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));
const inputForm = document.getElementById(`input-${type}`);
inputForm.classList.remove('hidden');
inputForm.classList.add('fade-in');
calculate();
}
// Adjust quantity function
function adjustQty(delta) {
const input = document.getElementById(`qty-${currentType}`);
let val = parseInt(input.value) || 0;
val = Math.max(1, val + delta);
input.value = val;
calculate();
}
// Calculate total function
function calculate() {
let total = 0;
let summaryText = '';
let calcText = '';
if (currentType === 'nazr') {
total = parseFloat(document.getElementById('amount-nazr').value) || 0;
summaryText = 'Monetary vow';
calcText = `${total.toLocaleString()} $`;
} else {
const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;
const unitCost = COSTS[currentType];
total = qty * unitCost;
// Labels mapping
const labels = {
yameen: 'Expiation for Oath',
fidya: 'Fidya (Fasting Redemption)',
sawm: 'Major Expiation for Breaking Fast'
};
summaryText = `${labels[currentType]} (quantity ${qty})`;
calcText = `${qty} × ${unitCost}$`;
}
// Update UI
updateDisplay(total, summaryText, calcText);
}
// Update display function
function updateDisplay(total, summaryText, calcText) {
document.getElementById('total-display').textContent = total.toLocaleString() + ' $';
document.getElementById('summary-label').textContent = summaryText;
document.getElementById('summary-calc').textContent = calcText;
}
// Donate function
function donate() {
const amount = document.getElementById('total-display').textContent;
const summary = document.getElementById('summary-label').textContent;
const calc = document.getElementById('summary-calc').textContent;
if (parseFloat(amount) === 0) {
alert('Please specify a valid expiation amount');
return;
}
const message = `Peace be upon you, I wish to pay expiation:
${summary}
Details: ${calc}
Total amount: ${amount}
Can you provide me with the payment link or bank account?`;
const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
// Attach event listeners
function attachEventListeners() {
// Add input event listeners for all quantity inputs
['yameen', 'fidya', 'sawm'].forEach(type => {
const input = document.getElementById(`qty-${type}`);
if (input) {
input.addEventListener('input', calculate);
}
});
// Add input event listener for nazr amount
const nazrInput = document.getElementById('amount-nazr');
if (nazrInput) {
nazrInput.addEventListener('input', calculate);
}
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === '+') {
e.preventDefault();
adjustQty(1);
} else if (e.key === 'ArrowDown' || e.key === '-') {
e.preventDefault();
adjustQty(-1);
} else if (e.key === 'Escape') {
resetForm();
}
});
}
// Reset form function
function resetForm() {
selectType('yameen');
document.getElementById('qty-yameen').value = 1;
document.getElementById('amount-nazr').value = '';
calculate();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initPage);
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_row->render_content() (line 317 of themes/gavias_kunco/gva_content_builder/gva_row.php).
element_gva_row->render_content(Array, '
:root {
--brand-primary: #6d2435;
--brand-secondary: #b2946b;
--brand-green: #617f67;
--brand-beige: #f2d7b4;
--brand-light: #f9fafb;
--brand-dark: #282828;
--glass-bg: rgba(255, 255, 255, 0.95);
}
.alzakat .zakat-reveal {
opacity: 1;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === Page Base === */
.kaffarah-page {
font-family: 'IBM Plex Sans Arabic', sans-serif;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #2d3436;
min-height: 100vh;
}
/* === Hero Section === */
.kaffarah-hero {
position: relative;
height: 450px;
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.kaffarah-hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transform: scale(1.1);
transition: transform 10s ease-out;
}
.kaffarah-hero:hover .kaffarah-hero-img {
transform: scale(1);
}
.kaffarah-hero-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 0 1rem;
}
.kaffarah-hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
background: rgba(178, 148, 107, 0.2);
border: 1px solid rgba(178, 148, 107, 0.4);
color: #b2946b;
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.kaffarah-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kaffarah-subtitle {
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* === Logo === */
.page-logo {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.page-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* === Main Container === */
.main-container {
margin-top: -5rem;
margin-bottom: 5rem;
position: relative;
z-index: 20;
}
/* === Glass Card === */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
margin-bottom: 2rem;
text-align: center;
}
/* === Type Selector === */
.type-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.type-btn {
background: #f9fafb;
border: 2px solid transparent;
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.type-btn:hover {
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.type-btn.active {
border-color: #b2946b;
background: #fff;
color: #6d2435;
box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);
}
.type-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
color: #b2bec3;
transition: color 0.3s ease;
}
.type-btn.active .type-icon {
color: #b2946b;
}
.type-label {
font-weight: bold;
font-size: 0.95rem;
}
.type-desc {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.25rem;
}
/* === Input Container === */
.input-container {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-form {
animation: fadeIn 0.5s ease-out;
}
.input-header {
text-align: center;
margin-bottom: 1.5rem;
}
.input-title {
font-size: 1.25rem;
font-weight: bold;
color: #1f2937;
}
.input-subtitle {
color: #6b7280;
margin-top: 0.5rem;
}
/* === Input Group === */
.input-group {
background: white;
border-radius: 1.25rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f2f6;
margin-bottom: 1.5rem;
}
.input-label {
display: block;
font-weight: bold;
color: #6d2435;
margin-bottom: 1rem;
text-align: center;
}
/* === Custom Number Input === */
.custom-number-input {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
padding: 0.5rem;
max-width: 200px;
margin: 1.5rem auto 0;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 0.625rem;
background: white;
color: #6d2435;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.qty-btn:hover {
transform: scale(1.1);
background: #6d2435;
color: white;
}
.qty-input {
width: 60px;
text-align: center;
background: transparent;
font-weight: 800;
font-size: 1.5rem;
color: #6d2435;
border: none;
outline: none;
}
/* === Custom Amount Input === */
.custom-amount-input {
max-width: 300px;
margin: 0 auto;
}
.amount-input-wrapper {
position: relative;
background: #f8fafc;
border-radius: 0.75rem;
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
}
.amount-input-wrapper:focus-within {
border-color: #6d2435;
box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);
}
.amount-input {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 1rem 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
}
.amount-currency {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
font-weight: bold;
}
/* === Info Text === */
.info-text {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
margin-top: 1rem;
}
.info-icon {
margin-right: 0.25rem;
}
/* === Summary Box === */
.summary-box {
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
color: white;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.summary-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
}
.summary-label {
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.total-amount {
font-size: 3.5rem;
font-weight: 900;
margin: 1rem 0;
line-height: 1;
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.summary-details {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0.5rem 0;
}
.summary-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* === Donate Button === */
.donate-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
font-weight: 800;
padding: 1.25rem;
border-radius: 1rem;
width: 100%;
font-size: 1.1rem;
transition: all 0.3s ease;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.donate-btn:active {
transform: translateY(-1px);
}
.donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.donate-btn:hover::before {
left: 100%;
}
.donate-text {
font-size: 1rem;
font-weight: bold;
}
.donate-icon {
font-size: 1.5rem;
}
/* === Animations === */
.floating {
animation: float 6s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* === Hidden Utility === */
.hidden {
display: none !important;
}
/* === Grid Layout === */
.main-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 8fr 4fr;
}
}
/* === Responsive === */
@media (max-width: 768px) {
.kaffarah-hero {
height: 350px;
}
.kaffarah-title {
font-size: 2rem;
}
.kaffarah-subtitle {
font-size: 1rem;
}
.main-container {
margin-top: -3rem;
}
.type-selector {
grid-template-columns: repeat(2, 1fr);
}
.total-amount {
font-size: 2.5rem;
}
.page-logo {
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 480px) {
.type-selector {
grid-template-columns: 1fr;
}
.kaffarah-hero {
height: 300px;
}
.kaffarah-title {
font-size: 1.75rem;
}
.donate-text {
font-size: 0.9rem;
}
}
Purification for the soul and mending of hearts
Expiation and Vows
Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.
Select Expiation Type
Expiation for Oath
Feeding 10 needy people
Fidya (Fasting Redemption)
For inability or illness
Expiation for Breaking Fast
For deliberate breaking
General Vows
Amount you specify
Expiation for Oath
For each oath you have broken, feed ten needy people
Number of oaths you wish to expiate
Cost of feeding one needy person: $5 (total $50 per oath)
Fidya (Fasting Redemption)
For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding
Number of days
Cost of feeding one needy person per day: $5
Major Expiation for Breaking Fast
For someone who deliberately breaks the fast in Ramadan through intercourse or similar
Number of days the fast was broken
Expiation: Feed 60 needy people per day ($300)
General Vows
Fulfilling a vow is an act of worship and a means of drawing closer to Allah
Value of the vow
$
Total Expiation Amount
$50
Expiation for Oath (1)
1 × $50
This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.
Contact us via WhatsApp for consultation and donation
// Config
const COST_PER_MEAL = 5; // $5 per meal
const COSTS = {
yameen: 10 * COST_PER_MEAL, // 10 meals = $50
fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5
sawm: 60 * COST_PER_MEAL // 60 meals = $300
};
let currentType = 'yameen';
// Initialize the page
function initPage() {
selectType('yameen');
attachEventListeners();
}
// Select type function
function selectType(type) {
currentType = type;
// Update UI Toggle
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${type}`).classList.add('active');
// Toggle Input Forms
document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));
const inputForm = document.getElementById(`input-${type}`);
inputForm.classList.remove('hidden');
inputForm.classList.add('fade-in');
calculate();
}
// Adjust quantity function
function adjustQty(delta) {
const input = document.getElementById(`qty-${currentType}`);
let val = parseInt(input.value) || 0;
val = Math.max(1, val + delta);
input.value = val;
calculate();
}
// Calculate total function
function calculate() {
let total = 0;
let summaryText = '';
let calcText = '';
if (currentType === 'nazr') {
total = parseFloat(document.getElementById('amount-nazr').value) || 0;
summaryText = 'Monetary vow';
calcText = `${total.toLocaleString()} $`;
} else {
const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;
const unitCost = COSTS[currentType];
total = qty * unitCost;
// Labels mapping
const labels = {
yameen: 'Expiation for Oath',
fidya: 'Fidya (Fasting Redemption)',
sawm: 'Major Expiation for Breaking Fast'
};
summaryText = `${labels[currentType]} (quantity ${qty})`;
calcText = `${qty} × ${unitCost}$`;
}
// Update UI
updateDisplay(total, summaryText, calcText);
}
// Update display function
function updateDisplay(total, summaryText, calcText) {
document.getElementById('total-display').textContent = total.toLocaleString() + ' $';
document.getElementById('summary-label').textContent = summaryText;
document.getElementById('summary-calc').textContent = calcText;
}
// Donate function
function donate() {
const amount = document.getElementById('total-display').textContent;
const summary = document.getElementById('summary-label').textContent;
const calc = document.getElementById('summary-calc').textContent;
if (parseFloat(amount) === 0) {
alert('Please specify a valid expiation amount');
return;
}
const message = `Peace be upon you, I wish to pay expiation:
${summary}
Details: ${calc}
Total amount: ${amount}
Can you provide me with the payment link or bank account?`;
const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
// Attach event listeners
function attachEventListeners() {
// Add input event listeners for all quantity inputs
['yameen', 'fidya', 'sawm'].forEach(type => {
const input = document.getElementById(`qty-${type}`);
if (input) {
input.addEventListener('input', calculate);
}
});
// Add input event listener for nazr amount
const nazrInput = document.getElementById('amount-nazr');
if (nazrInput) {
nazrInput.addEventListener('input', calculate);
}
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === '+') {
e.preventDefault();
adjustQty(1);
} else if (e.key === 'ArrowDown' || e.key === '-') {
e.preventDefault();
adjustQty(-1);
} else if (e.key === 'Escape') {
resetForm();
}
});
}
// Reset form function
function resetForm() {
selectType('yameen');
document.getElementById('qty-yameen').value = 1;
document.getElementById('amount-nazr').value = '';
calculate();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initPage);
') (Line: 110)
gavias_content_builder_render_element('gva_row', Array, '
:root {
--brand-primary: #6d2435;
--brand-secondary: #b2946b;
--brand-green: #617f67;
--brand-beige: #f2d7b4;
--brand-light: #f9fafb;
--brand-dark: #282828;
--glass-bg: rgba(255, 255, 255, 0.95);
}
.alzakat .zakat-reveal {
opacity: 1;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === Page Base === */
.kaffarah-page {
font-family: 'IBM Plex Sans Arabic', sans-serif;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #2d3436;
min-height: 100vh;
}
/* === Hero Section === */
.kaffarah-hero {
position: relative;
height: 450px;
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.kaffarah-hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transform: scale(1.1);
transition: transform 10s ease-out;
}
.kaffarah-hero:hover .kaffarah-hero-img {
transform: scale(1);
}
.kaffarah-hero-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 0 1rem;
}
.kaffarah-hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
background: rgba(178, 148, 107, 0.2);
border: 1px solid rgba(178, 148, 107, 0.4);
color: #b2946b;
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.kaffarah-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kaffarah-subtitle {
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* === Logo === */
.page-logo {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.page-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* === Main Container === */
.main-container {
margin-top: -5rem;
margin-bottom: 5rem;
position: relative;
z-index: 20;
}
/* === Glass Card === */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
margin-bottom: 2rem;
text-align: center;
}
/* === Type Selector === */
.type-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.type-btn {
background: #f9fafb;
border: 2px solid transparent;
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.type-btn:hover {
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.type-btn.active {
border-color: #b2946b;
background: #fff;
color: #6d2435;
box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);
}
.type-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
color: #b2bec3;
transition: color 0.3s ease;
}
.type-btn.active .type-icon {
color: #b2946b;
}
.type-label {
font-weight: bold;
font-size: 0.95rem;
}
.type-desc {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.25rem;
}
/* === Input Container === */
.input-container {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-form {
animation: fadeIn 0.5s ease-out;
}
.input-header {
text-align: center;
margin-bottom: 1.5rem;
}
.input-title {
font-size: 1.25rem;
font-weight: bold;
color: #1f2937;
}
.input-subtitle {
color: #6b7280;
margin-top: 0.5rem;
}
/* === Input Group === */
.input-group {
background: white;
border-radius: 1.25rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f2f6;
margin-bottom: 1.5rem;
}
.input-label {
display: block;
font-weight: bold;
color: #6d2435;
margin-bottom: 1rem;
text-align: center;
}
/* === Custom Number Input === */
.custom-number-input {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
padding: 0.5rem;
max-width: 200px;
margin: 1.5rem auto 0;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 0.625rem;
background: white;
color: #6d2435;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.qty-btn:hover {
transform: scale(1.1);
background: #6d2435;
color: white;
}
.qty-input {
width: 60px;
text-align: center;
background: transparent;
font-weight: 800;
font-size: 1.5rem;
color: #6d2435;
border: none;
outline: none;
}
/* === Custom Amount Input === */
.custom-amount-input {
max-width: 300px;
margin: 0 auto;
}
.amount-input-wrapper {
position: relative;
background: #f8fafc;
border-radius: 0.75rem;
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
}
.amount-input-wrapper:focus-within {
border-color: #6d2435;
box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);
}
.amount-input {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 1rem 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6d2435;
}
.amount-currency {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
font-weight: bold;
}
/* === Info Text === */
.info-text {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
margin-top: 1rem;
}
.info-icon {
margin-right: 0.25rem;
}
/* === Summary Box === */
.summary-box {
background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);
color: white;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.summary-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
}
.summary-label {
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.total-amount {
font-size: 3.5rem;
font-weight: 900;
margin: 1rem 0;
line-height: 1;
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.summary-details {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0.5rem 0;
}
.summary-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* === Donate Button === */
.donate-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
font-weight: 800;
padding: 1.25rem;
border-radius: 1rem;
width: 100%;
font-size: 1.1rem;
transition: all 0.3s ease;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.donate-btn:active {
transform: translateY(-1px);
}
.donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.donate-btn:hover::before {
left: 100%;
}
.donate-text {
font-size: 1rem;
font-weight: bold;
}
.donate-icon {
font-size: 1.5rem;
}
/* === Animations === */
.floating {
animation: float 6s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* === Hidden Utility === */
.hidden {
display: none !important;
}
/* === Grid Layout === */
.main-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 8fr 4fr;
}
}
/* === Responsive === */
@media (max-width: 768px) {
.kaffarah-hero {
height: 350px;
}
.kaffarah-title {
font-size: 2rem;
}
.kaffarah-subtitle {
font-size: 1rem;
}
.main-container {
margin-top: -3rem;
}
.type-selector {
grid-template-columns: repeat(2, 1fr);
}
.total-amount {
font-size: 2.5rem;
}
.page-logo {
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 480px) {
.type-selector {
grid-template-columns: 1fr;
}
.kaffarah-hero {
height: 300px;
}
.kaffarah-title {
font-size: 1.75rem;
}
.donate-text {
font-size: 0.9rem;
}
}
Purification for the soul and mending of hearts
Expiation and Vows
Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.
Select Expiation Type
Expiation for Oath
Feeding 10 needy people
Fidya (Fasting Redemption)
For inability or illness
Expiation for Breaking Fast
For deliberate breaking
General Vows
Amount you specify
Expiation for Oath
For each oath you have broken, feed ten needy people
Number of oaths you wish to expiate
Cost of feeding one needy person: $5 (total $50 per oath)
Fidya (Fasting Redemption)
For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding
Number of days
Cost of feeding one needy person per day: $5
Major Expiation for Breaking Fast
For someone who deliberately breaks the fast in Ramadan through intercourse or similar
Number of days the fast was broken
Expiation: Feed 60 needy people per day ($300)
General Vows
Fulfilling a vow is an act of worship and a means of drawing closer to Allah
Value of the vow
$
Total Expiation Amount
$50
Expiation for Oath (1)
1 × $50
This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.
Contact us via WhatsApp for consultation and donation
// Config
const COST_PER_MEAL = 5; // $5 per meal
const COSTS = {
yameen: 10 * COST_PER_MEAL, // 10 meals = $50
fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5
sawm: 60 * COST_PER_MEAL // 60 meals = $300
};
let currentType = 'yameen';
// Initialize the page
function initPage() {
selectType('yameen');
attachEventListeners();
}
// Select type function
function selectType(type) {
currentType = type;
// Update UI Toggle
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${type}`).classList.add('active');
// Toggle Input Forms
document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));
const inputForm = document.getElementById(`input-${type}`);
inputForm.classList.remove('hidden');
inputForm.classList.add('fade-in');
calculate();
}
// Adjust quantity function
function adjustQty(delta) {
const input = document.getElementById(`qty-${currentType}`);
let val = parseInt(input.value) || 0;
val = Math.max(1, val + delta);
input.value = val;
calculate();
}
// Calculate total function
function calculate() {
let total = 0;
let summaryText = '';
let calcText = '';
if (currentType === 'nazr') {
total = parseFloat(document.getElementById('amount-nazr').value) || 0;
summaryText = 'Monetary vow';
calcText = `${total.toLocaleString()} $`;
} else {
const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;
const unitCost = COSTS[currentType];
total = qty * unitCost;
// Labels mapping
const labels = {
yameen: 'Expiation for Oath',
fidya: 'Fidya (Fasting Redemption)',
sawm: 'Major Expiation for Breaking Fast'
};
summaryText = `${labels[currentType]} (quantity ${qty})`;
calcText = `${qty} × ${unitCost}$`;
}
// Update UI
updateDisplay(total, summaryText, calcText);
}
// Update display function
function updateDisplay(total, summaryText, calcText) {
document.getElementById('total-display').textContent = total.toLocaleString() + ' $';
document.getElementById('summary-label').textContent = summaryText;
document.getElementById('summary-calc').textContent = calcText;
}
// Donate function
function donate() {
const amount = document.getElementById('total-display').textContent;
const summary = document.getElementById('summary-label').textContent;
const calc = document.getElementById('summary-calc').textContent;
if (parseFloat(amount) === 0) {
alert('Please specify a valid expiation amount');
return;
}
const message = `Peace be upon you, I wish to pay expiation:
${summary}
Details: ${calc}
Total amount: ${amount}
Can you provide me with the payment link or bank account?`;
const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
// Attach event listeners
function attachEventListeners() {
// Add input event listeners for all quantity inputs
['yameen', 'fidya', 'sawm'].forEach(type => {
const input = document.getElementById(`qty-${type}`);
if (input) {
input.addEventListener('input', calculate);
}
});
// Add input event listener for nazr amount
const nazrInput = document.getElementById('amount-nazr');
if (nazrInput) {
nazrInput.addEventListener('input', calculate);
}
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === '+') {
e.preventDefault();
adjustQty(1);
} else if (e.key === 'ArrowDown' || e.key === '-') {
e.preventDefault();
adjustQty(-1);
} else if (e.key === 'Escape') {
resetForm();
}
});
}
// Reset form function
function resetForm() {
selectType('yameen');
document.getElementById('qty-yameen').value = 1;
document.getElementById('amount-nazr').value = '';
calculate();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initPage);
') (Line: 62)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n :root {\r\n --brand-primary: #6d2435;\r\n --brand-secondary: #b2946b;\r\n --brand-green: #617f67;\r\n --brand-beige: #f2d7b4;\r\n --brand-light: #f9fafb;\r\n --brand-dark: #282828;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n }\r\n.alzakat .zakat-reveal {\r\n opacity: 1;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n /* === Page Base === */\r\n .kaffarah-page {\r\n font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n color: #2d3436;\r\n min-height: 100vh;\r\n }\r\n\r\n /* === Hero Section === */\r\n .kaffarah-hero {\r\n position: relative;\r\n height: 450px;\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .kaffarah-hero-img {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.3;\r\n transform: scale(1.1);\r\n transition: transform 10s ease-out;\r\n }\r\n\r\n .kaffarah-hero:hover .kaffarah-hero-img {\r\n transform: scale(1);\r\n }\r\n\r\n .kaffarah-hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n color: white;\r\n padding: 0 1rem;\r\n }\r\n\r\n .kaffarah-hero-badge {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 999px;\r\n background: rgba(178, 148, 107, 0.2);\r\n border: 1px solid rgba(178, 148, 107, 0.4);\r\n color: #b2946b;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .kaffarah-title {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .kaffarah-subtitle {\r\n font-size: 1.25rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* === Logo === */\r\n .page-logo {\r\n position: absolute;\r\n top: 2rem;\r\n right: 2rem;\r\n z-index: 50;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .page-logo:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n /* === Main Container === */\r\n .main-container {\r\n margin-top: -5rem;\r\n margin-bottom: 5rem;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n /* === Glass Card === */\r\n .glass-card {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 2rem;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Type Selector === */\r\n .type-selector {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .type-btn {\r\n background: #f9fafb;\r\n border: 2px solid transparent;\r\n border-radius: 1rem;\r\n padding: 1.5rem 1rem;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .type-btn:hover {\r\n background: #fff;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .type-btn.active {\r\n border-color: #b2946b;\r\n background: #fff;\r\n color: #6d2435;\r\n box-shadow: 0 10px 20px rgba(178, 148, 107, 0.15);\r\n }\r\n\r\n .type-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.75rem;\r\n color: #b2bec3;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .type-btn.active .type-icon {\r\n color: #b2946b;\r\n }\r\n\r\n .type-label {\r\n font-weight: bold;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .type-desc {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n /* === Input Container === */\r\n .input-container {\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .input-form {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .input-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-title {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n }\r\n\r\n .input-subtitle {\r\n color: #6b7280;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n /* === Input Group === */\r\n .input-group {\r\n background: white;\r\n border-radius: 1.25rem;\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #f1f2f6;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .input-label {\r\n display: block;\r\n font-weight: bold;\r\n color: #6d2435;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n }\r\n\r\n /* === Custom Number Input === */\r\n .custom-number-input {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n padding: 0.5rem;\r\n max-width: 200px;\r\n margin: 1.5rem auto 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 0.625rem;\r\n background: white;\r\n color: #6d2435;\r\n font-weight: bold;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .qty-btn:hover {\r\n transform: scale(1.1);\r\n background: #6d2435;\r\n color: white;\r\n }\r\n\r\n .qty-input {\r\n width: 60px;\r\n text-align: center;\r\n background: transparent;\r\n font-weight: 800;\r\n font-size: 1.5rem;\r\n color: #6d2435;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n /* === Custom Amount Input === */\r\n .custom-amount-input {\r\n max-width: 300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .amount-input-wrapper {\r\n position: relative;\r\n background: #f8fafc;\r\n border-radius: 0.75rem;\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .amount-input-wrapper:focus-within {\r\n border-color: #6d2435;\r\n box-shadow: 0 0 0 3px rgba(109, 36, 53, 0.1);\r\n }\r\n\r\n .amount-input {\r\n width: 100%;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: 1rem 3rem;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #6d2435;\r\n }\r\n\r\n .amount-currency {\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6b7280;\r\n font-weight: bold;\r\n }\r\n\r\n /* === Info Text === */\r\n .info-text {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin-top: 1rem;\r\n }\r\n\r\n .info-icon {\r\n margin-right: 0.25rem;\r\n }\r\n\r\n /* === Summary Box === */\r\n .summary-box {\r\n background: linear-gradient(135deg, #6d2435 0%, #8a2c44 100%);\r\n color: white;\r\n padding: 2.5rem;\r\n border-radius: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100%;\r\n }\r\n\r\n .summary-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .summary-label {\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .total-amount {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n margin: 1rem 0;\r\n line-height: 1;\r\n text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .summary-details {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.875rem;\r\n margin-bottom: 0.5rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .summary-divider {\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.2);\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .summary-note {\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n text-align: center;\r\n }\r\n\r\n /* === Donate Button === */\r\n .donate-btn {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n color: white;\r\n font-weight: 800;\r\n padding: 1.25rem;\r\n border-radius: 1rem;\r\n width: 100%;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .donate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .donate-btn:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n .donate-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n }\r\n\r\n .donate-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .donate-text {\r\n font-size: 1rem;\r\n font-weight: bold;\r\n }\r\n\r\n .donate-icon {\r\n font-size: 1.5rem;\r\n }\r\n\r\n /* === Animations === */\r\n .floating {\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n\r\n .slide-up {\r\n animation: slideUp 0.6s ease-out;\r\n }\r\n\r\n /* === Hidden Utility === */\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n /* === Grid Layout === */\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 8fr 4fr;\r\n }\r\n }\r\n\r\n /* === Responsive === */\r\n @media (max-width: 768px) {\r\n .kaffarah-hero {\r\n height: 350px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .kaffarah-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .main-container {\r\n margin-top: -3rem;\r\n }\r\n \r\n .type-selector {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .total-amount {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .page-logo {\r\n top: 1rem;\r\n right: 1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .type-selector {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .kaffarah-hero {\r\n height: 300px;\r\n }\r\n \r\n .kaffarah-title {\r\n font-size: 1.75rem;\r\n }\r\n \r\n .donate-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Purification for the soul and mending of hearts\r\n Expiation and Vows\r\n \r\n \r\n Fulfill your obligations of expiation or vows with ease, and Wijdan will deliver them to the deserving poor and needy.\r\n \r\n \r\n \r\n \r\n \r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n \r\n \r\n\r\n \r\n \r\n \r\n Select Expiation Type\r\n\r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n Feeding 10 needy people\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For inability or illness\r\n \r\n \r\n \r\n Expiation for Breaking Fast\r\n For deliberate breaking\r\n \r\n \r\n \r\n General Vows\r\n Amount you specify\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Expiation for Oath\r\n For each oath you have broken, feed ten needy people\r\n \r\n \r\n Number of oaths you wish to expiate\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person: $5 (total $50 per oath)\r\n \r\n \r\n\r\n \r\n \r\n \r\n Fidya (Fasting Redemption)\r\n For those unable to fast due to a permanent excuse, pregnancy, or breastfeeding\r\n \r\n \r\n Number of days\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost of feeding one needy person per day: $5\r\n \r\n \r\n\r\n \r\n \r\n \r\n Major Expiation for Breaking Fast\r\n For someone who deliberately breaks the fast in Ramadan through intercourse or similar\r\n \r\n \r\n Number of days the fast was broken\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Expiation: Feed 60 needy people per day ($300)\r\n \r\n \r\n\r\n \r\n \r\n \r\n General Vows\r\n Fulfilling a vow is an act of worship and a means of drawing closer to Allah\r\n \r\n \r\n Value of the vow\r\n \r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Total Expiation Amount\r\n $50\r\n\r\n \r\n \r\n Expiation for Oath (1)\r\n 1 × $50\r\n \r\n \r\n \r\n This entire amount will be directed to feeding the needy and distributing expiations to their legitimate channels.\r\n \r\n \r\n\r\n \r\n Contact us via WhatsApp for consultation and donation\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"},{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n // Config\r\n const COST_PER_MEAL = 5; // $5 per meal\r\n const COSTS = {\r\n yameen: 10 * COST_PER_MEAL, // 10 meals = $50\r\n fidya: 1 * COST_PER_MEAL, // 1 meal per day = $5\r\n sawm: 60 * COST_PER_MEAL // 60 meals = $300\r\n };\r\n\r\n let currentType = 'yameen';\r\n\r\n // Initialize the page\r\n function initPage() {\r\n selectType('yameen');\r\n attachEventListeners();\r\n }\r\n\r\n // Select type function\r\n function selectType(type) {\r\n currentType = type;\r\n\r\n // Update UI Toggle\r\n document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));\r\n document.getElementById(`btn-${type}`).classList.add('active');\r\n\r\n // Toggle Input Forms\r\n document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden'));\r\n const inputForm = document.getElementById(`input-${type}`);\r\n inputForm.classList.remove('hidden');\r\n inputForm.classList.add('fade-in');\r\n\r\n calculate();\r\n }\r\n\r\n // Adjust quantity function\r\n function adjustQty(delta) {\r\n const input = document.getElementById(`qty-${currentType}`);\r\n let val = parseInt(input.value) || 0;\r\n val = Math.max(1, val + delta);\r\n input.value = val;\r\n calculate();\r\n }\r\n\r\n // Calculate total function\r\n function calculate() {\r\n let total = 0;\r\n let summaryText = '';\r\n let calcText = '';\r\n\r\n if (currentType === 'nazr') {\r\n total = parseFloat(document.getElementById('amount-nazr').value) || 0;\r\n summaryText = 'Monetary vow';\r\n calcText = `${total.toLocaleString()} $`;\r\n } else {\r\n const qty = parseInt(document.getElementById(`qty-${currentType}`).value) || 0;\r\n const unitCost = COSTS[currentType];\r\n total = qty * unitCost;\r\n\r\n // Labels mapping\r\n const labels = {\r\n yameen: 'Expiation for Oath',\r\n fidya: 'Fidya (Fasting Redemption)',\r\n sawm: 'Major Expiation for Breaking Fast'\r\n };\r\n\r\n summaryText = `${labels[currentType]} (quantity ${qty})`;\r\n calcText = `${qty} × ${unitCost}$`;\r\n }\r\n\r\n // Update UI\r\n updateDisplay(total, summaryText, calcText);\r\n }\r\n\r\n // Update display function\r\n function updateDisplay(total, summaryText, calcText) {\r\n document.getElementById('total-display').textContent = total.toLocaleString() + ' $';\r\n document.getElementById('summary-label').textContent = summaryText;\r\n document.getElementById('summary-calc').textContent = calcText;\r\n }\r\n\r\n // Donate function\r\n function donate() {\r\n const amount = document.getElementById('total-display').textContent;\r\n const summary = document.getElementById('summary-label').textContent;\r\n const calc = document.getElementById('summary-calc').textContent;\r\n\r\n if (parseFloat(amount) === 0) {\r\n alert('Please specify a valid expiation amount');\r\n return;\r\n }\r\n\r\n const message = `Peace be upon you, I wish to pay expiation:\r\n${summary}\r\nDetails: ${calc}\r\nTotal amount: ${amount}\r\nCan you provide me with the payment link or bank account?`;\r\n\r\n const url = `https://wa.me/905057763103?text=${encodeURIComponent(message)}`;\r\n window.open(url, '_blank');\r\n }\r\n\r\n // Attach event listeners\r\n function attachEventListeners() {\r\n // Add input event listeners for all quantity inputs\r\n ['yameen', 'fidya', 'sawm'].forEach(type => {\r\n const input = document.getElementById(`qty-${type}`);\r\n if (input) {\r\n input.addEventListener('input', calculate);\r\n }\r\n });\r\n\r\n // Add input event listener for nazr amount\r\n const nazrInput = document.getElementById('amount-nazr');\r\n if (nazrInput) {\r\n nazrInput.addEventListener('input', calculate);\r\n }\r\n\r\n // Add keyboard shortcuts\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowUp' || e.key === '+') {\r\n e.preventDefault();\r\n adjustQty(1);\r\n } else if (e.key === 'ArrowDown' || e.key === '-') {\r\n e.preventDefault();\r\n adjustQty(-1);\r\n } else if (e.key === 'Escape') {\r\n resetForm();\r\n }\r\n });\r\n }\r\n\r\n // Reset form function\r\n function resetForm() {\r\n selectType('yameen');\r\n document.getElementById('qty-yameen').value = 1;\r\n document.getElementById('amount-nazr').value = '';\r\n calculate();\r\n }\r\n\r\n // Initialize when DOM is loaded\r\n document.addEventListener('DOMContentLoaded', initPage);\r\n ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
