/* — Core Definitions & Animations — */
:root {
–tranq-blue: #0F172A; /* Deep digital blue */
–tranq-purple: #312E81; /* Deep indigo/purple */
–tranq-gold: #FBBF24; /* Warm light/sun */
–tranq-teal: #2DD4BF; /* Calm accent */
–tranq-text: #F1F5F9; /* Off-white text */
–glass-bg: rgba(15, 23, 42, 0.6); /* Dark glass */
}
@keyframes gradientPulse {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes heavyFadeUp {
0% {
opacity: 0;
transform: translateY(50px) scale(0.98);
filter: blur(5px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes lightGlow {
0%, 100% { text-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
50% { text-shadow: 0 0 30px rgba(251, 191, 36, 0.7), 0 0 60px rgba(251, 191, 36, 0.3); }
}
/* — Main Container — */
.tranquil-container {
background: linear-gradient(135deg, var(–tranq-blue), var(–tranq-purple), #1E1B4B, var(–tranq-teal));
background-size: 300% 300%;
animation: gradientPulse 25s ease infinite;
padding: 80px 30px;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
color: var(–tranq-text);
line-height: 1.8;
border-radius: 12px;
box-shadow: inset 0 0 100px rgba(0,0,0,0.7);
overflow: hidden;
position: relative;
}
/* subtle digital noise overlay pattern */
.tranquil-container::before {
content: ”;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 200 200′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noiseFilter’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.65′ numOctaves=’3′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noiseFilter)’ opacity=’0.05’/%3E%3C/svg%3E”);
pointer-events: none;
mix-blend-mode: overlay;
}
.tranquil-wrapper {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* — Typography — */
.tranq-ayah {
text-align: center;
font-size: 1.5rem;
font-weight: 600;
font-style: italic;
color: var(–tranq-gold);
margin-bottom: 40px;
opacity: 0;
animation: heavyFadeUp 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 0.3s;
padding: 20px;
border-left: 3px solid var(–tranq-gold);
border-right: 3px solid var(–tranq-gold);
background: rgba(251, 191, 36, 0.1);
}
.tranq-title {
text-align: center;
color: white;
font-size: 3.5rem;
font-weight: 300;
margin-bottom: 2rem;
opacity: 0;
letter-spacing: 1px;
animation: heavyFadeUp 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
.tranq-highlight {
color: var(–tranq-gold);
font-weight: 600;
animation: lightGlow 3s infinite ease-in-out;
}
.tranq-intro {
font-size: 1.2rem;
margin-bottom: 50px;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
opacity: 0;
animation: heavyFadeUp 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 0.5s;
}
/* — Benefit Box — */
.tranq-box {
background: var(–glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(–tranq-teal);
border-radius: 20px;
padding: 50px;
margin: 50px 0;
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
opacity: 0;
animation: heavyFadeUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 0.8s;
}
.tranq-box-title {
font-size: 1.8rem;
color: var(–tranq-teal);
text-align: center;
margin-bottom: 35px;
}
.tranq-list {
list-style: none;
padding: 0;
}
.tranq-list li {
margin-bottom: 25px;
font-size: 1.1rem;
display: flex;
align-items: flex-start;
}
.tranq-icon {
font-size: 1.5rem;
margin-right: 20px;
color: var(–tranq-gold);
flex-shrink: 0;
margin-top: 5px;
}
/* — CTA Section — */
.tranq-cta {
text-align: center;
margin-top: 70px;
opacity: 0;
animation: heavyFadeUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 1.3s;
}
.tranq-button {
display: inline-block;
padding: 20px 60px;
background: linear-gradient(45deg, var(–tranq-teal), var(–tranq-purple));
color: white;
text-decoration: none;
font-size: 1.3rem;
font-weight: 600;
border-radius: 50px;
letter-spacing: 1px;
box-shadow: 0 10px 30px rgba(45, 212, 191, 0.3);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.tranq-button::before {
content: ”;
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: all 0.6s ease;
}
.tranq-button:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(45, 212, 191, 0.5);
background: linear-gradient(45deg, var(–tranq-purple), var(–tranq-teal));
}
.tranq-button:hover::before {
left: 100%;
}
/* Responsive */
@media (max-width: 768px) {
.tranq-title { font-size: 2.5rem; }
.tranquil-container { padding: 50px 20px; }
.tranq-box { padding: 30px; }
}
“Look! The hearts find rest but in the remembrance of Allah!”
(Surah Ar-Ra’d: 28)
(Surah Ar-Ra’d: 28)
The Tranquil Heart: Finding Peace
We are drowning in noise. The constant ping of notifications, the endless scroll of social media, and the pressure to be “always on” has left our souls exhausted. We are suffering from spiritual “brain rot” and chronic anxiety.
Are you ready to silence the chaos and reconnect with your Creator?
Workshop Focus: From Chaos to Calm
-
Diagnosing Digital Anxiety: Understand the spiritual and psychological impact of excessive screen time and noise on the Muslim heart.
-
Islamic Mindfulness (Muraqabah): Move beyond secular meditation. Learn the prophetic practice of being present with Allah in every moment.
-
The Power of Zikr: Discover practical ways to integrate remembrance into your busy day, turning mundane moments into spiritual fuel.
Your heart was created for stillness, not scrolling.
Enroll Now & Find Your Rest