/* ================================= VIZAG JAMHUB - INDEX ================================= */ /* ================================================================= CINEMATIC LIVE TEXT ================================================================= */ .typing-text { position: fixed; top: 68%; left: 51.5%; width: 100%; transform: translateX(-50%); text-align: center; font-size: 34px; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,0.92); transition: opacity 0.8s ease; z-index: 5; pointer-events: none; text-shadow: 0 0 10px rgba(255,255,255,0.12), 0 0 20px rgba(0,212,255,0.25), 0 0 40px rgba(0,212,255,0.12); animation: glassFloat 8s ease-in-out infinite; } /* ================================= LIVE TEXT FLOAT ANIMATION ================================= */ @keyframes glassFloat { 0% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } 100% { transform: translateX(-50%) translateY(0); } } /* ================================= TYPING TEXT TRANSITIONS ================================= */ #typing { transition: opacity 0.18s ease, filter 0.18s ease; } .show { opacity: 1; filter: blur(0); } .hide { opacity: 0; filter: blur(10px); } /* ================================================================= HERO ================================================================= */ .hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; } .hero h1 { font-size: 60px; } .hero p { font-size: 22px; } /* ================================================================= HOMEPAGE SECTIONS ================================================================= */ section { width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 60px 20px; } /* ================================================================= INDEX - SING ALONG EXPERIENCE ================================================================= */ .sing-along-card { position: relative; width: 100%; max-width: 1050px; min-height: 260px; padding: 40px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: white; text-align: center; text-decoration: none; background: linear-gradient( 135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04) ); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.18); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.04), 0 15px 45px rgba(0,0,0,0.25); transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease; } /* ================================= MOVING GLASS LIGHT ================================= */ .sing-along-card::before { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.14), transparent ); transform: rotate(20deg); transition: left 0.8s ease; } .sing-along-card:hover::before { left: 130%; } /* ================================= CYAN BACKGROUND GLOW ================================= */ .sing-along-card::after { content: ""; position: absolute; left: 50%; bottom: -120px; width: 500px; height: 200px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(0,212,255,0.18), transparent 70% ); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; opacity: 0.5; } /* ================================= CARD HOVER ================================= */ .sing-along-card:hover { transform: translateY(-8px) scale(1.01); background: linear-gradient( 135deg, rgba(255,255,255,0.18), rgba(0,212,255,0.06) ); border-color: rgba(0,212,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 15px rgba(0,212,255,0.20), 0 0 40px rgba(0,212,255,0.12), 0 20px 50px rgba(0,0,0,0.30); } .sing-along-card:hover::after { opacity: 1; transform: translateX(-50%) scale(1.2); } /* ================================= MICROPHONE ================================= */ .sing-along-icon { position: relative; z-index: 2; width: 62px; height: 62px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; font-size: 27px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.20); border-radius: 50%; transition: transform 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; } .sing-along-card:hover .sing-along-icon { color: #00d4ff; transform: scale(1.12); box-shadow: 0 0 15px rgba(0,212,255,0.30), 0 0 35px rgba(0,212,255,0.15); animation: microphonePulse 1.2s ease-in-out infinite; } @keyframes microphonePulse { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.18); } } /* ================================= TITLE ================================= */ .sing-along-card h2 { position: relative; z-index: 2; margin: 0 0 8px; font-size: 32px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; transition: letter-spacing 0.4s ease, text-shadow 0.4s ease; } .sing-along-card:hover h2 { letter-spacing: 7px; text-shadow: 0 0 15px rgba(0,212,255,0.35); } /* ================================= LANGUAGES ================================= */ .sing-along-languages { position: relative; z-index: 2; margin-bottom: 12px; color: #00d4ff; font-size: 14px; letter-spacing: 2px; } /* ================================= DESCRIPTION ================================= */ .sing-along-card p { position: relative; z-index: 2; margin: 0 0 18px; color: rgba(255,255,255,0.72); font-size: 16px; } /* ================================= START SINGING ACTION ================================= */ .sing-along-action { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 600; transition: color 0.3s ease; } .sing-along-action span { display: inline-block; transition: transform 0.3s ease; } .sing-along-card:hover .sing-along-action { color: #00d4ff; } .sing-along-card:hover .sing-along-action span { transform: translateX(8px); } /* ================================= MINI MUSIC EQUALIZER ================================= */ .sing-along-equalizer { position: relative; z-index: 2; height: 28px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; } .sing-along-equalizer span { width: 3px; height: 7px; background: rgba(255,255,255,0.65); border-radius: 10px; transition: background 0.3s ease; } /* ================================= EQUALIZER ANIMATION ================================= */ .sing-along-card:hover .sing-along-equalizer span { background: #00d4ff; animation: singEqualizer 0.65s ease-in-out infinite alternate; } .sing-along-card:hover .sing-along-equalizer span:nth-child(1) { animation-delay: 0s; } .sing-along-card:hover .sing-along-equalizer span:nth-child(2) { animation-delay: 0.15s; } .sing-along-card:hover .sing-along-equalizer span:nth-child(3) { animation-delay: 0.30s; } .sing-along-card:hover .sing-along-equalizer span:nth-child(4) { animation-delay: 0.10s; } .sing-along-card:hover .sing-along-equalizer span:nth-child(5) { animation-delay: 0.25s; } @keyframes singEqualizer { from { height: 6px; } to { height: 27px; } } /* ================================================================= INDEX UPCOMING SHOWS ================================================================= */ .index-shows-page { width: 100%; max-width: none; padding: 75px 0 90px; text-align: center; overflow: hidden; } /* ================================= HEADING ================================= */ .index-shows-heading { position: relative; z-index: 10; margin-bottom: 25px; text-align: center; } .index-shows-heading h1 { margin: 0; color: white; font-size: 30px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; } /* ================================================================= STAGE ================================================================= */ .index-shows-stage { position: relative; width: 100%; height: 570px; overflow: hidden; perspective: 1500px; } /* ================================================================= CAROUSEL ================================================================= */ .index-shows { position: relative; width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d; touch-action: pan-y; } /* ================================================================= SHOW ITEM ================================================================= */ .index-show-item { position: absolute; top: 18px; left: 50%; width: 300px; height: 485px; opacity: 0; cursor: pointer; transform-origin: center center; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(.22,.61,.36,1), opacity 0.75s ease, filter 0.75s ease; will-change: transform, opacity, filter; } /* ================================================================= SHOW CARD ================================================================= */ .index-show-card { position: relative; width: 100%; height: 100%; padding: 16px; display: flex; flex-direction: column; overflow: hidden; color: white; background: rgba(20,20,20,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid white; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,0.20); transition: border-color 0.25s ease, box-shadow 0.25s ease; } /* ================================================================= POSTER ================================================================= */ .index-show-poster-frame { position: relative; width: 100%; height: 235px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(0,0,0,0.20); box-shadow: 0 6px 18px rgba(0,0,0,0.25); } .index-show-poster { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: 8px; filter: brightness(0.94) contrast(1.04); transition: filter 0.35s ease; pointer-events: none; } .index-show-item.active .index-show-poster { filter: brightness(1) contrast(1.05); } .index-show-poster-empty { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.40); font-size: 15px; font-weight: 600; letter-spacing: 5px; } /* ================================================================= INFORMATION ================================================================= */ .index-show-info { width: 100%; min-height: 0; padding-top: 18px; display: flex; flex: 1; flex-direction: column; text-align: center; } .index-show-info h2 { margin: 0 0 15px; overflow: hidden; color: rgba(255,255,255,0.92); font-size: 23px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } /* ================================= DATE ================================= */ .index-show-date { margin: 5px 0 !important; overflow: hidden; color: rgba(255,255,255,0.78) !important; font-size: 16px !important; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .index-show-date i { width: 20px; margin-right: 5px; color: rgba(255,255,255,0.78) !important; font-size: 15px; } /* ================================= PRICE ================================= */ .index-show-price { margin-top: 10px !important; color: rgba(255,255,255,0.92) !important; font-size: 22px !important; font-weight: 600; } /* ================================================================= BUY TICKETS ================================================================= */ .index-show-action { width: 100%; margin-top: auto; padding-top: 8px; } .index-ticket-btn { width: 100%; height: 36px; padding: 0 15px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.92); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; line-height: 1; text-transform: uppercase; cursor: pointer; background: rgba(20,20,20,0.25); border: 1px solid rgba(255,255,255,0.70); border-radius: 8px; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .index-ticket-btn:hover { color: #00d4ff; border-color: #00d4ff; box-shadow: 0 0 10px rgba(0,212,255,0.35), 0 0 25px rgba(0,212,255,0.15); } /* ================================================================= ACTIVE ================================================================= */ .index-show-item.active { z-index: 10; opacity: 1; filter: brightness(1); transform: translateX(-50%) translateZ(70px) rotateY(0deg) scale(1); } .index-show-item.active .index-show-card { border-color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.25); } /* ================================================================= ACTIVE HOVER ================================================================= */ .index-show-item.active:hover .index-show-card { border-color: #00d4ff; box-shadow: 0 0 10px rgba(0,212,255,0.35), 0 0 25px rgba(0,212,255,0.18); } /* ================================================================= LEFT ================================================================= */ .index-show-item.left { z-index: 7; opacity: 0.72; filter: brightness(0.72); transform: translateX( calc(-50% - 310px) ) translateZ(-90px) rotateY(26deg) scale(0.88); } /* ================================================================= RIGHT ================================================================= */ .index-show-item.right { z-index: 7; opacity: 0.72; filter: brightness(0.72); transform: translateX( calc(-50% + 310px) ) translateZ(-90px) rotateY(-26deg) scale(0.88); } /* ================================================================= FAR LEFT ================================================================= */ .index-show-item.far-left { z-index: 4; opacity: 0.30; filter: brightness(0.48); transform: translateX( calc(-50% - 555px) ) translateZ(-230px) rotateY(36deg) scale(0.68); } /* ================================================================= FAR RIGHT ================================================================= */ .index-show-item.far-right { z-index: 4; opacity: 0.30; filter: brightness(0.48); transform: translateX( calc(-50% + 555px) ) translateZ(-230px) rotateY(-36deg) scale(0.68); } /* ================================================================= HIDDEN ================================================================= */ .index-show-item.hidden { z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateZ(-350px) scale(0.55); } /* ================================================================= NO SHOWS ================================================================= */ .index-shows .no-shows { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.65); font-size: 16px; letter-spacing: 2px; white-space: nowrap; } /* ================================================================= VIZAG JAMHUB SCHOOL ================================================================= */ .school { text-align: center; } .courses { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 20px; margin-top: 30px; flex-wrap: nowrap; } .courses a { flex: 1; min-width: 0; max-width: 250px; color: inherit; text-decoration: none; } /* ================================= COURSE CARD ================================= */ .course-card { width: 100%; height: 100%; padding: 25px; background: rgba(20,20,20,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid white; border-radius: 10px; cursor: pointer; transition: 0.25s; } .course-card:hover { transform: translateY(-8px); box-shadow: 0 0 10px #00d4ff, 0 0 25px #00d4ff; } .course-img { width: 100%; height: 160px; margin-bottom: 15px; object-fit: cover; border-radius: 8px; } .course-card h3 { font-size: 22px; } /* ================================================================= BAND CONNECT ================================================================= */ #connect { text-align: center; } #connect h2 { margin-bottom: 10px; } #connect p { margin-bottom: 25px; color: #ddd; } /* ================================= BAND CONNECT FORM ================================= */ #connect form { width: 100%; max-width: 520px; margin: auto; display: flex; flex-direction: column; gap: 15px; } #connect input, #connect textarea { width: 100%; padding: 14px 16px; color: white; font-size: 16px; background: rgba(20,20,20,0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.30); border-radius: 10px; outline: none; } #connect textarea { min-height: 120px; resize: vertical; } #connect input::placeholder, #connect textarea::placeholder { color: rgba(255,255,255,0.65); } #connect input:focus, #connect textarea:focus { border-color: rgba(0,212,255,0.75); box-shadow: 0 0 10px rgba(0,212,255,0.18); } /* ================================================================= BOOK US ================================================================= */ #book { text-align: center; } #book h2 { margin-bottom: 25px; } /* ================================= BOOK US FORM ================================= */ #book form { width: 100%; max-width: 520px; margin: auto; display: flex; flex-direction: column; gap: 15px; } #book input, #book textarea { width: 100%; padding: 14px 16px; color: white; font-size: 16px; background: rgba(20,20,20,0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.30); border-radius: 10px; outline: none; } #book textarea { min-height: 120px; resize: vertical; } #book input::placeholder, #book textarea::placeholder { color: rgba(255,255,255,0.65); } #book input:focus, #book textarea:focus { border-color: rgba(0,212,255,0.75); box-shadow: 0 0 10px rgba(0,212,255,0.18); } /* DATE INPUT */ #book input[type="date"] { color-scheme: dark; } /* ================================================================= SEARCH BAR ================================================================= */ .search-bar { display: block; width: 300px; margin: 30px auto; padding: 12px; color: white; background: black; border: 1px solid white; border-radius: 10px; } /* ================================================================= GALLERY ================================================================= */ .gallery-wrapper { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); padding: 20px 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; cursor: default; user-select: none; } .gallery-wrapper::-webkit-scrollbar { display: none; } .gallery-track { display: flex; width: fit-content; gap: 20px; animation: scrollGallery 25s linear infinite; } .gallery-wrapper:hover .gallery-track { animation-play-state: paused; } .gallery-track img { width: 260px; height: 180px; flex-shrink: 0; object-fit: cover; border: 1px solid white; border-radius: 12px; cursor: pointer; filter: brightness(0.90) contrast(0.92) blur(0.90px); transition: 0.3s; } .gallery-track img:hover { transform: scale(1.03); box-shadow: 0 0 12px #00d4ff; } /* ================================= GALLERY AUTO SCROLL ================================= */ @keyframes scrollGallery { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ================================================================= GALLERY IMAGE POPUP ================================================================= */ .image-popup { position: fixed; inset: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.9); z-index: 9999; } .image-popup img { max-width: 40%; max-height: 40%; border-radius: 15px; box-shadow: 0 0 30px #00d4ff; animation: zoomIn 0.3s ease; } @keyframes zoomIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ================================================================= SECTION SCROLL OFFSET ================================================================= */ #shows, #school, #connect, #gallery, #book { scroll-margin-top: 120px; } /* ========================================================== INDEX FOOTER ========================================================== */ .site-footer { margin-top: 80px; }