:root { --color-bg: #f8f9fa; --color-white: #ffffff; --color-blue: #005a9c; --color-pink: #d90368; --color-text: #343a40; --font-heading: 'Great Vibes', cursive; --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; } /* === Cover Splash Screen - Minimalis === */ #cover-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200') no-repeat center center; background-size: cover; } .cover-content { color: var(--color-white); } .cover-content h1 { font-family: var(--font-heading); font-size: clamp(3rem, 12vw, 5rem); font-weight: 400; margin: 0; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } #enter-button { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border: 1px solid var(--color-white); color: var(--color-white); padding: 10px 25px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; border-radius: 50px; cursor: pointer; margin-top: 20px; transition: all 0.3s; } #enter-button:hover { background-color: var(--color-white); color: var(--color-blue); } #cover-splash.hidden { opacity: 0; pointer-events: none; } /* === Main Content Styling === */ #hero { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 80vh; color: var(--color-white); background: linear-gradient(rgba(0, 90, 156, 0.4), rgba(0, 90, 156, 0.7)), url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200') no-repeat center center; background-size: cover; background-attachment: fixed; } #hero h2 { font-family: var(--font-heading); font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 400; margin: 0; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } .container { max-width: 800px; margin: 0 auto; padding: 80px 20px; } section { padding: 80px 0; text-align: center; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } section.visible { opacity: 1; transform: translateY(0); } .animated { transition-delay: 0.2s; } .section-title { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 400; margin-bottom: 30px; color: var(--color-blue); } .section-title::after { content: ''; display: block; width: 80px; height: 3px; background-color: var(--color-pink); margin: 15px auto 0; } section p { font-size: 1.1rem; line-height: 1.8; max-width: 600px; margin: 0 auto 30px auto; } /* Wave Animation */ .wave-container { position: relative; background-color: #f1f8ff; } .waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; } .wave-content { position: relative; z-index: 1; padding: 80px 0; } /* Info Grid */ .info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 25px; margin: 40px 0; } .info-item { background: var(--color-white); padding: 25px 20px; border-radius: 15px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); text-align: center; transition: all 0.3s ease; border: 2px solid transparent; } .info-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); border-color: var(--color-pink); } .info-item .icon { font-size: 2.8rem; color: var(--color-blue); margin-bottom: 15px; transition: all 0.3s ease; } .info-item:hover .icon { color: var(--color-pink); transform: scale(1.1); } .info-item h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--color-text); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .info-item p { color: var(--color-text); font-size: 1rem; line-height: 1.5; margin: 0; } /* Lokasi - Full width on second row */ .info-item.lokasi-full { grid-column: 1 / -1; text-align: left; padding: 30px; display: flex; align-items: flex-start; gap: 20px; } .info-item.lokasi-full .icon-section { flex-shrink: 0; } .info-item.lokasi-full .content-section { flex: 1; } .info-item.lokasi-full h3 { margin-bottom: 15px; text-align: left; } .info-item.lokasi-full p { text-align: left; margin-bottom: 15px; } /* Responsive grid adjustments */ @media (max-width: 768px) { .info-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .info-item { padding: 20px 15px; } .info-item .icon { font-size: 2.2rem; } .info-item.lokasi-full { grid-column: 1 / -1; text-align: center; padding: 25px 20px; display: block; } .info-item.lokasi-full h3, .info-item.lokasi-full p { text-align: center; } } @media (max-width: 480px) { .info-grid { grid-template-columns: 1fr; gap: 15px; } } /* Remove the dress-code-wide class styling since we're using explicit grid columns */ /* Countdown */ #countdown { display: flex; justify-content: center; gap: 15px; margin: 30px 0; } .time-box { background-color: var(--color-white); padding: 10px; border-radius: 8px; width: 70px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .time-box span { display: block; font-weight: 600; font-size: 2rem; color: var(--color-blue); } /* Galeri Foto */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .polaroid { background: white; padding: 15px 15px 50px 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s; cursor: pointer; } .polaroid:hover { transform: translateY(-10px) rotate(3deg); } .polaroid img { width: 100%; display: block; } .polaroid .caption { font-family: var(--font-heading); font-size: 1.5rem; margin-top: 15px; color: var(--color-pink); } #lightbox { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; } #lightbox.active { display: flex; } #lightbox img { max-width: 90%; max-height: 80%; } #rsvp { background-color: #f1f8ff; padding-bottom: 100px; } .rsvp-form { max-width: 500px; margin: 0 auto; } .rsvp-form input, .rsvp-form select, .rsvp-form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #ccc; font-family: var(--font-body); font-size: 1rem; resize: vertical; } .btn-maps { display: inline-block; background-color: var(--color-blue); color: white; padding: 8px 15px; text-decoration: none; border-radius: 20px; font-size: 0.9rem; margin-top: 10px; transition: all 0.3s; } .btn-maps:hover { background-color: var(--color-pink); transform: scale(1.05); } #guestMessages { max-height: 300px; overflow-y: auto; } .guest-message { background: #f8f9fa; padding: 15px; margin-bottom: 10px; border-radius: 8px; border-left: 4px solid var(--color-blue); } .guest-message .name { font-weight: 600; color: var(--color-blue); margin-bottom: 5px; } .guest-message .message { color: var(--color-text); line-height: 1.5; } .guest-message .status { font-size: 0.8rem; color: #666; margin-top: 5px; font-style: italic; } .btn-submit { background-color: var(--color-pink); color: var(--color-white); border: none; padding: 15px 30px; font-size: 1.1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s; } .btn-submit:hover { transform: scale(1.05); } /* === Bottom Navigation === */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-around; padding: 10px 0; z-index: 99; } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--color-text); text-decoration: none; transition: color 0.3s; } .nav-item:hover { color: var(--color-pink); } .nav-icon { font-size: 1.5rem; margin-bottom: 5px; } .nav-label { font-size: 0.8rem; } /* === Sticky Footer Music Player === */ .music-player { position: fixed; bottom: 70px; left: 0; width: 100%; background-color: rgba(0, 90, 156, 0.8); color: var(--color-white); padding: 10px; display: flex; justify-content: center; align-items: center; z-index: 98; } .music-player button { background: none; border: none; color: var(--color-white); font-size: 1.2rem; cursor: pointer; } .music-player #song-title { font-size: 0.9rem; margin-right: 20px; } footer { text-align: center; padding: 20px; font-size: 1rem; color: var(--color-blue); background-color: #f1f8ff; margin-bottom: 90px; /* Ruang untuk bottom nav */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

🎨 Preview Template: Santorini | Kategori: Birthday

← Kembali ke Gallery ✨ Daftar untuk Menggunakan

Undangan Ulang Tahun Sarah Amanda

Dengan sukacita kami mengundang Anda untuk merayakan ulang tahun yang istimewa

Sarah - 25

The Celebration

Dalam rangka merayakan hari ulang tahun ke-25 Sarah Amanda, kami mengundang Anda untuk menikmati malam yang hangat dengan nuansa pulau Santorini yang menawan. Semoga tahun yang baru membawa kebahagiaan dan kesuksesan