/* ═══════════════════════════════════════════════════════════════════════════ stationery-one-pager-flyer-golden-weekend — "The Golden Weekend" (Anniversary · One-Pager Flyer) — ivory sheet, hairline rules, gold foil. Layout contract: · .app-shell locks to the viewport (100dvh) only when has "js". · The single .page-panel (the one-pager) scrolls internally; the sticky .page-nav rides above it. · Without JS the page degrades to a normal stacked, scrolling document. ═══════════════════════════════════════════════════════════════════════════ */ :root { --paper: #faf5ea; --paper-2: #f4ecd9; --paper-deep: #ece1c8; --ink: #332c21; --ink-soft: rgba(51, 44, 33, .74); --ink-faint: rgba(51, 44, 33, .52); --gold: #b3873a; --gold-deep: #8f6b26; --gold-soft: rgba(179, 135, 58, .16); --gold-line: rgba(179, 135, 58, .42); --sage: #6f8063; --sage-soft: rgba(111, 128, 99, .14); --terra: #bf6a45; --danger: #b34a3a; --line: rgba(51, 44, 33, .14); --line-strong: rgba(51, 44, 33, .26); --white: #fffdf7; --radius: 16px; --font-display: "Fraunces", "Georgia", "Times New Roman", serif; --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } /* The hidden attribute must always win over any display rule. Without this, an author display:flex/grid/inline-block on the same element (the guest-greeting pill, .running-head, .footer-brand, .event-meta, the RSVP countdown) overrides the UA's [hidden] and an empty box would show to guests. main.js also hides emptied masthead bits via the attribute. */ [hidden] { display: none !important; } 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; } /* Faint paper grain over everything — subtle, so text stays crisp. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(1px 1px at 12% 18%, rgba(51, 44, 33, .08) 50%, transparent 51%), radial-gradient(1px 1px at 68% 8%, rgba(51, 44, 33, .06) 50%, transparent 51%), radial-gradient(1px 1px at 84% 32%, rgba(51, 44, 33, .07) 50%, transparent 51%), radial-gradient(1px 1px at 32% 52%, rgba(51, 44, 33, .06) 50%, transparent 51%), radial-gradient(1px 1px at 92% 74%, rgba(51, 44, 33, .08) 50%, transparent 51%), radial-gradient(1px 1px at 44% 88%, rgba(51, 44, 33, .06) 50%, transparent 51%); } /* ── Utilities ─────────────────────────────────────────────────────────── */ .kicker { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } /* Optional photo features — one-class kill switch: add class="no-photos" to to hide the cameo AND the gallery in one move. The JS also drops the hidden section from the jump-nav (see main.js section pruning). */ .no-photos .cameo-wrap, .no-photos .gallery-section { display: none !important; } /* Optional film + official flyer — same pattern: class="no-video" / class="no-flyer" on hides the section; JS drops the nav chip. */ .no-video .film-section { display: none !important; } .no-flyer .flyer-section { display: none !important; } /* ── Shell: single viewport, the one-pager scrolls internally ──────────── */ .app-shell { position: relative; width: 100%; } .js .app-shell { height: 100vh; /* fallback */ height: 100dvh; overflow: hidden; } .js .page-panel { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .panel-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: calc(30px + env(safe-area-inset-top)) 22px calc(90px + env(safe-area-inset-bottom)); } /* ── Masthead: the sheet's letterhead ──────────────────────────────────── */ .masthead { text-align: center; padding-top: 6px; } .running-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); } .rh-sep { color: var(--gold); } .guest-greeting { display: inline-block; margin: 0 0 18px; 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); } /* Double hairline + fleuron flourish */ .mast-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 20px; color: var(--gold); font-size: 15px; } .mast-ornament i { height: 1px; width: min(90px, 18vw); background: var(--gold-line); } .mast-ornament i:first-child { background: linear-gradient(90deg, transparent, var(--gold-line)); } .mast-ornament i:last-child { background: linear-gradient(90deg, var(--gold-line), transparent); } .masthead-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 11.5vw, 76px); line-height: 1.02; letter-spacing: -.01em; color: var(--ink); } .masthead-title em { font-style: italic; font-weight: 400; color: var(--gold-deep); } .masthead-sub { margin: 16px auto 0; max-width: 30em; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); } .couple-name { font-weight: 700; color: var(--ink); white-space: nowrap; } /* Optional cameo portrait — gold-ringed oval seal under the masthead subtitle. It is now a real link (.cameo-wrap): clicking opens the full-size original in the lightbox (zoom + "Open full size"). Ships with placeholder art; swap the src or delete the element (or add class="no-photos" to ) to hide it. */ .cameo-wrap { display: block; width: 132px; margin: 26px auto 0; border-radius: 50%; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; } .cameo-wrap:hover { transform: translateY(-2px); } .cameo-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .cameo { display: block; width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--gold-line); object-fit: cover; transition: transform .35s ease; } .cameo-wrap:hover .cameo { transform: scale(1.04); } /* Date strip — the scannable spine of the one-pager */ .date-strip { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0 0; padding: 0; } .date-strip li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .date-strip li.is-main { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold) inset; } .ds-day { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); } .ds-date { font-family: var(--font-display); font-size: 34px; line-height: 1.05; color: var(--ink); } .date-strip li.is-main .ds-date { color: var(--gold-deep); } .ds-name { margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; } /* ── Sticky jump-nav ───────────────────────────────────────────────────── */ .page-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; margin: 26px -8px 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(250, 245, 234, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(51, 44, 33, .1); } .page-nav[hidden] { display: none; } /* The chip row scrolls independently of the prev/next arrows, so the arrows stay put on either side. One line, always: if a narrow window can't fit every label the row scrolls sideways instead of wrapping. */ .page-nav-rail { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; } .page-nav-rail::-webkit-scrollbar { display: none; } /* Centered when everything fits; left-aligned (scrollable) when it doesn't. Auto margins do this without JS, and centered overflow can never strand a chip off the left edge. */ .page-nav-rail button:first-child { margin-left: auto; } .page-nav-rail button:last-child { margin-right: auto; } /* Edge fades only appear when the row actually overflows (JS toggles the class on .page-nav, so a fully-visible row keeps its crisp pill edges). */ .page-nav.has-overflow .page-nav-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%); } /* Desktop: slim hairline-separated text links inside the pill — editorial, compact, and one row. Touch screens switch to pills + prev/next arrows. */ .page-nav button, .page-nav-rail button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 8px; border: 0; border-radius: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .03em; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: color .15s ease; -webkit-tap-highlight-color: transparent; } .page-nav-rail button + button { border-left: 1px solid var(--line); } .page-nav-rail button:hover { color: var(--gold-deep); } .page-nav-rail button:active { color: var(--gold-deep); } .page-nav-rail button.is-current { color: var(--gold-deep); box-shadow: inset 0 -2px 0 var(--gold); } .page-nav button:focus-visible, .page-nav-rail button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* "Top" is the way back to the masthead — quieter than the section jumps. */ .page-nav-rail button.nav-top { color: var(--ink-faint); } .page-nav-rail button.nav-top::before { content: "↑"; margin-right: 5px; font-size: 11px; line-height: 1; } /* Prev/next arrows — desktop hides them; touch screens get them. */ .page-nav button.nav-arrow { display: none; } /* On touch screens the nav becomes a swipeable pill rail: every item stays reachable without wrapping into a tall block, snap points keep the row tidy, edge fades hint at more chips, and ‹ › arrows step through the sections. Touch targets grow to 44px so thumbs can hit them comfortably. */ @media (max-width: 720px) { .page-nav { margin-top: 22px; gap: 6px; padding: 6px 8px; } .page-nav-rail { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .page-nav button.nav-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--gold-deep); font-size: 26px; font-weight: 400; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease; } .page-nav button.nav-arrow:hover:not(:disabled), .page-nav button.nav-arrow:active:not(:disabled) { background: var(--gold-soft); color: var(--gold-deep); } .page-nav button.nav-arrow:disabled { opacity: .32; cursor: default; } .page-nav-rail button { flex: 0 0 auto; min-height: 44px; padding: 12px 18px; border-radius: 999px; background: transparent; font-size: 13.5px; letter-spacing: .04em; transition: background .15s ease, color .15s ease; scroll-snap-align: start; } .page-nav-rail button + button { border-left: 0; } .page-nav-rail button:hover, .page-nav-rail button:active { background: var(--gold-soft); color: var(--gold-deep); } .page-nav-rail button.is-current { background: var(--ink); color: var(--paper); box-shadow: none; } .page-nav-rail button.nav-top { border: 1px dashed var(--line-strong); color: var(--ink-soft); } } /* Sections — anchor targets sit below the sticky nav */ .section { padding-top: 54px; scroll-margin-top: 74px; } /* ── Section heads ─────────────────────────────────────────────────────── */ .section-head { text-align: center; margin-bottom: 26px; } .section-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 6.4vw, 42px); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); } .section-title:focus { outline: none; } .section-lead { margin: 12px auto 0; max-width: 34em; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); } .section-note { margin: 18px 0 0; padding: 12px 18px; border-left: 3px solid var(--sage); background: var(--sage-soft); border-radius: 0 12px 12px 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } /* ── 01 · Event cards ──────────────────────────────────────────────────── */ .event-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 700px) { .event-grid { grid-template-columns: repeat(3, 1fr); } } .event-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: left; } /* hairline top rule + gold tick on the main event */ .event-card::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--line-strong); } .event-card.is-main { border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-soft), var(--white) 38%); } .event-card.is-main::before { background: var(--gold); } .event-day { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .event-num { margin: 2px 0 10px; font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-faint); } .event-badge { align-self: flex-start; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .event-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ink); } .event-desc { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .event-meta { margin: auto 0 0; border-top: 1px dashed var(--line-strong); padding-top: 12px; display: grid; gap: 7px; } .event-meta > div { display: flex; gap: 8px; align-items: baseline; } .event-meta dt { flex: 0 0 52px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .event-meta dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; } .event-meta .meta-sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-faint); } /* ── 02 · Keepsake photo wall (optional) ──────────────────────────────── */ .gallery-grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-item { margin: 0; } /* Gold hairline mat like a mounted print; photos crop to 4:3 via object-fit. */ .gallery-frame { padding: 9px; border: 1px solid var(--gold-line); border-radius: 6px; background: var(--white); box-shadow: 0 10px 24px rgba(51, 44, 33, .12); transition: box-shadow .2s ease, transform .2s ease; } .gallery-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; transition: transform .35s ease; } /* Every photo is a real link (.gallery-open): gentle hover lift + a small "View" chip so guests know it opens full-size in the lightbox. */ .gallery-open { display: block; position: relative; text-decoration: none; color: inherit; border-radius: 8px; -webkit-tap-highlight-color: transparent; } .gallery-open:hover .gallery-frame, .gallery-open:focus-visible .gallery-frame { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(51, 44, 33, .2); } .gallery-open:hover .gallery-frame img, .gallery-open:focus-visible .gallery-frame img { transform: scale(1.03); } .gallery-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* The "View" chip appears on hover/focus; on touch screens (no hover) it stays faintly visible so guests discover the tap-to-open affordance. */ .gallery-open::after { content: "View"; position: absolute; right: 16px; bottom: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(51, 44, 33, .72); color: var(--paper); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; } .gallery-open:hover::after, .gallery-open:focus-visible::after { opacity: 1; transform: translateY(0); } @media (hover: none) { .gallery-open::after { opacity: .85; transform: translateY(0); } } /* The cameo is a small round seal — the "View" pill would crowd it, so it relies on the hover lift, focus ring and its lightbox instead. */ .cameo-wrap::after { display: none; } .gallery-caption { margin: 9px 2px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: center; } /* ── 01b · The official flyer (optional showcase) ──────────────────────── */ /* Reuses .gallery-item's frame + caption; centered and capped in width so a portrait flyer/banner reads like the real thing. The frame keeps 4:3 crop here, so the flyer img overrides to its own 3:4 ratio. */ .flyer-figure { max-width: 360px; margin: 0 auto; } .flyer-figure .gallery-frame img { aspect-ratio: 3 / 4; } /* ── 08 · Free page (optional repeatable blocks: title + text + optional photo) ── Blocks match the event-card language: white sheet, gold hairline border. The optional photo reuses the gold-framed gallery look and the .gallery-open lightbox contract (View chip, full-size zoom). */ .free-blocks { display: grid; gap: 16px; } .free-block { position: relative; padding: 24px 22px 22px; border: 1px solid var(--gold-line); border-radius: var(--radius); background: var(--white); text-align: left; } /* hairline top rule, echoing the event cards */ .free-block::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--line-strong); } .free-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--ink); } .free-content { margin: 0 0 16px; } .free-content p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; } /* Optional photo — a .gallery-open link like the gallery; the View chip appears on hover/touch so guests know it opens full-size. A photo-less block simply omits .free-figure (title + text alone). */ .free-figure { max-width: 420px; margin: 0 auto; } .free-figure .gallery-frame { padding: 7px; } .free-figure .gallery-frame img { aspect-ratio: 4 / 3; } .free-cap { margin: 9px 2px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: center; } /* ── 04 · Film — optional video embed ─────────────────────────────────── */ .film-figure { margin: 0; } .film-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(56vh * 16 / 9); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gold-line); box-shadow: 0 24px 60px -28px rgba(51, 44, 33, .55); /* Warm ivory fallback while the embed loads — nothing ever looks broken. */ background: radial-gradient(circle at 50% 40%, rgba(179, 135, 58, .22), transparent 60%), linear-gradient(165deg, #efe3c4 0%, #e2cfa1 55%, #d3bb85 100%); } .film-embed iframe, .film-embed video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .film-cap { margin: 12px 0 0; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .film-open { margin: 14px 0 0; text-align: center; } .film-open a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--gold-line); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; transition: background .15s ease, color .15s ease; } .film-open a:hover { background: var(--gold); color: #fff; } /* ── Lightbox: full-screen photo viewer (built by main.js) ─────────────── */ /* Every photo feature opens here: cameo, gallery, official flyer. Full-size view, click to zoom 2× with panning, prev/next, Esc, and an "Open full size" link. Built on demand and destroyed on close, so a closed viewer can never trap focus. */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; flex-direction: column; padding: 20px; overflow: hidden; background: rgba(38, 31, 22, .94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .lightbox.is-open { display: flex; } .lightbox img { max-width: min(92vw, 880px); max-height: 76vh; width: auto; height: auto; border-radius: 14px; border: 1px solid var(--gold-line); box-shadow: 0 34px 90px -30px rgba(0, 0, 0, .85); cursor: zoom-in; transition: transform .25s ease; } /* Zoom state: the photo scales 2× and the viewer becomes a scrollable pane so guests can pan around — click the photo (or the zoom button) to toggle, click the dark backdrop to close. */ .lightbox.is-zoomed { align-items: flex-start; justify-content: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; } .lightbox.is-zoomed img { max-width: none; max-height: none; transform: scale(2); transform-origin: 0 0; align-self: flex-start; cursor: zoom-out; } .lightbox-cap, .lightbox-hint, .lightbox-original { align-self: center; } .lightbox-cap { margin: 14px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); text-align: center; } .lightbox-hint { margin: 8px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 245, 234, .55); text-align: center; } .lightbox-original { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--gold-line); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: background .15s ease, color .15s ease; } .lightbox-original:hover { background: var(--gold); color: #fff; } .lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-zoom { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--gold-line); border-radius: 50%; background: rgba(51, 44, 33, .75); color: var(--gold); cursor: pointer; transition: background .15s ease, color .15s ease; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover, .lightbox-zoom:hover { background: var(--gold); color: #fff; } .lightbox-close { top: calc(14px + env(safe-area-inset-top)); right: 14px; } .lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); } .lightbox-zoom { bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; } .lightbox-zoom svg { width: 19px; height: 19px; } .lightbox-prev.is-hidden, .lightbox-next.is-hidden { display: none; } @media (max-width: 560px) { .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } } /* ── 03 · Info list (good to know) ─────────────────────────────────────── */ .info-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } @media (min-width: 640px) { .info-list { grid-template-columns: 1fr 1fr; } .info-row { border-left: 1px solid var(--line); } .info-row:nth-child(odd) { border-left: 0; } } .info-row { padding: 18px 18px; border-bottom: 1px solid var(--line); } .info-row dt { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .info-row dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); } .info-row .dd-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-faint); } /* Contacts — repeating, wraps 1→2 columns */ .contact-grid { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: 1fr; } @media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } .contact-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px dashed var(--gold-line); border-radius: var(--radius); background: var(--gold-soft); text-align: center; } .contact-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); } .contact-role { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--ink-faint); } .contact-line { margin: 0; font-size: 13.5px; color: var(--ink-soft); } /* ── 04 · RSVP form ────────────────────────────────────────────────────── */ .rsvp-wrap { padding: 26px 22px 24px; border: 1px solid var(--gold-line); border-radius: 20px; background: var(--white); box-shadow: 0 18px 40px rgba(51, 44, 33, .07); } /* Two-column dense form on wider screens */ .form-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 8px; } @media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-group--phone, .form-group--attending, .form-group--notes { grid-column: 1 / -1; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 12px; font-weight: 700; 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(--paper); 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); 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='%23332c21' 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 fields */ .form-group--guests, .form-group--notes { transition: opacity .2s ease; } #rsvp-form.is-not-attending .form-group--guests, #rsvp-form.is-not-attending .form-group--notes { opacity: .4; } .rsvp-note { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--sage-soft); border: 1px solid rgba(111, 128, 99, .4); font-size: 14px; color: var(--ink-soft); } .form-actions { margin-top: 18px; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; 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(179, 135, 58, .35); } .btn-primary:hover { box-shadow: 0 14px 28px rgba(179, 135, 58, .5); } .btn-block { width: 100%; } .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(179, 135, 58, .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; padding: 12px 4px; } .thank-you-message h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--gold-deep); } .thank-you-message p { margin: 4px 0; font-size: 14.5px; color: var(--ink-soft); } /* ── Countdown ─────────────────────────────────────────────────────────── */ .rsvp-countdown { margin: 20px auto 6px; max-width: 440px; text-align: center; } .countdown-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; 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(--paper-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: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } /* ── 05 · Guest book (injected markup) ─────────────────────────────────── */ .guestbook-section { padding-top: 4px; } /* 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: 24px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); } .guestbook-body #guestbookForm label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .guestbook-body #guestbookForm .form-control { background: var(--paper); } .guestbook-body #guestbookForm .form-control:focus { background: #fff; } .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(--ink); color: var(--paper); font: inherit; font-size: 15px; font-weight: 700; 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(51, 44, 33, .25); } .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-deep); } .guestbook-chapta { margin: 4px 0 12px; } .guestbook-chapta > div { margin-inline: auto; } .guestbook-wrap { margin-top: 22px; display: grid; gap: 12px; } .guestbook-entry { padding: 16px 18px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; background: var(--paper-2); } .guestbook-entry h5 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--gold-deep); } .guestbook-entry p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink); } .guestbook-entry small { font-size: 12px; color: var(--ink-faint); } .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-deep); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; } #load-more:hover { background: var(--gold-soft); transform: translateY(-2px); } #load-more:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* ── Site foot ─────────────────────────────────────────────────────────── */ .site-foot { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; } /* Footer brand placeholder — the platform can bind/swap the text or drop a logo in here. */ .footer-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; padding: 6px 16px; border: 1px dashed var(--gold-line); border-radius: 999px; background: var(--gold-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep); } .footer-brand-mark { font-size: 12px; } .foot-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; color: var(--gold); font-size: 14px; } .foot-ornament i { height: 1px; width: min(70px, 14vw); background: var(--gold-line); } .foot-line { margin: 0; font-size: 13.5px; letter-spacing: .04em; color: var(--ink-faint); } .foot-note { margin: 6px 0 0; font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--gold-deep); } /* ── Powered by: full-width platform credit at the foot of the sheet ───── Lives outside .panel-inner (a direct child of .page-panel) so it spans the full width of the one-pager as the last thing guests scroll to. */ .powered-by { display: flex; align-items: center; justify-content: center; padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper-2); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); text-align: center; } .powered-by a { color: var(--gold-deep); text-decoration: none; } .powered-by a:hover { text-decoration: underline; } /* ── 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 the sheet on large screens ──────────────────────── */ @media (min-width: 560px) { .panel-inner { padding-left: 36px; padding-right: 36px; } } /* ── Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Print: the one-pager prints as one continuous sheet ───────────────── */ @media print { body { background: #fff; } body::before { display: none; } .page-nav { display: none !important; } .lightbox { display: none !important; } .film-embed { display: none; } .gallery-open::after { display: none; } .js .app-shell { height: auto !important; overflow: visible !important; } .js .page-panel { height: auto !important; overflow: visible !important; } .panel-inner { max-width: none; padding: 0 4px; } .section { padding-top: 34px; break-inside: auto; } .event-card, .info-row, .contact-card, .rsvp-wrap, .guestbook-entry, .gallery-item { break-inside: avoid; } .date-strip li.is-main, .event-badge, .page-nav button.is-current { -webkit-print-color-adjust: exact; print-color-adjust: exact; } a[href]::after { content: ""; } }