/* ═══════════════════════════════════════════════════════════════════════════ grand-opening-card-ribbon-day — "Ribbon Day" (Grand Opening · Card) The Grand Reveal · warm cream + espresso ink + opening-day red ribbon + champagne gold. Concept: a keepsake invitation printed on cream stock, with a signature red ribbon across the top edge of every panel, gold hairlines, a hand-drawn ribbon & scissors emblem, and confetti in the corners. Where the sibling flyer shouts, this card still speaks — but now it arrives wrapped in the colors of an actual ribbon-cutting. 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 { --cream: #fdf7ea; /* warm ivory page */ --cream-deep: #f6ebd6; --paper: #f2e5cd; --card: #fffcf3; /* raised card surface */ --ink: #261d15; /* espresso ink */ --ink-soft: rgba(38, 29, 21, .64); --ink-faint: rgba(38, 29, 21, .38); --red: #c63a2f; /* opening-day ribbon red */ --red-deep: #9e261f; --red-soft: rgba(198, 58, 47, .12); --red-line: rgba(198, 58, 47, .34); --gold: #c39a45; /* champagne gold */ --gold-deep: #a2762a; --gold-bright:#d9b25a; /* foil highlight */ --gold-soft: rgba(195, 154, 69, .16); --gold-line: rgba(195, 154, 69, .46); --sand: #f2e0c0; /* Engraved corner flourish used on the cover frame (gold L-bracket + red dot). Flipped per-corner via CSS transforms on .orn-*. */ --corner-orn: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3.5 15.5V3.5h12' fill='none' stroke='%23c39a45' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M7.5 11l3.5-3.5' fill='none' stroke='%23c39a45' stroke-width='1' stroke-linecap='round' opacity='.65'/%3E%3Ccircle cx='4.6' cy='4.6' r='1.5' fill='%23c63a2f'/%3E%3C/svg%3E"); /* Ornamental rule: hairline — red-gold diamond — hairline. */ --rule-orn: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cline x1='4' y1='6' x2='66' y2='6' stroke='%23c39a45' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='94' y1='6' x2='156' y2='6' stroke='%23c39a45' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M80 1.4L85 6L80 10.6L75 6Z' fill='%23c63a2f'/%3E%3Cpath d='M80 1.4L85 6L80 10.6L75 6Z' fill='none' stroke='%23c39a45' stroke-width='.8'/%3E%3C/svg%3E"); --blush: #e8a493; --danger: #b3352b; --line-dark: rgba(38, 29, 21, .12); --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(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { vertical-align: middle; } ::selection { background: rgba(198, 58, 47, .22); } /* ── Utilities ─────────────────────────────────────────────────────────── */ .mini-ico { display: inline-flex; margin-right: 8px; transform: translateY(2px); } /* Kicker becomes a little gold-framed badge — a wax-seal style label. */ .kicker { display: inline-flex; align-items: center; margin: 0 0 12px; padding: 6px 15px 5px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); } .kicker::before { content: "◆"; margin-right: 9px; font-size: 8px; color: var(--red); } /* ── 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; } /* Gentle reveal each time a panel becomes active (calm, fast, and killed by the reduced-motion rule below). */ html.js .panel.is-active .panel-inner { animation: panel-in .4s ease both; } @keyframes panel-in { from { opacity: .25; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Stationery column: gold hairline edges + a signature red ribbon edge. Every panel reads as the same keepsake card, just turned to a new page. */ .panel-inner { position: relative; max-width: 620px; margin: 0 auto; /* Bottom padding clears the floating powered-by strip + section pill. */ padding: calc(30px + env(safe-area-inset-top)) 26px calc(152px + env(safe-area-inset-bottom)); min-height: 100%; display: flex; flex-direction: column; justify-content: center; border-inline: 1px solid var(--gold-line); } /* Top: the red ribbon that runs across every panel. */ .panel-inner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--red) 0%, #d9574a 55%, var(--red-deep) 100%); box-shadow: 0 1px 0 rgba(38, 29, 21, .18); } /* Thin gold hairline under the ribbon, like a gilded edge. */ .panel-inner::after { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--gold-line); } /* Subtle paper tooth so the cream reads as real stock. */ .panel-inner { background-image: repeating-linear-gradient(0deg, rgba(38, 29, 21, .018) 0 1px, transparent 1px 3px); } /* ── Panel themes (warm stationery tints for rhythm) ───────────────────── */ .cover-panel { background: radial-gradient(120% 100% at 50% 0%, #fffdf4 0%, var(--cream) 68%, #f6e7cd 100%); } .program-panel { background: radial-gradient(120% 100% at 50% 0%, #fdf4e2 0%, #f8ebd2 72%); } .gallery-panel { background: radial-gradient(120% 100% at 50% 0%, #fffcf1 0%, #f8eed9 72%); } .detail-panel { background: radial-gradient(120% 100% at 50% 0%, var(--cream) 0%, var(--cream-deep) 100%); } .rsvp-panel { background: radial-gradient(120% 100% at 50% 0%, #fffcf1 0%, #f8eed9 72%); } .guest-panel { background: radial-gradient(120% 100% at 50% 0%, var(--cream) 0%, var(--cream-deep) 100%); } .free-panel { background: radial-gradient(120% 100% at 50% 0%, #fffdf4 0%, #f6e7cd 72%); } /* ── Cover ─────────────────────────────────────────────────────────────── A mounted keepsake card: a lifted cream "mat" with a crisp gold edge and a gapped engraved double-rule frame, engraved corner flourishes, a wax-seal kicker, an emblem set in a concentric medallion, and a cartouche plaque for the date/place. Designed to read as real stationery, not a flat line box. */ .cover { position: relative; justify-content: flex-start; gap: 4px; text-align: center; padding: calc(30px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(154px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left)); overflow: hidden; } .cover > * { position: relative; z-index: 3; } /* The lifted cream mat — a translucent veil that floats the whole card over the photo backdrop, with a crisp foil edge and a soft cast shadow. This is the single frame everything sits on (replaces the old twin hairlines). */ .cover::before { content: ""; position: absolute; inset: 16px; z-index: 1; border-radius: calc(var(--radius) + 4px); background: linear-gradient(180deg, rgba(255, 253, 246, .94) 0%, rgba(252, 245, 230, .9) 100%); border: 1px solid rgba(195, 154, 69, .6); box-shadow: 0 26px 50px -28px rgba(38, 29, 21, .55), 0 2px 0 rgba(255, 253, 246, .6) inset, 0 -2px 6px rgba(38, 29, 21, .04) inset; pointer-events: none; } /* Engraved double-rule: a gapped second line sits just inside the gold edge, as if scored into the card with a ruling pen. */ .cover::after { content: ""; position: absolute; inset: 23px; z-index: 1; border: 1px solid rgba(195, 154, 69, .34); border-radius: var(--radius); pointer-events: none; } /* Engraved corner flourishes — a gold L-bracket with a tiny red dot at each inner corner of the mat. Purely decorative; degrades to nothing without JS (no markup) and prints via the print-color-adjust block. */ .cover-ornaments { position: absolute; inset: 16px; z-index: 2; pointer-events: none; } .cover-ornaments .orn { position: absolute; width: 30px; height: 30px; background-image: var(--corner-orn); background-repeat: no-repeat; background-size: contain; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cover-ornaments .orn-tl { top: 10px; left: 10px; } .cover-ornaments .orn-tr { top: 10px; right: 10px; transform: scaleX(-1); } .cover-ornaments .orn-bl { bottom: 10px; left: 10px; transform: scaleY(-1); } .cover-ornaments .orn-br { bottom: 10px; right: 10px; transform: scale(-1, -1); } /* Optional photo backdrop behind the card (decorative). The cream wash keeps the stationery + ink text readable while letting a warm, moody photo show through at the mat edges. Swap the src or delete this block to hide it. Clicking the photo opens it full-size in the viewer (main.js) — the wash is click-transparent so taps reach the image. */ .cover .cover-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .cover-photo img { width: 100%; height: 100%; object-fit: cover; } .cover-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 90% at 50% 38%, rgba(253, 247, 234, .99) 0%, rgba(253, 247, 234, .9) 40%, rgba(94, 34, 27, .5) 100%); } /* Small "View photo" affordance on the cover backdrop; only exists when JS is on (no JS → no viewer → no chip). */ .cover-photo-btn { position: absolute; left: 30px; /* Clear the fixed powered-by strip + bottom nav pill on small screens. */ bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(195, 154, 69, .6); border-radius: 999px; background: rgba(255, 253, 246, .94); color: var(--red-deep); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(38, 29, 21, .5); transition: transform .15s ease, box-shadow .15s ease; } .cover-photo-btn:hover { transform: translateY(-2px); } .cover-photo-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } html:not(.js) .cover-photo-btn { display: none; } /* Confetti sprinkles — scattered between the mat edge and the inner rule, with a slow twinkle so the cover feels alive. */ .confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .cf { position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: .92; animation: cf-twinkle 4.5s ease-in-out infinite; } .cf-red { background: var(--red); box-shadow: 0 1px 3px rgba(158, 38, 31, .35); } .cf-gold { background: var(--gold-bright); box-shadow: 0 1px 4px rgba(195, 154, 69, .5); } .cf-cream { background: var(--card); box-shadow: 0 0 0 1px rgba(195, 154, 69, .55); } /* Scatter sits in the inner margin band of the mat (between edge + inner rule). */ .cf-1 { top: 30px; left: 34px; transform: rotate(24deg); animation-delay: .1s; } .cf-2 { top: 54px; left: 18px; transform: rotate(-18deg); width: 7px; height: 7px; animation-delay: 1.4s; } .cf-3 { top: 26px; right: 38px; transform: rotate(40deg); animation-delay: .6s; } .cf-4 { top: 52px; right: 20px; transform: rotate(-28deg); width: 7px; height: 7px; animation-delay: 2.1s; } .cf-5 { bottom: 88px; left: 22px; transform: rotate(-14deg); animation-delay: .9s; } .cf-6 { bottom: 116px; left: 12px; transform: rotate(34deg); width: 7px; height: 7px; border-radius: 50%; animation-delay: 2.6s; } .cf-7 { bottom: 84px; right: 26px; transform: rotate(18deg); animation-delay: 1.8s; } .cf-8 { bottom: 114px; right: 14px; transform: rotate(-36deg); width: 7px; height: 7px; border-radius: 50%; animation-delay: .3s; } @keyframes cf-twinkle { 0%, 100% { opacity: .92; } 50% { opacity: .4; } } /* Personalized greeting sits above the title like a handwritten line. */ .guest-greeting { margin: 6px 0 10px; font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--red-deep); } /* Wax-seal style kicker with a foil sheen. */ .cover .kicker { background: linear-gradient(180deg, rgba(195, 154, 69, .22), rgba(195, 154, 69, .12)); border-color: rgba(195, 154, 69, .7); } .cover-title { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.02; font-size: clamp(40px, 11vw, 66px); color: var(--ink); letter-spacing: -.012em; text-shadow: 0 1px 0 rgba(255, 253, 246, .6); } /* Ornamental divider: hairline — red-gold diamond — hairline. Replaces the plain gradient underline. */ .cover-rule-orn { display: block; width: 160px; max-width: 56%; height: 12px; margin: 14px auto 2px; background-image: var(--rule-orn); background-repeat: no-repeat; background-position: center; background-size: 100% 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cover-rule-orn.short { width: 120px; height: 10px; background-size: 100% 10px; } .cover-title-sub { margin: 10px 0 0; font-size: clamp(11px, 2.8vw, 13px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); } .store-name { margin: 12px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(34px, 10.5vw, 60px); line-height: 1.04; color: var(--red-deep); text-shadow: 0 1px 0 rgba(255, 253, 246, .85); } .tagline { margin: 8px auto 0; font-size: clamp(11.5px, 2.9vw, 13.5px); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); } /* Ribbon + scissors set inside a concentric medallion — the emblem reads as a stamped seal rather than a floating doodle. Colors come from the inline SVG defs. */ .ribbon-stage { position: relative; width: 200px; height: 200px; max-width: 70%; margin: 14px auto 4px; display: grid; place-items: center; } /* Concentric cream/gold rings behind the emblem. */ .ribbon-stage::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(255, 253, 246, .98), rgba(246, 235, 214, .9) 70%); border: 1px solid rgba(195, 154, 69, .55); box-shadow: 0 14px 30px -16px rgba(38, 29, 21, .4), 0 0 0 5px rgba(195, 154, 69, .12); } .ribbon-stage::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(195, 154, 69, .4); pointer-events: none; } .ribbon-art { position: relative; width: 158px; height: auto; max-width: 80%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(38, 29, 21, .22)); } .ribbon-tail-up { fill: url(#rbUp); } .ribbon-tail-down { fill: url(#rbDown); } .ribbon-loop { fill: url(#rbUp); stroke: #8f201b; stroke-width: 1.6; } .ribbon-knot { fill: url(#rbKnot); stroke: #8f201b; stroke-width: 1.6; } .ribbon-gold { fill: none; stroke: var(--gold-bright); stroke-width: 1.6; stroke-linecap: round; opacity: .9; } .scissors-art { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -42%) rotate(-12deg); filter: drop-shadow(0 4px 5px rgba(38, 29, 21, .3)); } .sc-ring { fill: none; stroke: url(#scGold); stroke-width: 7.5; } .sc-ring-core { fill: var(--card); opacity: .9; } .sc-blade { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; } /* Cartouche plaque for date/place: a double-rule tile with a red crest at the top center and gold icon chips. Reads as an engraved nameplate. */ .cover-meta { position: relative; margin: 10px auto 0; max-width: 30rem; padding: 18px 22px 16px; border: 1px solid rgba(195, 154, 69, .7); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 253, 246, .96), rgba(251, 244, 228, .96)); text-align: left; box-shadow: 0 14px 28px -18px rgba(38, 29, 21, .4); } /* Gapped inner rule = the engraved second line. */ .cover-meta::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(195, 154, 69, .3); border-radius: 2px; pointer-events: none; } /* Red-gold crest perched on the top edge of the plaque. */ .cover-meta::after { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 13px; height: 13px; background: linear-gradient(135deg, #d9574a, var(--red-deep)); border: 1px solid rgba(195, 154, 69, .7); box-shadow: 0 2px 5px rgba(158, 38, 31, .4); } .cover-meta p { position: relative; margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); } .cover-meta p + p { margin-top: 8px; padding-top: 8px; border-top: 1px dotted rgba(38, 29, 21, .16); } .cover-meta .mini-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 8px; background: rgba(195, 154, 69, .14); border: 1px solid rgba(195, 154, 69, .4); color: var(--red); transform: translateY(0); } .cover-meta .mini-ico svg { width: 16px; height: 16px; } .cover-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } /* Foot flourish under the actions — a short ornamental rule to close the card. */ .cover-rule { margin: 22px auto 0; width: 120px; max-width: 46%; height: 10px; border: 0; background-image: var(--rule-orn); background-repeat: no-repeat; background-position: center; background-size: 100% 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── 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: 14.5px; font-weight: 600; letter-spacing: .05em; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .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: linear-gradient(135deg, #d9574a 0%, var(--red) 55%, var(--red-deep) 100%); color: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 252, 243, .28), 0 12px 24px rgba(158, 38, 31, .38); } .btn-primary:hover { box-shadow: inset 0 0 0 1px rgba(255, 252, 243, .28), 0 16px 30px rgba(158, 38, 31, .5); } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn-ghost:hover { background: rgba(38, 29, 21, .06); color: var(--red-deep); box-shadow: inset 0 0 0 1.5px var(--red); } .btn-block { width: 100%; } /* ── Panel heads ───────────────────────────────────────────────────────── */ .panel-head { text-align: center; margin-bottom: 24px; } .panel-title { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.08; font-size: clamp(34px, 8.5vw, 54px); color: var(--ink); } .panel-title::after { content: ""; display: block; width: 58px; height: 2px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); } .panel-lead { margin: 10px auto 0; max-width: 34em; font-size: 15.5px; color: var(--ink-soft); } /* ── Program: timeline ─────────────────────────────────────────────────── */ .program-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold-line); } .program-item { position: relative; display: flex; gap: 16px; padding: 16px 0 16px 24px; } .program-item::before { content: ""; position: absolute; left: -9px; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--gold); } .program-time { flex: 0 0 auto; align-self: flex-start; padding: 5px 11px 4px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--gold-deep); font-variant-numeric: tabular-nums; } .program-title { margin: 0 0 3px; font-size: 17.5px; font-weight: 600; color: var(--ink); } .program-desc { margin: 0; font-size: 14px; color: var(--ink-soft); } /* ── Details ───────────────────────────────────────────────────────────── */ .detail-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-dark); } .detail-row { display: flex; align-items: flex-start; gap: 16px; padding: 17px 2px; border-bottom: 1px dotted rgba(38, 29, 21, .2); } .detail-row dt { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .detail-row dt svg { width: 32px; height: 32px; padding: 6px; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--gold-soft); color: var(--red); } .detail-row dd { margin: 0; padding-top: 3px; font-size: 16px; font-weight: 500; 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: 14px; color: var(--ink-soft); } .hosted-by .host-line { color: var(--red-deep); font-weight: 700; } .panel-foot { text-align: center; margin-top: 28px; } /* ── "In Pictures" gallery ────────────────────────────────────────────── */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .gallery-item { margin: 0; } .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; padding: 6px; background: var(--card); border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(38, 29, 21, .45); transition: transform .2s ease, box-shadow .2s ease; } html.js .gallery-item:hover img { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(38, 29, 21, .5); } .gallery-item figcaption { margin-top: 9px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 15.5px; text-align: center; color: var(--red-deep); } /* A lone photo reads full-width instead of half the grid. */ .gallery-grid .gallery-item:only-child { grid-column: 1 / -1; } .gallery-grid .gallery-item:only-child img { aspect-ratio: 16 / 9; } /* ── Flyer / banner (optional "The official flyer" panel) ────────────── A wide 8:3 slot for hosts who already have a designed flyer or poster: display it so guests can confirm they're in the right place. Clicking opens the full-screen viewer (main.js). Delete the block to hide it. */ .banner-flyer { margin: 0; } .banner-flyer img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; padding: 6px; background: var(--card); border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(38, 29, 21, .45); } .banner-flyer figcaption { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 15px; text-align: center; color: var(--ink-soft); } /* ── RSVP form ─────────────────────────────────────────────────────────── */ .rsvp-wrap { margin-top: 4px; } .rsvp-form-display { display: grid; gap: 15px; margin-top: 6px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .form-control { width: 100%; padding: 12px 15px; border: 1.5px solid rgba(38, 29, 21, .24); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; box-shadow: 0 2px 8px rgba(38, 29, 21, .04); transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: rgba(38, 29, 21, .34); } .form-control:focus { outline: none; border-color: var(--gold-deep); 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='%23261d15' 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: 74px; } .error { display: block; min-height: 0; font-size: 13px; font-weight: 500; color: var(--danger); } .field-hint { font-size: 12.5px; color: var(--ink-soft); } /* When the guest says they can't attend, de-emphasise the party-size field */ .rsvp-form-display .form-group--guests { transition: opacity .2s ease; } #rsvp-form.is-not-attending .form-group--guests { opacity: .45; } .rsvp-note { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--red-soft); border: 1px solid var(--red-line); 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(--red-deep); } .loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(198, 58, 47, .3); border-top-color: var(--red-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: 600; margin: 0 0 10px; color: var(--red-deep); } .thank-you-message p { margin: 4px 0; color: var(--ink-soft); } /* ── Countdown ─────────────────────────────────────────────────────────── */ .rsvp-countdown { margin: 20px auto 4px; max-width: 420px; text-align: center; } .countdown-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--red-deep); } .countdown-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .count-box { padding: 13px 4px 11px; border-radius: 14px; background: linear-gradient(180deg, #33281f 0%, var(--ink) 100%); border: 1px solid rgba(195, 154, 69, .35); color: var(--card); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 12px 22px rgba(38, 29, 21, .22); } .count-box span { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; color: var(--gold); } .count-box small { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 252, 243, .6); } /* ── Guestbook ─────────────────────────────────────────────────────────── */ .guestbook-section { margin-top: 4px; } .guestbook-head { text-align: center; margin-bottom: 20px; } /* 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 var(--gold-line); border-top: 4px solid var(--red); border-radius: var(--radius); background: var(--card); box-shadow: 0 12px 26px rgba(38, 29, 21, .07); } .guestbook-body #guestbookForm .form-control { background: #fffdf6; } .guestbook-body #guestbookForm label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .guestbook-body #guestbookForm textarea { min-height: 90px; resize: vertical; } .guestbook-body #guestbookForm .error { margin-top: 4px; } .guestbook-body #guestbookForm button[type="submit"] { padding: 13px 26px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #d9574a 0%, var(--red) 55%, var(--red-deep) 100%); color: var(--card); font: inherit; font-size: 14.5px; 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(158, 38, 31, .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(--red-deep); } .guestbook-wrap { margin-top: 22px; display: grid; gap: 12px; } .guestbook-entry { padding: 15px 17px; border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; background: var(--card); box-shadow: 0 6px 16px rgba(38, 29, 21, .06); } .guestbook-entry h5 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--red-deep); } .guestbook-entry p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink); } .guestbook-entry small { font-size: 12px; color: var(--ink-soft); } .more-guestbook-wrap { margin-top: 18px; text-align: center; } #load-more { padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--red); background: transparent; color: var(--red-deep); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease; } #load-more:hover { background: var(--red-soft); transform: translateY(-2px); } #load-more:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* ── Free page (optional "A note from us" panel) ────────────────────── A free-form panel the host fills in the cockpit's Free Page section. Each .free-block is one repeatable block: a title, free text and an OPTIONAL photo (leave the image empty in the cockpit and the whole figure disappears). The render engine removes the whole .panel-free section when no blocks exist (or the host toggles the page off), so the tab that main.js builds from this panel vanishes with it. Clicking the photo opens the full-screen viewer like every other photo slot. To reorder the page among the tabs, move the whole
block up or down in index.html -- the tabs follow the DOM order. */ .free-blocks { display: grid; gap: clamp(28px, 5vmin, 44px); } .free-block { margin: 0; text-align: center; } .free-title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(23px, 5.5vw, 34px); line-height: 1.15; color: var(--red-deep); overflow-wrap: anywhere; } .free-title:focus { outline: none; } .free-figure { margin: 0 auto 16px; max-width: 520px; } .free-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; padding: 6px; background: var(--card); border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(38, 29, 21, .45); } .free-content { margin: 0 auto; max-width: 30em; text-align: left; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; } /* ── Full-width powered-by brand strip ───────────────────────────────── A slim, full-width "Powered by Kundangi" line pinned above the 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; the cockpit's Free Powered By field can override the whole line. */ html:not(.js) .powered-by { width: 100%; text-align: center; padding: 14px 16px 22px; border-top: 1px solid var(--gold-line); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); } html.js .powered-by { position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 49; width: 100%; text-align: center; padding: 6px 14px; border-top: 1px solid rgba(195, 154, 69, .34); background: rgba(247, 238, 220, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; /* non-interactive; never blocks taps on the pill */ } .powered-by .link-footer { color: var(--red-deep); } /* ── Photo viewer (lightbox) ──────────────────────────────────────────── Click ANY photo (cover backdrop, gallery, banner) to view it full-screen and zoom. The viewer markup is built by main.js only when photo slots exist, so hiding the photos removes the viewer too — no orphaned UI, no platform contract. */ html.js .gallery-item img, html.js .cover-photo img, html.js .banner-flyer img, html.js .free-figure 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 .gallery-item, html.js .banner-flyer, html.js .free-figure { position: relative; } html.js .gallery-item::after, html.js .banner-flyer::after, html.js .free-figure::after { content: ""; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 252, 243, .96) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c63a2f' 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(38, 29, 21, .4); opacity: 0; transform: translateY(-3px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; } html.js .gallery-item:hover::after, html.js .gallery-item:focus-within::after, html.js .banner-flyer:hover::after, html.js .banner-flyer:focus-within::after, html.js .free-figure:hover::after, html.js .free-figure:focus-within::after { opacity: 1; transform: 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(24, 17, 11, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .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; } /* Scrollable pan area — becomes the zoom surface when .is-zoomed. */ .photo-viewer .pv-scroll { max-width: 100%; max-height: 76vh; max-height: 76dvh; overflow: hidden; border-radius: 12px; } .photo-viewer img { display: block; max-width: 100%; max-height: 76vh; max-height: 76dvh; width: auto; height: auto; border: 6px solid var(--card); border-radius: 12px; background: var(--paper); /* mat while loading / if the file is missing */ box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); } /* Zoomed: photo grows to 200% and the frame scrolls to pan. */ .photo-viewer.is-zoomed .pv-scroll { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .photo-viewer.is-zoomed img { width: 200%; max-width: none; max-height: none; height: auto; } .photo-viewer figcaption { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 17px; color: #f0d9a8; } .photo-viewer .pv-unavailable { display: flex; align-items: center; justify-content: center; width: min(72vw, 520px); height: min(46vh, 360px); padding: 20px; border: 6px solid var(--card); border-radius: 12px; background: var(--paper); color: var(--ink-soft); font-size: 14px; font-style: italic; text-align: center; } .pv-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 252, 243, .5); background: rgba(255, 252, 243, .96); color: var(--red-deep); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); transition: transform .15s ease, background-color .15s 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-zoom { 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-scroll, .photo-viewer img { max-height: 62vh; max-height: 62dvh; } .photo-viewer.is-zoomed img { max-height: none; } .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-zoom { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); } } /* ── Brand footer (tucked into the last panel by main.js) ─────────────── */ .app-footer { margin-top: 36px; padding: 20px 0 0; border-top: 1px solid var(--gold-line); text-align: center; } .app-footer .footer-brand { margin: 0 0 10px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 21px; color: var(--gold-deep); } .app-footer .footer-brand-name { color: var(--red-deep); } .app-footer .foot-meta { margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--ink-soft); } .foot-rule { width: 26px; height: 1px; background: var(--gold-line); flex: none; } /* ── Optional video feature (film-card, in the "Watch" panel) ────────── A poster + play button that lazy-loads an iframe embed from the data-video-url attribute — nothing loads until the guest taps play. Delete the .film-card (or its whole panel) to hide the feature. */ .film-card { margin-top: 2px; } .film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--gold-line); box-shadow: 0 14px 30px -20px rgba(38, 29, 21, .45); overflow: hidden; } .film-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--paper); cursor: pointer; } .film-open img { display: block; width: 100%; height: 100%; object-fit: cover; } .film-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #d9574a 0%, var(--red) 55%, var(--red-deep) 100%); color: var(--card); border: 2px solid rgba(255, 252, 243, .85); box-shadow: 0 10px 26px rgba(38, 29, 21, .4); animation: film-pulse 2.6s ease-in-out infinite; } .film-play svg { width: 26px; height: 26px; margin-left: 3px; } .film-open:hover .film-play { transform: translate(-50%, -50%) scale(1.08); } .film-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(38, 29, 21, .6); color: var(--card); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; } .film-frame iframe { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border: 0; border-radius: 10px; } .film-note { margin: 0; padding: 18px 20px; border-radius: 12px; background: var(--card); border: 1px dashed var(--gold-line); color: var(--ink-soft); font-size: 14px; font-style: italic; text-align: center; } .film-external { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--red-deep); text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color .15s ease, color .15s ease; } .film-external:hover { color: var(--gold-deep); border-color: var(--gold-deep); } .film-external[hidden] { display: none; } @keyframes film-pulse { 0%, 100% { box-shadow: 0 10px 26px rgba(38, 29, 21, .4), 0 0 0 0 rgba(195, 154, 69, .55); } 50% { box-shadow: 0 10px 26px rgba(38, 29, 21, .4), 0 0 0 18px rgba(195, 154, 69, 0); } } /* ── Section switcher (text pills, built by main.js) ──────────────────── A dark espresso pill with gold active state. On narrow screens the pill scrolls horizontally (fades at the edges hint at more items); tap targets stay comfortably large. */ .panel-nav { position: fixed; z-index: 50; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: min(96vw, 780px); padding: 8px; border-radius: 999px; background: rgba(32, 23, 16, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(195, 154, 69, .4); box-shadow: 0 14px 34px rgba(38, 29, 21, .35); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); } .panel-nav[hidden] { display: none; } /* No tabs built (no-JS or single panel) → no bar at all. */ .panel-nav:empty { display: none; } .panel-nav::-webkit-scrollbar { display: none; } .panel-nav .nav-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 252, 243, .84); font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .panel-nav .nav-tab svg { width: 15px; height: 15px; flex: none; opacity: .9; } .panel-nav .nav-tab:hover { background: rgba(255, 252, 243, .14); } .panel-nav .nav-tab.is-current { background: var(--gold); color: #2b1e12; box-shadow: 0 6px 18px -6px rgba(195, 154, 69, .75); } .panel-nav .nav-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Wider screens: let the pill stretch so all tabs sit visible — scrolling is only needed on phones. */ @media (min-width: 700px) { .panel-nav { max-width: min(94vw, 960px); } } /* ── 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; } .confetti, .cover-rule, .cover-rule-orn, .cover-ornaments, .cover-actions, .panel-foot, .ribbon-stage, .cover-meta, .gallery-item img, .cover-photo img, .banner-flyer img { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .photo-viewer { display: none !important; } .film-frame iframe { display: none; } /* a playing video can't print — the poster prints instead */ a[href]::after { content: ""; } }