17:I[93868,["/_next/static/immutable/chunks/0_wr-y4860vtq.js","/_next/static/immutable/chunks/2c7jxuab5_76i.js","/_next/static/immutable/chunks/2v5ypqmalxzvd.js","/_next/static/immutable/chunks/3vt9879i9o1qi.js"],"TemplatePreview"] 1c:I[27201,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"IconMark"] 18:T51604,

Together with their families

The wedding day

You are invited

Wedding
Invitation

One day this year will be unlike any other — and there is no one we would rather share it with than you. With full hearts, we invite you to celebrate our wedding.

Two hearts, one story

The Bride
& Groom

The Bride

The Groom

You are warmly invited on

Saturday

The wedding day

00Days

00Hrs

00Min

00Sec

How the day unfolds

The Programme

{{name}}
{{#if time}}
{{time}}
{{/if}} {{#if venue}}
{{venue}}
{{/if}}

Where we'll gather

{{#if venue_map_url}} {{venue_name}} Open in Maps {{/if}}

Kindly reply

RSVP

A single tap is all it takes.

Don't miss a moment

Save
the Date

Google Calendar Apple Calendar

19:T652a,@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Hanken+Grotesk:ital,wght@0,400..600;1,400..500&display=swap'); /* tokens.css */ /* ============================================================================= tokens.css — INKWELL design system (WeddingInWhites · Essentials Collection) The reusable foundation for every Essentials template. One ink, one paper, two typefaces, one stroke width, one rhythm. Restraint is the brand. ========================================================================== */ :root { /* ---- Colour: ink on paper, with ONE signature accent -------------------- */ --paper: #F4F0E6; /* warm ivory ground */ --paper-2: #ECE7D9; /* faint raised panel */ --paper-edge: #E4DECC; /* hairline paper shadow */ --ink: #1F1B15; /* warm charcoal — the "ink" (never pure black) */ --ink-soft: #6A6357; /* secondary text */ --ink-faint: rgba(31, 27, 21, 0.14); /* hairline rules / borders */ --ink-ghost: rgba(31, 27, 21, 0.06); /* wash panels */ /* The ONLY colour on the page. Ribbon · wax seal · wine · one tiny heart. */ --wine: #7A1F2A; --wine-deep: #611722; /* wax-seal shading */ /* ---- Typography --------------------------------------------------------- */ --f-display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif; --f-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* Names dominate. Titles step down. Body is quiet — strong contrast. */ --t-label: clamp(0.68rem, 2.5vw, 0.76rem); /* tracked caps labels */ --t-body: clamp(0.97rem, 3.2vw, 1.04rem); --t-lead: clamp(1.04rem, 3.6vw, 1.16rem); --t-title: clamp(1.7rem, 7vw, 2.35rem); /* section titles (caps) — smaller */ --t-names: clamp(3.3rem, 18vw, 6rem); /* the couple — always the strongest */ --lh-tight: 0.98; --lh-body: 1.62; --ls-caps: 0.17em; /* tracked uppercase labels */ --ls-title: 0.005em; /* display caps: tight */ /* ---- Spacing scale (8pt- based, fluid at the top) ----------------------- */ --s-1: 0.375rem; --s-2: 0.6rem; --s-3: 0.9rem; --s-4: 1.35rem; --s-5: 2rem; --s-6: 2.75rem; --s-7: 3.75rem; /* Chapter rhythm — three scales create the visual cadence (~20% tighter). */ --chapter-lg: clamp(4rem, 12vw, 6.25rem); --chapter-md: clamp(2.9rem, 9vw, 4.5rem); --chapter-sm: clamp(2.2rem, 7vw, 3.5rem); --chapter: var(--chapter-md); /* default */ --measure: 34rem; /* content column cap */ --gutter: clamp(1.5rem, 7vw, 2.75rem); /* ---- Line / stroke ------------------------------------------------------ */ --stroke: 2.4; /* THE illustration stroke width (SVG units @100 vb) */ --hair: 1px; /* ---- Corner radius ------------------------------------------------------ */ --r-pill: 999px; /* interactive: buttons, inputs (fully rounded) */ --r-card: 1.1rem; /* soft panels */ --r-sm: 0.6rem; /* checkboxes */ /* ---- Motion (fade / small rise / SVG draw / tiny scale — 250–450ms) ----- */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-soft: cubic-bezier(0.33, 0, 0.2, 1); --d-1: 0.28s; /* taps / small transitions */ --d-2: 0.42s; /* fade + rise */ --d-draw: 0.45s; /* SVG line self-draw */ /* Refined, believable ink-button shadow. */ --shadow-btn: 0 1px 2px rgba(31,27,21,0.18), 0 6px 16px -8px rgba(31,27,21,0.4); --z-nav: 50; } /* base.css */ /* ============================================================================= base.css — reset, paper, typography base, layout primitives (Inkwell) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Faint printed-paper grain over everything (subtle, fixed, cheap). */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 2; } img, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---- Type roles ---------------------------------------------------------- */ .label { font-family: var(--f-body); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); } .title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-title); line-height: var(--lh-tight); letter-spacing: var(--ls-title); text-transform: uppercase; color: var(--ink); text-wrap: balance; } .names { font-family: var(--f-display); font-weight: 800; font-size: var(--t-names); line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); } .lead { font-size: var(--t-lead); color: var(--ink-soft); line-height: var(--lh-body); } .script { /* not a script font — a small emphasised marker set in italic body */ font-style: italic; color: var(--ink-soft); } /* ---- Layout primitives --------------------------------------------------- */ .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } /* A "chapter": one self-contained, centred, screenshot-worthy section. */ .chapter { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); padding-block: var(--chapter); padding-inline: var(--gutter); } /* Rhythm: sections deliberately differ in scale (see the brief). */ .chapter--lg { padding-block: var(--chapter-lg); } .chapter--md { padding-block: var(--chapter-md); } .chapter--sm { padding-block: var(--chapter-sm); gap: var(--s-3); } .chapter__body { width: 100%; max-width: 24rem; } /* narrow measure = premium */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* illustration.css */ /* ============================================================================= illustration.css — how every Inkwell line drawing renders + animates. One stroke width, round caps/joins, a shared ink-wobble filter for the handcrafted quality, and a scroll-triggered self-draw. ========================================================================== */ .illo { display: block; color: var(--ink); width: clamp(4rem, 22vw, 6.5rem); /* default (accent) size */ margin-inline: auto; } .illo svg { width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; filter: url(#inkwobble); /* the hand-drawn wobble */ } /* The wine accent: real liquid — vertical gradient + a small specular glint. */ .illo svg .wine { fill: url(#wine-liquid); stroke: none; } .illo svg .wine-shine { fill: #F7DDE0; opacity: 0.34; stroke: none; } /* Sizes — restrained scale ladder. */ .illo--xs { width: clamp(1.7rem, 7vw, 2.1rem); } .illo--sm { width: clamp(3rem, 14vw, 4rem); } .illo--md { width: clamp(5rem, 26vw, 7.5rem); } .illo--lg { width: clamp(8rem, 42vw, 13rem); } .illo--xl { width: clamp(11rem, 62vw, 18rem); } /* Self-draw: strokes start hidden, then draw in on reveal (tiny per-stroke stagger via --i). pathLength=1 normalises all lengths → one rule fits all. */ .illo svg :where(path, line, polyline, polygon, circle, ellipse, rect) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-draw) var(--e-out); transition-delay: calc(var(--i, 0) * 32ms); } .illo.is-drawn svg :where(path, line, polyline, polygon, circle, ellipse, rect) { stroke-dashoffset: 0; } /* A drawn illustration can also fade+lift a touch as it arrives. */ .illo { opacity: 0; transform: translateY(10px); transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out); } .illo.is-drawn { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .illo, .illo svg :where(path, line, polyline, polygon, circle, ellipse, rect) { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } } /* components.css */ /* ============================================================================= components.css — reusable Inkwell UI: buttons, dividers, frames, inputs, chips Two shape languages: organic hand-drawn (expression) vs precise pills (interaction). They never mix. ========================================================================== */ /* ---- Buttons: solid ink pill (primary) + line pill (secondary) ----------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.1rem; padding: 0.9em 1.9em; border-radius: var(--r-pill); font-family: var(--f-body); font-weight: 600; font-size: 0.8rem; letter-spacing: var(--ls-caps); text-transform: uppercase; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); transition: transform var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out), background-color var(--d-1) var(--e-soft); } .btn:active { transform: scale(0.98) translateY(1px); box-shadow: 0 1px 2px rgba(31,27,21,0.2); } .btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn--line:active { box-shadow: inset 0 0 0 1.5px var(--ink); } .btn--line:active { background: var(--ink-ghost); } .btn--block { width: 100%; } .btn__ic { width: 1.15em; height: 1.15em; } .btn__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---- Signature divider: a thin charcoal line, ~55% wide, with a small hand-drawn illustration centred on it. Opens every chapter like a printed stationery rule. -------------------------------------------------------- */ .divider { display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 55%; max-width: 20rem; margin-inline: auto; } .divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: var(--ink); opacity: 0.4; } .divider__dot { width: 6px; height: 6px; background: var(--ink); transform: rotate(45deg); flex: none; } /* The centred illustration — subtle, never louder than the rule it sits on. */ .divider--illo .illo { width: clamp(1.7rem, 7vw, 2.1rem); flex: none; color: var(--ink); margin: 0; } /* ---- Hand-drawn frame (arch-tablet) — the cover's centrepiece ------------- */ .frame { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2.2rem, 9vw, 3.4rem) clamp(1.8rem, 8vw, 3rem); isolation: isolate; } .frame__border { position: absolute; inset: 0; z-index: -1; color: var(--ink); } .frame__border svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: url(#inkwobble); overflow: visible; } /* ---- Inputs (used sparingly) --------------------------------------------- */ .field { width: 100%; min-height: 3.1rem; padding: 0 1.3rem; border-radius: var(--r-pill); background: transparent; border: 1.5px solid var(--ink-faint); color: var(--ink); font-family: var(--f-body); } .field::placeholder { color: var(--ink-soft); opacity: 0.8; } .field:focus-visible { border-color: var(--ink); outline: none; } /* ---- Meta chips (small tag rows) ----------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.9em; border-radius: var(--r-pill); border: 1px solid var(--ink-faint); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } /* animations.css */ /* ============================================================================= animations.css — Essentials motion vocabulary. Only fade, slide, self-draw (see illustration.css) and tiny scale. Nothing heavy. IntersectionObserver (reveal.js) adds .is-visible. ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out); } [data-reveal="fade"] { transform: none; } [data-reveal="scale"] { transform: scale(0.97); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Staggered groups: children arrive in sequence. */ [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out); transition-delay: calc(var(--i, 0) * 90ms); } [data-stagger].is-visible > * { opacity: 1; transform: none; } /* Signature ribbon: a single restrained sway that damps to rest as the invitation opens. Pivot sits at the bow, so the long trailing ends move most while the bow itself barely stirs — the ends flutter, nothing more. */ @keyframes ribbon-settle { 0% { transform: rotate(0.9deg); } 28% { transform: rotate(-0.55deg); } 52% { transform: rotate(0.3deg); } 76% { transform: rotate(-0.12deg); } 100% { transform: rotate(0deg); } } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-stagger] > * { transition: none !important; opacity: 1 !important; transform: none !important; } .cover__ribbon-img { animation: none !important; } } /* sections.css */ /* ============================================================================= sections.css — Inkwell chapter compositions. Centre spine, loose ornament, generous air. Ornament density fades from cover → closing. ========================================================================== */ /* ---- COVER (the hero — largest composition) ------------------------------- */ /* The bow tops the composition; the card sits below it and the trailing ribbon threads behind the names, so it reads as woven into the invitation. */ /* The ribbon below is laid out at the full width of this section and then rotated by its settle animation, so its corners swing a few pixels past the screen edge on a phone — enough to make the page draggable sideways until the animation ends. The cover clips its own full-bleed decoration: clip rather than hidden, so this never becomes a scroll container (which would break position: sticky and scroll anchoring inside it). */ .cover { position: relative; overflow-x: clip; min-height: 100svh; justify-content: flex-start; gap: var(--s-4); padding-block: clamp(14rem, 32svh, 17rem) var(--s-6); } /* Signature ribbon — the premium PNG asset overlaid on the whole cover. Never stretched (object-fit keeps its aspect); nudge with the --rb-* vars. */ .cover__ribbon-img { position: absolute; top: var(--rb-top, 0); left: 50%; translate: -50% 0; width: var(--rb-width, 100%); /* natural aspect — never stretched */ max-width: var(--rb-max, 26rem); height: auto; pointer-events: none; z-index: 0; /* behind the text — threads into the layout */ filter: drop-shadow(0 6px 11px rgba(70, 12, 18, 0.28)); /* Visible by default (baked into the build); its ends settle once on open. */ transform-origin: 50% var(--rb-pivot, 22%); animation: ribbon-settle 2.8s var(--e-out) 0.2s 1 both; } .cover__lights { width: min(60%, 16rem); color: var(--ink); margin-bottom: var(--s-1); } .cover__stage { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; max-width: 30rem; padding-inline: 1.5rem; } .cover__frame { width: 100%; max-width: 24rem; gap: var(--s-2); padding: clamp(4.6rem, 15vw, 5.8rem) clamp(2rem, 9vw, 3rem) clamp(3rem, 11vw, 3.8rem); } .cover__names { display: flex; flex-direction: column; align-items: center; gap: 0.01em; margin-block: 0.12em; } .cover__amp { font-weight: 500; font-size: 0.34em; color: var(--ink-soft); } .cover__date { margin-top: 0.6em; } /* Supporting celebration marks — small, so the card dominates. */ .cover__illo { position: absolute; width: clamp(2.2rem, 10vw, 3rem); color: var(--ink); } .cover__illo--tl { top: 2.2rem; left: -0.6rem; } .cover__illo--tr { top: 2.2rem; right: -0.6rem; } .cover__illo--bl { bottom: 1.4rem; left: -0.6rem; } .cover__illo--br { bottom: 1.4rem; right: -0.6rem; } .cover__cue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem; color: var(--ink-soft); margin-top: var(--s-2); } .cover__cue-line { width: 1px; height: 2rem; background: var(--ink-faint); } /* ---- COUPLE --------------------------------------------------------------- */ .couple__grid { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); width: 100%; } .person { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); max-width: 26rem; } .person__role { margin-top: var(--s-1); } .person__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 9vw, 2.9rem); text-transform: uppercase; line-height: 1; } .couple__amp { margin-block: var(--s-1); } /* ---- DETAILS (one unified composition) ------------------------------------ */ .details__block { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); } .details__day { font-size: var(--t-label); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); } .details__date { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 9vw, 2.8rem); text-transform: uppercase; line-height: 1; margin-top: 0.1em; } .details__time { font-style: italic; color: var(--ink-soft); margin-top: 0.1em; } .details__rule { width: 2.4rem; height: 1px; background: var(--ink-faint); margin-block: var(--s-3); } .details__venue { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.15rem, 5vw, 1.5rem); text-transform: uppercase; line-height: 1.08; } .details__city { font-size: var(--t-label); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); margin-top: 0.15em; } .countdown { display: flex; gap: var(--s-4); margin-top: var(--s-5); } .countdown div { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .countdown b { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 6.5vw, 1.85rem); font-variant-numeric: tabular-nums; line-height: 1; } /* ---- TIMELINE (the printed programme) ------------------------------------- */ .tl { list-style: none; margin: 0; padding: 0; width: min(100%, 22rem); display: flex; flex-direction: column; } .tl__item { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding-block: var(--s-5); } .tl__item:not(:first-child)::before { content: ''; width: 2.6rem; height: 1px; background: var(--ink-faint); margin-bottom: var(--s-4); } .tl__illo { width: 2.3rem; margin-bottom: var(--s-2); color: var(--ink); } .tl__time { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 8vw, 2.15rem); line-height: 1; } .tl__name { font-size: var(--t-label); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); margin-top: 0.2em; } /* ---- VENUE (premium, integrated map) -------------------------------------- */ .venue__name { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.45rem, 6vw, 1.95rem); text-transform: uppercase; width: 100%; text-wrap: balance; line-height: 1.04; } .venue__card { width: min(100%, 28rem); border: 1px solid var(--ink-faint); border-radius: var(--r-card); overflow: hidden; background: var(--paper-2); box-shadow: 0 18px 40px -30px rgba(31,27,21,0.35); } .venue__mapwrap { position: relative; } .map__art { display: block; width: 100%; height: auto; aspect-ratio: 320 / 200; fill: none; stroke-linecap: round; stroke-linejoin: round; } .map__ink { stroke: var(--ink); stroke-opacity: 0.24; stroke-width: 2; } .map__route { stroke: var(--ink); stroke-opacity: 0.5; stroke-width: 2; } /* Muted sage greenery — reads as a printed map's parks, not a brand accent. */ .map__park { fill: #AEBC9C; fill-opacity: 0.42; stroke: none; } .map__trees circle { fill: #8FA46F; fill-opacity: 0.9; stroke: #6C7C54; stroke-width: 0.8; } .map__pin { position: absolute; left: 50%; top: 46%; translate: -50% -60%; width: 2rem; color: var(--ink); } .map__pin .illo { width: 100%; } /* One-tap directions integrated into the foot of the map card. */ .venue__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--ink-faint); background: var(--paper); text-align: left; transition: background-color var(--d-1) var(--e-soft); } .venue__cta:active { background: var(--paper-2); } .venue__addr { font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); } .venue__go { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.74rem; letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; } .venue__go svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---- RSVP ----------------------------------------------------------------- */ .rsvp__actions { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 22rem; margin-top: var(--s-2); } /* ---- CALENDAR ------------------------------------------------------------- */ .cal__actions { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 20rem; margin-top: var(--s-2); } /* ---- CLOSING -------------------------------------------------------------- */ .closing { padding-block: var(--chapter-lg) var(--s-7); gap: var(--s-3); } .closing__msg { font-size: clamp(1.7rem, 8vw, 2.6rem); } .closing__names { font-size: clamp(2rem, 10vw, 3.2rem); margin-top: var(--s-3); } .closing__names .cover__amp { font-size: 0.5em; } .closing__tag { margin-top: var(--s-2); } .closing__credit { margin-top: var(--s-5); opacity: 0.6; letter-spacing: 0.22em; } /* sketch.css — timeline reads free-text event names/times, so restyle items */ .timeline .tl__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.35rem, 6vw, 1.75rem); text-transform: none; letter-spacing: 0; color: var(--ink); line-height: 1.06; margin-top: 0.12em; } .timeline .tl__time { font-family: var(--f-body); font-style: italic; font-weight: 400; font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: 0.22em; } .timeline .tl__loc { font-size: var(--t-label); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); margin-top: 0.32em; } /* The shared RSVP form paints its send button with background:currentColor next to color:#fff on the same rule, so currentColor resolved to white and the button that completes a "Yes, I'll attend" reply rendered as a blank block. Dress it in this design's own colours. */ .wiw-rsvp .wiw-rsvp-send{background:linear-gradient(180deg,#7A1F2A,#611722);border:1px solid rgba(97,23,34,.55);color:#F4F0E6;opacity:1} .wiw-rsvp .wiw-rsvp-send:hover{opacity:1;filter:brightness(1.06)} /* wiw: phone viewport fit -------------------------------------------------- On a phone the invitation could be dragged sideways. The usual causes are a design that scales something up as it opens (Garden's cover animates to 1.22x — 475px on a 390px screen) and decorative layers deliberately drawn larger than their box. Both are harmless on a laptop, where the viewport has room to spare, and both add a horizontal scrollbar on a phone. So on phone widths only, horizontal overflow is clipped at the document level. 'clip' is preferred over 'hidden' because it does not make the element a scroll container, which would break any position: sticky inside the design. Vertical scrolling, layout, colour and motion are untouched, and nothing here applies at 768px and up — iPad and laptop render exactly as they did. */ @media (max-width: 767px) { html, body { overflow-x: hidden; /* Belt and braces: nothing may make the page itself wider than the screen. */ max-width: 100%; } } @supports (overflow-x: clip) { @media (max-width: 767px) { html, body { overflow-x: clip; } } } /* wiw: end phone viewport fit -------------------------------------------- */ 1a:T42ec, /* ============================================================================= illustrations.js — THE Inkwell illustration library (v2). Warmer, handcrafted line drawings that depict wedding MOMENTS — one artist, one pen, one stroke width. 100×100 canvas, no fill (except the single wine accent, class="wine"), round caps/joins, the shared ink-wobble filter. Reusable across all Essentials templates. ========================================================================== */ window.INKWELL_ILLO = { /* — Wedding arch: two posts, a flowered canopy, an aisle underfoot — */ arch: ` `, /* — String lights swag — */ lights: ` `, /* — Invitation envelope, card peeking out, tied — */ envelope: ` `, /* — Hand-tied bouquet — */ bouquet: ` `, /* — Tiered wedding cake on a stand — */ cake: ` `, /* — Champagne toast: two coupes clinking, real red wine inside — */ champagne: ` `, /* — Wedding dinner: a laid table for two — */ 'wedding-dinner': ` `, /* — Candelabra — */ candles: ` `, /* — Ribbon / velvet bow — */ ribbon: ` `, /* — Camera on a strap — */ camera: ` `, /* — First dance: a couple mid-turn — */ 'first-dance': ` `, /* — Music: a pair of notes — */ music: ` `, /* — The ring — */ ring: ` `, /* — The bride: fitted bodice, flared gown, veil, bouquet held low — */ bride: ` `, /* — The groom: structured suit, lapels, bow tie, trousers — */ groom: ` `, /* — Two rings intertwined, tied with a ribbon bow (their union) — */ 'rings-tied': ` `, /* — Calendar leaf, the wedding day ringed — */ calendar: ` `, /* — A small tied bow (closing) — */ bow: ` `, /* — Sparkler — */ sparkler: ` `, /* — Stars / twinkle — */ stars: ` `, /* — Tiny heart (the single burgundy accent) — */ heart: ``, 'heart-line': ``, /* — Map location pin (charcoal, replaces the old heart marker) — */ pin: ``, /* — Leaf sprig — */ sprig: ``, /* — Divider mark — */ mark: ``, }; /* ============================================================================= illo.js — inject the illustration library into [data-illo="name"] as inline SVG, and normalise every stroke to pathLength=1 so a single CSS rule can make any illustration "self-draw" regardless of its real path lengths. ========================================================================== */ (function () { 'use strict'; var LIB = window.INKWELL_ILLO || {}; var GEO = 'path,line,polyline,polygon,circle,ellipse,rect'; document.querySelectorAll('[data-illo]').forEach(function (host) { var name = host.getAttribute('data-illo'); var inner = LIB[name]; if (!inner) return; host.innerHTML = ''; // Normalise stroke lengths + give each a small draw-order index. var els = host.querySelectorAll(GEO); els.forEach(function (el, i) { el.setAttribute('pathLength', '1'); el.style.setProperty('--i', i); }); host.__strokes = els.length; }); // Expose for dynamically-added illustrations (e.g. timeline built from config). window.INKWELL_injectIllos = function (root) { (root || document).querySelectorAll('[data-illo]:empty').forEach(function (host) { var inner = LIB[host.getAttribute('data-illo')]; if (!inner) return; host.innerHTML = ''; host.querySelectorAll(GEO).forEach(function (el, i) { el.setAttribute('pathLength', '1'); el.style.setProperty('--i', i); }); }); }; })(); /* ============================================================================= reveal.js — scroll reveals. [data-reveal]/[data-stagger] fade+slide; .illo self-draws (adds .is-drawn). No scroll math on the main thread. ========================================================================== */ (function () { 'use strict'; var SEL = '.illo, [data-reveal], [data-stagger]'; var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; var targets = function () { return document.querySelectorAll(SEL); }; function show(el) { el.classList.add('is-visible'); if (el.classList.contains('illo')) el.classList.add('is-drawn'); } if (reduce || !('IntersectionObserver' in window)) { targets().forEach(show); return; } // In the framed preview the scroller is .ink-screen; a normally-served page // scrolls the document (root: null). var previewRoot = document.documentElement.classList.contains('is-preview') ? document.querySelector('.ink-screen') : null; var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { show(e.target); io.unobserve(e.target); } }); }, { root: previewRoot, rootMargin: '0px 0px -10% 0px', threshold: 0.12 }); targets().forEach(function (el) { io.observe(el); }); // Failsafe: reveal anything on-screen (covers dynamic nodes / throttled IO). var n = 0; var t = setInterval(function () { var vh = previewRoot ? previewRoot.clientHeight : window.innerHeight; var top = previewRoot ? previewRoot.getBoundingClientRect().top : 0; document.querySelectorAll(SEL).forEach(function (el) { if (el.classList.contains('is-visible') || el.classList.contains('is-drawn')) return; var r = el.getBoundingClientRect(); if (r.bottom > top + 4 && r.top < top + vh - 4) show(el); }); if (++n >= 6) clearInterval(t); }, 500); })(); /* init — format the ISO wedding date/time into elegant readable text, and power the live countdown + Add-to-Calendar from baked data-attributes (platform convention: data arrives via {{placeholders}}, formatted client-side). */ (function () { 'use strict'; var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; function fmtDate(v, withDay) { var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(v || ''); if (!m) return v || ''; var d = new Date(+m[1], +m[2] - 1, +m[3]); var core = (+m[3]) + ' ' + months[d.getMonth()] + ' ' + m[1]; return withDay ? days[d.getDay()] + ' · ' + core : core; } function fmtDay(v) { var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(v || ''); if (!m) return ''; return days[new Date(+m[1], +m[2] - 1, +m[3]).getDay()]; } function fmtTime(v) { var m = /^(\d{1,2}):(\d{2})/.exec(v || ''); if (!m) return v || ''; var h = +m[1], ap = h >= 12 ? 'pm' : 'am'; h = h % 12 || 12; return h + ':' + m[2] + ' ' + ap; } document.querySelectorAll('[data-fmt="date"]').forEach(function (el) { el.textContent = fmtDate(el.getAttribute('data-date'), el.getAttribute('data-day') === '1'); }); document.querySelectorAll('[data-fmt="day"]').forEach(function (el) { el.textContent = fmtDay(el.getAttribute('data-date')); }); document.querySelectorAll('[data-fmt="time"]').forEach(function (el) { el.textContent = fmtTime(el.getAttribute('data-time')); }); })(); /* Live countdown — reads data-date (YYYY-MM-DD) + data-time (HH:MM). */ (function () { 'use strict'; var root = document.getElementById('countdown'); if (!root) return; var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(root.getAttribute('data-date') || ''); if (!m) return; var tm = /^(\d{1,2}):(\d{2})/.exec(root.getAttribute('data-time') || ''); var target = new Date(+m[1], +m[2] - 1, +m[3], tm ? +tm[1] : 0, tm ? +tm[2] : 0, 0).getTime(); var els = { days: root.querySelector('[data-cd="days"]'), hours: root.querySelector('[data-cd="hours"]'), minutes: root.querySelector('[data-cd="minutes"]'), seconds: root.querySelector('[data-cd="seconds"]') }; function pad(n) { return (n < 10 ? '0' : '') + n; } function set(el, n) { if (el && el.textContent !== pad(n)) el.textContent = pad(n); } function tick() { var diff = target - Date.now(); if (diff <= 0) { set(els.days, 0); set(els.hours, 0); set(els.minutes, 0); set(els.seconds, 0); clearInterval(timer); return; } var s = Math.floor(diff / 1000); set(els.days, Math.floor(s / 86400)); set(els.hours, Math.floor((s % 86400) / 3600)); set(els.minutes, Math.floor((s % 3600) / 60)); set(els.seconds, s % 60); } tick(); var timer = setInterval(tick, 1000); })(); /* Add to Calendar — Google link + Apple (.ics) from #calCard data-attributes. */ (function () { 'use strict'; var card = document.getElementById('calCard'); if (!card) return; var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(card.getAttribute('data-date') || ''); if (!m) return; var tm = /^(\d{1,2}):(\d{2})/.exec(card.getAttribute('data-time') || ''); var title = card.getAttribute('data-title') || 'Wedding'; var loc = card.getAttribute('data-venue') || ''; var details = card.getAttribute('data-details') || ''; function pad(n) { return (n < 10 ? '0' : '') + n; } var startD = new Date(+m[1], +m[2] - 1, +m[3], tm ? +tm[1] : 16, tm ? +tm[2] : 0, 0); var endD = new Date(startD.getTime() + 6 * 3600 * 1000); function stamp(d) { return d.getFullYear() + pad(d.getMonth() + 1) + pad(d.getDate()) + 'T' + pad(d.getHours()) + pad(d.getMinutes()) + '00'; } var start = stamp(startD), end = stamp(endD), enc = encodeURIComponent; var g = document.getElementById('calGoogle'); if (g) g.href = 'https://calendar.google.com/calendar/render?action=TEMPLATE&text=' + enc(title) + '&dates=' + start + '/' + end + '&details=' + enc(details) + '&location=' + enc(loc); function fold(s) { return String(s || '').replace(/\\/g, '\\\\').replace(/,/g, '\\,').replace(/;/g, '\\;').replace(/\n/g, '\\n'); } var ics = ['BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//WeddingInWhites//Sketch//EN', 'CALSCALE:GREGORIAN', 'BEGIN:VEVENT', 'UID:' + start + '-sketch@weddinginwhites', 'DTSTAMP:' + start, 'DTSTART:' + start, 'DTEND:' + end, 'SUMMARY:' + fold(title), 'DESCRIPTION:' + fold(details), 'LOCATION:' + fold(loc), 'END:VEVENT', 'END:VCALENDAR'].join('\r\n'); var apple = document.getElementById('calApple'); if(apple){try{apple.href=URL.createObjectURL(new Blob([ics],{type:'text/calendar;charset=utf-8'}));apple.setAttribute('download','wedding.ics');}catch(e){apple.href='data:text/calendar;charset=utf-8,'+encodeURIComponent(ics);}} })(); 9:["$","main",null,{"className":"flex min-h-screen flex-col bg-cream font-body text-espresso","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.weddinginwhites.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designs\",\"item\":\"https://www.weddinginwhites.com/templates\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ribbon\",\"item\":\"https://www.weddinginwhites.com/templates/a78887e9-9574-4db2-acdc-ec14247a4c43\"}]}"}}],["$","header",null,{"className":"sticky top-0 z-20 border-b border-espresso/10 bg-cream/85 backdrop-blur-md","children":["$","div",null,{"className":"mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6","children":[["$","$L8",null,{"href":"/templates","className":"inline-flex items-center gap-2 font-body text-sm font-medium text-espresso/70 transition hover:text-espresso","children":[["$","$L3",null,{"ref":"$undefined","iconNode":[["path",{"d":"m12 19-7-7 7-7","key":"1l729n"}],["path",{"d":"M19 12H5","key":"x3x0zl"}]],"className":"lucide-arrow-left h-4 w-4"}]," All designs"]}],["$","h1",null,{"className":"truncate font-body text-sm font-bold tracking-tight text-espresso","children":"Ribbon"}],["$","$L8",null,{"href":"/","className":"inline-flex items-center gap-2.5 shrink-0","aria-label":"WeddingInWhites home","children":[["$","$L2",null,{"src":"/brand/weddinginwhites-logo.png","alt":"WeddingInWhites logo","width":512,"height":512,"sizes":"56px","priority":false,"className":"size-7 shrink-0 rounded-lg object-contain"}],false]}]]}]}],["$","div",null,{"className":"mx-auto w-full max-w-5xl flex-1 px-4 py-5 sm:px-6 sm:py-6","children":["$","div",null,{"className":"h-[calc(100svh-11rem)] min-h-[560px] overflow-hidden rounded-[24px] bg-paper p-3 shadow-[0_20px_60px_-28px_rgba(22,24,28,0.28)]","children":["$","$L17",null,{"html":"$18","css":"$19","js":"$1a","values":{"bride_name":"Ava","event_list":[{"name":"Mehndi","time":"18:00"},{"name":"Ceremony","time":"16:30"},{"name":"Reception","time":"20:00"}],"groom_name":"Liam","venue_name":"The Rosewood Estate","event1_name":"Guests arrive","event1_time":"3:30 in the afternoon","event2_name":"The ceremony","event2_time":"4:30 in the afternoon","event3_name":"Dinner & dancing","event3_time":"6:00 in the evening","rsvp_handle":"ava-liam","event1_venue":"","event2_venue":"The Arbour","event3_venue":"The Long Table","rsvp_enabled":true,"wedding_date":"2027-08-09","wedding_time":"16:30","venue_address":"Silverado Trail, Napa Valley, California","venue_map_url":"https://maps.google.com","couple_display_name":"Ava & Liam"},"allowJs":true}]}]}],"$L1b"]}] 12:null 16:[["$","title","0",{"children":"Ribbon Wedding Invitation Design · WeddingInWhites"}],["$","meta","1",{"name":"description","content":"Ribbon is an Indian wedding invitation and website design — hand-drawn, ink, storytelling. Preview it, add your details and share it on WhatsApp."}],["$","meta","2",{"name":"application-name","content":"WeddingInWhites"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"creator","content":"WeddingInWhites"}],["$","meta","5",{"name":"publisher","content":"WeddingInWhites"}],["$","meta","6",{"name":"googlebot","content":"max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://www.weddinginwhites.com/templates/a78887e9-9574-4db2-acdc-ec14247a4c43"}],["$","meta","8",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","9",{"property":"og:title","content":"Ribbon Wedding Invitation Design · WeddingInWhites"}],["$","meta","10",{"property":"og:description","content":"Ribbon is an Indian wedding invitation and website design — hand-drawn, ink, storytelling. Preview it, add your details and share it on WhatsApp."}],["$","meta","11",{"property":"og:url","content":"https://www.weddinginwhites.com/templates/a78887e9-9574-4db2-acdc-ec14247a4c43"}],["$","meta","12",{"property":"og:site_name","content":"WeddingInWhites"}],["$","meta","13",{"property":"og:locale","content":"en_IN"}],["$","meta","14",{"property":"og:image","content":"https://www.weddinginwhites.com/templates/a78887e9-9574-4db2-acdc-ec14247a4c43/opengraph-image?c63edb0f4b907600"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"Wedding invitation design — WeddingInWhites"}],["$","meta","19",{"property":"og:type","content":"website"}],["$","meta","20",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","21",{"name":"twitter:title","content":"Ribbon Wedding Invitation Design · WeddingInWhites"}],["$","meta","22",{"name":"twitter:description","content":"Ribbon is an Indian wedding invitation and website design — hand-drawn, ink, storytelling. Preview it, add your details and share it on WhatsApp."}],["$","meta","23",{"name":"twitter:image","content":"https://www.weddinginwhites.com/templates/a78887e9-9574-4db2-acdc-ec14247a4c43/opengraph-image?c63edb0f4b907600"}],["$","meta","24",{"name":"twitter:image:alt","content":"Wedding invitation design — WeddingInWhites"}],["$","meta","25",{"name":"twitter:image:type","content":"image/png"}],["$","meta","26",{"name":"twitter:image:width","content":"1200"}],["$","meta","27",{"name":"twitter:image:height","content":"630"}],["$","link","28",{"rel":"icon","href":"/icon.png?icon.1bxw4kq1b3mug.png","sizes":"512x512","type":"image/png"}],["$","link","29",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.411eoek231z29.png","sizes":"180x180","type":"image/png"}],["$","$L1c","30",{}]]

{{bride_name}} {{groom_name}}

Wedding
Invitation

The Bride
& Groom

{{bride_name}}

{{groom_name}}

The Programme

{{name}}

{{venue_name}}

RSVP

Save
the Date

WeddingInvitation

The Bride& Groom

{{bride_name}}

{{groom_name}}

The Programme

{{name}}

{{venue_name}}

RSVP

Savethe Date

Wedding
Invitation

The Bride
& Groom

Save
the Date