:root { --night: #0f0f16; --indigo: #1b1e2f; --parchment: #e9d8b0; --ink: #f5f1e7; --gold: #c4a05a; --emerald: #2e6c55; --muted: #cfc6b6; --line: rgba(245, 241, 231, 0.22); --panel: rgba(26, 27, 39, 0.9); --card: rgba(37, 38, 54, 0.92); --font-head: "Cinzel", serif; --font-body: "EB Garamond", serif; --font-accent: "IBM Plex Mono", monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--font-body); background: radial-gradient( circle at 10% 15%, rgba(196, 160, 90, 0.2), transparent 34% ), radial-gradient( circle at 84% 18%, rgba(46, 108, 85, 0.18), transparent 32% ), radial-gradient( circle at 76% 84%, rgba(120, 91, 168, 0.14), transparent 36% ), linear-gradient(180deg, #0b0c12 0%, #121424 55%, #181a2b 100%); min-height: 100vh; overflow-x: hidden; } body.locked { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } .star-dust { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.18; background-image: radial-gradient( circle at 14% 20%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px ), radial-gradient( circle at 72% 34%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px ), radial-gradient( circle at 40% 72%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px ), radial-gradient( circle at 86% 82%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px ); animation: twinkle 6s ease-in-out infinite; } .page { position: relative; z-index: 1; } .cover { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: linear-gradient(180deg, rgba(7, 8, 12, 0.68), rgba(7, 8, 12, 0.92)), url("https://images.unsplash.com/photo-1519741497674-611481863552?w=1200") center/cover no-repeat; transition: opacity 0.6s ease, transform 0.6s ease; } .cover.hidden { opacity: 0; transform: scale(1.02); pointer-events: none; } .letter { width: min(820px, 100%); border-radius: 16px; border: 1px solid rgba(233, 216, 176, 0.42); background: linear-gradient( 170deg, rgba(233, 216, 176, 0.92), rgba(206, 181, 136, 0.9) ); color: #2b2115; box-shadow: 0 30px 76px rgba(0, 0, 0, 0.48); padding: clamp(1.2rem, 3.5vw, 2.2rem); position: relative; } .wax { position: absolute; right: 1rem; top: 1rem; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(120, 25, 33, 0.6); display: grid; place-items: center; color: #7b1d2a; background: radial-gradient(circle, #b9404d 0%, #8f2934 80%); } .kicker { font-family: var(--font-accent); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; } .cover-title, .hero-title, .section-title, .card-title { margin: 0; font-family: var(--font-head); line-height: 1.08; } .cover-title { margin-top: 0.72rem; font-size: clamp(2.15rem, 6.5vw, 4.5rem); } .rule { height: 1px; margin: 0.76rem 0 1rem; background: linear-gradient( 90deg, transparent, rgba(43, 33, 21, 0.6), transparent ); } .sigil-chip { display: inline-flex; align-items: center; gap: 0.42rem; border: 1px dashed rgba(43, 33, 21, 0.52); border-radius: 999px; padding: 0.36rem 0.74rem; font-family: var(--font-accent); font-size: 0.74rem; text-transform: uppercase; } .open-btn, .map-btn, .copy-btn, .submit-btn, .music-btn, .top-btn { border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease; } .open-btn { margin-top: 0.96rem; min-height: 46px; padding: 0.78rem 1.24rem; background: linear-gradient(120deg, #2e6c55, #1f4f3e); color: #f7f4ec; font-weight: 700; } .hero { min-height: 88vh; display: grid; align-items: center; background: linear-gradient(180deg, rgba(9, 10, 16, 0.64), rgba(9, 10, 16, 0.9)), url("https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=1200") center/cover no-repeat; } .hero-inner, .section-inner, .footer-inner { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } .hero-panel, .section-panel { border-radius: 16px; padding: clamp(1.15rem, 3.2vw, 2rem); } .hero-panel { border: 1px solid rgba(245, 241, 231, 0.3); background: rgba(27, 30, 47, 0.76); } .hero-title { margin-top: 0.65rem; font-size: clamp(2rem, 6vw, 4.1rem); } .hero-sub { margin: 0.84rem 0; color: rgba(245, 241, 231, 0.9); } .admission { display: inline-flex; align-items: center; gap: 0.36rem; margin-bottom: 0.6rem; border: 1px solid rgba(196, 160, 90, 0.66); color: #f0d8ad; border-radius: 999px; padding: 0.25rem 0.55rem; font-family: var(--font-accent); font-size: 0.72rem; text-transform: uppercase; } .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } .count-box { border: 1px solid rgba(245, 241, 231, 0.3); border-radius: 12px; background: rgba(245, 241, 231, 0.08); text-align: center; padding: 0.54rem; } .count-value { display: block; font-family: var(--font-head); font-size: clamp(1.25rem, 3.2vw, 1.95rem); font-weight: 700; transform-origin: center; } .count-value.tick { animation: count-flip 0.22s ease; } .count-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.11em; font-family: var(--font-accent); } section { padding: clamp(2.9rem, 7.2vw, 4.9rem) 0; } .section-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.35); } .section-title { margin-top: 0.5rem; font-size: clamp(1.82rem, 4.8vw, 2.95rem); } .section-rule { height: 1px; margin: 0.74rem 0 1rem; background: linear-gradient( 90deg, rgba(245, 241, 231, 0.08), rgba(245, 241, 231, 0.46), rgba(245, 241, 231, 0.08) ); } .story-grid, .family-grid, .schedule-grid, .gallery-grid, .gift-grid, .rsvp-grid, .wish-list { display: grid; gap: 1rem; } .copy, .meta { color: var(--muted); line-height: 1.75; } .quote { margin: 0.9rem 0 0; border-left: 4px solid var(--gold); border-radius: 10px; background: rgba(196, 160, 90, 0.16); padding: 0.92rem; font-family: var(--font-head); font-size: clamp(1.02rem, 2.7vw, 1.36rem); } .card, .wish-item { border-radius: 12px; border: 1px solid rgba(245, 241, 231, 0.2); background: var(--card); padding: 0.95rem; } .portrait-grid { display: grid; gap: 0.8rem; } .portrait-card { border-radius: 12px; border: 1px solid rgba(245, 241, 231, 0.2); background: var(--card); overflow: hidden; } .portrait-photo { aspect-ratio: 4 / 5; background-size: cover; background-position: center; } .portrait-pria { background-image: url("https://images.unsplash.com/photo-1459204137123-238c569e22bd?w=400"); } .portrait-wanita { background-image: url("https://images.unsplash.com/photo-1596092882833-4a5417bc7ac7?w=400"); } .portrait-meta { padding: 0.7rem 0.85rem 0.85rem; } .portrait-name { margin: 0.2rem 0 0; } .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-accent); color: #e3cfad; } .card-title { margin-top: 0.3rem; font-size: 1.58rem; } .schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .badge { display: inline-flex; align-items: center; border: 1px solid rgba(196, 160, 90, 0.64); background: rgba(196, 160, 90, 0.14); color: #f0deb9; border-radius: 999px; padding: 0.3rem 0.66rem; font-family: var(--font-accent); font-size: 0.72rem; text-transform: uppercase; } .map-btn, .copy-btn, .submit-btn, .music-btn, .top-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 0.44rem; padding: 0.6rem 0.95rem; color: #f7f1e8; background: #5e566f; } .map-btn, .submit-btn { color: #10161a; background: linear-gradient(120deg, #c4a05a, #8f7239); } .submit-btn { margin-top: 0.86rem; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-item { position: relative; min-height: clamp(170px, 31vw, 255px); border-radius: 12px; border: 1px solid rgba(245, 241, 231, 0.24); background: #5f566f; overflow: hidden; } .gallery-item::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 78% 22%, rgba(196, 160, 90, 0.25), transparent 45% ); opacity: 0; transition: opacity 0.35s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease, filter 0.45s ease; } .gallery-item:hover img { transform: scale(1.05); filter: contrast(1.08) saturate(1.06); } .gallery-item:hover::after { opacity: 1; } .gallery-tag { position: absolute; right: 0.55rem; bottom: 0.55rem; font-family: var(--font-accent); font-size: 0.7rem; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 0.24rem 0.5rem; } .field { display: grid; gap: 0.35rem; margin-top: 0.74rem; } .field label { color: #ddd0c0; font-size: 0.88rem; } .field input, .field select, .field textarea { min-height: 44px; border-radius: 10px; border: 1px solid rgba(245, 241, 231, 0.24); background: rgba(255, 255, 255, 0.06); color: #f6efe5; padding: 0.58rem 0.74rem; } .field textarea { min-height: 108px; resize: vertical; } .wish-list { max-height: 320px; overflow-y: auto; } .private-card { border-style: dashed; } .private-grid { display: grid; gap: 0.8rem; margin-top: 0.8rem; } .private-code { font-family: var(--font-accent); word-break: break-all; } .private-qr { width: min(136px, 100%); aspect-ratio: 1; border-radius: 10px; object-fit: cover; border: 1px solid rgba(245, 241, 231, 0.26); } .floating { position: fixed; right: 0.86rem; bottom: 1rem; z-index: 40; display: grid; gap: 0.45rem; } .music-btn.playing { color: #10161a; background: linear-gradient(120deg, #c4a05a, #8f7239); } .footer { padding: 2rem 0 2.38rem; } .footer-inner { text-align: center; color: #d8cfc1; } .lightbox { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.86); } .lightbox.active { display: grid; } .lightbox img { width: min(900px, 100%); max-height: 88vh; object-fit: contain; border-radius: 12px; } .fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-up.show { opacity: 1; transform: translateY(0); } .open-btn:hover, .copy-btn:hover, .map-btn:hover, .submit-btn:hover, .music-btn:hover, .top-btn:hover { transform: translateY(-2px); } @keyframes count-flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(-82deg); } 100% { transform: rotateX(0deg); } } @keyframes twinkle { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.22; } } @media (min-width: 760px) { .story-grid { grid-template-columns: 1.25fr 0.75fr; } .schedule-grid, .gift-grid, .rsvp-grid, .private-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .countdown, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
🎨 Preview Template: Arcane Academy Invitation | Kategori: Wedding
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
The Wedding of Our Dreams: Ahmad Rizki & Siti Nurhaliza
Arcane Academy Invitation

The Wedding of Our Dreams

Bersama Kita Wujudkan Mimpi

Dihadiri oleh Ahmad Rizki & Siti Nurhaliza

Keluarga Besar Rahman Yang Terhormat
Admission Approved
Grand Hall Countdown

Ahmad Rizki & Siti Nurhaliza

Friday, 2026-05-15 - Masjid Al-Ikhlas

00Days
00Hours
00Minutes
00Seconds
Chapter I

Kisah Kami

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."
Arcane Soul A

Ahmad Rizki Suryadi

Nama panggilan: Rizki
Putra dari Bapak Suryadi dan Ibu Siti Aminah

Arcane Soul B

Siti Nurhaliza Rahmat

Nama panggilan: Siti
Putri dari Bapak Rahmat dan Ibu Fatimah

Portrait Arcane Soul A

Ahmad Rizki Suryadi

Portrait Arcane Soul B

Siti Nurhaliza Rahmat

Chapter II

Jadwal Acara

Akad Nikah

Session A

Friday, 2026-05-15
09:00 - 11:00
Masjid Al-Ikhlas
Jl. Masjid Raya No. 456, Jakarta Pusat

Buka Peta Akad

Resepsi

Session B

Friday, 2026-05-15
19:00 - 22:00
Gedung Serbaguna Menteng
Jl. Menteng Raya No. 123, Jakarta Pusat

Buka Peta Resepsi
Chapter IV

Hadiah dan Dukungan

Vault 01

Bank Mandiri

No. Rekening: 1234567890
Atas Nama: Ahmad Siti Wedding

Vault 02

GoPay

No. Rekening: 081234567890
Atas Nama: Ahmad Rizki

Chapter V

RSVP dan Ucapan

Form Kehadiran

Catatan Ucapan

Contoh Tamu: Selamat menempuh hidup baru, semoga selalu harmonis.
Chapter VI

Akses Undangan Privat

Gunakan kode ini untuk verifikasi akses tamu.

Kode Undangan
WED2025001
QR Code Undangan

Terima kasih atas doa dan kehadiran Anda untuk Ahmad Rizki & Siti Nurhaliza.

Atas