/* — Core Definitions & Animations — */
:root {
–tkp-gold: #D4AF37;
–tkp-teal: #1A5F7A;
–tkp-deep-blue: #2C3E50;
–tkp-light: rgba(255, 255, 255, 0.98);
–glass-border: rgba(255, 255, 255, 0.3);
–noor-glow: rgba(212, 175, 55, 0.5);
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes textSlideUp {
0% {
opacity: 0;
transform: translateY(40px);
filter: blur(5px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes headerPulse {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
}
/* — Main Container — */
.tkp-course-showcase-container {
background: linear-gradient(-45deg, #0f2f3c, #2c3e50, #5a4a1f, #1A5F7A);
background-size: 400% 400%;
animation: gradientShift 25s ease infinite;
padding: 80px 20px;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
color: var(–tkp-deep-blue);
line-height: 1.7;
overflow: hidden; /* Prevents scrollbar during animation */
}
.tkp-content-wrapper {
max-width: 1100px;
margin: 0 auto;
}
/* — Typography & Standard Elements — */
.tkp-section-title {
text-align: center;
color: white;
font-size: 3rem;
font-weight: 300;
margin-bottom: 1.5rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
opacity: 0;
animation: textSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.tkp-section-subtitle {
text-align: center;
color: rgba(255,255,255,0.9);
font-size: 1.3rem;
max-width: 800px;
margin: 0 auto 60px auto;
opacity: 0;
animation: textSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.tkp-highlight-gold {
color: var(–tkp-gold);
font-weight: 700;
}
/* — Card Grid System — */
.tkp-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 35px;
margin-bottom: 60px;
}
/* — Glassmorphism Cards — */
.tkp-glass-card {
background: var(–tkp-light);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(–glass-border);
border-radius: 20px;
padding: 35px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0;
animation: textSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
/* Levitation Effect */
.tkp-glass-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px var(–noor-glow);
border-color: var(–tkp-gold);
}
/* Animated Header instead of Image */
.tkp-card-header-gradient {
height: 60px;
margin: -35px -35px 25px -35px; /* Negative margin to fill the top */
background: linear-gradient(90deg, var(–tkp-deep-blue), var(–tkp-teal));
border-radius: 20px 20px 0 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.8);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.9rem;
box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,0.2);
animation: headerPulse 4s ease-in-out infinite alternate;
}
.header-grad-1 { background: linear-gradient(90deg, #D4AF37, #1A5F7A); }
.header-grad-2 { background: linear-gradient(90deg, #1A5F7A, #2C3E50); }
.header-grad-3 { background: linear-gradient(90deg, #2C3E50, #D4AF37); }
.tkp-card-category {
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1.5px;
color: var(–tkp-teal);
font-weight: 700;
margin-bottom: 15px;
display: block;
opacity: 0;
animation: textSlideUp 0.6s ease-out forwards 0.2s;
}
.tkp-card-title {
font-size: 1.8rem;
color: var(–tkp-deep-blue);
margin: 0 0 20px 0;
font-weight: 600;
line-height: 1.3;
opacity: 0;
animation: textSlideUp 0.6s ease-out forwards 0.4s;
}
.tkp-card-text {
font-size: 1.05rem;
color: #555;
flex-grow: 1;
margin-bottom: 30px;
opacity: 0;
animation: textSlideUp 0.6s ease-out forwards 0.6s;
}
.tkp-instructor-tag {
display: flex;
align-items: center;
margin-top: auto; /* Pushes to bottom */
font-weight: 600;
color: var(–tkp-teal);
font-size: 0.95rem;
opacity: 0;
animation: textSlideUp 0.6s ease-out forwards 0.8s;
}
.tkp-instructor-tag::before {
content: ”;
display: inline-block;
width: 10px;
height: 10px;
background-color: var(–tkp-gold);
border-radius: 50%;
margin-right: 12px;
box-shadow: 0 0 10px var(–tkp-gold);
}
/* — Buttons & CTAs — */
.tkp-cta-container {
text-align: center;
margin-top: 60px;
opacity: 0;
animation: textSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.tkp-main-button {
display: inline-block;
padding: 18px 45px;
background: linear-gradient(45deg, var(–tkp-teal), var(–tkp-deep-blue));
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 15px 30px rgba(26, 95, 122, 0.3);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.tkp-main-button::after {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(60deg, transparent, rgba(255,255,255,0.2), transparent);
transform: rotate(45deg);
animation: gradientShift 3s linear infinite;
}
.tkp-main-button:hover {
background: linear-gradient(45deg, var(–tkp-gold), var(–tkp-teal));
box-shadow: 0 20px 40px var(–noor-glow);
transform: translateY(-5px);
}
.tkp-whatsapp-link {
display: block;
text-align: center;
margin-top: 25px;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
}
.tkp-whatsapp-link:hover {
color: var(–tkp-gold);
text-shadow: 0 0 10px var(–tkp-gold);
}
/* — Responsive Adjustments — */
@media (max-width: 768px) {
.tkp-section-title { font-size: 2.2rem; }
.tkp-section-subtitle { font-size: 1.1rem; margin-bottom: 40px; }
.tkp-card-grid { grid-template-columns: 1fr; gap: 25px; }
.tkp-course-showcase-container { padding: 50px 15px; }
.tkp-glass-card { padding: 25px; }
.tkp-card-header-gradient { margin: -25px -25px 20px -25px; }
}
Paths of Light in a Distracted World
Break free from the noise. Connect deeply with the Qur’an and Sunnah through structured learning and spiritual mentorship. This is beneficial knowledge that transforms the heart.
Spirituality & Connection
Surah Ad-Duha & AMA
Divine Comfort & Real-World Answers
Are you weary or waiting for a sign? Find reassurance in the Tafseer of Surah Ad-Duha, and bring your deepest questions to our “Ask Me Anything” sessions. Connect divine wisdom to your daily struggles.
Ft. Hafiz Shahid Umar
Wisdom for Youth
Surah Luqman (Men 17-25)
Timeless Guidance for the Modern Age
Navigate modern challenges—from parenting dilemmas to professional ethics—through the profound advice of Luqman the Wise. Build a character unshaken by cultural tides.
Ft. Shaykh Zahid Malik
Structured Learning
Diploma in Islamic Studies (Sisters)
A Foundation in Your Deen
A dedicated 4-month journey of deep study under qualified Alimah supervision. Move beyond surface-level knowledge and build a solid foundation for your spiritual life.
Supervision: Alimah Dr. Tahira Yousaf