tailwind.config = {
theme: {
extend: {
colors: {
primary: ‘#1a202c’, // Deep charcoal
secondary: ‘#f7fafc’, // Soft off-white
accent: ‘#2d6a4f’, // Earthy Green
accentHover: ‘#40916c’,
muted: ‘#718096’,
glass: ‘rgba(255, 255, 255, 0.8)’,
},
fontFamily: {
heading: [‘Cairo’, ‘sans-serif’],
body: [‘Almarai’, ‘sans-serif’],
},
}
}
}

body {
background-color: #f0f2f5;
color: #2d3748;
line-height: 1.8;
font-family: ‘Almarai’, sans-serif;
overflow-x: hidden;
}

.article-container {
max-width: 850px;
margin: 2rem auto;
background: white;
padding: 3rem 2.5rem;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
.article-container {
margin: 0;
padding: 1.5rem;
border-radius: 0;
}
}

.meta-section {
background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
border-right: 4px solid #2d6a4f;
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 2.5rem;
}

.article-body p {
margin-bottom: 1.5rem;
font-size: 1.15rem;
text-align: justify;
color: #4a5568;
}

.image-wrapper {
margin: 2.5rem 0;
text-align: center;
transition: transform 0.3s ease;
}

.image-wrapper:hover {
transform: translateY(-5px);
}

.image-wrapper img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
display: block;
margin: 0 auto;
}

.accent-link {
color: #2d6a4f;
text-decoration: none;
font-weight: 700;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}

.accent-link:hover {
color: #40916c;
border-bottom: 2px solid #40916c;
}

h1 {
line-height: 1.3;
letter-spacing: -0.02em;
}

.fade-in {
animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Responsive spacing for smaller screens */
@media (max-width: 640px) {
h1 { font-size: 1.875rem !important; }
.article-body p { font-size: 1.05rem; }
}

document.addEventListener(‘DOMContentLoaded’, () => {
const images = document.querySelectorAll(‘img’);
const observerOptions = {
threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘fade-in’);
observer.unobserve(entry.target);
}
});
}, observerOptions);

images.forEach(img => {
observer.observe(img);
});
});