:root { --bg: #0d1715; --bg-soft: #14221e; --emerald: #1f7a62; --emerald-soft: #9ad6c5; --gold: #d0b46e; --rose: #a4485f; --ink: #eef0ec; --muted: #c1cbc6; --line: rgba(238, 240, 236, 0.2); --panel: rgba(18, 33, 29, 0.88); --card: rgba(22, 40, 35, 0.94); --font-head: "Cormorant Garamond", serif; --font-body: "Nunito Sans", sans-serif; --font-accent: "Marcellus SC", serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--font-body); background: radial-gradient( circle at 14% 10%, rgba(164, 72, 95, 0.2), transparent 36% ), radial-gradient( circle at 86% 88%, rgba(208, 180, 110, 0.18), transparent 35% ), linear-gradient(180deg, #0a1310 0%, #0f1b17 55%, #13231e 100%); min-height: 100vh; overflow-x: hidden; } body.locked { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } .mist { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.08; background: radial-gradient( circle at 20% 30%, rgba(255, 255, 255, 0.3), transparent 36% ), radial-gradient( circle at 70% 70%, rgba(255, 255, 255, 0.25), transparent 32% ); animation: mist-float 14s ease-in-out infinite alternate; } .fireflies { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .fireflies::before, .fireflies::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle, rgba(208, 180, 110, 0.55) 1.2px, transparent 1.4px ), radial-gradient( circle, rgba(154, 214, 197, 0.45) 1px, transparent 1.2px ); background-size: 120px 120px, 170px 170px; background-position: 0 0, 30px 40px; animation: firefly 9s linear infinite; } .fireflies::after { animation-duration: 12s; opacity: 0.5; } .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, 13, 11, 0.66), rgba(7, 13, 11, 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; } .masquerade-card { width: min(820px, 100%); border-radius: 22px; border: 1px solid rgba(238, 240, 236, 0.35); background: linear-gradient( 160deg, rgba(164, 72, 95, 0.22), rgba(24, 45, 38, 0.82) 44%, rgba(16, 30, 26, 0.96) ); box-shadow: 0 30px 74px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); padding: clamp(1.2rem, 3.5vw, 2.2rem); position: relative; } .mask-left, .mask-right { position: absolute; top: 1rem; width: 62px; height: 62px; border-radius: 999px; border: 1px solid rgba(208, 180, 110, 0.45); display: grid; place-items: center; color: #f0dfb7; background: rgba(208, 180, 110, 0.08); } .mask-left { left: 1rem; transform: rotate(-12deg); } .mask-right { right: 1rem; transform: rotate(12deg); } .kicker { font-family: var(--font-accent); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238, 240, 236, 0.92); } .cover-title, .hero-title, .section-title, .card-title { margin: 0; font-family: var(--font-head); line-height: 1.08; } .cover-title { margin-top: 0.7rem; font-size: clamp(2.2rem, 6.4vw, 4.5rem); } .rule { height: 1px; margin: 0.75rem 0 1rem; background: linear-gradient( 90deg, transparent, rgba(208, 180, 110, 0.82), transparent ); } .guest-tag { display: inline-flex; align-items: center; gap: 0.42rem; border: 1px dashed rgba(238, 240, 236, 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, #d0b46e, #8f7239); color: #1a1711; font-weight: 700; } .hero { min-height: 88vh; display: grid; align-items: center; background: linear-gradient(180deg, rgba(8, 14, 12, 0.6), rgba(8, 14, 12, 0.86)), 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.16rem, 3.2vw, 2rem); } .hero-panel { border: 1px solid rgba(238, 240, 236, 0.3); background: rgba(25, 45, 38, 0.72); } .seal { display: inline-flex; align-items: center; gap: 0.36rem; margin-bottom: 0.6rem; border: 2px solid rgba(164, 72, 95, 0.78); color: #e5a8b8; border-radius: 4px; padding: 0.24rem 0.52rem; font-family: var(--font-accent); font-size: 0.72rem; text-transform: uppercase; transform: rotate(-3deg); } .hero-title { margin-top: 0.65rem; font-size: clamp(2rem, 6vw, 4.1rem); } .hero-sub { margin: 0.84rem 0; color: rgba(238, 240, 236, 0.9); } .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } .count-box { border: 1px solid rgba(238, 240, 236, 0.32); border-radius: 12px; background: rgba(238, 240, 236, 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(238, 240, 236, 0.08), rgba(238, 240, 236, 0.46), rgba(238, 240, 236, 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(208, 180, 110, 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(238, 240, 236, 0.2); background: var(--card); padding: 0.95rem; } .portrait-grid { display: grid; gap: 0.8rem; } .portrait-card { border-radius: 12px; border: 1px solid rgba(238, 240, 236, 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: #cfe0d9; } .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(208, 180, 110, 0.64); background: rgba(208, 180, 110, 0.14); color: #efdfbe; 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: #f2f4ef; background: #48635b; } .map-btn, .submit-btn { color: #13100a; background: linear-gradient(120deg, #d0b46e, #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(238, 240, 236, 0.24); background: #456058; overflow: hidden; } .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.08); } .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: #d2dbd6; font-size: 0.88rem; } .field input, .field select, .field textarea { min-height: 44px; border-radius: 10px; border: 1px solid rgba(238, 240, 236, 0.24); background: rgba(255, 255, 255, 0.06); color: #eef2ed; 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(238, 240, 236, 0.26); } .floating { position: fixed; right: 0.86rem; bottom: 1rem; z-index: 40; display: grid; gap: 0.45rem; } .music-btn.playing { color: #13100a; background: linear-gradient(120deg, #d0b46e, #8f7239); } .footer { padding: 2rem 0 2.38rem; } .footer-inner { text-align: center; color: #d2d8d4; } .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 mist-float { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-20px) scale(1.04); } } @keyframes firefly { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(14px, -18px, 0); } } @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: Secret Garden Masquerade | Kategori: Wedding

← Kembali ke Gallery ✨ Daftar untuk Menggunakan

The Wedding of Our Dreams: Ahmad Rizki & Siti Nurhaliza

Secret Garden Masquerade

The Wedding of Our Dreams

Bersama Kita Wujudkan Mimpi

Hosted by Ahmad Rizki & Siti Nurhaliza

Keluarga Besar Rahman Yang Terhormat

Invitation Verified

Moonlit Countdown

Ahmad Rizki & Siti Nurhaliza

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

00Days

00Hours

00Minutes

00Seconds

Garden 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."

Masquerader A

Ahmad Rizki Suryadi

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

Masquerader B

Siti Nurhaliza Rahmat

Nama panggilan: Siti
Putri dari Bapak Rahmat dan Ibu Fatimah

Portrait Masquerader A

Ahmad Rizki Suryadi

Portrait Masquerader B

Siti Nurhaliza Rahmat

Garden Chapter II

Jadwal Acara

Akad Nikah

Moon Session

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

Buka Peta Akad

Resepsi

Garden Session

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

Buka Peta Resepsi

Garden Chapter III

Galeri Momen

Garden Chapter IV

Hadiah dan Dukungan

Garden Vault 01

Bank Mandiri

No. Rekening: 1234567890
Atas Nama: Ahmad Siti Wedding

Garden Vault 02

GoPay

No. Rekening: 081234567890
Atas Nama: Ahmad Rizki

Garden Chapter V

RSVP dan Ucapan

Form Kehadiran

Catatan Tamu

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

Garden Chapter VI

Akses Undangan Privat

Gunakan kode ini untuk verifikasi akses tamu.

Kode Undangan

WED2025001

QR Code Undangan

Atas