/* ========================================================================== Wedding invite — custom styles (everything Tailwind can't express cleanly) ========================================================================== */ :root { --cream: #FAF6EF; --ivory: #F4ECDD; --sage: #9CAF9A; --sage-dark: #6F8C75; --ink: #2B2A26; --blush: #E8C4B8; --gold: #B89968; /* Matches the background color baked into /assets/invite.svg so the SVG visually fuses with the page. */ --invite-bg: #F0EAD8; } /* min-height (not height) so the body grows with its content — a fixed 100% height makes the body a viewport-tall scroll box, which clips the bottom of the page on mobile where the address bar changes the viewport. */ html, body { min-height: 100%; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Override Tailwind's bg-cream on so the page color matches the SVG */ body { background: var(--invite-bg); } body.scroll-unlocked { overflow: auto; } /* Empty buffer at the very bottom so mobile browser chrome / the iOS toolbar can't overlap the footer or the end of the invite. */ .bottom-spacer { height: 1px; } /* Visually-hidden text for screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== Loading overlay — covers the page until the invite lookup resolves ========================================================================== */ .loading-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--invite-bg); transition: opacity 0.45s ease; } .loading-overlay.gone { opacity: 0; pointer-events: none; } .spinner { width: 44px; height: 44px; border: 3px solid rgba(111, 140, 117, 0.18); border-top-color: var(--sage-dark); border-radius: 50%; animation: spin 0.85s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } } /* ========================================================================== Invitation hero — the SVG is the design ========================================================================== */ /* The SVG IS the page — full width, centered. The body background (var(--invite-bg)) matches the SVG so it looks seamless on wide screens where the SVG is capped by max-width. */ .invite-hero { display: flex; justify-content: center; background: var(--invite-bg); } .invite-image { display: block; width: 100%; max-width: 900px; height: auto; } /* ========================================================================== Floating "RSVP below" notice ========================================================================== */ .rsvp-notice { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 50; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.1rem; background: var(--invite-bg); border: 1px solid rgba(111, 140, 117, 0.35); color: var(--sage-dark); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; border-radius: 999px; box-shadow: 0 6px 18px rgba(43, 42, 38, 0.12); transition: opacity 0.3s ease, transform 0.3s ease; } .rsvp-notice:hover, .rsvp-notice:focus-visible { background: var(--sage-dark); color: var(--cream); outline: none; } .rsvp-notice .chevron { width: 14px; height: 14px; animation: chevron-bounce 1.8s ease-in-out infinite; } @keyframes chevron-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .rsvp-notice.gone { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); } @media (prefers-reduced-motion: reduce) { .rsvp-notice .chevron { animation: none; } } /* ========================================================================== RSVP form — per-guest card ========================================================================== */ .guest-card { padding: 1.25rem 1.25rem 1.5rem; border: 1px solid rgba(111, 140, 117, 0.25); background: rgba(255, 255, 255, 0.45); display: flex; flex-direction: column; gap: 1.25rem; } .guest-card-header { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; } @media (min-width: 640px) { .guest-card-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; } } .guest-card .guest-name { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; line-height: 1.1; } .guest-card-fields { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(111, 140, 117, 0.25); } @media (min-width: 640px) { .guest-card-fields { grid-template-columns: 1fr 1fr; gap: 1.25rem; } } .guest-options { display: flex; gap: 0.5rem; } .guest-options label { cursor: pointer; padding: 0.5rem 1.25rem; border: 1px solid rgba(111, 140, 117, 0.4); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-dark); transition: background-color 0.2s ease, color 0.2s ease; user-select: none; } .guest-options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .guest-options input[type="radio"]:checked + span { background-color: var(--sage-dark); color: var(--cream); } .guest-options label:has(input:checked) { background-color: var(--sage-dark); color: var(--cream); border-color: var(--sage-dark); } .guest-options label:focus-within { outline: 2px solid var(--sage); outline-offset: 2px; } /* Submitting state — dim + lock the form while the request is in flight */ #rsvp-form.submitting .guest-card { opacity: 0.55; pointer-events: none; } .btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(250, 246, 239, 0.35); border-top-color: var(--cream); border-radius: 50%; animation: spin 0.7s linear infinite; } /* Confirmation artwork — shares the SVG's #F0EAD8 background. Square photo, so cap it tighter than the portrait invite. */ .success-image { display: block; width: 100%; max-width: 360px; height: auto; } /* Completed state: thank-you + summary on top, invite.svg below */ #invitation-scene.completed { display: flex; flex-direction: column; } #invitation-scene.completed #rsvp { order: 1; padding-top: 1.5rem; padding-bottom: 0; } #invitation-scene.completed #invite-hero { order: 2; } #invitation-scene.completed footer { order: 3; } /* RSVP review summary cards */ .summary-card { padding: 1rem 1.25rem; border: 1px solid rgba(111, 140, 117, 0.25); background: rgba(255, 255, 255, 0.4); } .summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .summary-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; line-height: 1.1; } .summary-status { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap; } .summary-status.yes { background: var(--sage-dark); color: var(--cream); } .summary-status.no { background: rgba(43, 42, 38, 0.08); color: var(--ink); } .summary-detail { margin-top: 0.45rem; font-size: 0.85rem; color: rgba(43, 42, 38, 0.72); } .summary-detail .label { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.6rem; color: var(--sage-dark); margin-right: 0.4rem; }