:root { --color-bg: #2c2c2c; --color-paper: #fdf6e8; --color-burgundy: #800020; --color-gold: #b38728; --color-text: #3d3d3d; --font-heading: 'Cinzel', serif; --font-body: 'Cormorant Garamond', serif; } body, html { margin: 0; padding: 0; background-color: var(--color-bg); background-image: url('https://www.transparenttextures.com/patterns/dark-denim-3.png'); font-family: var(--font-body); color: var(--color-text); display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; padding: 50px 20px; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* === Cover Dossier & Animasi Pembuka === */ #cover-dossier { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(44, 44, 44, 0.9); display: flex; align-items: center; justify-content: center; transition: opacity 1s ease-out; } #cover-dossier.hidden { opacity: 0; pointer-events: none; } .folder-container { perspective: 1000px; } .folder { width: 320px; height: 220px; position: relative; transform-style: preserve-3d; transition: transform 1s ease-in-out; } .folder.open { transform: rotateX(20deg) scale(1.1); } .folder-front, .folder-back { position: absolute; width: 100%; height: 100%; background-color: #4a4a4a; border: 1px solid #666; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); backface-visibility: hidden; } .folder-front { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 2rem; color: var(--color-paper); transform-origin: top; transition: transform 1s ease-in-out; padding: 20px; } .folder-content { text-align: center; width: 100%; } .confidential-stamp { font-size: 2rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .guest-info { border-top: 1px solid rgba(253, 246, 232, 0.3); padding-top: 15px; margin-top: 15px; } .guest-name { font-size: 1.2rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; color: var(--color-gold); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .guest-title { font-size: 0.9rem; font-weight: 400; letter-spacing: 1px; opacity: 0.8; font-style: italic; color: var(--color-paper); } /* Hide guest info when not needed */ .guest-info.hidden { display: none; } .folder.open .folder-front { transform: rotateX(-160deg); } #seal { position: absolute; bottom: -25px; right: 20px; font-size: 60px; color: var(--color-burgundy); cursor: pointer; transition: transform 0.3s; z-index: 5; } #seal:hover { transform: scale(1.1); } /* === Kontainer Undangan Utama === */ .dossier-container { background-color: var(--color-paper); width: 90%; max-width: 800px; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5); position: relative; border: 1px solid var(--color-gold); opacity: 0; transition: opacity 1s ease-in; margin: 10vh 0; } .dossier-container.visible { opacity: 1; } .art-deco-border { position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 2px solid var(--color-gold); pointer-events: none; } .dossier-content { padding: 30px; } .dossier-section { padding: 30px 0; border-bottom: 2px dashed rgba(179, 135, 40, 0.3); } .dossier-section:last-child { border-bottom: none; } header h1 { font-family: var(--font-heading); font-size: 2.5rem; margin: 0; color: var(--color-burgundy); text-align: center; } header .subtitle { font-size: 1.2rem; text-align: center; } .section-title { font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid var(--color-gold); padding-bottom: 5px; margin-bottom: 15px; color: var(--color-gold); } p, li { font-size: 1.2rem; line-height: 1.7; } ul { list-style: none; padding: 0; } li i { margin-right: 10px; color: var(--color-burgundy); } .suspect-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; } .suspect-card { text-align: center; } .suspect-card img { width: 100%; border-radius: 5px; border: 2px solid var(--color-gold); filter: sepia(0.5); } .suspect-card .name { font-weight: 700; margin-top: 5px; } #countdown { display: flex; justify-content: center; gap: 15px; margin: 20px 0; font-family: var(--font-heading); text-align: center; } .time-box { background-color: #e9e0d0; padding: 10px; border-radius: 5px; } .time-box span { display: block; font-size: 2rem; color: var(--color-burgundy); } .rsvp-form input { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; font-family: var(--font-body); font-size: 1.1rem; } .btn-submit { background-color: var(--color-burgundy); color: var(--color-paper); border: 1px solid #000; padding: 12px 25px; font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 1px; cursor: pointer; transition: background-color 0.3s; } #music-control { position: fixed; bottom: 20px; right: 20px; z-index: 101; 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 2px 10px rgba(0, 0, 0, 0.2); color: var(--color-paper); } #music-control.visible { display: flex; } .rsvp-form input:focus, .rsvp-form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 5px rgba(179, 135, 40, 0.3); } .btn-submit:hover { background-color: #5a0015; transform: translateY(-1px); } .btn-submit:disabled { background-color: #999; cursor: not-allowed; transform: none; } .animated { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .animated.visible { opacity: 1; transform: translateY(0); } /* === Enhanced RSVP List Styles === */ .rsvp-list { max-height: 500px; overflow-y: auto; padding: 10px 0; border: 1px solid rgba(179, 135, 40, 0.2); border-radius: 8px; background: linear-gradient(135deg, #fdf8f0 0%, #f9f4e8 100%); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05); } .rsvp-list::-webkit-scrollbar { width: 8px; } .rsvp-list::-webkit-scrollbar-track { background: rgba(179, 135, 40, 0.1); border-radius: 4px; } .rsvp-list::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 4px; opacity: 0.7; } .rsvp-list::-webkit-scrollbar-thumb:hover { background: var(--color-burgundy); } .mystery-rsvp-item { background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%); padding: 15px; margin: 8px 12px; border-left: 3px solid var(--color-burgundy); border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); position: relative; transition: all 0.3s ease; border: 1px solid rgba(179, 135, 40, 0.1); } .mystery-rsvp-item:hover { transform: translateX(3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); border-left-color: var(--color-gold); } .mystery-rsvp-item:nth-child(even) { background: linear-gradient(135deg, #fdf9f4 0%, #f8f5f0 100%); } .rsvp-guest-badge { position: absolute; top: -6px; right: 12px; background: var(--color-gold); color: var(--color-paper); padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .rsvp-guest-name { margin: 0 0 6px 0; font-weight: 700; color: var(--color-burgundy); font-family: var(--font-heading); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.5px; } .rsvp-date { margin: 3px 0 8px 0; font-size: 0.85rem; color: var(--color-gold); font-weight: 600; font-family: var(--font-body); opacity: 0.9; } .rsvp-message-box { background: rgba(128, 0, 32, 0.03); padding: 10px; border-radius: 4px; border-left: 2px solid var(--color-gold); margin-top: 8px; } .rsvp-message-text { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--color-text); font-style: normal; } .rsvp-empty-message { margin: 0; font-size: 0.9rem; color: var(--color-gold); font-style: italic; opacity: 0.8; } .rsvp-decorative-icon { position: absolute; bottom: 6px; right: 10px; font-size: 1rem; opacity: 0.2; } .rsvp-count-badge { background: var(--color-burgundy); color: var(--color-paper); padding: 4px 12px; border-radius: 15px; font-weight: 600; font-size: 0.9rem; margin-left: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .rsvp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 10px 0; border-bottom: 1px solid rgba(179, 135, 40, 0.2); } .rsvp-stats { font-size: 0.9rem; color: var(--color-gold); font-style: italic; } @media (max-width: 768px) { .mystery-rsvp-item { margin: 6px 8px; padding: 12px; } .rsvp-guest-name { font-size: 1rem; } .rsvp-list { max-height: 400px; } .rsvp-guest-badge { font-size: 0.65rem; padding: 2px 6px; } /* Mobile responsive for folder cover */ .folder { width: 280px; height: 200px; } .confidential-stamp { font-size: 1.5rem; letter-spacing: 2px; margin-bottom: 15px; } .guest-name { font-size: 1rem; letter-spacing: 1px; margin-bottom: 6px; } .guest-title { font-size: 0.8rem; letter-spacing: 0.5px; } .folder-front { padding: 15px; } } .murder-mystery-popup { border: 2px solid var(--color-gold) !important; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5) !important; } .murder-mystery-title { font-family: var(--font-heading) !important; color: var(--color-burgundy) !important; font-size: 1.5rem !important; } .swal2-html-container { font-family: var(--font-body) !important; } .swal2-confirm { font-family: var(--font-heading) !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
🎨 Preview Template: Misteri | Kategori: Birthday
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
Sarah Amanda - A Murder Mystery Birthday
CONFIDENTIAL
Keluarga Besar Rahman
Yang Terhormat

An Invitation to Sarah's Birthday Celebration

A Murder Mystery

Itinerary

  • Tanggal: Thursday, 2026-04-30
  • Waktu: 19:00 - 23:00
  • Lokasi: Restaurant The Terrace
  • Alamat: Jl. Senopati No. 88, Jakarta Selatan
  • Peta: Buka Google Maps

Case File

Pada perayaan ulang tahun ke-25 Sarah Amanda di Restaurant The Terrace, sebuah insiden tak terduga terjadi. Dengan sukacita kami mengundang Anda untuk merayakan ulang tahun yang istimewa Suasana pesta yang glamor berubah menjadi tegang. Setiap tamu, dengan agenda tersembunyi mereka, adalah tersangka. Anda harus menggunakan kecerdasan dan intuisi untuk mengumpulkan petunjuk, menginterrogasi sesama tamu, dan memecahkan misteri sebelum acara berakhir.

The Passenger List

Kenali para penumpang. Di antara senyum mereka, tersembunyi rahasia kelam.

Suspect 1The Heiress
Suspect 2The Professor
Suspect 3The Actress
Suspect 4The Gambler

Clues & Directives

Required Attire: Smart Casual

Your Mission: Detail karakter rahasia dan misi pribadi Anda akan dikirimkan via WhatsApp setelah Anda mengonfirmasi kehadiran. Jangan bagikan informasi ini dengan siapa pun!

Personal Message: "Kami sangat berharap kehadiran Anda untuk merayakan hari bahagia kami bersama keluarga besar. Mohon konfirmasi kehadiran Anda sebelum tanggal 15 Juli 2025. Terima kasih atas doa dan dukungan Anda!"

Words of Wisdom: "Semoga tahun yang baru membawa kebahagiaan dan kesuksesan"

💝 Digital Envelope

Jika berkenan memberikan amplop:

Bank: GoPay

No. Rekening: 081234567890

Atas Nama: Ahmad Rizki

Confirm Your Passage

📜 Guest Messages & Clues

1 detectives confirmed
🕵️ Example

The Mysterious Guest

📅 Awaiting confirmation...

"I sense there are secrets yet to be uncovered at this gathering. The truth always finds a way to surface..."

🔍