/* ============================================================ Dr. Zakir HM — Public Website Styles (public.css) Hero, Sections, Pages ============================================================ */ /* ============================================================ HERO SECTION ============================================================ */ .hero { position: relative; min-height: auto; display: flex; align-items: center; background: var(--gradient-hero); overflow: hidden; padding-top: var(--navbar-height); padding-bottom: 0; } .hero-bg-shapes { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; } .main-banner-swiper picture { display: block; width: 100%; height: auto; } .banner-img { width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: center center; display: block; } @media (max-width: 768px) { .main-banner-swiper picture { height: auto; } .banner-img { width: 100%; height: auto; max-height: none; object-fit: cover; display: block; } } .hero-shape { position: absolute; border-radius: var(--radius-full); opacity: 0.1; } .hero-shape-1 { width: 400px; height: 400px; background: var(--primary); top: -100px; right: -100px; filter: blur(80px); } .hero-shape-2 { width: 300px; height: 300px; background: var(--secondary); bottom: -80px; left: -80px; filter: blur(60px); } .hero-shape-3 { width: 200px; height: 200px; background: var(--accent-pink); top: 40%; right: 30%; filter: blur(80px); opacity: 0.06; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; position: relative; z-index: 2; } .hero-text { max-width: 600px; } .hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); background: var(--white); border: var(--border-light); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--primary); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); letter-spacing: 0.1em; text-transform: uppercase; } .hero-badge i { color: var(--accent-gold); } .hero-name { font-size: var(--text-6xl); font-family: var(--font-heading); font-weight: 800; color: var(--gray-900); margin-bottom: var(--space-4); line-height: 1.1; } .hero-name span { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-phd { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--primary-50); border-radius: var(--radius-full); color: var(--primary); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-4); } .hero-award { margin-bottom: var(--space-6); } .hero-award-title { font-family: var(--font-hindi); font-size: var(--text-2xl); font-weight: 700; color: var(--primary-dark); margin-bottom: var(--space-1); } .hero-award-subtitle { font-family: var(--font-hindi); font-size: var(--text-base); color: var(--gray-500); font-weight: 500; } .hero-bio { font-size: var(--text-lg); color: var(--gray-600); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); } .hero-buttons { display: flex; gap: var(--space-4); flex-wrap: wrap; } .hero-image { display: flex; align-items: center; justify-content: center; position: relative; } .hero-portrait { position: relative; z-index: 2; } .hero-portrait img { width: 420px; height: 500px; object-fit: cover; border-radius: var(--radius-3xl); box-shadow: var(--shadow-2xl); } .hero-portrait-glow { position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; background: var(--gradient-primary); border-radius: var(--radius-3xl); opacity: 0.15; z-index: -1; filter: blur(30px); } .hero-floating-card { position: absolute; background: var(--white); border-radius: var(--radius-xl); padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-3); z-index: 3; animation: float 4s ease-in-out infinite; } .hero-floating-card-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); } .hero-float-books { bottom: 60px; left: -30px; } .hero-float-books .hero-floating-card-icon { background: #DBEAFE; color: var(--secondary); } .hero-float-award { top: 60px; right: -20px; } .hero-float-award .hero-floating-card-icon { background: #FEF3C7; color: var(--accent-gold); } .hero-float-research { bottom: 180px; right: -40px; } .hero-float-research .hero-floating-card-icon { background: #D1FAE5; color: var(--accent-emerald); } /* ---- Hero Video Background ---- */ /* ---- Banner Text Overlay ---- */ .banner-overlay { padding: 40px; } .banner-title { font-size: 3.2rem; } .banner-subtitle { font-size: 1.3rem; } .hero-video-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 0; } .hero-video-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.08; } /* ============================================================ AWARD SECTION ============================================================ */ .award-section { background: var(--gradient-hero); position: relative; overflow: hidden; } .award-card { max-width: 800px; margin: 0 auto; background: var(--white); border-radius: var(--radius-3xl); padding: var(--space-12); box-shadow: var(--shadow-xl); text-align: center; position: relative; overflow: hidden; } .award-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-award); } .award-icon { width: 80px; height: 80px; margin: 0 auto var(--space-6); background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--accent-gold); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2); } .award-title { font-family: var(--font-hindi); font-size: var(--text-3xl); font-weight: 700; color: var(--gray-900); margin-bottom: var(--space-2); } .award-subtitle { font-family: var(--font-hindi); font-size: var(--text-lg); color: var(--gray-500); margin-bottom: var(--space-6); } .award-description { font-size: var(--text-base); color: var(--gray-600); max-width: 500px; margin: 0 auto var(--space-6); line-height: var(--leading-relaxed); } .award-image { max-width: 400px; margin: 0 auto var(--space-6); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); } .award-image img { width: 100%; height: auto; } /* ============================================================ BIO / ABOUT SECTION ============================================================ */ .bio-section { background: var(--white); } .bio-content { display: grid; grid-template-columns: 350px 1fr; gap: var(--space-12); align-items: start; } .bio-image-wrapper { position: relative; } .bio-image { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); } .bio-image img { width: 100%; height: 420px; object-fit: cover; } .bio-image-accent { position: absolute; bottom: -12px; right: -12px; width: 100%; height: 100%; background: var(--gradient-primary); border-radius: var(--radius-2xl); opacity: 0.15; z-index: -1; } .bio-text h3 { font-size: var(--text-3xl); margin-bottom: var(--space-2); } .bio-designation { color: var(--primary); font-weight: 600; margin-bottom: var(--space-6); font-size: var(--text-lg); } .bio-description { color: var(--gray-600); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); } .bio-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } .bio-info-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--gray-50); border-radius: var(--radius-xl); } .bio-info-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--primary-100); color: var(--primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .bio-info-label { font-size: var(--text-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; } .bio-info-value { font-weight: 600; color: var(--gray-800); font-size: var(--text-sm); } /* ============================================================ STATISTICS SECTION ============================================================ */ .stats-section { background: var(--gradient-hero); } .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); } .stat-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-8) var(--space-6); text-align: center; box-shadow: var(--shadow-card); transition: all var(--transition-base); border: var(--border-light); } .stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .stat-icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); background: var(--primary-50); color: var(--primary); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); } .stat-value { font-size: var(--text-4xl); font-weight: 800; color: var(--gray-900); font-family: var(--font-body); margin-bottom: var(--space-1); } .stat-value .counter-suffix { font-size: var(--text-2xl); color: var(--primary); } .stat-label { font-size: var(--text-sm); color: var(--gray-500); font-weight: 500; } /* ============================================================ JOURNEY / TIMELINE ============================================================ */ .timeline { position: relative; max-width: 800px; margin: 0 auto; padding-left: 60px; } .timeline::before { content: ''; position: absolute; top: 0; left: 29px; width: 2px; height: 100%; background: var(--primary-200); } .timeline-item { position: relative; padding-bottom: var(--space-10); } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -41px; top: 4px; width: 22px; height: 22px; background: var(--white); border: 3px solid var(--primary); border-radius: var(--radius-full); z-index: 1; } .timeline-item:first-child .timeline-dot, .timeline-item:last-child .timeline-dot { background: var(--primary); box-shadow: 0 0 0 6px var(--primary-100); } .timeline-year { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--primary-100); color: var(--primary-700); font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-full); margin-bottom: var(--space-3); } .timeline-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); border: var(--border-light); transition: all var(--transition-base); } .timeline-card:hover { box-shadow: var(--shadow-card-hover); transform: translateX(4px); } .timeline-card h4 { font-size: var(--text-xl); margin-bottom: var(--space-2); font-family: var(--font-body); font-weight: 700; } .timeline-card .timeline-institution { color: var(--primary); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); } .timeline-card p { color: var(--gray-600); font-size: var(--text-sm); line-height: var(--leading-relaxed); } /* ============================================================ BOOK CARDS ============================================================ */ .books-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .book-card { background: var(--white); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); border: var(--border-light); transition: all var(--transition-base); } .book-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .book-cover { position: relative; height: 280px; overflow: hidden; background: var(--gradient-hero); } .book-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .book-card:hover .book-cover img { transform: scale(1.05); } .book-cover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%); opacity: 0; transition: opacity var(--transition-base); } .book-card:hover .book-cover-overlay { opacity: 1; } .book-category-badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--white); color: var(--primary); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } .book-info { padding: var(--space-5); } .book-title { font-size: var(--text-lg); font-weight: 700; color: var(--gray-900); margin-bottom: var(--space-2); font-family: var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .book-author { font-size: var(--text-sm); color: var(--primary); font-weight: 500; margin-bottom: var(--space-2); } .book-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--gray-500); margin-bottom: var(--space-3); } .book-description { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--leading-relaxed); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-4); } .book-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--primary); transition: gap var(--transition-fast); } .book-link:hover { gap: var(--space-3); } /* ============================================================ BOOK DETAILS PAGE ============================================================ */ .book-details-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-10); align-items: start; } .book-details-cover { width: 100%; } .book-details-cover .card { overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); border: var(--border-light); background: var(--white); } .book-details-cover img { width: 100%; height: auto; display: block; object-fit: cover; } .book-details-info { display: flex; flex-direction: column; } .book-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .book-details-desc { color: var(--gray-700); line-height: var(--leading-relaxed); font-size: var(--text-base); margin-bottom: var(--space-8); word-break: break-word; } .book-details-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; } @media (max-width: 900px) { .book-details-grid { grid-template-columns: 1fr; gap: var(--space-8); } .book-details-cover { max-width: 320px; margin: 0 auto; } } @media (max-width: 480px) { .book-details-grid { grid-template-columns: 1fr; gap: var(--space-6); } .book-details-cover { max-width: 260px; margin: 0 auto; } .book-meta-grid { grid-template-columns: 1fr; } .book-details-actions { flex-direction: column; width: 100%; } .book-details-actions .btn { width: 100%; justify-content: center; } } /* ============================================================ ARTICLE DETAIL PAGE ============================================================ */ .article-detail-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-card); border: var(--border-light); } .article-detail-content { color: #374151; font-size: 1.125rem; line-height: 1.85; font-family: var(--font-body); } .article-detail-content h1, .article-detail-content h2, .article-detail-content h3, .article-detail-content h4 { color: #111827; font-family: var(--font-body); font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.35; } .article-detail-content h2 { font-size: 1.55rem; border-bottom: 2px solid var(--primary-100); padding-bottom: 6px; margin-top: 2.2rem; } .article-detail-content h3 { font-size: 1.3rem; margin-top: 1.8rem; } .article-detail-content p { margin-bottom: 1.35rem; } .article-detail-content strong, .article-detail-content b { color: #111827; font-weight: 700; } .article-detail-content a { color: var(--primary); text-decoration: underline; font-weight: 600; transition: color var(--transition-fast); } .article-detail-content a:hover { color: var(--primary-dark); } .article-detail-content ul, .article-detail-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .article-detail-content li { margin-bottom: 0.5rem; line-height: 1.7; } .article-detail-content blockquote { border-left: 4px solid var(--primary); background: var(--primary-50); padding: 1rem 1.25rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: 1.5rem 0; font-style: italic; color: var(--primary-800); } /* ============================================================ ARTICLE CARDS ============================================================ */ .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .article-card { background: var(--white); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); border: var(--border-light); transition: all var(--transition-base); } .article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .article-image { height: 200px; overflow: hidden; background: var(--gradient-hero); } .article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .article-card:hover .article-image img { transform: scale(1.05); } .article-body { padding: var(--space-5); } .article-category { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--primary-50); color: var(--primary); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); margin-bottom: var(--space-3); } .article-title { font-size: var(--text-xl); font-weight: 700; color: var(--gray-900); margin-bottom: var(--space-3); font-family: var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-excerpt { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--leading-relaxed); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-4); } .article-footer { display: flex; align-items: center; justify-content: space-between; } .article-date { font-size: var(--text-xs); color: var(--gray-500); } .article-read-more { font-size: var(--text-sm); font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: var(--space-1); } /* ============================================================ GALLERY ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .gallery-item { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 1; cursor: pointer; box-shadow: var(--shadow-sm); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .gallery-item:hover img { transform: scale(1.1); } .gallery-item-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(124, 58, 237, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-base); } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item-overlay i { color: var(--white); font-size: 1.5rem; } /* ---- Gallery Lightbox ---- */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-8); } .lightbox.active { display: flex; } .lightbox img { max-width: 90%; max-height: 85vh; border-radius: var(--radius-lg); } .lightbox-close { position: absolute; top: var(--space-6); right: var(--space-6); background: var(--white); border: none; width: 48px; height: 48px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--text-xl); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--white); border: none; width: 48px; height: 48px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--text-lg); } .lightbox-prev { left: var(--space-6); } .lightbox-next { right: var(--space-6); } /* ============================================================ AWARDS PAGE & SPOTLIGHT ============================================================ */ .award-spotlight-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(24px) saturate(180%); border-radius: var(--radius-3xl); border: 1px solid rgba(245, 158, 11, 0.22); box-shadow: 0 20px 60px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02); overflow: hidden; margin-bottom: var(--space-12); position: relative; transition: all var(--transition-base); } .award-spotlight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #F59E0B 0%, #D97706 50%, #7C3AED 100%); } .award-spotlight-grid { display: grid; grid-template-columns: 460px 1fr; gap: var(--space-8); align-items: start; padding: var(--space-8); } .award-spotlight-media { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); background: var(--gray-900); } .award-spotlight-media img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform var(--transition-slow); } .award-spotlight-card:hover .award-spotlight-media img { transform: scale(1.02); } .award-spotlight-badge { position: absolute; top: var(--space-4); left: var(--space-4); background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95)); color: var(--white); padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4); backdrop-filter: blur(8px); } .award-spotlight-info { display: flex; flex-direction: column; } .award-meta-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .award-year-badge { background: #FEF3C7; color: #B45309; border: 1px solid rgba(245, 158, 11, 0.3); padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; } .award-authority-badge { background: var(--primary-50); color: var(--primary); border: 1px solid rgba(124, 58, 237, 0.2); padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; } .award-spotlight-title { font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 800; color: var(--gray-900); line-height: 1.25; margin-bottom: var(--space-2); } .award-spotlight-subtitle { font-size: var(--text-base); color: #D97706; font-weight: 600; margin-bottom: var(--space-6); display: flex; align-items: center; gap: 8px; } .award-spotlight-desc { color: var(--gray-700); font-size: 1.05rem; line-height: 1.85; margin-bottom: var(--space-6); } .award-spotlight-desc p { margin-bottom: 1.2rem; } .award-spotlight-desc p:last-child { margin-bottom: 0; } .award-spotlight-footer { padding-top: var(--space-5); border-top: 1px solid rgba(229, 231, 235, 0.7); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .award-verifier { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--accent-emerald); background: #ECFDF5; border: 1px solid rgba(16, 185, 129, 0.25); padding: 6px 14px; border-radius: var(--radius-full); } /* Secondary Awards Grid */ .awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); justify-content: center; } .award-item-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-card); border: var(--border-light); transition: all var(--transition-base); position: relative; overflow: hidden; display: flex; flex-direction: column; } .award-item-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-award); } .award-item-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(245, 158, 11, 0.3); } .award-item-media { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-5); background: var(--gray-100); } .award-item-media img { width: 100%; height: 220px; object-fit: cover; display: block; } .award-item-icon { width: 56px; height: 56px; margin-bottom: var(--space-4); background: #FEF3C7; color: var(--accent-gold); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .award-item-title { font-size: var(--text-lg); font-weight: 700; color: var(--gray-900); margin-bottom: var(--space-2); } .award-item-year { font-size: var(--text-xs); color: #D97706; font-weight: 700; margin-bottom: var(--space-2); } .award-item-desc { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--leading-relaxed); } @media (max-width: 960px) { .award-spotlight-grid { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-6); } } /* ============================================================ MEDIA SECTION ============================================================ */ .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .media-card { background: var(--white); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); border: var(--border-light); transition: all var(--transition-base); } .media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .media-card-image { height: 200px; overflow: hidden; background: var(--gradient-hero); position: relative; } .media-card-image img { width: 100%; height: 100%; object-fit: cover; } .media-type-badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--primary); color: var(--white); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); text-transform: uppercase; } .media-card-body { padding: var(--space-5); } /* ============================================================ CONTACT SECTION ============================================================ */ .contact-section { background: var(--gradient-hero); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); } .contact-info-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-card); } .contact-info-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-light); } .contact-info-item:last-child { border-bottom: none; } .contact-info-icon { width: 48px; height: 48px; flex-shrink: 0; background: var(--primary-50); color: var(--primary); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); } .contact-form-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-card); } /* ============================================================ QUOTES SECTION ============================================================ */ .quotes-section { background: var(--white); } .quote-card { background: var(--gradient-hero); border-radius: var(--radius-2xl); padding: var(--space-10); text-align: center; position: relative; } .quote-card::before { content: '"'; position: absolute; top: var(--space-4); left: var(--space-8); font-size: 6rem; font-family: var(--font-heading); color: var(--primary-200); line-height: 1; opacity: 0.5; } .quote-text { font-family: var(--font-heading); font-size: var(--text-2xl); font-style: italic; color: var(--gray-800); margin-bottom: var(--space-4); line-height: var(--leading-relaxed); } .quote-author { font-size: var(--text-sm); color: var(--primary); font-weight: 600; } /* ============================================================ FEATURED SECTION (Home) ============================================================ */ .featured-books-section, .featured-articles-section { background: var(--white); } .section-action { text-align: center; margin-top: var(--space-8); } /* Rich Text Images (TinyMCE/HTML) */ .bio-description img, .section [data-aos] img, .article-detail-content img { max-width: 100%; height: auto !important; border-radius: var(--radius-lg); margin: var(--space-4) 0; box-shadow: var(--shadow-sm); } /* ============================================================ PAGE HEADER (Inner Pages) ============================================================ */ .page-header { background: var(--gradient-hero); padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-16); text-align: center; position: relative; overflow: hidden; } .page-header-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .page-header-shape { position: absolute; border-radius: var(--radius-full); opacity: 0.08; } .page-header-shape-1 { width: 300px; height: 300px; background: var(--primary); top: -50%; right: 10%; filter: blur(60px); } .page-header-shape-2 { width: 200px; height: 200px; background: var(--secondary); bottom: -30%; left: 15%; filter: blur(50px); } .page-header-content { position: relative; z-index: 1; } .page-header h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); } .page-header p { font-size: var(--text-lg); color: var(--gray-500); max-width: 600px; margin: 0 auto; } /* ============================================================ FILTER BAR ============================================================ */ .filter-bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); padding: var(--space-4) var(--space-6); background: var(--white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); } .filter-search { flex: 1; min-width: 200px; position: relative; } .filter-search input { width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10); border: 2px solid var(--gray-200); border-radius: var(--radius-xl); font-size: var(--text-sm); outline: none; transition: border-color var(--transition-fast); } .filter-search input:focus { border-color: var(--primary); } .filter-search i { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--gray-400); } .filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; } .filter-tab { padding: var(--space-2) var(--space-4); background: var(--gray-100); color: var(--gray-600); border: none; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); font-family: var(--font-body); } .filter-tab:hover, .filter-tab.active { background: var(--primary); color: var(--white); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--gradient-footer); color: var(--gray-300); position: relative; padding-top: var(--space-16); } .footer-wave { position: absolute; top: -1px; left: 0; right: 0; color: var(--gray-800); line-height: 0; } .footer-wave svg { width: 100%; height: 60px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-10); padding-bottom: var(--space-10); } .footer-title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--white); margin-bottom: var(--space-3); } .footer-desc { font-size: var(--text-sm); color: var(--gray-400); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .footer-social { display: flex; gap: var(--space-3); } .footer-social-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: var(--gray-400); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .footer-social-link:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); } .footer-col-title { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--white); margin-bottom: var(--space-5); } .footer-links li { margin-bottom: var(--space-3); } .footer-links a { color: var(--gray-400); font-size: var(--text-sm); transition: all var(--transition-fast); } .footer-links a:hover { color: var(--primary-light); padding-left: var(--space-2); } .footer-contact li { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--text-sm); } .footer-contact i { color: var(--primary-light); margin-top: 3px; } .footer-contact a { color: var(--gray-400); } .footer-contact a:hover { color: var(--primary-light); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-6) 0; text-align: center; } .footer-copyright { font-size: var(--text-sm); color: var(--gray-500); } /* ============================================================ CTA SECTION (Home) ============================================================ */ .cta-section { background: var(--gradient-primary); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: rgba(255,255,255,0.05); border-radius: var(--radius-full); } .cta-section h2 { color: var(--white); font-size: var(--text-4xl); margin-bottom: var(--space-4); -webkit-text-fill-color: var(--white); } .cta-section p { color: rgba(255, 255, 255, 0.85); font-size: var(--text-lg); max-width: 600px; margin: 0 auto var(--space-8); } .cta-btn { background: var(--white); color: var(--primary); font-weight: 700; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); color: var(--primary); }