/* ═══════════════════════════════════════════════════════════════════════════ stationery-mini-rsvp-flyer-rsvp-by — "RSVP By" (Mini RSVP · Flyer) The compact reminder (mailgram) · ivory + ink + vermillion postmark. Same stationery family as the card, louder: a dashed postmark stamp, a dark event chip, a "tear here" perforation, and a live countdown. Layout contract: · .app-shell locks to the viewport (100dvh) only when has "js". · Only the ACTIVE panel scrolls internally; inactive panels are hidden. · Without JS the page degrades to a normal stacked, scrolling document. ═══════════════════════════════════════════════════════════════════════════ */ :root { --paper: #f4edde; /* ground */ --paper-2: #eae0cb; /* deeper paper for boxes */ --sheet: #fdfaf3; /* form surface */ --ink: #2b2620; /* warm charcoal */ --ink-2: #201c17; /* deeper ink */ --ink-3: #2e2922; /* raised surface */ --cream: #fdfaf3; --cream-soft: rgba(253, 250, 243, .68); --cream-faint: rgba(253, 250, 243, .4); --ink-soft: #8a8172; /* muted body text on paper */ --ink-soft-2: #6f675a; /* form labels on paper */ --ink-faint: #b3aa99; /* hints, placeholders, footer */ --line: rgba(43, 38, 32, .16); --line-soft: rgba(43, 38, 32, .09); --line-cream: rgba(253, 250, 243, .16); --seal: #c04a2c; /* vermillion — postmark / stamp */ --seal-deep: #9f3b22; --seal-soft: rgba(192, 74, 44, .14); --gold: #b3925c; --danger: #b33a2e; --radius: 20px; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font: 16px/1.65 var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { vertical-align: middle; } /* ── Utilities ─────────────────────────────────────────────────────────── */ .kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--seal); } /* ── Shell: single viewport, only the active panel scrolls ─────────────── */ .app-shell { position: relative; width: 100%; } .js .app-shell { height: 100vh; /* fallback */ height: 100dvh; overflow: hidden; } .panel { position: relative; } .js .panel { height: 100%; display: none; } .js .panel.is-active { display: block; } /* Only the active panel scrolls internally. */ .js .panel.is-active { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .panel-inner { max-width: 640px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 20px calc(132px + env(safe-area-inset-bottom)); min-height: 100%; display: flex; flex-direction: column; justify-content: center; } /* ── Panel themes ──────────────────────────────────────────────────────── */ .remind-panel { background-color: var(--paper); /* faint linen dotted texture */ background-image: radial-gradient(rgba(43, 38, 32, .04) 1px, transparent 1.4px); background-size: 22px 22px; } .detail-panel { background: var(--paper); color: var(--ink); } .guest-panel { background: var(--paper); } /* ── Postmark stamp ────────────────────────────────────────────────────── */ .stamp { position: relative; width: 184px; height: 184px; margin: 6px auto 0; border-radius: 50%; border: 3px dashed var(--seal); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 14px 22px rgba(43, 38, 32, .18)); } /* inner dashed ring, slowly rotating for a postal-cancellation feel */ .stamp::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1.5px dashed rgba(192, 74, 44, .55); animation: ring-turn 32s linear infinite; } .stamp::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--paper-2); } @keyframes ring-turn { to { transform: rotate(360deg); } } .stamp-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.05; } .stamp-label { font-size: 12px; font-weight: 700; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--seal); } .stamp-date { font-family: var(--font-display); font-weight: 900; font-size: 46px; letter-spacing: .01em; color: var(--ink); } .stamp-waves { margin-top: 5px; } /* Empty-value guard: with both stamp texts gone (no RSVP-by date set), the postmark is an empty dashed ring — hide it. */ .stamp:not(:has(.stamp-label)):not(:has(.stamp-date)) { display: none; } /* ── Reminder headline ─────────────────────────────────────────────────── */ .guest-greeting { margin: 20px 0 0; font-family: var(--font-display); font-size: 17px; font-style: italic; text-align: center; color: var(--ink-soft); } .rsvp-title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 10vw, 52px); line-height: 1.04; letter-spacing: -.015em; color: var(--ink); } .rsvp-description { margin: 12px auto 0; max-width: 32em; text-align: center; font-size: 15.5px; color: var(--ink-soft); } /* ── Event chip (name · date · time · place) ───────────────────────────── */ .event-chip { margin: 20px auto 0; max-width: 520px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: var(--cream); box-shadow: 0 12px 24px rgba(43, 38, 32, .22); } .event-name { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: #fff; } .event-chip span[class*="event-"] { white-space: nowrap; } /* Separator dot between chip segments, drawn on each non-first segment. A segment the engine removes (empty value) takes its dot with it — no orphan dot, no double separator, no leading/trailing gap. */ .event-chip > span:not(:first-child)::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 12px; border-radius: 50%; background: var(--seal); } /* Empty-value guards: hide the whole chip when every segment is gone, so guests never see a hollow dark pill. */ .event-chip:not(:has(.event-name)):not(:has(.event-date)):not(:has(.event-time)):not(:has(.event-place)) { display: none; } .event-date, .event-time, .event-place { font-size: 14px; font-weight: 600; color: var(--cream-soft); } /* ── Perforation ("tear here — reply below") ───────────────────────────── */ .perforation { margin: 18px auto 0; max-width: 460px; display: flex; align-items: center; gap: 12px; color: var(--ink-faint); } .perf-line { flex: 1; border-top: 2px dashed rgba(43, 38, 32, .28); } .perf-mid { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--seal); white-space: nowrap; } /* ── Reply-by countdown ────────────────────────────────────────────────── */ .rsvp-countdown { margin: 16px auto 0; max-width: 380px; } .countdown-label { margin: 0 0 8px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .countdown-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .count-box { padding: 11px 4px 9px; border-radius: 12px; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; gap: 2px; text-align: center; } .count-box span { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; color: #fff; } .count-box small { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); } /* "Replies go straight to …" (filled by main.js from .host-name spans) */ .reply-to { margin: 14px 0 0; text-align: center; font-size: 13px; font-style: italic; color: var(--ink-faint); } /* ── RSVP form ─────────────────────────────────────────────────────────── */ .rsvp-form-display { display: grid; gap: 13px; margin-top: 20px; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-row { display: grid; gap: 13px; } @media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; } } .form-group label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft-2); } .form-control { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .form-control::placeholder { color: var(--ink-faint); } .form-control:focus { outline: none; border-color: var(--seal); box-shadow: 0 0 0 4px var(--seal-soft); background: #fff; } select.form-control { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c04a2c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; } /* The yes/no question gets a bolder field — it's the whole point of the page. */ select.form-control--big { padding: 15px 44px 15px 16px; font-family: var(--font-display); font-size: 17px; font-weight: 600; border-color: rgba(192, 74, 44, .45); background-color: rgba(192, 74, 44, .06); } textarea.form-control { resize: vertical; min-height: 72px; } .error { display: block; min-height: 0; font-size: 13px; font-weight: 600; color: var(--danger); } .field-hint { font-size: 12.5px; color: var(--ink-faint); } /* When the guest says they can't attend, de-emphasise the party/meal fields */ .rsvp-form-display .form-group--guests, .rsvp-form-display .form-group--meal { transition: opacity .2s ease; } #rsvp-form.is-not-attending .form-group--guests, #rsvp-form.is-not-attending .form-group--meal { opacity: .4; } .rsvp-note { margin: 12px 0 0; padding: 11px 14px; border-radius: 11px; background: rgba(93, 122, 74, .1); border: 1px solid rgba(93, 122, 74, .35); font-size: 13.5px; color: var(--ink-soft-2); text-align: center; } /* ── Form actions (sticky submit — always reachable while filling in) ──── */ .form-actions { margin-top: 16px; padding-top: 10px; position: sticky; /* Clear the labelled pill nav below (2 rows on narrow phones). */ bottom: calc(118px + env(safe-area-inset-bottom)); z-index: 2; background: linear-gradient(180deg, transparent 0%, var(--paper) 30%); } @media (min-width: 560px) { .form-actions { bottom: calc(68px + env(safe-area-inset-bottom)); } } .form-micro { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--ink-faint); } .loading { display: none; margin: 12px 0 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--seal-deep); } .loading::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; border: 2px solid rgba(192, 74, 44, .3); border-top-color: var(--seal-deep); border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Platform thank-you / closed states inside #rsvp-form */ .thank-you-message h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; color: var(--ink); } .thank-you-message p { margin: 4px 0; color: var(--ink-soft); } .thank-you-message small { color: var(--ink-faint); } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .03em; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; } .btn-primary { background: var(--seal); color: var(--cream); box-shadow: 0 10px 22px rgba(192, 74, 44, .3); } .btn-primary:hover { background: var(--seal-deep); box-shadow: 0 14px 28px rgba(192, 74, 44, .4); } /* Details panel shares the light paper theme — button matches .btn-primary */ .btn-on-dark { background: var(--seal); color: var(--cream); box-shadow: 0 10px 22px rgba(192, 74, 44, .3); } .btn-on-dark:hover { background: var(--seal-deep); box-shadow: 0 14px 28px rgba(192, 74, 44, .4); } .btn-block { width: 100%; } /* ── Details panel (paper, matching the other panels) ─────────────────── */ .detail-panel .panel-head { text-align: center; margin-bottom: 22px; } .detail-panel .panel-title { color: var(--ink); } .panel-title { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.08; font-size: clamp(32px, 9vw, 50px); letter-spacing: -.015em; color: var(--cream); } .panel-lead { margin: 12px auto 0; max-width: 34em; font-size: 15.5px; color: var(--ink-soft); } .detail-panel .panel-lead { color: var(--ink-soft); } .detail-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .detail-row { display: flex; align-items: flex-start; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--line); } .detail-row dt { flex: 0 0 96px; margin-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--seal); } .detail-row dd { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--ink); } .detail-row .dd-sub { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); } .hosted-by { margin: 24px 0 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); } .hosted-by-label { color: var(--ink-soft); } /* Separator between co-hosts — the platform clones one .host per host, so the ampersand is added by CSS instead of being baked into the markup. */ .host-names .host + .host::before { content: " & "; } .hosted-by .host-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); } .reply-note { margin: 8px 0 0; text-align: center; font-size: 13px; font-style: italic; color: var(--ink-faint); } .panel-foot { text-align: center; margin-top: 26px; } /* ── Photos (keepsake gallery — optional panel) ───────────────────────── */ /* Self-contained, optional: delete
to remove the gallery (main.js drops empty panels from the switcher automatically). Every slot ships with a designed SVG placeholder so the template shows finished frames out of the box; hosts replace the with their own files. */ .photo-panel { background: var(--paper); } .photo-panel .panel-head { text-align: center; margin-bottom: 22px; } .photo-panel .panel-title { color: var(--ink); } .photo-panel .panel-lead { color: var(--ink-soft); } .photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 16px; } @media (max-width: 359px) { .photo-gallery { grid-template-columns: 1fr; } } .photo-card { margin: 0; display: flex; flex-direction: column; } /* If a host deletes an but leaves the card, the card steps out of the grid instead of showing an empty frame. */ .photo-card:not(:has(img)) { display: none; } .photo-frame { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--line); background: linear-gradient(135deg, var(--paper), var(--paper-2)); box-shadow: 0 10px 22px rgba(43, 38, 32, .14); transition: transform .15s ease, box-shadow .15s ease; } .photo-card:hover .photo-frame { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(43, 38, 32, .18); } .photo-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .photo-caption { margin: 8px 4px 0; font-size: 12.5px; font-style: italic; text-align: center; color: var(--ink-soft); } /* ── Photos: optional film feature (video URL embed) ──────────────────── A poster + play button that lazy-loads an