/* ========================================================================= Thiệp cưới online - lamha.love Style dùng chung cho cả /nha-trai và /nha-gai. Muốn đổi màu / font chủ đạo cho CẢ HAI trang: sửa các biến trong :root. Muốn đổi màu / font riêng cho MỘT trang: mỗi trang có thẻ với class riêng (body.side-trai / body.side-gai) - xem phần "Theo từng nhà" ở cuối file. ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap"); :root { --color-bg: #fdf8f4; --color-bg-alt: #f7efe8; --color-ink: #3f342e; --color-ink-soft: #7a6a60; --color-accent: #b98a7a; --color-accent-dark: #8f5c4c; --color-line: #e3d4c8; --color-card: #ffffff; --font-script: "Great Vibes", cursive; --font-serif: "Cormorant Garamond", serif; --font-sans: "Be Vietnam Pro", sans-serif; --max-width: 560px; --radius: 18px; --shadow-soft: 0 12px 30px rgba(63, 52, 46, 0.12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-serif); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; position: relative; } section { padding: 64px 0; position: relative; } .section-title { text-align: center; font-family: var(--font-script); font-size: 44px; color: var(--color-accent-dark); margin: 0 0 8px; font-weight: 400; } .section-subtitle { text-align: center; font-family: var(--font-sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-ink-soft); margin: 0 0 36px; } .divider { width: 60px; height: 1px; background: var(--color-accent); margin: 0 auto 36px; opacity: 0.6; } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- Falling petals ---------- */ #petals { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; } .petal { position: absolute; top: -10%; font-size: 18px; opacity: 0.85; animation-name: petal-fall; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; } @keyframes petal-fall { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(var(--drift, 40px), 110vh, 0) rotate(340deg); } } @media (prefers-reduced-motion: reduce) { .petal { animation: none; display: none; } .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Hero ---------- */ .hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 48px 0; background-size: cover; background-position: center; position: relative; color: #fff; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(63, 45, 38, 0.45) 0%, rgba(63, 45, 38, 0.25) 45%, rgba(63, 45, 38, 0.6) 100% ); } .hero-content { position: relative; z-index: 1; padding: 0 24px; } .hero-eyebrow { font-family: var(--font-sans); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; opacity: 0.9; margin-bottom: 18px; } .hero-names { font-family: var(--font-script); font-size: 64px; line-height: 1.15; margin: 0; } .hero-amp { display: block; font-size: 32px; margin: 4px 0; opacity: 0.9; } .hero-date { margin-top: 22px; font-family: var(--font-sans); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .hero-scroll { margin-top: 40px; font-size: 24px; animation: bob 2.2s ease-in-out infinite; opacity: 0.85; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ---------- Intro / lời mời ---------- */ .invite-card { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 36px 28px; text-align: center; } .invite-card p { margin: 0 0 14px; } .invite-family { font-family: var(--font-sans); font-size: 15px; color: var(--color-ink-soft); margin: 20px 0; } .invite-family strong { display: block; font-family: var(--font-serif); font-size: 19px; color: var(--color-ink); font-weight: 600; } .invite-groom-bride { font-family: var(--font-script); font-size: 34px; color: var(--color-accent-dark); margin: 18px 0; } /* ---------- Countdown ---------- */ .countdown { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .countdown-item { background: var(--color-card); border-radius: 14px; box-shadow: var(--shadow-soft); width: 76px; padding: 14px 0 10px; text-align: center; } .countdown-value { font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--color-accent-dark); line-height: 1; } .countdown-label { margin-top: 6px; font-family: var(--font-sans); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-ink-soft); } .countdown-done { text-align: center; font-family: var(--font-script); font-size: 28px; color: var(--color-accent-dark); } /* ---------- Timeline (lịch trình / love story) ---------- */ .timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-line); margin-left: 10px; } .timeline li { position: relative; padding: 0 0 32px 28px; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-accent); } .timeline-time { font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 600; } .timeline-title { font-size: 20px; font-weight: 600; margin: 2px 0 4px; } .timeline-desc { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); margin: 0; } /* ---------- Love story ---------- */ .story-item { display: flex; gap: 18px; align-items: center; margin-bottom: 30px; } .story-item:nth-child(even) { flex-direction: row-reverse; text-align: right; } .story-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-soft); } .story-photo img { width: 100%; height: 100%; object-fit: cover; } .story-year { font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; color: var(--color-accent-dark); text-transform: uppercase; } .story-title { font-size: 19px; font-weight: 600; margin: 2px 0 4px; } .story-desc { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); margin: 0; } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gallery-grid button { padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .gallery-grid button:hover img, .gallery-grid button:focus-visible img { transform: scale(1.08); } .lightbox { position: fixed; inset: 0; background: rgba(20, 15, 12, 0.92); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-close { top: 20px; right: 20px; } .lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); } /* ---------- Map ---------- */ .map-block { margin-bottom: 22px; } .map-block:last-child { margin-bottom: 0; } .map-block h3 { font-size: 19px; margin: 0 0 4px; } .map-block .map-address { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); margin: 0 0 12px; } .map-frame-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .map-frame-wrap iframe { width: 100%; height: 220px; border: 0; display: block; } .map-link { display: inline-block; margin-top: 10px; font-family: var(--font-sans); font-size: 13px; color: var(--color-accent-dark); text-decoration: underline; } /* ---------- Wishes form ---------- */ .wishes-form { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 24px; margin-bottom: 28px; } .wishes-form .field { margin-bottom: 14px; } .wishes-form label { display: block; font-family: var(--font-sans); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 6px; } .wishes-form input, .wishes-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 10px; font-family: var(--font-serif); font-size: 16px; background: var(--color-bg); color: var(--color-ink); resize: vertical; } .wishes-form input:focus, .wishes-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } .wishes-form textarea { min-height: 90px; } /* honeypot field - hidden from real guests, bots tend to fill every field */ .wishes-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 18px; border: none; border-radius: 10px; background: var(--color-accent-dark); color: #fff; font-family: var(--font-sans); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; } .btn:hover { background: var(--color-accent); } .btn:disabled { opacity: 0.6; cursor: default; } .form-status { margin-top: 10px; font-family: var(--font-sans); font-size: 13px; min-height: 18px; } .form-status.error { color: #a4453a; } .form-status.success { color: #4c7a4f; } .wishes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: 360px; overflow-y: auto; } .wishes-list li { background: var(--color-bg-alt); border-radius: 12px; padding: 14px 16px; } .wish-name { font-weight: 600; font-size: 15px; } .wish-message { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); margin: 4px 0 0; } .wishes-empty { text-align: center; font-family: var(--font-sans); font-size: 13px; color: var(--color-ink-soft); } /* ---------- Gift / QR (optional small block) ---------- */ .gift-note { text-align: center; font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); } /* ---------- Footer ---------- */ .site-footer { text-align: center; padding: 40px 0 60px; font-family: var(--font-script); font-size: 30px; color: var(--color-accent-dark); } .site-footer small { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px; color: var(--color-ink-soft); } /* ---------- Music toggle ---------- */ .music-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 50; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--color-card); box-shadow: var(--shadow-soft); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .music-toggle .icon-playing { display: none; } .music-toggle.is-playing .icon-muted { display: none; } .music-toggle.is-playing .icon-playing { display: block; } /* ---------- Utility ---------- */ .tag { display: inline-block; font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent-dark); border: 1px solid var(--color-accent); border-radius: 999px; padding: 4px 14px; margin-bottom: 14px; } @media (min-width: 640px) { .hero-names { font-size: 76px; } }