:root { --color-bg: #121212; --color-text: #e0e0e0; --color-gold: #D4AF37; --color-dark-grey: #222222; --font-heading: 'Playfair Display', 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%; z-index: 100; background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; transition: opacity 1.5s ease-out; } #cover-splash.hidden { opacity: 0; pointer-events: none; } .cover-content h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 10vw, 4.5rem); color: var(--color-gold); font-weight: 700; margin: 0; text-shadow: 0 0 15px rgba(212, 175, 55, 0.5); opacity: 0; animation: fadeIn 2s ease-out 0.5s forwards; } .cover-content p { font-size: 1.2rem; opacity: 0; animation: fadeIn 2s ease-out 1s forwards; } #enter-button { background: transparent; border: 1px solid var(--color-gold); color: var(--color-gold); padding: 12px 30px; font-family: var(--font-body); font-weight: 400; font-size: 1rem; letter-spacing: 1px; cursor: pointer; margin-top: 20px; transition: all 0.3s; opacity: 0; animation: fadeIn 2s ease-out 1.5s forwards; } #enter-button:hover { background-color: var(--color-gold); color: var(--color-bg); box-shadow: 0 0 20px var(--color-gold); } /* === Main Content Styling === */ main { padding-bottom: 80px; /* Memberi ruang untuk navigasi bawah */ } .container { max-width: 800px; margin: 0 auto; padding: 50px 20px; } section { padding: 60px 0; text-align: center; } .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-size: 3rem; font-weight: 700; margin-bottom: 30px; color: var(--color-gold); } .section-divider { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); margin: 50px auto; border: none; } section p { font-size: 1.1rem; line-height: 1.8; max-width: 600px; margin: 0 auto 30px auto; font-weight: 300; } #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-dark-grey); padding: 10px 15px; border-radius: 8px; border: 1px solid #333; } .time-box span { display: block; font-size: 2rem; color: var(--color-gold); } .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; } .detail-item .icon { font-size: 2.5rem; color: var(--color-gold); margin-bottom: 15px; } .detail-item h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-white); margin-bottom: 5px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; cursor: pointer; transition: transform 0.3s; border: 2px solid var(--color-gold); } .gallery-item img:hover { transform: scale(1.05); } #lightbox { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; } #lightbox.active { display: flex; } #lightbox img { max-width: 90%; max-height: 80%; } #memory-book { background-color: var(--color-dark-grey); padding: 60px 0; } /* [UPDATE] Perbaikan Style Input Form */ .styled-form input, .styled-form textarea { width: 100%; padding: 15px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #444; background-color: #2a2a2a; color: var(--color-text); font-family: var(--font-body); font-size: 1rem; box-sizing: border-box; /* Penting agar padding tidak menambah width */ transition: border-color 0.3s, box-shadow 0.3s; } .styled-form input:focus, .styled-form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); } #memory-list { margin-top: 30px; max-height: 400px; overflow-y: auto; padding-right: 10px; } .memory-item { background: #1a1a1a; border-left: 3px solid var(--color-gold); padding: 15px; margin-bottom: 10px; text-align: left; } .memory-name { font-weight: 600; color: var(--color-gold); font-style: italic; } .btn-submit { background-color: var(--color-gold); color: var(--color-bg); border: none; padding: 15px 30px; font-size: 1.1rem; font-weight: 600; letter-spacing: 1px; border-radius: 8px; cursor: pointer; transition: all 0.3s; width: 100%; } .btn-submit:hover { opacity: 0.9; } /* Custom Radio Button Styling */ .rsvp-options { margin: 25px 0; display: flex; flex-direction: column; gap: 15px; } .radio-option { display: flex; align-items: center; cursor: pointer; padding: 15px; border: 2px solid #444; border-radius: 10px; background-color: rgba(42, 42, 42, 0.5); transition: all 0.3s ease; position: relative; color: var(--color-text); } .radio-option:hover { border-color: var(--color-gold); background-color: rgba(212, 175, 55, 0.1); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); } .radio-option input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } .radio-custom { width: 20px; height: 20px; border: 2px solid #666; border-radius: 50%; margin-right: 15px; position: relative; transition: all 0.3s ease; flex-shrink: 0; } .radio-option input[type="radio"]:checked+.radio-custom { border-color: var(--color-gold); background-color: var(--color-gold); } .radio-option input[type="radio"]:checked+.radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-bg); } .radio-option input[type="radio"]:checked~.radio-text { color: var(--color-gold); font-weight: 600; } .radio-text { font-size: 1rem; line-height: 1.4; transition: all 0.3s ease; } @media (max-width: 768px) { .rsvp-options { gap: 12px; } .radio-option { padding: 12px; } .radio-text { font-size: 0.95rem; } } /* [BARU] Navigasi Bawah dengan Ikon */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(18, 18, 18, 0.9); backdrop-filter: blur(10px); box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.5); display: none; /* Awalnya tersembunyi */ justify-content: space-around; padding: 10px 0; z-index: 99; } .bottom-nav.visible { display: flex; } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--color-text); text-decoration: none; transition: color 0.3s, transform 0.3s; } .nav-item.active, .nav-item:hover { color: var(--color-gold); transform: translateY(-3px); } .nav-icon { font-size: 1.5rem; margin-bottom: 5px; } .nav-label { font-size: 0.7rem; font-family: var(--font-body); font-weight: 400; } #music-control { position: fixed; top: 20px; right: 20px; z-index: 99; background-color: var(--color-gold); 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-gold); color: var(--color-bg); } #music-control.visible { display: flex; } footer { margin-top: 50px; font-size: 1rem; font-weight: 300; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

🎨 Preview Template: An Evening Of Stars | Kategori: Reunion

← Kembali ke Gallery ✨ Daftar untuk Menggunakan

Reuni Alumni: Bersama Kita Kenang Masa Lalu

Reuni Alumni

Bersama Kita Kenang Masa Lalu Angkatan 2010 - 2010

SMA Negeri 1 Jakarta

Reuni Akbar

You're Invited

Bertahun-tahun telah berlalu, namun kenangan tetap bersinar. Mari kita berkumpul kembali dalam satu malam yang istimewa untuk merayakan perjalanan, mengenang masa lalu, dan menyambut masa depan bersama.

Gala Details

Tanggal

Thursday, 2026-04-30

Waktu

10:00

Lokasi

Restaurant The Terrace, {alamat_venue}

Open Map

Memory Lane

Digital Guestbook

Bagikan kenangan favorit atau pesan singkatmu di sini!

Budi Santoso

Ingat waktu kita bolos pelajaran fisika buat main di kantin? Momen legendaris! Sampai jumpa di reuni!

Reserve Your Place

Mohon konfirmasikan kehadiran Anda sebelum tanggal {batas_rsvp}.