/* Khung dùng chung cho mọi mẫu thiệp. Mẫu chỉnh màu qua biến trên và style.css riêng. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--stage, #f4eef0); color: #111; font-family: Arial, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; } p, h1, h2, h3 { margin: 0; font-weight: 400; } button { font: inherit; color: inherit; cursor: pointer; } /* ---------- khung 420px ---------- */ .vela-stage { min-height: 100vh; } .vela-frame { position: relative; width: 420px; margin: 0 auto; overflow: hidden; background: #fff; } @media (min-width: 768px) { .vela-stage { padding: 40px 0; background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 45%), radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%), var(--stage, #f4eef0); } .vela-frame { border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .18), 0 0 0 10px rgba(255, 255, 255, .6); } } /* ---------- khung ảnh ---------- */ .ph { position: absolute; overflow: hidden; background: #eee; } .ph > img { width: 100%; height: 100%; object-fit: cover; } /* ---------- hiệu ứng khi cuộn tới ---------- */ .vela-js [data-anim] { opacity: 0; } .vela-js [data-anim].is-in { opacity: 1; animation-duration: var(--dur, 1.5s); animation-delay: var(--delay, 0s); animation-fill-mode: both; animation-timing-function: ease; } [data-anim="fade-in"].is-in { animation-name: vela-fade-in; } [data-anim="fade-in-up"].is-in { animation-name: vela-fade-in-up; } [data-anim="fade-in-down"].is-in { animation-name: vela-fade-in-down; } [data-anim="fade-in-left"].is-in { animation-name: vela-fade-in-left; } [data-anim="fade-in-right"].is-in { animation-name: vela-fade-in-right; } [data-anim="zoom-in"].is-in { animation-name: vela-zoom-in; } [data-anim="slide-in-up"].is-in { animation-name: vela-slide-in-up; } @keyframes vela-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vela-fade-in-up { from { opacity: 0; transform: translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } } @keyframes vela-fade-in-down { from { opacity: 0; transform: translate3d(0, -60px, 0); } to { opacity: 1; transform: none; } } @keyframes vela-fade-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes vela-fade-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes vela-zoom-in { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes vela-slide-in-up { from { transform: translate3d(0, 100%, 0); } to { transform: none; } } @keyframes vela-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes vela-heart { 0%, 100% { opacity: 1; transform: scale(1.05); } 50% { opacity: .55; transform: scale(.92); } } @keyframes vela-spin { to { transform: rotate(360deg); } } .vela-pulse { animation: vela-pulse var(--dur, 3s) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .vela-js [data-anim] { opacity: 1; } .vela-js [data-anim].is-in, .vela-pulse { animation: none !important; } } /* ---------- màn mở thiệp ---------- */ .vela-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; } .vela-gate__door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--gate-bg, #fbeff4); transition: transform 1.2s cubic-bezier(.7, 0, .3, 1); } .vela-gate__door--l { left: 0; box-shadow: inset -12px 0 24px -18px rgba(0, 0, 0, .35); } .vela-gate__door--r { right: 0; box-shadow: inset 12px 0 24px -18px rgba(0, 0, 0, .35); } .vela-gate__card { position: relative; width: min(360px, 86vw); padding: 44px 24px 36px; text-align: center; color: var(--gate-ink, #222); transition: opacity .5s ease, transform .6s ease; } .vela-gate__label { font-size: 15px; letter-spacing: 2px; text-transform: uppercase; } .vela-gate__guest { margin: 10px 0 14px; font-family: var(--f-script, cursive); font-size: 40px; line-height: 1.3; } .vela-gate__names { margin-top: 8px; font-family: var(--f-script, cursive); font-size: 34px; line-height: 1.4; } .vela-gate__names span { font-size: .8em; } .vela-gate__date { margin-top: 4px; font-size: 16px; letter-spacing: 4px; } .vela-gate__open { margin-top: 28px; padding: 14px 40px; border: 0; border-radius: 999px; background: var(--accent, #f0c1e1); color: var(--accent-ink, #111); font-size: 16px; font-weight: 700; letter-spacing: 1px; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); animation: vela-pulse 2.4s ease-in-out infinite; } .vela-gate.is-open { pointer-events: none; } .vela-gate.is-open .vela-gate__door--l { transform: translateX(-101%); } .vela-gate.is-open .vela-gate__door--r { transform: translateX(101%); } .vela-gate.is-open .vela-gate__card { opacity: 0; transform: scale(.94); } .vela-gate.is-gone { display: none; } html.gate-lock, html.gate-lock body { overflow: hidden; } /* ---------- nút nhạc ---------- */ .vela-music { position: fixed; z-index: 40; bottom: 14px; left: max(12px, calc(50% - 198px)); width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); } .vela-music[hidden] { display: none; } .vela-music svg { width: 24px; height: 24px; fill: #222; } .vela-music.is-playing svg { animation: vela-spin 4s linear infinite; } .vela-music:not(.is-playing)::after { content: ""; position: absolute; width: 30px; height: 2px; background: #222; transform: rotate(-45deg); } /* ---------- bottom sheet ---------- */ .vela-sheet { position: fixed; inset: 0; z-index: 60; } .vela-sheet[hidden] { display: none; } .vela-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); animation: vela-fade-in .25s ease both; } .vela-sheet__panel { position: absolute; left: 50%; bottom: 0; width: 420px; max-width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: 28px 22px calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-radius: 22px 22px 0 0; background: #fff; animation: vela-sheet-up .35s cubic-bezier(.2, .8, .2, 1) both; } @keyframes vela-sheet-up { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } } .vela-sheet__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f2f2; font-size: 24px; line-height: 1; } .vela-sheet__title { font-size: 22px; font-weight: 700; text-align: center; } .vela-sheet__lead { margin-top: 6px; font-size: 15px; color: #555; text-align: center; } .vela-form { display: grid; gap: 14px; margin-top: 18px; } .vela-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 15px; } .vela-field > span, .vela-field legend { font-weight: 700; padding: 0; } .vela-field input, .vela-field select, .vela-field textarea { width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 12px; background: #fafafa; font: inherit; font-size: 16px; } .vela-field textarea { resize: vertical; } .vela-choice { gap: 8px; } .vela-choice label { display: flex; align-items: center; gap: 10px; } .vela-choice input { width: 20px; height: 20px; accent-color: var(--accent-strong, #d14a8b); } .vela-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .vela-btn { padding: 14px 18px; border: 0; border-radius: 12px; background: var(--accent, #f0c1e1); color: var(--accent-ink, #111); font-size: 16px; font-weight: 700; } .vela-btn:disabled { opacity: .6; } .vela-btn--ghost { background: #f3f3f3; color: #111; } .vela-form__msg { min-height: 20px; font-size: 15px; text-align: center; } .vela-gifts { display: grid; gap: 16px; margin-top: 18px; } .vela-gift { display: grid; justify-items: center; gap: 4px; padding: 18px; border: 1px solid #eee; border-radius: 16px; text-align: center; } .vela-gift__side { font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; } .vela-gift__qr { width: 220px; height: auto; margin: 8px 0; } .vela-gift__bank { font-size: 15px; color: #555; } .vela-gift__acc { font-size: 22px; font-weight: 700; letter-spacing: 1px; } .vela-gift__holder { font-size: 15px; text-transform: uppercase; margin-bottom: 8px; } .vela-toast { position: fixed; z-index: 70; left: 50%; bottom: 90px; padding: 10px 18px; border-radius: 999px; background: rgba(20, 20, 20, .88); color: #fff; font-size: 15px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; } .vela-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---------- lời chúc chạy trên thiệp ---------- */ .vela-wishes { position: fixed; z-index: 35; left: max(12px, calc(50% - 198px)); bottom: 74px; width: 270px; max-width: calc(100vw - 24px); pointer-events: none; } .vela-wishes[hidden] { display: none; } .vela-wish { padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); font-size: 13px; line-height: 1.4; color: #222; animation: vela-wish-in 5s ease both; } .vela-wish b { color: var(--accent-strong, #b0306e); } @keyframes vela-wish-in { 0% { opacity: 0; transform: translateY(12px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .vela-wish { animation: none; } } /* Chữ 囍: font riêng 1KB (Noto Serif TC Black, giấy phép OFL) để mọi máy hiện giống nhau. */ @font-face { font-family: "Vela Hy"; src: url("/core/hy.woff2") format("woff2"); unicode-range: U+56CD; font-display: block; } /* ---------- khối khách không muốn (invite.json → "hide": ["album", ...]) ---------- */ .hide-ceremony [data-block~="ceremony"], .hide-calendar [data-block~="calendar"], .hide-venue [data-block~="venue"], .hide-album [data-block~="album"], .hide-quote [data-block~="quote"], .hide-rsvp [data-block~="rsvp"], .hide-rsvp [data-rsvp], .hide-rsvp [data-open-sheet="rsvp"], .hide-gift [data-block~="gift"], .hide-gift [data-open-sheet="gift"] { display: none !important; } /* ---------- dòng thương hiệu cuối thiệp ---------- */ .vela-credit { position: relative; z-index: 2; margin: 0; padding: 12px 0 16px; text-align: center; font: 12px/1.4 Arial, Roboto, sans-serif; } .vela-credit a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #666; text-decoration: none; } .vela-credit b { color: #801e2a; font-family: "Montserrat", Arial, sans-serif; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* ---------- sự kiện thêm (gói 2) ---------- */ .vela-events { position: relative; z-index: 2; padding: 10px 18px; } .vela-event { margin: 10px 0; padding: 18px 16px; border: 1px solid var(--accent-strong, #b0306e); border-radius: 16px; background: rgba(255, 255, 255, .94); font-family: Arial, Roboto, sans-serif; color: #111; text-align: center; } .vela-event p { margin: 0; } .vela-event__side { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-strong, #b0306e); } .vela-event__title { margin-top: 4px !important; font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .vela-event__time { margin-top: 10px !important; font-size: 16px; } .vela-event__date { margin-top: 2px !important; font-size: 17px; font-weight: 700; letter-spacing: 6px; } .vela-event__lunar { margin-top: 6px !important; font-size: 13px; font-style: italic; letter-spacing: .5px; } .vela-event__place { margin-top: 8px !important; font-size: 16px; } .vela-event__addr { margin-top: 2px !important; font-size: 14px; color: #555; } .vela-event__map { display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 999px; background: var(--accent-strong, #b0306e); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }