The Cubing Hub Profile Card @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; font-family: 'Montserrat', sans-serif; background-color: #000; } /* Card Container - Full Width */ .profile-card { width: 100vw; min-height: 100vh; position: relative; color: white; font-family: 'Montserrat', sans-serif; overflow: hidden; } /* Background Image and Overlay */ .bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://thecubinghub.com/wp-content/uploads/2025/03/photo-1604076850742-4c7221f3101b.avif') no-repeat center center; background-size: cover; filter: brightness(2.5); z-index: -2; } .bg-overlay::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%); z-index: -1; } /* Header Section */ .profile-header { padding: 20px; text-align: right; position: relative; z-index: 2; } .options-button { display: inline-block; cursor: pointer; transition: transform 0.3s ease; } .options-button:hover { transform: rotate(90deg); } .options-button span { display: block; width: 5px; height: 5px; background-color: white; border-radius: 50%; margin: 3px; transition: all 0.3s ease; } .options-button:hover span { background-color: #f8e267; } /* Profile Content */ .profile-content { padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; min-height: calc(100vh - 60px); justify-content: center; } /* Profile Image */ .profile-image-container { margin-bottom: 30px; animation: zoomInFade 1.5s ease-out; } .profile-image { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background-color: white; padding: 5px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); transition: all 0.5s ease; position: relative; } .profile-image::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.6); animation: pulse 2.5s infinite; } .profile-image:hover { transform: scale(1.08); } .profile-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform 0.5s ease; } .profile-image:hover img { transform: scale(1.1); } /* Profile Info */ .profile-info { margin-bottom: 30px; } .profile-name { font-size: 36px; font-weight: 800; margin: 0 0 15px 0; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); letter-spacing: 1px; animation: slideInFromRight 1s ease-out; background: linear-gradient(90deg, #ffffff, #f8e267); -webkit-background-clip: text; background-clip: text; color: white; position: relative; display: inline-block; } .profile-name::after { content: ''; position: absolute; width: 50%; height: 3px; background: linear-gradient(90deg, transparent, #f8e267, transparent); bottom: -5px; left: 25%; animation: fadeIn 2s ease-out; } .profile-tagline { font-size: 18px; font-weight: 600; margin: 0; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); opacity: 0; animation: fadeInSlideUp 1.2s ease-out forwards; animation-delay: 0.5s; letter-spacing: 0.5px; } /* Holiday Club Button - Special Glow Effect */ .holiday-club-container { width: 100%; max-width: 450px; margin-bottom: 25px; animation: bounceIn 1.8s ease; position: relative; } .holiday-club-button { display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, #ff6b35, #f7931e, #ffdc00, #f7931e, #ff6b35); background-size: 400% 400%; color: white; padding: 22px 35px; border-radius: 60px; text-decoration: none; font-weight: 900; font-size: 20px; letter-spacing: 2.5px; transition: all 0.4s ease; box-shadow: 0 0 30px rgba(255, 107, 53, 0.8), 0 0 60px rgba(255, 107, 53, 0.6), 0 0 90px rgba(255, 107, 53, 0.4), 0 8px 25px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; transform: translateY(0); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); animation: gradientShift 3s ease-in-out infinite, glowPulse 2s ease-in-out infinite; border: 2px solid rgba(255, 255, 255, 0.3); cursor: pointer; } .holiday-club-button i { margin-right: 15px; font-size: 24px; animation: bounce 2s infinite; } .holiday-club-button:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 40px rgba(255, 107, 53, 1), 0 0 80px rgba(255, 107, 53, 0.8), 0 0 120px rgba(255, 107, 53, 0.6), 0 15px 40px rgba(0, 0, 0, 0.4); letter-spacing: 3px; animation: gradientShift 1.5s ease-in-out infinite, glowPulse 1s ease-in-out infinite; } .holiday-club-button:active { transform: translateY(-3px) scale(1.02); } .holiday-club-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); transition: all 0.6s ease; } .holiday-club-button:hover::before { left: 100%; } .holiday-club-button::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 60px; background: linear-gradient(45deg, #ff6b35, #f7931e, #ffdc00, #f7931e, #ff6b35); background-size: 400% 400%; z-index: -1; animation: gradientShift 3s ease-in-out infinite; filter: blur(8px); opacity: 0.7; } .holiday-tagline { font-size: 16px; color: #ffdc00; margin-top: 12px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); animation: fadeIn 2.5s ease; font-weight: 700; letter-spacing: 1px; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 30px rgba(255, 107, 53, 0.8), 0 0 60px rgba(255, 107, 53, 0.6), 0 0 90px rgba(255, 107, 53, 0.4), 0 8px 25px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 0 40px rgba(255, 107, 53, 1), 0 0 80px rgba(255, 107, 53, 0.8), 0 0 120px rgba(255, 107, 53, 0.6), 0 12px 30px rgba(0, 0, 0, 0.4); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } /* Action Buttons */ .profile-actions { width: 100%; max-width: 400px; margin-bottom: 40px; animation: fadeInUp 1.4s ease-out; } .action-button { display: flex; justify-content: space-between; align-items: center; background-color: rgba(255, 255, 255, 0.95); color: #333; padding: 14px 24px; margin-bottom: 15px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: 1.5px; transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; transform: translateY(0); } .action-button:active { transform: translateY(3px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } .action-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: all 0.5s ease; } .action-button:hover::before { left: 100%; } .action-button i { margin-right: 12px; font-size: 18px; } .whatsapp-btn:hover { background-color: #25D366; color: white; } .instagram-btn:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; } .facebook-btn:hover { background-color: #3b5998; color: white; } .internship-btn:hover { background-color: #f8e267; color: #333; } .button-options { color: #999; transition: all 0.3s ease; } .action-button:hover .button-options { color: rgba(255,255,255,0.8); } /* Social Links */ .social-links { display: flex; justify-content: center; gap: 30px; margin-top: 20px; animation: fadeIn 1.6s ease-out; } .social-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; font-size: 22px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(5px); transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .social-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,0.1); transform: scale(0); transition: all 0.5s ease; } .social-icon:hover::before { transform: scale(1.5); } .social-icon i { position: relative; z-index: 1; transition: all 0.3s ease; } .social-icon:hover i { transform: scale(1.2); } .social-icon.facebook:hover { background-color: #3b5998; box-shadow: 0 0 20px rgba(59, 89, 152, 0.7); } .social-icon.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 0 20px rgba(220, 39, 67, 0.7); } .social-icon.youtube:hover { background-color: #FF0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.7); } /* Library Selection Modal */ .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(8px); transition: all 0.3s ease; opacity: 0; } .modal.show { display: block; opacity: 1; } .modal-content { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); margin: 3% auto; padding: 40px 30px; border-radius: 20px; width: 90%; max-width: 800px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); position: relative; animation: modalFadeIn 0.5s ease-out; border: 2px solid rgba(248, 226, 103, 0.3); max-height: 90vh; overflow-y: auto; } .close-modal { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 32px; font-weight: bold; transition: all 0.3s ease; cursor: pointer; z-index: 10; } .close-modal:hover, .close-modal:focus { color: #f8e267; transform: rotate(90deg); } .modal-header { text-align: center; margin-bottom: 30px; } .modal-header h3 { margin: 0 0 10px 0; color: #fff; font-size: 32px; font-weight: 800; background: linear-gradient(90deg, #fff, #f8e267); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .modal-header p { color: #ddd; font-size: 16px; font-weight: 500; } .modal-header .location-icon { font-size: 48px; color: #f8e267; margin-bottom: 15px; animation: bounce 2s infinite; } /* Library Grid */ .library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 25px; } .library-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 25px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .library-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(248, 226, 103, 0.1), transparent); transition: all 0.5s ease; } .library-card:hover::before { left: 100%; } .library-card:hover { transform: translateY(-8px); border-color: #f8e267; box-shadow: 0 15px 35px rgba(248, 226, 103, 0.3); background: linear-gradient(135deg, rgba(248, 226, 103, 0.2) 0%, rgba(255, 107, 53, 0.1) 100%); } .library-card:active { transform: translateY(-3px); } .library-icon { font-size: 42px; color: #f8e267; margin-bottom: 15px; transition: all 0.3s ease; } .library-card:hover .library-icon { transform: scale(1.2); color: #ff6b35; } .library-name { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: 0.5px; } .library-location { font-size: 13px; color: #ccc; font-weight: 500; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); } 70% { box-shadow: 0 0 0 15px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } @keyframes zoomInFade { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } @keyframes slideInFromRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes bounceIn { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-15px);} 60% {transform: translateY(-7px);} } /* Responsive Adjustments */ @media (max-width: 600px) { .profile-name { font-size: 30px; } .profile-tagline { font-size: 16px; } .profile-image { width: 120px; height: 120px; } .action-button { padding: 12px 20px; font-size: 14px; } .holiday-club-button { padding: 18px 28px; font-size: 18px; } .social-icon { width: 45px; height: 45px; font-size: 20px; } .modal-content { margin: 10% auto; padding: 30px 20px; max-height: 85vh; } .modal-header h3 { font-size: 26px; } .library-grid { grid-template-columns: 1fr; gap: 15px; } .library-card { padding: 20px 15px; } } /* Scrollbar Styling for Modal */ .modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .modal-content::-webkit-scrollbar-thumb { background: #f8e267; border-radius: 10px; } .modal-content::-webkit-scrollbar-thumb:hover { background: #ff6b35; } The Cubing Hub Born Average Destined For Greatness LIBRARY SIGN UP Choose your library venue! WHATSAPP ⋮ INSTAGRAM ⋮ FACEBOOK ⋮ INTERNSHIP FORM ⋮ × Choose Your Library Select your preferred venue to continue registration Durbanville Library Durbanville, Cape Town Rondebosch Library Rondebosch, Cape Town Koeberg Library Koeberg, Cape Town Claremont Library Claremont, Cape Town Milnerton Library Milnerton, Cape Town Pinelands Library Pinelands, Cape Town More Venues Coming Soon! // Library URLs - UPDATE THESE WITH YOUR ACTUAL REGISTRATION LINKS const libraryData = { durbanville: 'https://tally.so/r/3yOo7X', bellville: 'YOUR_LIBRARY_2_LINK_HERE', parow: 'YOUR_LIBRARY_3_LINK_HERE', brackenfell: 'YOUR_LIBRARY_4_LINK_HERE', kuilsriver: 'YOUR_LIBRARY_5_LINK_HERE', khayelitsha: 'YOUR_LIBRARY_6_LINK_HERE', mitchellsplain: 'YOUR_LIBRARY_7_LINK_HERE', somersetwest: 'YOUR_LIBRARY_8_LINK_HERE', strand: 'YOUR_LIBRARY_9_LINK_HERE' }; document.addEventListener('DOMContentLoaded', function() { // Library Selection Modal const libraryModal = document.getElementById('libraryModal'); const holidayClubBtn = document.getElementById('holidayClubBtn'); const closeLibraryModal = document.getElementById('closeLibraryModal'); const libraryCards = document.querySelectorAll('.library-card'); // Open library selection modal holidayClubBtn.addEventListener('click', function(e) { e.preventDefault(); libraryModal.classList.add('show'); document.body.style.overflow = 'hidden'; }); // Close library modal closeLibraryModal.addEventListener('click', function() { libraryModal.classList.remove('show'); document.body.style.overflow = ''; }); // Close modal when clicking outside window.addEventListener('click', function(event) { if (event.target == libraryModal) { libraryModal.classList.remove('show'); document.body.style.overflow = ''; } }); // Handle library card clicks libraryCards.forEach(function(card) { card.addEventListener('click', function() { const url = this.getAttribute('data-url'); if (url && url !== 'COMING_SOON') { window.open(url, '_blank'); libraryModal.classList.remove('show'); document.body.style.overflow = ''; } else { alert('Registration link coming soon for this library!'); } }); }); // Enhanced holiday button animation setInterval(function() { const holidayButton = document.querySelector('.holiday-club-button'); holidayButton.style.transform = 'translateY(-10px) scale(1.08)'; holidayButton.style.boxShadow = ` 0 0 50px rgba(255, 107, 53, 1), 0 0 100px rgba(255, 107, 53, 0.9), 0 0 150px rgba(255, 107, 53, 0.8), 0 20px 50px rgba(0, 0, 0, 0.5) `; setTimeout(function() { holidayButton.style.transform = ''; holidayButton.style.boxShadow = ''; }, 1500); }, 6000); // Close modal with Escape key document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { if (libraryModal.classList.contains('show')) { libraryModal.classList.remove('show'); document.body.style.overflow = ''; } } }); });