/* ===== ANIMATED CATEGORY HEADER ===== */ .category-header { position: relative; text-align: center; padding: 140px 24px 100px; overflow: hidden; z-index: 2; } .category-header-content { position: relative; z-index: 3; } /* Animated Gradient Title */ .category-header-title { font-family: 'Switzer', sans-serif; font-weight: 800; font-size: clamp(56px, 6vw, 90px); line-height: 1.05; text-transform: none; letter-spacing: -0.5px; background: linear-gradient(120deg, #FF6F5E, #FF866B, #C84573, #FF4E4E, #FF6F5E); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: mdmGradientFlow 8s ease-in-out infinite alternate, mdmGlowPulse 5s ease-in-out infinite alternate; display: inline-block; filter: drop-shadow(0 0 18px rgba(255, 102, 90, 0.35)); margin-bottom: 20px; } /* Soft Gradient Movement */ @keyframes mdmGradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Gentle Glow Pulse */ @keyframes mdmGlowPulse { 0% { filter: drop-shadow(0 0 8px rgba(255,111,94,0.3)); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(255,134,107,0.55)); transform: scale(1.02); } 100% { filter: drop-shadow(0 0 10px rgba(255,78,78,0.4)); transform: scale(1); } } /* Subtitle */ .category-header-subtitle { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.7; color: rgba(255,255,255,0.9); margin: 0 auto; max-width: 720px; opacity: 0; transform: translateY(20px); animation: fadeUp 1.6s ease forwards 0.6s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* Optional: floating background lights for added atmosphere */ .category-header::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 30%, rgba(255,111,94,0.1), rgba(200,69,115,0.08), transparent 80%); filter: blur(100px); z-index: 0; animation: ambientMove 14s ease-in-out infinite alternate; } @keyframes ambientMove { 0% { transform: translate(0, 0) scale(1); opacity: 0.4; } 100% { transform: translate(5%, -5%) scale(1.1); opacity: 0.6; } }
Discover all posts under this category, curated by MDM Media.
No posts found in this category yet.