:root { --color-bg: #1a1a2e; --color-primary: #e94560; --color-secondary: #0f3460; --color-accent: #fca311; --color-text: #ffffff; --font-heading: 'Montserrat', sans-serif; --font-body: 'Roboto', 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; } /* === Cover Splash Screen === */ #cover-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.98)), url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200') no-repeat center center; background-size: cover; opacity: 1; transition: opacity 0.5s ease-out; animation: fadeIn 1s ease-in; } #cover-splash.hidden { opacity: 0; pointer-events: none; } .cover-content { animation: slideUp 1s ease-out; } .cover-content .event-title { font-size: 1.2rem; margin-bottom: 10px; } .cover-content h1 { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.5rem, 10vw, 5rem); color: var(--color-primary); letter-spacing: 2px; text-shadow: 0 0 15px var(--color-primary); margin: 0; } .cover-content h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 6vw, 3rem); margin: 10px 0 30px 0; } #enter-button { background: none; border: 2px solid var(--color-accent); color: var(--color-accent); padding: 15px 30px; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; border-radius: 50px; cursor: pointer; transition: background-color 0.3s, color 0.3s; animation: pulseGlow 2s infinite; } #enter-button:hover { background-color: var(--color-accent); color: var(--color-bg); } /* [BARU] Bottom Navigation Bar */ .navbar { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px 20px; background-color: rgba(26, 26, 46, 0.95); backdrop-filter: blur(10px); z-index: 1000; border-top: 2px solid var(--color-primary); box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3); } .nav-container { display: flex; justify-content: space-around; align-items: center; max-width: 500px; margin: 0 auto; } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--color-text); transition: all 0.3s ease; padding: 5px; border-radius: 10px; min-width: 60px; } .nav-item:hover { color: var(--color-accent); background-color: rgba(252, 163, 17, 0.1); transform: translateY(-3px); } .nav-item i { font-size: 1.2rem; margin-bottom: 5px; } .nav-item span { font-size: 0.7rem; font-weight: 500; text-align: center; } /* Active state for current section */ .nav-item.active { color: var(--color-accent); background-color: rgba(252, 163, 17, 0.2); } /* --- Header Utama (Hero Section) --- */ .festival-header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100vh; padding: 20px; background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.95)), url('https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=1200') no-repeat center center; background-size: cover; } .festival-logo { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.5rem, 10vw, 5rem); color: var(--color-primary); letter-spacing: 2px; text-shadow: 0 0 15px var(--color-primary); } .headliners { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 8vw, 4rem); margin: 10px 0; } .headliners span { color: var(--color-accent); } .festival-date { font-size: clamp(1rem, 4vw, 1.5rem); background-color: var(--color-secondary); padding: 10px 20px; border-radius: 50px; margin: 20px 0; border: 2px solid var(--color-primary); } /* [BARU] Countdown Timer */ #countdown-timer { font-family: var(--font-heading); font-size: 1.8rem; margin: 20px 0; color: var(--color-accent); } .btn-main { display: inline-block; background: linear-gradient(45deg, var(--color-primary), var(--color-accent)); color: var(--color-text); padding: 15px 30px; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; text-decoration: none; border-radius: 50px; margin-top: 20px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 0 20px rgba(233, 69, 96, 0.5); } .btn-main:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(233, 69, 96, 0.8); } /* --- Section Styling & Animasi Scroll --- */ section { padding: 80px 20px; padding-bottom: 100px; /* Extra padding for bottom navigation */ text-align: center; } .section-title { font-family: var(--font-heading); font-weight: 900; font-size: 2.5rem; margin-bottom: 50px; color: var(--color-primary); } .animated { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animated.visible { opacity: 1; transform: translateY(0); } /* [UPDATE] "Our Story" Section */ #our-story .story-container { max-width: 800px; margin: 0 auto; } #our-story p { line-height: 1.8; font-size: 1.1rem; } #our-story .couple-names { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-accent); margin-top: 30px; } /* [UPDATE] Schedule Section */ #schedule { background-color: var(--color-secondary); } .schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; } .stage-card { background-color: var(--color-bg); padding: 30px; border-radius: 15px; border: 2px solid var(--color-primary); text-align: left; transition: transform 0.3s; } .stage-card:hover { transform: translateY(-10px); } .stage-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.8rem; color: var(--color-accent); margin-bottom: 20px; } .stage-title i { margin-right: 15px; } .event-item { margin-bottom: 15px; } .event-time { font-weight: 500; color: var(--color-primary); } .event-name { font-weight: 700; font-size: 1.2rem; } .map-link { color: var(--color-accent); text-decoration: none; font-weight: bold; } /* [BARU] Photo Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; max-width: 1200px; margin: 0 auto; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; } .gallery-item img:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(233, 69, 96, 0.7); } #lightbox { position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; } #lightbox.active { display: flex; } #lightbox img { max-width: 90%; max-height: 80%; } /* [UPDATE] Digital Gift */ #gifts { background-color: var(--color-secondary); } .gift-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 800px; margin: 0 auto; } .gift-card { background-color: var(--color-bg); padding: 25px; border-radius: 15px; border: 2px solid var(--color-accent); } .gift-card h3 { font-family: var(--font-heading); color: var(--color-primary); margin-top: 0; } .copy-button { background: none; border: 1px solid var(--color-accent); color: var(--color-accent); padding: 8px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } .copy-button:hover { background-color: var(--color-accent); color: var(--color-bg); } /* --- RSVP Section --- */ .ticket-form { max-width: 500px; margin: 0 auto; text-align: left; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border-radius: 8px; border: 2px solid var(--color-primary); background-color: var(--color-secondary); color: var(--color-text); font-size: 1rem; font-family: var(--font-body); } .form-group textarea { resize: vertical; min-height: 80px; } /* Enhanced RSVP & Wish Section */ #wish-list { margin-top: 40px; max-height: 400px; overflow-y: auto; padding-right: 10px; } .wish-item { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 15px; margin-bottom: 15px; text-align: left; border: 1px solid var(--color-primary); } .wish-item .wish-name { font-weight: 700; color: var(--color-accent); margin-bottom: 5px; } .wish-item .wish-text { margin: 5px 0 0 0; color: var(--color-text); line-height: 1.5; } /* Private invitation info styling */ .private-invitation-info { margin-top: 30px; padding: 20px; background: rgba(252, 163, 17, 0.1); border-radius: 10px; border: 1px solid var(--color-accent); display: none; } .private-invitation-info h4 { color: var(--color-accent); margin-bottom: 15px; } .invitation-code { background: rgba(252, 163, 17, 0.2); padding: 10px; border-radius: 8px; font-size: 1.2rem; color: var(--color-accent); letter-spacing: 1px; border: 1px solid var(--color-accent); text-align: center; margin: 10px 0; } /* [BARU] Music Control */ #music-control { position: fixed; bottom: 80px; right: 20px; z-index: 1001; background-color: var(--color-primary); border-radius: 50%; width: 50px; height: 50px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px var(--color-primary); opacity: 0; transition: opacity 0.5s; } #music-control.visible { opacity: 1; } #music-control i { font-size: 1.5rem; color: var(--color-text); } /* --- Footer --- */ footer { text-align: center; padding: 40px 20px 100px 20px; /* Extra padding for bottom navigation */ background-color: #000; } /* Animasi Keyframes */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulseGlow { 0% { box-shadow: 0 0 10px rgba(252, 163, 17, 0.5); } 50% { box-shadow: 0 0 25px rgba(252, 163, 17, 1); } 100% { box-shadow: 0 0 10px rgba(252, 163, 17, 0.5); } }
🎨 Preview Template: Lovefest | Kategori: Wedding
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
The Wedding of Our Dreams: Ahmad Rizki & Siti Nurhaliza

Bersama Kita Wujudkan Mimpi

The Wedding of Our Dreams

Ahmad Rizki & Siti Nurhaliza

Untuk: Keluarga Besar Rahman

Yang Terhormat

Ahmad Rizki & Siti Nurhaliza

Friday, 2026-05-15
GET YOUR ALL-ACCESS PASS (RSVP)

THE BACKSTAGE STORY

Kami bertemu pertama kali di kampus dan sejak saat itu hubungan kami terus berkembang hingga akhirnya memutuskan untuk menjalani hidup bersama.

"Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu isteri-isteri dari jenismu sendiri."

Ahmad Rizki Suryadi (Rizki), Putra dari Bapak Bapak Suryadi & Ibu Ibu Siti Aminah
&
Siti Nurhaliza Rahmat (Siti), Putri dari Bapak Bapak Rahmat & Ibu Ibu Fatimah

EVENT SCHEDULE

SUNRISE STAGE

09:00 - 11:00 WIB
THE VOWS: Akad Nikah

Friday, 2026-05-15

Masjid Al-Ikhlas
Jl. Masjid Raya No. 456, Jakarta Pusat
Lihat Peta Venue

MAIN STAGE

19:00 - 22:00 WIB
THE CELEBRATION: Resepsi

Friday, 2026-05-15

Gedung Serbaguna Menteng
Jl. Menteng Raya No. 123, Jakarta Pusat
Lihat Peta Venue

OFFICIAL MERCH

Doa restu adalah hadiah terindah. Namun jika ingin memberikan tanda kasih, Anda bisa mengirimkannya melalui tautan di bawah ini.

Bank Mandiri

Bank Mandiri: 1234567890
a.n. Ahmad Siti Wedding

GoPay

GoPay: 081234567890
a.n. Ahmad Rizki

RSVP & BUKU DOA

Konfirmasi Kehadiran

Mohon konfirmasi kehadiran Anda untuk membantu persiapan acara yang lebih baik.

Buku Doa & Ucapan

Keluarga Besar

Selamat atas pernikahan kalian! Semoga menjadi keluarga yang sakinah, mawaddah, warahmah. Barakallahu lakuma wa baraka alaikuma wa jama'a bainakuma fi khair. 💕

Detail Undangan Khusus

Kepada Yth. Keluarga Besar Rahman

Yang Terhormat

Kode Undangan:

WED2025001

QR Code:

QR Code Undangan