/* Your custom styles here */ /* ===== FLOATING BADGES ANIMATION ===== */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 77, 90,0.15); } 50% { box-shadow: 0 0 40px rgba(255, 77, 90,0.3); } } .badge-float-1 { animation: float 3s ease-in-out infinite; } .badge-float-2 { animation: floatSlow 4s ease-in-out infinite 0.5s; } .badge-float-3 { animation: float 3.5s ease-in-out infinite 1s; } .badge-float-4 { animation: floatSlow 3.8s ease-in-out infinite 0.3s; } /* ===== GLOW EFFECTS ===== */ .glow-green { box-shadow: 0 0 30px rgba(255, 77, 90, 0.2), 0 0 60px rgba(255, 77, 90, 0.1); } /* ===== VIDEO CARD STYLES ===== */ .video-card-wrapper { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 77, 90, 0.25); background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%); box-shadow: 0 0 0.5px rgba(255, 77, 90, 0.5), 0 0 30px rgba(255, 77, 90, 0.08), 0 20px 60px rgba(0, 0, 0, 0.5); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .video-card-wrapper:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 0 1px rgba(255, 77, 90, 0.8), 0 0 50px rgba(255, 77, 90, 0.15), 0 30px 80px rgba(0, 0, 0, 0.6); border-color: rgba(255, 77, 90, 0.5); } /* ===== BADGE STYLES ===== */ .stat-badge { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-radius: 14px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); transition: transform 0.3s ease; } .stat-badge:hover { transform: scale(1.05); } /* ===== TAG PILLS ===== */ .tag-pill { display: inline-flex; align-items: center; width: 148px; height: 48px; justify-content: center; color: #FFF; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 120%; text-transform: uppercase; border-radius: 50px; border: 1px solid #FF2E88; background: #2A2730; box-shadow: 0 0 7.5px 0 rgba(0, 0, 0, 0.25); transition: all 0.3s ease; } .tag-pill:hover { background: rgba(255, 77, 90, 0.15); border-color: #FF2E88; transform: translateY(-1px); } /* ===== HIGHLIGHT TEXT ===== */ .highlight-green { color: #FF2E88; font-weight: 600; } /* ===== STATS NUMBERS ===== */ .stat-number { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -1px; background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 13px; color: #888; margin-top: 6px; font-weight: 500; } /* ===== DIVIDER ===== */ .section-divider { height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.50) 0%, rgba(255, 122, 47, 0.50) 50.48%, rgba(0, 0, 0, 0.50) 100%); margin: 32px 0; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .stat-number { font-size: 36px; } } @media (max-width: 768px) { .stat-number { font-size: 32px; } .video-card-wrapper { border-radius: 16px; } }
/* Box 2 & 3 - Dark with hover */ .box-dark { background: rgb(28 210 154 / 10%); backdrop-filter: blur(4px); cursor: pointer; fill: rgb(28 210 154 / 10%); filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.25)); } .box-dark::before { content: ''; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255, 122, 47,0.25); pointer-events: none; transition: opacity 0.3s ease; } .box-dark::after { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, #ff7a2f 0%, #14a070 100%); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .box-dark:hover::before { opacity: 0; } .box-dark:hover::after { opacity: 1; } .box-dark:hover .hover-border { opacity: 1; } .hover-border { position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .box-content { position: relative; z-index: 2; } /* Text transitions */ .text-mint { color: #FF2E88; transition: color 0.3s ease; } .text-white-soft { color: rgba(255,255,255,0.6); transition: color 0.3s ease; } .text-black-soft { color: rgba(0,0,0,0.7); } .box-dark:hover .text-mint { color: #000; } .box-dark:hover .text-white-soft { color: rgba(0,0,0,0.7); } .box-dark:hover .text-white-main { color: #000; } .box-dark:hover .icon-stroke { stroke: #000; } .box-dark:hover .icon-fill { fill: #000; } .icon-stroke { transition: stroke 0.3s ease; } .icon-fill { transition: fill 0.3s ease; }