/* ═══════════════════════════════════════════════════════════════════════════ stationery-one-pager-card-gold-leaf — "Gold Leaf" (Anniversary · Card) Compact invitation card · ivory stock, evergreen ink, gold-foil leaf. 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 { --ivory: #faf6ec; --ivory-2: #f1ead6; --white: #fffdf6; --ink: #24402e; --ink-2: #2e4d39; --ink-soft: rgba(36, 64, 46, .74); --ink-faint: rgba(36, 64, 46, .52); --gold: #b08a3e; --gold-deep: #8d6a25; --gold-soft: rgba(176, 138, 62, .15); --gold-line: rgba(176, 138, 62, .45); --sage: #7d8f74; --sage-soft: rgba(125, 143, 116, .16); --blush: #e4c9bd; --danger: #b34a3a; --line: rgba(36, 64, 46, .14); --line-strong: rgba(36, 64, 46, .26); --radius: 18px; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Jost", -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(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { vertical-align: middle; } /* ── Utilities ─────────────────────────────────────────────────────────── */ .mini-ico { display: inline-flex; margin-right: 8px; transform: translateY(2px); } .kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } /* ── 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: 620px; margin: 0 auto; padding: calc(30px + env(safe-area-inset-top)) 24px calc(124px + env(safe-area-inset-bottom)); min-height: 100%; display: flex; flex-direction: column; justify-content: center; } /* ── Panel themes (alternating for card rhythm) ────────────────────────── */ .cover-panel { background: var(--ivory); } .detail-panel { background: var(--ink); color: var(--ivory); } .moments-panel{ background: var(--ivory); } .panel-free { background: var(--ink); color: var(--ivory); } .rsvp-panel { background: var(--ivory); } .guest-panel { background: var(--ink); color: var(--ivory); } /* ── Cover: the invitation face ────────────────────────────────────────── */ .cover { position: relative; justify-content: flex-start; gap: 12px; text-align: center; padding-top: calc(26px + env(safe-area-inset-top)); } .cover > * { position: relative; } /* Gold-dust flecks in the corners (subtle, static) */ .foil-dust { position: absolute; inset: 0; pointer-events: none; } .foil-dust i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .55; } .fd-1 { top: 14%; left: 12%; } .fd-2 { top: 24%; left: 7%; width: 3px; height: 3px; } .fd-3 { top: 8%; left: 22%; width: 3px; height: 3px; } .fd-4 { top: 14%; right: 12%; } .fd-5 { top: 24%; right: 7%; width: 3px; height: 3px; } .fd-6 { top: 8%; right: 22%; width: 3px; height: 3px; } .guest-greeting { margin: 4px 0 0; padding: 7px 16px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft); font-size: 14px; font-weight: 600; color: var(--gold-deep); } .cover-title { margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 10.5vw, 60px); line-height: 1.02; letter-spacing: -.01em; color: var(--ink); } .cover-title-sub { margin: 10px 0 0; font-size: 16px; font-style: italic; color: var(--ink-soft); } .couple-name { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.15; color: var(--gold-deep); } /* Gold-leaf sprig */ .sprig { width: 74px; height: 86px; margin: 14px auto 4px; color: var(--gold); } .sprig-stem { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .sprig-leaf { fill: none; stroke: currentColor; stroke-width: 1.6; } .sprig-berry { fill: var(--gold); } /* Keepsake portrait — optional. Remove the
to hide it entirely. */ .cover-photo { margin: 6px auto 0; width: 132px; height: 132px; } .cover-photo img { display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 0 5px var(--white), 0 0 0 6px var(--gold-line); background: var(--ivory-2); } .cover-meta { margin-top: 10px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: left; } .cover-meta p { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--ink); } .cover-meta p + p { margin-top: 7px; } .cover-meta .mini-ico { color: var(--gold); } .cover-dress { margin: 12px 0 0; font-size: 13.5px; letter-spacing: .03em; color: var(--ink-faint); } .cover-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .cover-rule { margin: 26px auto 0; width: 150px; height: 6px; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); } /* ── 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: 600; letter-spacing: .04em; 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(--gold); outline-offset: 3px; } .btn-primary { background: var(--gold); color: #fff; box-shadow: 0 10px 22px rgba(176, 138, 62, .35); } .btn-primary:hover { box-shadow: 0 14px 28px rgba(176, 138, 62, .5); } .btn-ghost { background: transparent; color: var(--gold-deep); box-shadow: inset 0 0 0 2px var(--gold-line); } .btn-ghost:hover { background: var(--gold-soft); } .btn-block { width: 100%; } /* ── Panel heads ───────────────────────────────────────────────────────── */ .panel-head { text-align: center; margin-bottom: 22px; } .panel-title { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.1; font-size: clamp(34px, 8.4vw, 48px); color: var(--ink); letter-spacing: -.01em; } .detail-panel .panel-title, .guest-panel .panel-title { color: var(--ivory); } .panel-lead { margin: 12px auto 0; max-width: 34em; font-size: 15.5px; color: var(--ink-soft); } .detail-panel .panel-lead, .guest-panel .panel-lead { color: rgba(250, 246, 236, .72); } /* ── Details ───────────────────────────────────────────────────────────── */ .detail-list { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(250, 246, 236, .16); } .detail-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 2px; border-bottom: 1px solid rgba(250, 246, 236, .16); } .detail-row dt { flex: 0 0 92px; display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .detail-row dt svg { color: var(--gold); flex: 0 0 auto; } .detail-row dd { margin: 0; font-size: 16.5px; font-weight: 500; color: var(--ivory); } .detail-row .dd-sub { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: rgba(250, 246, 236, .6); } .hosted-by { margin: 22px 0 0; text-align: center; font-size: 14px; color: rgba(250, 246, 236, .72); } .hosted-by .host-name { color: var(--gold); font-weight: 600; } .detail-note { margin: 16px auto 0; max-width: 34em; padding: 12px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(176, 138, 62, .12); font-size: 13.5px; line-height: 1.55; color: rgba(250, 246, 236, .8); } .panel-foot { text-align: center; margin-top: 28px; } /* ── Our Moments: keepsake gallery (light panel) ──────────────────────── */ .photo-section { margin-top: 4px; } /* auto-fit keeps the grid tidy at 1, 2, 3 or 4 photos — no orphan cells. */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .gallery-item { margin: 0; } .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 2px solid var(--gold-line); background: var(--ivory-2); box-shadow: 0 0 0 4px var(--white), 0 10px 24px -14px rgba(36, 64, 46, .35); } .gallery-item figcaption { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--gold-deep); } .gallery-note { margin: 18px auto 0; max-width: 34em; font-size: 13px; color: var(--ink-faint); text-align: center; } /* Broken/missing photo file → a tidy on-palette "your photo here" frame instead of a broken-image icon. Added by the inline onerror on each img. */ .cover-photo.is-fallback img, .gallery-item.is-fallback img { display: none; } .cover-photo.is-fallback { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gold-line); border-radius: 50%; background: var(--ivory-2); } .gallery-item.is-fallback { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 2px dashed var(--gold-line); border-radius: 12px; background: var(--ivory-2); padding: 14px; } /* ── Photo viewer (lightbox) — built by main.js only when a photo slot exists; remove the photo blocks and no viewer is ever created. */ html.js .cover-photo, html.js .gallery-item img { cursor: zoom-in; } /* Small "view full size" badge on hover / keyboard focus — shows the photo is clickable. Purely visual; without JS (no viewer) it never appears. */ html.js .cover-photo, html.js .gallery-item { position: relative; } html.js .cover-photo::after, html.js .gallery-item::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 253, 246, .94) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324402e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid var(--gold-line); box-shadow: 0 4px 12px -4px rgba(36, 64, 46, .45); opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } html.js .cover-photo:hover::after, html.js .cover-photo:focus-within::after, html.js .gallery-item:hover::after, html.js .gallery-item:focus-within::after { opacity: 1; transform: none; } /* In fallback mode the badge gives way to the "your photo here" note (the figure's aria-label — no JS needed). */ html.js .cover-photo.is-fallback::after, html.js .gallery-item.is-fallback::after { content: attr(aria-label); position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; transform: none; font: italic 13px/1.4 var(--font-body); color: var(--ink-faint); text-align: center; } /* ── Optional flyer/banner (inside the Details panel) ──────────────────── */ .flyer-block { margin-top: 26px; text-align: center; } .flyer-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } .flyer-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.15; color: var(--ivory); } .flyer-lead { margin: 8px auto 14px; max-width: 30em; font-size: 13.5px; color: rgba(250, 246, 236, .72); } /* Capped width so a portrait flyer reads like the real thing; 3:4 ratio. */ .flyer-figure { position: relative; margin: 0 auto; max-width: 300px; } .flyer-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 2px solid var(--gold-line); background: var(--ink-2); box-shadow: 0 0 0 4px rgba(250, 246, 236, .06), 0 24px 44px -22px rgba(0, 0, 0, .6); } .flyer-figure figcaption { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } html.js .flyer-figure img { cursor: zoom-in; } /* Broken/missing flyer file → a tidy "your flyer here" frame. */ .flyer-figure.is-fallback img { display: none; } .flyer-figure.is-fallback { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border: 2px dashed var(--gold-line); border-radius: 14px; background: var(--ink-2); padding: 20px; } /* Small "view full size" badge (mirrors the gallery badge, dark-panel ink) */ html.js .flyer-figure::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 253, 246, .94) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324402e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid var(--gold-line); box-shadow: 0 4px 12px -4px rgba(36, 64, 46, .45); opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } html.js .flyer-figure:hover::after, html.js .flyer-figure:focus-within::after { opacity: 1; transform: none; } html.js .flyer-figure.is-fallback::after { content: attr(aria-label); position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; transform: none; font: italic 13px/1.4 var(--font-body); color: rgba(250, 246, 236, .55); text-align: center; } /* ── Optional film (video embed, inside Our Moments) ───────────────────── */ .video-block { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); text-align: center; } .video-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } .video-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--ink); } .video-lead { margin: 8px auto 16px; max-width: 30em; font-size: 13.5px; color: var(--ink-soft); } .video-embed { position: relative; width: 100%; /* Cap by height so a tall phone screen never inflates the video; the 16/9 ratio is preserved (width caps first on phones). */ max-width: calc(52vh * 16 / 9); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 14px; border: 2px solid var(--gold-line); box-shadow: 0 0 0 4px var(--white), 0 18px 36px -20px rgba(36, 64, 46, .45); overflow: hidden; /* Warm ivory fallback while the embed loads — nothing ever looks broken. */ background: radial-gradient(circle at 50% 40%, rgba(176, 138, 62, .22), transparent 60%), linear-gradient(165deg, #f3e8cd 0%, #e9d9ae 55%, #ddc692 100%); } .video-embed iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Shown behind the iframe until a video url is set (or the embed is blocked) */ .video-placeholder { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; font-size: 13px; font-style: italic; color: var(--ink-faint); text-align: center; } .video-placeholder::before { content: ""; width: 44px; height: 44px; border-radius: 50%; background: rgba(176, 138, 62, .14) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d6a25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='%238d6a25' stroke='none'/%3E%3C/svg%3E") center / 22px no-repeat; } .video-embed.has-video .video-placeholder { display: none; } .video-link { margin: 14px 0 0; text-align: center; } .video-link a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--gold-line); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; transition: border-color .15s ease, color .15s ease; } .video-link a:hover { color: var(--gold); border-color: var(--gold); } .video-link a[hidden] { display: none; } .photo-viewer { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: rgba(36, 64, 46, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .photo-viewer.is-open { display: flex; } .photo-viewer figure { margin: 0; max-width: min(92vw, 960px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .pv-stage { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 76vh; max-height: 76dvh; overflow: hidden; touch-action: none; } .photo-viewer .pv-stage img { display: block; max-width: 100%; max-height: 76vh; max-height: 76dvh; width: auto; height: auto; border: 6px solid var(--white); border-radius: 6px; background: var(--ivory-2); /* mat while loading / if the file is missing */ box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75); cursor: zoom-in; will-change: transform; transition: transform .12s ease; } .photo-viewer.is-zoomed .pv-stage { cursor: grab; } .photo-viewer.is-zoomed .pv-stage img { cursor: zoom-out; } .pv-stage.is-dragging img { transition: none; } .photo-viewer figcaption { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: .03em; color: var(--ivory); } .pv-hint { margin: 0; font-size: 11.5px; letter-spacing: .06em; color: rgba(250, 246, 236, .55); } .photo-viewer .pv-unavailable { display: flex; align-items: center; justify-content: center; width: min(72vw, 520px); height: min(46vh, 360px); border: 6px solid var(--white); border-radius: 6px; background: var(--ivory-2); color: var(--ink-faint); font-size: 14px; font-style: italic; text-align: center; padding: 20px; } .pv-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-line); background: rgba(255, 253, 246, .94); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); transition: transform .2s ease, background-color .2s ease; } .pv-btn:hover { transform: scale(1.06); background: #fff; } .pv-close { top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); } .pv-open { top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); } .pv-prev { left: 12px; top: 50%; transform: translateY(-50%); } .pv-next { right: 12px; top: 50%; transform: translateY(-50%); } .pv-prev:hover, .pv-next:hover { transform: translateY(-50%) scale(1.06); } .photo-viewer :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Narrow screens: prev/next drop below the photo so they never cover it. */ @media (max-width: 520px) { .photo-viewer { flex-direction: column; gap: 10px; } .photo-viewer .pv-stage img { max-height: 62vh; max-height: 62dvh; } .pv-stage { max-height: 62vh; max-height: 62dvh; } .pv-prev, .pv-next { position: static; transform: none; } .pv-prev:hover, .pv-next:hover { transform: scale(1.06); } .pv-prev, .pv-next { width: 40px; height: 40px; } .photo-viewer figure { flex: 1 1 auto; justify-content: center; } .photo-viewer .pv-close { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); } .photo-viewer .pv-open { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); } } /* ── RSVP form (light panel) ───────────────────────────────────────────── */ .rsvp-wrap { margin-top: 4px; } .rsvp-form-display { display: grid; gap: 14px; margin-top: 8px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .form-control { width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: var(--ink-faint); } .form-control:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } 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='%2324402e' 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; } textarea.form-control { resize: vertical; min-height: 84px; } .error { display: block; min-height: 0; font-size: 12.5px; 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-size field */ .form-group--guests { transition: opacity .2s ease; } #rsvp-form.is-not-attending .form-group--guests { opacity: .4; } .rsvp-note { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--sage-soft); border: 1px solid rgba(125, 143, 116, .4); font-size: 14px; color: var(--ink-soft); } .form-actions { margin-top: 18px; } .loading { display: none; margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--gold-deep); } .loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(176, 138, 62, .35); border-top-color: var(--gold-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 { text-align: center; } .thank-you-message h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; margin: 0 0 10px; color: var(--gold-deep); } .thank-you-message p { margin: 4px 0; color: var(--ink-soft); } /* ── Countdown ─────────────────────────────────────────────────────────── */ .rsvp-countdown { margin: 20px auto 6px; max-width: 420px; text-align: center; } .countdown-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); } .countdown-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .count-box { padding: 12px 4px 10px; border-radius: 14px; background: var(--ivory-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .count-box span { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--gold-deep); } .count-box small { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } /* ── Guestbook (dark panel) ────────────────────────────────────────────── */ .guestbook-section { margin-top: 4px; } .guestbook-head { text-align: center; margin-bottom: 22px; } /* The platform injects #guestbookForm, #comments-container, #load-more into .guestbook-body (Style A). We style that injected markup here. */ .guestbook-body #guestbookForm { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(250, 246, 236, .16); border-radius: var(--radius); background: rgba(255, 255, 255, .04); } .guestbook-body #guestbookForm label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 246, 236, .7); } .guestbook-body #guestbookForm .form-control { background: transparent; border-color: rgba(250, 246, 236, .3); color: var(--ivory); } .guestbook-body #guestbookForm .form-control::placeholder { color: rgba(250, 246, 236, .4); } .guestbook-body #guestbookForm .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .guestbook-body #guestbookForm textarea { min-height: 100px; resize: vertical; } .guestbook-body #guestbookForm .error { margin-top: 4px; } .guestbook-body #guestbookForm button[type="submit"] { padding: 14px 28px; border: 0; border-radius: 999px; background: var(--gold); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .guestbook-body #guestbookForm button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(176, 138, 62, .4); } .guestbook-body #guestbookForm button[type="submit"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .loading-guestbook { display: none; text-align: center; font-size: 13.5px; color: var(--gold); } .guestbook-wrap { margin-top: 22px; display: grid; gap: 12px; } .guestbook-entry { padding: 15px 17px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; background: var(--ink-2); } .guestbook-entry h5 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--gold); } .guestbook-entry p { margin: 0 0 6px; font-size: 14.5px; color: var(--ivory); } .guestbook-entry small { font-size: 12px; color: rgba(250, 246, 236, .5); } .more-guestbook-wrap { margin-top: 18px; text-align: center; } #load-more { padding: 12px 26px; border-radius: 999px; border: 1px solid var(--gold-line); background: transparent; color: var(--gold); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease; } #load-more:hover { background: rgba(176, 138, 62, .15); transform: translateY(-2px); } #load-more:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* ── Site foot ─────────────────────────────────────────────────────────── */ .site-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(250, 246, 236, .16); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; color: rgba(250, 246, 236, .6); } .site-foot-row { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; } .site-foot p { margin: 0; } .foot-rule { width: 40px; height: 1px; background: var(--gold-line); } /* Brand placeholder in the footer — swap the text (or bind a morph) for the template/host brand mark. */ .footer-brand { font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); } /* ── Free page (optional "In Our Words" panel, host-filled) ──────────── One repeatable block per entry: a free title, free text and an OPTIONAL photo. The panel ships hidden — the render engine removes the whole section when no blocks exist (or when the host toggles the section off), so the tab that main.js builds from this panel disappears with it. Styled like the dark panels: evergreen ink, ivory text, gold accents. */ .free-blocks { display: grid; gap: clamp(30px, 6vmin, 48px); } .free-block { margin: 0; text-align: center; } .free-title { margin: 0 0 clamp(12px, 2.6vmin, 18px); font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 5.8vmin, 36px); line-height: 1.15; color: var(--ivory); overflow-wrap: anywhere; } .free-title:focus { outline: none; } .free-media { position: relative; margin: 0 auto clamp(14px, 3vmin, 20px); max-width: 480px; } .free-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 2px solid var(--gold-line); background: var(--ink-2); box-shadow: 0 0 0 4px rgba(250, 246, 236, .06), 0 24px 44px -22px rgba(0, 0, 0, .6); } /* A text-only block (host left the photo empty) — the engine removes the img, so the empty figure collapses and the block reads as title + text. */ .free-media:empty { display: none; } .free-content { margin: 0 auto; max-width: 30em; text-align: left; font-size: clamp(14px, 3.3vmin, 16.5px); line-height: 1.75; color: rgba(250, 246, 236, .72); white-space: pre-line; overflow-wrap: anywhere; } html.js .free-media img { cursor: zoom-in; } /* Broken/missing photo file → a tidy "your photo here" frame. */ .free-media.is-fallback img { display: none; } .free-media.is-fallback { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 2px dashed var(--gold-line); border-radius: 12px; background: var(--ink-2); padding: 20px; } /* Small "view full size" badge (mirrors the gallery badge, dark-panel ink) */ html.js .free-media::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 253, 246, .94) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324402e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid var(--gold-line); box-shadow: 0 4px 12px -4px rgba(36, 64, 46, .45); opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } html.js .free-media:hover::after, html.js .free-media:focus-within::after { opacity: 1; transform: none; } html.js .free-media.is-fallback::after { content: attr(aria-label); position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; transform: none; font: italic 13px/1.4 var(--font-body); color: rgba(250, 246, 236, .55); text-align: center; } /* ── Full-width powered-by brand strip ────────────────────────────────── A slim, full-width brand line pinned just above the fixed tab bar in the JS shell (and at the end of the stacked document without JS). The engine swaps the literal brand token inside .link-footer for the platform name at render. This strip is static platform HTML — never bound as a morph. It is not part of the free page and stays visible even when the free page is hidden. */ html:not(.js) .powered-by { width: 100%; text-align: center; padding: 14px 16px 22px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); } html.js .powered-by { position: fixed; z-index: 49; /* below the tab bar (50) */ left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); width: 100%; text-align: center; padding: 4px 14px; border-top: 1px solid rgba(250, 246, 236, .1); background: rgba(36, 64, 46, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(250, 246, 236, .6); } .powered-by .link-footer { color: var(--gold); } /* ── Section switcher (labeled pill) ──────────────────────────────────── */ .panel-nav { position: fixed; z-index: 50; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 5px; max-width: calc(100vw - 20px); border-radius: 999px; background: rgba(36, 64, 46, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(250, 246, 236, .22); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45); /* safety net on very narrow screens: chips stay reachable by swiping */ overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); } .panel-nav::-webkit-scrollbar { display: none; } .panel-nav[hidden] { display: none; } .panel-nav button { flex: 0 0 auto; min-height: 34px; padding: 8px 13px; border: 0; border-radius: 999px; background: transparent; color: rgba(250, 246, 236, .78); font: 600 12px/1 var(--font-body); letter-spacing: .07em; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .panel-nav button:hover { background: rgba(250, 246, 236, .14); color: #fff; } .panel-nav button.is-current { background: var(--gold); color: #fff; } .panel-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Very narrow phones: slightly tighter chips so all five fit in one row. */ @media (max-width: 360px) { .panel-nav { padding: 4px; gap: 1px; } .panel-nav button { min-height: 30px; padding: 7px 9px; font-size: 11px; letter-spacing: .04em; } } /* ── Focus visibility (global) ─────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ── Responsive: widen panels on larger screens ────────────────────────── */ @media (min-width: 560px) { .panel-inner { padding-left: 40px; padding-right: 40px; } } /* ── Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .loading::before { animation: none; } } /* ── Print: expand every panel so the whole card prints ────────────────── */ @media print { body { background: #fff; } .panel-nav, .powered-by { display: none !important; } .js .app-shell { height: auto !important; overflow: visible !important; } .js .panel { display: block !important; height: auto !important; overflow: visible !important; } .panel-inner { max-width: none; padding: 24px; min-height: 0; page-break-after: always; } .sprig, .cover-rule, .detail-row, .foot-rule, .foil-dust i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cover-photo, .gallery-item, .flyer-figure { page-break-inside: avoid; } .video-embed, .video-link { display: none !important; } .photo-viewer { display: none !important; } a[href]::after { content: ""; } }