:root { --color-bg: #0d0221; --color-purple: #261750; --color-pink: #f21170; --color-blue: #00ffff; --color-green: #3fff00; --color-text: #f0f0f0; --font-heading: 'Rajdhani', sans-serif; --font-body: 'Poppins', sans-serif; } body, html { margin: 0; padding: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); scroll-behavior: smooth; overflow-x: hidden; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* === Cover Splash Screen === */ #cover-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-bg); z-index: 100; display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity 1s ease-out, transform 1s ease-out; } #cover-splash.hidden { opacity: 0; transform: scale(1.2); pointer-events: none; } .cover-content h1 { font-family: var(--font-heading); font-size: clamp(2rem, 10vw, 5rem); color: var(--color-blue); text-transform: uppercase; animation: flicker 4s infinite; margin: 0; } .cover-content p { font-size: 1.2rem; opacity: 0; animation: fadeIn 1s 1s forwards; } #enter-button { background: transparent; border: 2px solid var(--color-pink); color: var(--color-pink); padding: 12px 28px; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; border-radius: 50px; cursor: pointer; margin-top: 20px; text-shadow: 0 0 10px var(--color-pink); box-shadow: 0 0 15px var(--color-pink) inset; transition: all 0.3s; opacity: 0; animation: fadeIn 1s 1.5s forwards; } #enter-button:hover { background-color: var(--color-pink); color: var(--color-bg); box-shadow: 0 0 25px var(--color-pink); } /* === Main Content Styling === */ .container { max-width: 900px; margin: 0 auto; padding: 50px 20px; } section { padding: 60px 0; } .animated { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .animated.visible { opacity: 1; transform: translateY(0); } .animated.delay-1 { transition-delay: 0.2s; } .section-title { font-family: var(--font-heading); font-weight: 700; font-size: 3rem; text-align: center; margin-bottom: 50px; color: var(--color-blue); text-transform: uppercase; animation: flicker 5s infinite alternate; } #hero { text-align: center; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } #hero h1 { font-size: clamp(2.5rem, 10vw, 5rem); color: var(--color-green); animation: flicker 3s infinite; margin: 0; } #hero .subtitle { font-size: 1.5rem; color: var(--color-text); } /* [BARU] Countdown */ #countdown { display: flex; justify-content: center; gap: 15px; margin: 30px 0; font-family: var(--font-heading); text-align: center; } .time-box { background-color: var(--color-purple); padding: 10px 15px; border-radius: 8px; border: 1px solid var(--color-pink); } .time-box span { display: block; font-size: 2.5rem; color: var(--color-green); } .info-card { background: rgba(38, 23, 80, 0.5); backdrop-filter: blur(10px); border: 1px solid var(--color-blue); border-radius: 15px; padding: 30px; margin-bottom: 20px; transition: transform 0.3s, box-shadow 0.3s; } .info-card:hover { transform: translateY(-5px); box-shadow: 0 0 25px var(--color-blue); } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .info-item { text-align: center; } .info-item .icon { font-size: 3rem; margin-bottom: 15px; color: var(--color-pink); text-shadow: 0 0 15px var(--color-pink); } .info-item h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 10px; color: var(--color-blue); } .btn { display: inline-block; background: transparent; border: 1px solid var(--color-green); color: var(--color-green); padding: 10px 20px; border-radius: 50px; text-decoration: none; font-weight: 700; margin-top: 10px; transition: all 0.3s; } .btn:hover { background-color: var(--color-green); color: var(--color-bg); box-shadow: 0 0 15px var(--color-green); } /* [BARU] Spotify Playlist */ iframe[src*="spotify.com"] { border-radius: 12px; border: 1px solid var(--color-blue); } .rsvp-form input, .rsvp-form select { width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px; border: 1px solid var(--color-blue); background-color: var(--color-purple); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; } .btn-submit { width: 100%; padding: 15px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; background-color: var(--color-green); color: var(--color-bg); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; box-shadow: 0 0 20px var(--color-green); } .btn-submit:hover { transform: scale(1.02); box-shadow: 0 0 30px var(--color-green); } /* [BARU] Music Control */ #music-control { position: fixed; bottom: 20px; right: 20px; z-index: 99; background-color: var(--color-pink); border-radius: 50%; width: 45px; height: 45px; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 0 15px var(--color-pink); color: var(--color-bg); } #music-control.visible { display: flex; } #music-control i { font-size: 1.2rem; } /* Animasi Keyframes */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes flicker { 0%, 100% { text-shadow: 0 0 5px var(--color-blue), 0 0 15px var(--color-blue), 0 0 30px var(--color-pink); } 50% { text-shadow: 0 0 10px var(--color-blue), 0 0 25px var(--color-blue), 0 0 50px var(--color-pink), 0 0 5px #fff; } }
🎨 Preview Template: Neon Jungle | Kategori: Birthday
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
Sarah Amanda - Welcome to the Neon Jungle!

NEON JUNGLE

A Bioluminescent Birthday Bash for Sarah

You're Invited!

Dengan sukacita kami mengundang Anda untuk merayakan ulang tahun yang istimewa

Sarah Amanda

Turning 25 in the Neon Jungle!

EXPEDITION PLAN

DATE

Thursday, 2026-04-30

TIME

19:00 - 23:00

LOCATION

Restaurant The Terrace

Jl. Senopati No. 88, Jakarta Selatan

Open Map

GLOWING ATTIRE

DRESS TO GLOW

Smart Casual

JOIN THE TRIBE

💭 "Semoga tahun yang baru membawa kebahagiaan dan kesuksesan"

💳 Digital Envelope

Jika berkenan memberikan amplop digital:

Bank: GoPay

No. Rekening: 081234567890

Atas Nama: Ahmad Rizki

🌟 Glowing Messages

Neon Explorer

Ready to party in the jungle! Happy birthday! 🎉✨