/* Reading text follows the BRIYD type standard (_type-standard.css): --inv-text, --inv-small, --inv-field. */ /* Italian Balcony — package stylesheet. The artboards are one place seen fifteen times: a whitewashed Mediterranean terrace, a blue-grey wall, the lake beyond an arch, and gold kept to a hairline. Everything here derives from that. Two faces do all the work — Aston Script for the engraved section titles, Playfair for names and body — and every prop is a transparent cut-out the designer supplied, placed rather than drawn. */ @font-face{font-family:"Aston Script";src:url("/fonts/italian-balcony/AstonScriptBold-Bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Playfair Display";src:url("/fonts/italian-balcony/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Playfair Display";src:url("/fonts/italian-balcony/PlayfairDisplay-Medium.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Playfair Display";src:url("/fonts/italian-balcony/PlayfairDisplay-SemiBold.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Playfair Display";src:url("/fonts/italian-balcony/PlayfairDisplay-Italic.woff2") format("woff2"); font-weight:400;font-style:italic;font-display:swap} .invitation-ib{ --ib-wall:#EFEAE1; /* the plaster the sections are printed on */ --ib-wall-2:#F6F2EA; --ib-ink:#1E2B52; /* the navy every word is set in */ --ib-ink-2:#3B4A78; --ib-soft:#7C89AB; --ib-sky:#A8CBE4; --ib-gold:#B79A5B; --ib-gold-2:#D8C089; --ib-script:"Aston Script","Snell Roundhand",cursive; --ib-body:"Playfair Display",Georgia,"Times New Roman",serif; --ib-pad:clamp(22px,6vw,38px); background:var(--ib-wall);color:var(--ib-ink); font-family:var(--ib-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;margin:0; } .invitation-ib *{box-sizing:border-box} /* An invitation is an object in the hand. A scrollbar down the side of it is a document's furniture. On the root element, not the body: the page scrolls on , so hiding it on .invitation-ib hid nothing. This stylesheet is loaded by this template's page and nothing else, so reaching the root here is scoped by the file rather than by the selector. */ html:has(> .invitation-ib),html{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar,body.invitation-ib::-webkit-scrollbar, .invitation-ib__shell::-webkit-scrollbar{width:0;height:0;display:none} .invitation-ib{scrollbar-width:none;-ms-overflow-style:none} .invitation-ib__shell{max-width:560px;margin:0 auto;background:var(--ib-wall);overflow-x:hidden} /* ── one scene ─────────────────────────────────────────────────────────── */ .invitation-ib .invitation-animated__scene{position:relative;overflow:hidden} .invitation-ib .invitation-animated__scene-inner{position:relative;z-index:2; padding:clamp(52px,13vw,84px) var(--ib-pad)} .ib-scene--full .invitation-animated__scene-inner{padding:0} /* ── the vocabulary every section shares ───────────────────────────────── */ .ib-title{font-family:var(--ib-script);font-weight:700;font-size:clamp(2.2rem,9.4vw,3rem); line-height:.95;color:var(--ib-ink);text-align:center;margin:0} .ib-kicker{font-size:var(--inv-small);letter-spacing:.34em;text-transform:uppercase;color:var(--ib-ink); text-align:center;margin:0 0 6px} .ib-lede{text-align:center;font-size:var(--inv-text);line-height:1.75;color:var(--ib-ink-2); max-width:34ch;margin:16px auto 0} .ib-rule{display:block;width:min(280px,80%);margin:18px auto;height:auto} .ib-em{font-style:italic;color:var(--ib-ink-2);font-size:var(--inv-text)} .ib-prop{position:absolute;pointer-events:none;user-select:none} .ib-prop img{display:block;width:100%;height:auto} /* A prop that stands on the floor of a scene — the balustrade, the horizon, the ledge, the plinth — is in the flow rather than floating over it. Absolutely positioned, they sat on top of whatever the section had to say: the countdown was behind the balustrade and the reception time behind the lake. */ /* A scene whose props stand in the margins needs a narrower column for its words. The artboards do this: the cut-outs flank a column about two thirds of the width, and nothing is ever printed over a photograph. */ .ib-col{max-width:64%;margin:0 auto;position:relative;z-index:3} @media (max-width:400px){.ib-col{max-width:72%}} .ib-prop--foot{position:relative;display:block;margin-top:34px;flex:0 0 auto;left:auto;right:auto;bottom:auto; /* it stands on the floor of the scene, so it reaches the walls: out past the scene's own padding */ width:calc(100% + var(--ib-pad) * 2);margin-left:calc(var(--ib-pad) * -1)} .invitation-ib .ib-scene--foot .invitation-animated__scene-inner{padding-bottom:0} .ib-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--ib-ink);color:#F6F2EA;text-decoration:none; font-family:var(--ib-body);font-size:var(--inv-small);letter-spacing:.06em; padding:13px 26px;border:0;border-radius:3px;cursor:pointer} .ib-btn:hover{background:var(--ib-ink-2)} .ib-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6} /* ── 1 · the gate ──────────────────────────────────────────────────────── */ /* Fitted to a phone, measured rather than guessed. The stage is 9:16 (the film is 1080×1920, 24fps, 8s). An iPhone is 19.5:9, so filling it takes 9% off each side — and the arch does not begin until 14.8%. The crop lands on wall, never on the doors. That is the whole reason this can fill the screen with nothing added and nothing letterboxed. A screen wider than 9:16 would crop vertically instead, which is why the shell holds a phone's width. */ .ib-gate{position:fixed;inset:0;z-index:60;background:#B7CBD8} .ib-gate img,.ib-gate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center center} .ib-gate video{opacity:0} .ib-gate.is-playing video{opacity:1} .ib-gate.is-playing .ib-gate__still,.ib-gate.is-playing .ib-gate__hint{opacity:0} .ib-gate__still,.ib-gate__hint{transition:opacity .6s ease} .ib-gate__hit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(62vw,320px);height:min(70vh,560px);border:0;background:none;cursor:pointer} .ib-gate__hint{position:absolute;left:0;right:0;bottom:6.5vh;text-align:center; font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:#7A879C} .ib-gate.is-open{opacity:0;pointer-events:none;transition:opacity .8s ease} /* The last moment of the film dissolves into the scene it opens onto, so the two are one shot. */ .ib-gate.is-closing{opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)} /* ── 2 · intro, the arch the names land in ─────────────────────────────── */ /* The arch is the frame and the words go inside it, so the artwork keeps its own proportions and the text is laid over the opening as a share of it. Cropping the picture to the screen threw the doors away and left the names floating in a blue rectangle. Every size below is in cqw — a share of the artwork's own width — so the composition is the same on any phone rather than only on the one it was tuned on. */ /* The arch holds the screen on its own, filled the same way and cropped in the same place. */ .ib-intro{position:relative;width:100%;height:100svh;overflow:hidden;container-type:size;background:#B7CBD8} .ib-intro__bg{position:absolute;inset:0} .ib-intro__bg img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block} /* The rest of the doors film, over the still, framed exactly as the gate film is (cover, centred). */ .ib-intro__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;opacity:0;pointer-events:none} .ib-intro.is-film .ib-intro__film{opacity:1} .ib-intro.is-film.is-film-out .ib-intro__film{opacity:0;transition:opacity 1s cubic-bezier(.45,0,.55,1)} /* The whole block sits inside the opening — the last line has to clear the threshold, not cross it. */ .ib-intro__b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%; margin-top:-1cqh;text-align:center;z-index:2} /* The artboard's rhythm: one quiet line at the top, the names carrying the scene, and air between every part rather than a block of type. The kicker and the place line hold to one line each — they are asides, and an aside that wraps starts competing with the names. */ /* Sized with room for the swashes, not to the measured box. Aston Script's W and its exclamation reach well past the glyph widths a browser reports, so a line that "fits" at 94% of the column still touches both edges of the arch. */ .ib-intro__k{font-family:var(--ib-script);font-size:5.4cqw;line-height:1.2;color:var(--ib-ink); white-space:nowrap} .ib-intro__n{font-family:var(--ib-body);font-weight:400;font-size:14cqw;line-height:1.12; letter-spacing:.015em;margin:11cqw 0 0;color:var(--ib-ink);text-transform:uppercase} .ib-intro__and{font-family:var(--ib-body);font-style:italic;text-transform:none; font-size:7.6cqw;display:block;margin:3.4cqw 0;color:var(--ib-ink)} .ib-intro__d{margin:12cqw 0 0;font-size:5.2cqw;letter-spacing:.14em;color:var(--ib-ink)} .ib-intro__p{margin:8cqw 0 0;font-family:var(--ib-script);font-size:5.8cqw;line-height:1.2; color:var(--ib-ink);white-space:nowrap} /* Where container queries are not available the words still sit in the arch, just sized to the viewport. */ @supports not (container-type: inline-size){ .ib-intro__k{font-size:min(5.4vw,30px)} .ib-intro__n{font-size:min(14vw,78px)} .ib-intro__and{font-size:min(7.6vw,42px)} .ib-intro__d{font-size:min(5.2vw,29px)} .ib-intro__p{font-size:min(5.8vw,32px)} } /* ── 3 · countdown ─────────────────────────────────────────────────────── */ /* The scene ends the page rather than sitting in it: the words hold the middle, the balustrade closes the foot. Sized in cqw so the spacing between the families, the countdown and the rail is the artboard's on any phone rather than only on the one it was set on. */ .ib-scene--tall{container-type:inline-size} /* A scene that is one object: it holds the whole screen and centres its object in it, so nothing of the section below leans into the frame. The plaque is the invitation asking its question — it should be the only thing being asked. */ .ib-scene--only{container-type:inline-size} .ib-scene--only .invitation-animated__scene-inner{min-height:100svh;display:flex;flex-direction:column; justify-content:center} /* A scene with walls gives its own inner no side padding — the mouldings are the margin. */ .ib-scene--walls .invitation-animated__scene-inner{padding-left:0;padding-right:0} .ib-scene--tall .invitation-animated__scene-inner{min-height:100svh;display:flex;flex-direction:column; justify-content:space-between;padding-top:0;padding-bottom:0} /* The sky is a third of the scene and the gulls are large in it — small ones read as clip-art. They sit low enough to clear a notch, and the near one is nearly twice the far one because that is what distance does. */ .ib-sky{position:relative;height:52cqw;flex:0 0 auto} .ib-gull img{width:100%;height:auto;display:block} .ib-gull--near{top:9cqw;right:1cqw;width:58cqw} .ib-gull--far{top:27cqw;left:1cqw;width:36cqw} /* Everything below the sky, with the artboard's air between each part. */ .ib-cd__b{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:4cqw 0 10cqw} .ib-fam__t{font-family:var(--ib-script);font-size:8.6cqw;line-height:1.24;text-align:center; color:var(--ib-ink);margin:0} .ib-fam{display:flex;flex-direction:column;gap:5.2cqw;text-align:center;margin:10cqw 0 0; font-size:var(--inv-text);line-height:1.45;color:var(--ib-ink)} /* Four figures with room around them, and a hairline standing in the middle of each gap. */ .ib-cd{display:grid;grid-template-columns:repeat(4,1fr);column-gap:5cqw;width:100%;margin:17cqw auto 0} .ib-cd__c{text-align:center;position:relative} .ib-cd__c + .ib-cd__c::before{content:"";position:absolute;left:-2.5cqw;top:4%;bottom:44%;width:1px; background:var(--ib-gold);opacity:.5} .ib-cd__n{font-family:var(--ib-body);font-weight:600;font-size:9.5cqw;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:.01em} .ib-cd__l{display:block;margin-top:3.4cqw;font-size:var(--inv-small);letter-spacing:.13em;text-transform:uppercase; color:var(--ib-soft);white-space:nowrap} .ib-rail{margin-top:0} /* ── 4 · details ───────────────────────────────────────────────────────── */ /* The details, to the artboard: the title clear of the notch, a rule narrower than the text under it, and each moment of the day under its own engraved heading with real air between them. The engraved headings are set to fit one line — "Wedding Ceremony" broken in two reads as two events. */ /* The block sits low, clear of a notch by a wide margin rather than by env() — which is zero everywhere it is being looked at, and so was doing nothing. Centring it did nothing either: a block that fills its container has nowhere to be centred to. This is a real offset. */ .ib-det{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;text-align:center; padding:calc(24cqw + env(safe-area-inset-top)) 0 4.2cqw} .ib-det__t{font-size:9cqw;line-height:1} .ib-det .ib-rule{width:58%;margin:3.6cqw auto 0} .ib-det__lede{margin:7cqw auto 0;max-width:30ch;font-size:var(--inv-text);line-height:1.75;color:var(--ib-ink-2)} .ib-when{text-align:center;margin-top:9.5cqw} .ib-when h3{font-family:var(--ib-script);font-weight:700;font-size:6.6cqw;line-height:1.15; color:var(--ib-ink);margin:0 0 3cqw} .ib-when p{margin:0;font-size:var(--inv-text);line-height:1.9} /* The lake closes the scene, and nothing is printed over its deep end. */ .ib-sea{margin-top:0} /* ── 5 · venue ─────────────────────────────────────────────────────────── */ /* The chapel stands in a room, and a room has walls: the two mouldings are the wall the artboard puts at either edge. They are slots like every other prop, so a template can carry its own. */ /* Flush to the edges and at the artboard's own proportion: the moulding is 83 of 1080 across, so 7.7% of the width. Sizing it by height instead put two thirds of it off-screen. It is stretched vertically on purpose — a moulding is a profile with no vertical detail to distort. */ .ib-pil{position:absolute;top:0;bottom:0;width:7.7cqw;z-index:1;pointer-events:none} .ib-pil img{width:100%;height:100%;object-fit:fill;display:block} .ib-pil--l{left:0} .ib-pil--r{right:0} .ib-ven{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column; justify-content:flex-start;padding:24cqw 6cqw 14cqw} .ib-venue{text-align:center;margin-top:9cqw} .ib-venue__n{font-family:var(--ib-script);font-size:8.4cqw;line-height:1.15;color:var(--ib-ink);margin:3cqw 0 0} .ib-venue__c{font-size:var(--inv-text);color:var(--ib-ink-2);margin-top:2.6cqw} /* ── 6 · the shaped plaque (rsvp card) ─────────────────────────────────── */ .ib-plaque{position:relative;max-width:400px;margin:0 auto;text-align:center; padding:clamp(72px,18vw,96px) clamp(34px,10vw,52px) clamp(60px,15vw,80px)} .ib-plaque__bg{position:absolute;inset:0} .ib-plaque__bg img{width:100%;height:100%;object-fit:fill;display:block} .ib-plaque__b{position:relative;z-index:2} /* ── 7 · timeline ──────────────────────────────────────────────────────── */ /* The steps are the floor of the scene, not a prop beside it: large, down the left, and the hours are read over them. The topiary and its plinth stand whole at the foot on the right — cropping the pot is what makes a placed object look pasted on. The type is small enough that eight moments fit one screen without scrolling, which is what "a little preview" means. */ .ib-steps{left:-14cqw;bottom:0;width:82cqw;opacity:.95;z-index:1} .ib-topiary{right:0;bottom:0;width:32cqw;z-index:1} .ib-tl__b{position:relative;z-index:3;padding:2cqw 0 46cqw} .ib-tl__h{font-size:7.6cqw;line-height:1.1} .ib-tl__lede{text-align:center;margin:4cqw auto 0;max-width:32ch;font-size:var(--inv-text);line-height:1.6; color:var(--ib-ink-2)} .ib-tl{max-width:78cqw;margin:8cqw auto 0;text-align:center} .ib-tl__r{padding:2.6cqw 0} .ib-tl__t{font-size:var(--inv-text);line-height:1.4;letter-spacing:.01em} .ib-tl__t b{font-weight:600} .ib-tl__s{font-style:italic;font-size:var(--inv-text);line-height:1.45;color:var(--ib-soft);margin-top:.8cqw} /* ── 8 · dress code ────────────────────────────────────────────────────── */ /* Each prop at the corner the artboard puts it, and the words in a column between them. Nothing is printed over a photograph — the column is what keeps that true when the text grows. */ .ib-dc__scarf{top:-2cqw;left:-12cqw;width:46cqw;z-index:1} .ib-dc__pin{top:1cqw;right:-3cqw;width:24cqw;z-index:1} .ib-dc__shawl{top:auto;bottom:14cqw;right:-13cqw;width:44cqw;z-index:1} .ib-dc__heels{left:-8cqw;bottom:0;width:44cqw;z-index:1} .ib-dc{position:relative;z-index:3;max-width:70cqw;margin:0 auto;text-align:center;padding:26cqw 0 22cqw} .ib-dc__code{font-size:11cqw;line-height:1.05;margin-top:2cqw} .ib-dc__lede{margin:7cqw 0 0;font-size:var(--inv-text);line-height:1.7;color:var(--ib-ink-2)} .ib-dc__pal{font-family:var(--ib-script);font-size:6.2cqw;line-height:1.15;margin:9cqw 0 0;color:var(--ib-ink)} .ib-dc__note{margin:7cqw 0 0;font-style:italic;font-size:var(--inv-small);line-height:1.7;color:var(--ib-ink-2)} .ib-sw{display:flex;justify-content:center;gap:3.4cqw;margin-top:4cqw} .ib-sw i{width:9cqw;height:9cqw;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(30,43,82,.12)} /* ── 9 · getting there ─────────────────────────────────────────────────── */ /* Six props around a narrow column: the watch, the pin and the plane across the top, the luggage tag beside the first option, and the train and the car standing at the foot. The words never cross one of them. */ .ib-gt__watch{top:16cqw;left:-5cqw;width:24cqw;z-index:1} .ib-gt__pin{top:10cqw;left:38cqw;width:21cqw;z-index:1} .ib-gt__plane{top:17cqw;right:-7cqw;width:32cqw;z-index:1} .ib-gt__tag{top:46cqw;right:-3cqw;width:16cqw;z-index:1} .ib-gt__train{left:-7cqw;bottom:0;width:48cqw;z-index:1} .ib-gt__car{right:-5cqw;bottom:1cqw;width:40cqw;z-index:1} .ib-gt{position:relative;z-index:3;max-width:72cqw;margin:0 auto;text-align:center;padding:44cqw 0 22cqw} .ib-gt__h{font-size:7cqw;line-height:1.1} .ib-gt__lede{margin:3cqw 0 0;font-size:var(--inv-text);line-height:1.6;color:var(--ib-ink-2)} .ib-way{text-align:center;margin-top:6cqw} .ib-way h3{font-family:var(--ib-body);font-weight:600;font-size:var(--inv-text);letter-spacing:.02em;margin:0} .ib-way__r{margin:2cqw 0 0;font-weight:600;font-size:var(--inv-text);line-height:1.35} .ib-way__d{margin:1.2cqw 0 0;font-style:italic;font-size:var(--inv-text);line-height:1.5;color:var(--ib-ink-2)} /* ── 10 · accommodations ───────────────────────────────────────────────── */ /* A square grid. Hotel photographs arrive at every shape — a portrait, a landscape, a panorama — and a row of different heights reads as a mistake rather than a choice, so every card is the same square and the picture is cropped into it. */ /* Room above and below. This section's keys sat directly under the car and the train that end the section before it, and its suitcase ran into the menu that follows — two scenes' props meeting in the same inch, which reads as one crowded scene rather than two. */ .ib-ac__keys{top:22cqw;left:1cqw;width:26cqw;z-index:1} .ib-ac__bell{top:24cqw;right:1cqw;width:21cqw;z-index:1} .ib-ac__case{right:-8cqw;bottom:16cqw;width:46cqw;z-index:2} .ib-ac{position:relative;z-index:3;padding:34cqw 0 34cqw;text-align:center} .ib-ac__h{font-size:8.2cqw;line-height:1.1} .ib-ac__lede{margin:3.4cqw auto 0;max-width:32ch;font-size:var(--inv-text);line-height:1.6;color:var(--ib-ink-2)} .ib-hotels{display:grid;grid-template-columns:1fr 1fr;gap:3.2cqw;margin-top:5.5cqw} .ib-hotel{border-radius:2.4cqw;overflow:hidden;text-align:left;text-decoration:none;color:inherit; box-shadow:0 8px 20px -14px rgba(30,43,82,.5)} .ib-hotel__ph{position:relative;display:block;aspect-ratio:1;background:var(--ib-sky)} .ib-hotel__ph img{width:100%;height:100%;object-fit:cover;display:block} .ib-hotel__st{position:absolute;right:1.6cqw;bottom:1.4cqw;font-size:var(--inv-small);letter-spacing:.06em; color:#F0C244;text-shadow:0 1px 2px rgba(0,0,0,.45)} .ib-hotel__b{display:flex;align-items:center;justify-content:space-between;gap:1.6cqw; padding:2.4cqw 2.6cqw 2.8cqw;background:var(--ib-ink);color:#F6F2EA} .ib-hotel__n{font-size:var(--inv-small);font-weight:600;line-height:1.25} .ib-hotel__r{font-size:var(--inv-small);color:#C9D2E8;white-space:nowrap} .ib-ac__more{margin:4cqw 0 0} .ib-ac__note{position:relative;z-index:3;margin:4cqw auto 0;max-width:34ch;text-align:center; font-style:italic;font-size:var(--inv-small);line-height:1.65;color:var(--ib-soft)} .ib-note{text-align:center;font-style:italic;font-size:var(--inv-small);color:var(--ib-soft);margin-top:18px;line-height:1.7} /* ── 11 · menu ─────────────────────────────────────────────────────────── */ #scene-menu{container-type:inline-size} /* The plate holds the title rather than sitting behind it: the words are placed inside the rim, which is what makes it a plate and not a watermark. Everything below is small — a menu is read line by line, and this one runs to eight dishes across six courses. */ /* The whole plate, rim included — it was being cut off by the top of the scene. */ .ib-plate{position:relative;width:100%;margin:6cqw auto 0} .ib-plate__img{display:block;width:96cqw;max-width:none;margin:0 auto;position:relative;left:50%; transform:translateX(-50%)} .ib-plate__b{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:66cqw;text-align:center} .ib-menu__h{font-size:9cqw;line-height:1} .ib-menu__rule{width:100%;margin:2.4cqw auto 0} .ib-menu{position:relative;z-index:3;margin-top:4cqw;padding-bottom:16cqw;text-align:center} .ib-menu__lede{margin:0 auto;max-width:34ch;font-size:var(--inv-text);line-height:1.65;color:var(--ib-ink-2)} .ib-course{text-align:center;margin-top:8cqw} .ib-course__k{font-family:var(--ib-script);font-size:6.4cqw;line-height:1.15;color:var(--ib-ink-2)} .ib-dish{margin-top:3.4cqw} .ib-dish__n{font-weight:600;font-size:var(--inv-text);line-height:1.35} .ib-dish__d{font-size:var(--inv-text);line-height:1.6;color:var(--ib-ink-2);max-width:34ch;margin:.6cqw auto 0} .ib-dish__l{font-size:var(--inv-small);color:var(--ib-soft);font-style:italic;margin-top:.4cqw} /* Set down beside the last course rather than on top of its last line. */ .ib-menu__napkin{right:-10cqw;bottom:-4cqw;width:34cqw;z-index:1} /* ── 12 · gifts ────────────────────────────────────────────────────────── */ /* The arch is the scene: large, with the seal hanging in it and the words standing under both. The pack ships the parcel and the chest as one wide drawing, so each is shown as half of it — clipped rather than cut into two files — and each arrives from the side it stands on. */ #scene-gifts{container-type:inline-size} .ib-arch{position:relative;width:100%;margin:0 auto} .ib-arch__img{display:block;width:88cqw;margin:0 auto} .ib-arch__medal{position:absolute;left:50%;top:14%;transform:translateX(-50%);width:20cqw} .ib-arch__medal img{width:100%;height:auto;display:block} .ib-arch__b{position:absolute;left:50%;top:44%;transform:translateX(-50%);width:62cqw;text-align:center} .ib-gifts__h{font-size:9cqw;line-height:1} .ib-gifts__lede{margin:4cqw auto 0;font-size:var(--inv-text);line-height:1.65;color:var(--ib-ink-2)} .ib-gifts{position:relative;z-index:3;margin-top:6cqw;padding-bottom:30cqw;text-align:center} .ib-gift{text-align:center;margin-top:9cqw} .ib-gift__k{font-family:var(--ib-script);font-size:7cqw;line-height:1.15;color:var(--ib-ink);margin:0} .ib-gift__n{margin:2.4cqw 0 0;font-weight:600;font-size:var(--inv-text)} .ib-gift__d{margin:2.4cqw auto 0;max-width:32ch;font-size:var(--inv-text);line-height:1.6;color:var(--ib-ink-2)} .ib-gift__go{margin:4.4cqw 0 0} /* One drawing, shown as its two halves — the parcel on the left, the chest on the right. */ .ib-gifts__box{bottom:0;width:96cqw;z-index:1} .ib-gifts__box img{width:100%;height:auto;display:block} /* Clipped past the middle on both sides so neither half carries a sliver of the other — and hung ON the edges, not past them. Pushed 14cqw beyond the frame, the chest's own right side fell off the screen and it read as cut in half. The clip decides which object; the position must not take a bite out of it. */ /* Measured, not guessed: the transparent gap between the parcel and the chest runs from 41.2% to 46% of the drawing. Clipping at 56/58% took a slice off the chest's own left side, which is why it read as cut in half however it was positioned. */ .ib-gifts__box--l{left:0;clip-path:inset(0 56.5% 0 0)} .ib-gifts__box--r{right:0;clip-path:inset(0 0 0 44%)} /* ── 13 · faq ──────────────────────────────────────────────────────────── */ .ib-q{border-bottom:1px solid rgba(30,43,82,.16)} .ib-q summary{list-style:none;cursor:pointer;padding:15px 26px 15px 0;position:relative; font-size:var(--inv-text);letter-spacing:.01em} .ib-q summary::-webkit-details-marker{display:none} .ib-q summary::after{content:"";position:absolute;right:4px;top:22px;width:8px;height:8px; border-right:1.4px solid var(--ib-soft);border-bottom:1.4px solid var(--ib-soft); transform:rotate(45deg);transition:transform .2s} .ib-q[open] summary::after{transform:rotate(-135deg)} .ib-q p{margin:0 0 16px;font-size:var(--inv-text);line-height:1.8;color:var(--ib-ink-2)} /* ── 14 · rsvp form ────────────────────────────────────────────────────── */ #scene-rsvp{container-type:inline-size} /* The sprigs are taller than the name they flank, so the head reserves their height. */ .ib-rsvp__hd{position:relative;padding:12cqw 0 10cqw} .ib-rsvp__h{font-size:8cqw;line-height:1;position:relative;z-index:2} /* The sprigs lean out of the frame, not into the name. The pack ships one drawing whose tip points left, so the LEFT copy is the mirrored one — flipping the right copy instead pointed both of them inward. */ .ib-rsvp__sprig{top:0;width:24cqw;z-index:1} .ib-rsvp__sprig img{width:100%;height:auto;display:block} .ib-rsvp__sprig--l{left:-2cqw;transform:scaleX(-1)} .ib-rsvp__sprig--r{right:-2cqw} .ib-form{max-width:100%;margin:2cqw auto 0;text-align:left} .ib-f{margin-top:7cqw} .ib-f > legend,.ib-f__q{font-size:var(--inv-text);line-height:1.4;color:var(--ib-ink);margin-bottom:2.6cqw;padding:0} .ib-opt{display:flex;align-items:flex-start;gap:2.6cqw;padding:1.4cqw 0;font-size:var(--inv-text);line-height:1.4; cursor:pointer} .ib-opt input{margin-top:.9cqw;accent-color:var(--ib-ink);flex:0 0 auto} .ib-in{width:100%;font:inherit;font-size:var(--inv-field);color:var(--ib-ink);background:#fff; border:1px solid rgba(30,43,82,.2);border-radius:2px;padding:3.2cqw 3.4cqw;margin-top:2.4cqw} .ib-in:focus{outline:2px solid var(--ib-ink);outline-offset:1px} textarea.ib-in{min-height:26cqw;resize:vertical} /* A stepper is two buttons and a number, not a text field wearing a box. */ .ib-step{display:flex;align-items:center;gap:4cqw;margin-top:2.4cqw} .ib-step button{width:9cqw;height:9cqw;min-width:34px;min-height:34px; border:1px solid rgba(30,43,82,.25);background:#fff;color:var(--ib-ink); font:inherit;font-size:4.2cqw;line-height:1;cursor:pointer;border-radius:2px} .ib-step input.ib-in{width:auto;min-width:8cqw;margin:0;padding:0;border:0;background:none;text-align:center; font-size:var(--inv-field);font-weight:600;-moz-appearance:textfield} .ib-step input.ib-in::-webkit-outer-spin-button, .ib-step input.ib-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ── 15 · footer ───────────────────────────────────────────────────────── */ .ib-foot{text-align:center} .ib-foot__n{font-family:var(--ib-script);font-size:clamp(2rem,8.5vw,2.7rem);color:var(--ib-ink)} .ib-foot__d{margin-top:10px;font-size:var(--inv-small);letter-spacing:.3em;color:var(--ib-ink-2)} .ib-foot__c{margin-top:26px;font-size:var(--inv-small);letter-spacing:.1em;color:var(--ib-soft)} @media (prefers-reduced-motion: reduce){.invitation-ib *{animation:none!important;transition:none!important}}