/* ============================================================ The Sacred Garden — wedding invitation Phase 0: reset, design tokens, responsive shell, scaffold bands. Section styles arrive in their own phases. ============================================================ */ /* ---------- 1 · Tokens ------------------------------------ */ :root { /* Palette — REFERENCE.md §2. Nothing here is pure black or white. */ --cream: #F7EFDF; --paper: #EFE7D6; --gold: #B08D3E; --gold-light: #D4B36A; --maroon: #6B1220; --maroon-deep: #4A0C16; --ink: #4A3F35; --sage: #8A9A7B; --blush: #D9A9A0; /* Derived tints — for rules, shadows, washes. */ --ink-soft: color-mix(in srgb, var(--ink) 68%, transparent); --gold-soft: color-mix(in srgb, var(--gold) 32%, transparent); --shadow-warm: color-mix(in srgb, var(--maroon-deep) 14%, transparent); /* Type families */ --font-script: "Pinyon Script", cursive; /* candidate — see _fonts.html */ --font-display: "Cinzel", Georgia, serif; /* caps, numerals */ --font-body: "Ovo", Georgia, serif; /* Type scale — fluid, mobile floor to desktop ceiling. Script runs deliberately large; it is the personality of the design. */ --t-script-xl: clamp(4.25rem, 17vw, 7.5rem); /* couple's names */ /* Section headings must clear their flanking flourishes on one line. The ceiling is set by the longest heading, "Confirm Your Attendance": at 2.6rem it measures ~392px, which fits a 556px desktop column with two 56px flourishes and their gaps. Raise this and that heading wraps and squeezes its ornaments to nothing. */ --t-script-lg: clamp(1.75rem, 8vw, 2.6rem); /* section headings */ --t-script-md: clamp(1.75rem, 6.5vw, 2.5rem); /* "Scroll down" */ --t-display-lg: clamp(2.25rem, 9vw, 3.5rem); /* countdown numerals */ --t-display-md: clamp(1rem, 3.6vw, 1.25rem); /* venue name */ --t-caps: clamp(0.7rem, 2.9vw, 0.8rem); /* tracked gold caps */ --t-body: clamp(0.95rem, 3.7vw, 1.0625rem); --t-small: clamp(0.75rem, 3vw, 0.8125rem); --track-caps: 0.28em; /* wide tracking on all-caps gold labels */ --leading-body: 1.75; /* Rhythm */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; /* Layout */ --col: 480px; /* the intimate column, phone-width by intent */ --col-wide: 620px; /* desktop breathes a little, never sprawls */ --gutter: clamp(1.25rem, 5vw, 2rem); /* Motion — Phase 4 uses these for every reveal. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-reveal: 0.7s; --stagger: 120ms; } /* ---------- 2 · Reset ------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* `clip`, not `hidden`, and on the root as well as the body. The invite card's florals deliberately overhang the screen edges. With only `overflow-x: hidden` on that overhang still widened the initial containing block — innerWidth read 449 on a 390px phone — and anything `position: fixed` then anchored to 449 instead of 390. The music button's right edge landed at 429, i.e. two thirds of it off the side of the screen. `clip` does not create a scroll container, so the overflow cannot extend the scrollable area. Measured after: innerWidth 390, scrollWidth 390, button right edge 370 — and the floral still overhangs to -59 exactly as before. */ overflow-x: clip; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- 3 · Ground ------------------------------------ */ body { background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--leading-body); /* Paired with the same on — see the note there for why `clip`. */ overflow-x: clip; /* Phase 2 adds .is-locked here while the envelope is closed. */ } /* The single content column. Mobile-first: full width minus gutters, capped so it stays intimate. Desktop widens modestly instead of leaving a phone-shaped strip stranded in empty cream. */ .col { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 768px) { .col { max-width: var(--col-wide); } } /* ---------- 4 · Utilities --------------------------------- */ .script { font-family: var(--font-script); color: var(--gold); line-height: 1.15; } .display { font-family: var(--font-display); } .caps { font-family: var(--font-display); font-size: var(--t-caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold); /* tracking adds a trailing gap; pull it back so text stays optically centered */ text-indent: var(--track-caps); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================ 5 · Design primitives (Phase 1) Every ornament on this site is built here, once. Nothing is copied from the reference — the wax, the torn edge, and the filigree are all CSS gradients and inline SVG. ============================================================ */ /* ---------- 5.1 · Headings -------------------------------- */ .heading { font-family: var(--font-script); color: var(--gold); font-size: var(--t-script-lg); font-weight: 400; line-height: 1.15; text-align: center; } .heading--names { font-size: var(--t-script-xl); line-height: 1.02; } /* The `&` between the names sits smaller and tucked in. */ .heading--names .amp { display: block; font-size: 0.42em; margin-block: -0.08em; } /* Gold filigree flanking a script heading. Requires the heading text to be wrapped in a — a bare text node becomes an anonymous flex item, which cannot be told to hold its ground, so it wraps to two lines and leaves the ornaments straddling both. The ornaments take only the space the text leaves over (basis 0, grow 1), so a long heading like "Schedule of Events" stays on one line and the flourishes quietly get shorter instead. */ .heading--flourished { display: flex; align-items: center; justify-content: center; gap: clamp(0.4rem, 2.5vw, 1rem); } .heading--flourished > span { flex: 0 1 auto; min-width: 0; } .heading--flourished::before, .heading--flourished::after { content: ""; flex: 1 1 0; /* A floor, not zero. Taking only leftover space means a long heading can starve these down to 0px and the ornaments vanish with no sign that anything is wrong — which is exactly what happened at desktop width. The floor scales with the viewport: a fixed 40px is generous on a laptop but wide enough on a phone to push the heading onto two lines, which is the opposite problem. 5.5vw rather than 8vw: a heading inside a card (padding on both the card and its section) has noticeably less room than one sitting straight in .section__inner, and 8vw was enough to wrap "Schedule of Events" back onto two lines the moment it had a card's padding to contend with — the exact failure this floor exists to prevent, just from the other side. This still saturates at the 40px cap well before desktop width, so the original fix is unaffected. */ min-width: clamp(26px, 5.5vw, 40px); max-width: 92px; height: 20px; background: var(--filigree) center / contain no-repeat; } .heading--flourished::before { transform: scaleX(-1); } /* Below this a flourish is a stub, not an ornament — drop it entirely. */ @media (max-width: 360px) { .heading--flourished::before, .heading--flourished::after { display: none; } } /* The Schedule heading uses the reference's own photographed gold scrollwork instead of the shared hand-drawn --filigree. Left and right are two distinct images, each already drawn facing the right way — not a mirror of one another — so the generic scaleX(-1) mirror is cancelled. */ .heading--schedule::before { background-image: url("../assets/img/schedule-flourish-left.png"); transform: none; } .heading--schedule::after { background-image: url("../assets/img/schedule-flourish-right.png"); } /* ---------- 5.2 · Wax seal -------------------------------- One component, two dresses: a script monogram (R&Z) or tracked Cinzel caps (RSVP). Set --seal-size to scale it. The lobed edge is a clip-path polygon, so an inset box-shadow would trace the element's *rectangle* and get sliced off by the clip. All the depth here is radial gradients instead, which follow the wax shape whatever it is. ---------------------------------------------------------- */ .seal { --seal-size: 118px; position: relative; display: grid; place-items: center; width: var(--seal-size); aspect-ratio: 1; isolation: isolate; clip-path: polygon( 99.13% 50.00%, 97.10% 52.85%, 94.83% 55.44%, 93.33% 57.94%, 90.89% 60.08%, 91.46% 62.92%, 92.57% 66.14%, 93.89% 69.75%, 93.05% 72.59%, 91.35% 75.00%, 87.08% 75.60%, 84.44% 76.98%, 82.16% 78.49%, 81.14% 81.14%, 80.52% 84.45%, 79.51% 87.66%, 77.80% 90.28%, 74.71% 90.87%, 71.26% 90.50%, 67.64% 89.19%, 65.20% 90.07%, 63.11% 92.07%, 60.90% 94.23%, 58.58% 96.83%, 55.84% 98.14%, 52.87% 97.43%, 50.00% 95.33%, 47.37% 93.53%, 44.90% 91.96%, 42.24% 92.34%, 38.95% 94.83%, 35.80% 95.56%, 32.59% 95.92%, 30.53% 93.26%, 29.05% 89.92%, 27.71% 86.87%, 26.06% 84.68%, 23.20% 84.21%, 19.89% 83.98%, 15.87% 84.13%, 13.95% 81.94%, 12.21% 79.61%, 12.05% 76.19%, 12.68% 72.56%, 12.60% 69.63%, 10.72% 67.68%, 7.56% 66.10%, 4.63% 64.14%, 2.44% 61.72%, 3.18% 58.58%, 4.91% 55.48%, 6.61% 52.62%, 7.61% 50.00%, 6.30% 47.36%, 4.18% 44.44%, 3.62% 41.50%, 3.00% 38.42%, 4.97% 35.97%, 7.83% 34.01%, 10.05% 32.02%, 12.25% 30.19%, 13.09% 27.69%, 12.42% 24.06%, 12.79% 20.85%, 13.21% 17.41%, 16.11% 16.11%, 19.37% 15.43%, 22.90% 15.41%, 25.92% 15.12%, 27.63% 12.99%, 28.75% 9.52%, 30.49% 6.64%, 32.88% 4.86%, 35.72% 4.17%, 39.18% 6.11%, 42.24% 7.68%, 44.86% 7.67%, 47.40% 6.94%, 50.00% 4.67%, 52.85% 2.88%, 55.81% 2.17%, 58.60% 3.08%, 61.03% 5.24%, 62.84% 8.79%, 65.22% 9.86%, 67.71% 10.64%, 71.15% 9.71%, 74.62% 9.28%, 77.38% 10.33%, 79.19% 12.74%, 79.89% 16.26%, 80.46% 19.54%, 82.07% 21.59%, 84.56% 22.92%, 88.01% 23.76%, 90.64% 25.43%, 92.94% 27.47%, 93.41% 30.46%, 92.82% 33.76%, 91.06% 37.21%, 90.81% 39.94%, 93.26% 42.07%, 94.93% 44.54%, 97.80% 47.11% ); background: /* top-left highlight, as if lit from a window */ radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--maroon) 78%, #fff) 0%, transparent 46%), /* the dome: lighter in the middle, deepening to the rim */ radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--maroon) 92%, #fff) 0%, var(--maroon) 40%, var(--maroon-deep) 88%); filter: drop-shadow(0 3px 5px var(--shadow-warm)); } /* The stamped recess — a true circle, so a real inset shadow works. */ .seal::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; box-shadow: inset 0 2px 3px color-mix(in srgb, var(--maroon-deep) 85%, transparent), inset 0 -1px 1px color-mix(in srgb, #fff 22%, transparent); } .seal__mark { position: relative; z-index: 1; color: var(--gold-light); text-shadow: 0 1px 1px color-mix(in srgb, var(--maroon-deep) 70%, transparent); line-height: 1; } /* Dress 1 — script monogram, e.g. R&Z */ .seal--monogram .seal__mark { font-family: var(--font-script); font-size: calc(var(--seal-size) * 0.38); /* script glyphs sit high in the em box; nudge them onto the optical centre */ margin-top: calc(var(--seal-size) * 0.04); } /* Dress 2 — tracked caps, e.g. RSVP */ .seal--label .seal__mark { font-family: var(--font-display); font-size: calc(var(--seal-size) * 0.15); letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; } /* A hairline flourish under a label seal. */ .seal--label .seal__mark::after { content: ""; display: block; width: 46%; height: 3px; margin: 0.35em auto 0; background: var(--seal-rule) center / contain no-repeat; opacity: 0.85; } button.seal { padding: 0; transition: transform 0.25s var(--ease-out); } button.seal:hover { transform: translateY(-2px) scale(1.02); } button.seal:active { transform: translateY(0) scale(0.99); } /* ---------- 5.3 · Torn-paper card ------------------------- Deckled top and bottom edges, cut with a tiling SVG mask so the card is genuinely transparent at the tear — it reads correctly over any ground, not just cream. ---------------------------------------------------------- */ .card { --tear: 14px; position: relative; padding: calc(var(--tear) + var(--space-4)) var(--space-3); background: var(--paper); -webkit-mask-image: var(--torn-top), var(--torn-bottom), linear-gradient(#000, #000); mask-image: var(--torn-top), var(--torn-bottom), linear-gradient(#000, #000); -webkit-mask-repeat: repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, no-repeat; -webkit-mask-position: top left, bottom left, center; mask-position: top left, bottom left, center; -webkit-mask-size: auto var(--tear), auto var(--tear), 100% calc(100% - (2 * var(--tear))); mask-size: auto var(--tear), auto var(--tear), 100% calc(100% - (2 * var(--tear))); } /* Paper grain. Sits under the content, above the fill. */ .card::before { content: ""; position: absolute; inset: 0; background: var(--paper-grain); opacity: 0.055; pointer-events: none; } .card > * { position: relative; } /* ---------- 5.4 · Ornate frame ---------------------------- Double gold rule with a filigree crest breaking the line at top and bottom centre. Wraps the map in Phase 8. ---------------------------------------------------------- */ .frame { position: relative; padding: 7px; border: 1px solid var(--gold); border-radius: 3px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--gold-soft); } .frame__inner { overflow: hidden; border-radius: 1px; } .frame::before, .frame::after { content: ""; position: absolute; left: 50%; width: 56px; height: 16px; translate: -50% 0; background: var(--cream) var(--crest) center / contain no-repeat; } .frame::before { top: -8px; } .frame::after { bottom: -8px; rotate: 180deg; } /* ---------- 5.5 · Chevron + label cue --------------------- The `^` + "Tap to open" / "Scroll down" unit. ---------------------------------------------------------- */ .cue { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .cue__chevron { width: 15px; height: 15px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); rotate: 45deg; /* the rotated square hangs low; lift it back onto the baseline */ margin-bottom: -3px; } .cue--down { flex-direction: column-reverse; } .cue--down .cue__chevron { rotate: 225deg; margin-bottom: 0; margin-top: -3px; } .cue__label { line-height: 1.2; } /* ---------- 5.6 · Art slots ------------------------------- Where the real florals and photos drop in. The dashed box is visible only while a slot is still empty. ---------------------------------------------------------- */ .slot { display: grid; place-items: center; min-height: 60px; padding: var(--space-1); border: 1px dashed var(--gold-soft); border-radius: 2px; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.3; color: var(--ink-soft); text-align: center; } .slot:has(img) { border: 0; padding: 0; min-height: 0; } /* ---------- 5.7 · Ornament sources ------------------------ Inline SVG, kept together so the artwork is in one place. ---------------------------------------------------------- */ :root { /* Deckled tear, generated to tile seamlessly under repeat-x. */ --torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath fill='%23000' d='M0,16 L0,11.3 Q0,11.3 4,6.5 Q8,1.6 12,6.6 Q16,11.6 20,8 Q24,4.4 28,6.9 Q32,9.4 36,6.9 Q40,4.3 44,7.7 Q48,11 52,7.2 Q56,3.5 60,7 Q64,10.6 68,7 Q72,3.4 76,6.3 Q80,9.3 84,6.5 Q88,3.6 92,7.7 Q96,11.7 100,7.3 Q104,3 108,7.5 Q112,12.1 116,8.1 Q120,4.2 124,7.8 Q128,11.5 132,8.2 Q136,5 140,8.5 Q144,12 148,7.7 Q152,3.5 156,7.4 L160,11.3 L160,16 Z'/%3E%3C/svg%3E"); --torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cg transform='translate(0,16) scale(1,-1)'%3E%3Cpath fill='%23000' d='M0,16 L0,11.3 Q0,11.3 4,6.5 Q8,1.6 12,6.6 Q16,11.6 20,8 Q24,4.4 28,6.9 Q32,9.4 36,6.9 Q40,4.3 44,7.7 Q48,11 52,7.2 Q56,3.5 60,7 Q64,10.6 68,7 Q72,3.4 76,6.3 Q80,9.3 84,6.5 Q88,3.6 92,7.7 Q96,11.7 100,7.3 Q104,3 108,7.5 Q112,12.1 116,8.1 Q120,4.2 124,7.8 Q128,11.5 132,8.2 Q136,5 140,8.5 Q144,12 148,7.7 Q152,3.5 156,7.4 L160,11.3 L160,16 Z'/%3E%3C/g%3E%3C/svg%3E"); /* Paper fibre. Turbulence is cheap here — one 140px tile, reused. */ --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); /* Filigree: a tapering vine, a curl above and below, one leaf. */ --filigree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 20'%3E%3Cg fill='none' stroke='%23B08D3E' stroke-width='0.9' stroke-linecap='round'%3E%3Cpath d='M1,10 C14,10 22,4 33,4 C44,4 47.5,10 42,12 C37.5,13.6 35,9.5 39,7.8'/%3E%3Cpath d='M1,10 C14,10 22,16 33,16 C44,16 47.5,10 42,8 C37.5,6.4 35,10.5 39,12.2'/%3E%3C/g%3E%3Cpath fill='%23B08D3E' d='M7,10 C11,6.6 17,6.6 20.5,9.2 C16.5,12.2 10.5,12.2 7,10 Z'/%3E%3Ccircle cx='1.6' cy='10' r='1.5' fill='%23B08D3E'/%3E%3C/svg%3E"); /* Frame crest: diamond with scrolled wings. */ --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'%3E%3Cg fill='none' stroke='%23B08D3E' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2,8 C10,8 14,3 20,5'/%3E%3Cpath d='M54,8 C46,8 42,3 36,5'/%3E%3C/g%3E%3Cpath fill='%23B08D3E' d='M28,1.5 L32.5,8 L28,14.5 L23.5,8 Z'/%3E%3Ccircle cx='20.5' cy='8' r='1.4' fill='%23B08D3E'/%3E%3Ccircle cx='35.5' cy='8' r='1.4' fill='%23B08D3E'/%3E%3C/svg%3E"); /* Envelope vine, drawn twice for the emboss. Tiles: the stem enters and leaves each edge at the midpoint, so neighbours join up. */ --vine-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' stroke='none' opacity='0.32'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.1' d='M0,60 C22,44 38,44 60,60 C82,76 98,76 120,60'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.1' d='M60,0 C44,22 44,38 60,60 C76,82 76,98 60,120'/%3E%3Cpath d='M24,50 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(-32 24 50)'/%3E%3Cpath d='M96,70 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(148 96 70)'/%3E%3Cpath d='M50,24 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(58 50 24)'/%3E%3Cpath d='M70,96 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(238 70 96)'/%3E%3Ccircle cx='60' cy='60' r='3.2'/%3E%3Ccircle cx='0' cy='60' r='2'/%3E%3Ccircle cx='120' cy='60' r='2'/%3E%3Ccircle cx='60' cy='0' r='2'/%3E%3Ccircle cx='60' cy='120' r='2'/%3E%3C/g%3E%3C/svg%3E"); --vine-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%234A3F35' stroke='none' opacity='0.05'%3E%3Cpath fill='none' stroke='%234A3F35' stroke-width='1.1' d='M0,60 C22,44 38,44 60,60 C82,76 98,76 120,60'/%3E%3Cpath fill='none' stroke='%234A3F35' stroke-width='1.1' d='M60,0 C44,22 44,38 60,60 C76,82 76,98 60,120'/%3E%3Cpath d='M24,50 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(-32 24 50)'/%3E%3Cpath d='M96,70 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(148 96 70)'/%3E%3Cpath d='M50,24 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(58 50 24)'/%3E%3Cpath d='M70,96 c4,-5 11,-5 15,0 c-4,5 -11,5 -15,0z' transform='rotate(238 70 96)'/%3E%3Ccircle cx='60' cy='60' r='3.2'/%3E%3Ccircle cx='0' cy='60' r='2'/%3E%3Ccircle cx='120' cy='60' r='2'/%3E%3Ccircle cx='60' cy='0' r='2'/%3E%3Ccircle cx='60' cy='120' r='2'/%3E%3C/g%3E%3C/svg%3E"); /* Envelope fold creases, in envelope coordinates: the bottom flap folded up to the centre. The top flap's own edges are NOT drawn here — they belong to the flap, which rotates away, and would be left behind as a phantom V across the open envelope. preserveAspectRatio='none' stretches this to any envelope shape; vector-effect keeps the stroke a true hairline while it does. */ --env-crease: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%234A3F35' stroke-opacity='0.11' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0,100 L50,69 L100,100'/%3E%3C/g%3E%3C/svg%3E"); /* Rose bud crowning the schedule timeline. */ --rosebud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23B08D3E' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M12 22 L12 15'/%3E%3Cpath d='M12 17 C9 17 7.5 15.5 7.5 13.5 C10 13.5 12 15 12 17 Z' fill='%238A9A7B' stroke='%238A9A7B'/%3E%3Cpath d='M12 17 C15 17 16.5 15.5 16.5 13.5 C14 13.5 12 15 12 17 Z' fill='%238A9A7B' stroke='%238A9A7B'/%3E%3C/g%3E%3Cg fill='%23D9A9A0' stroke='%23B08D3E' stroke-width='0.7'%3E%3Cpath d='M12 2 C15.6 2 17.4 5 17.4 8.2 C17.4 11.4 15 13.6 12 13.6 C9 13.6 6.6 11.4 6.6 8.2 C6.6 5 8.4 2 12 2 Z'/%3E%3Cpath d='M12 3.4 C13.9 4.4 14.6 6.6 14.4 8.8 C14.2 11 13.2 12.4 12 13.2' fill='none'/%3E%3Cpath d='M12 3.4 C10.1 4.4 9.4 6.6 9.6 8.8 C9.8 11 10.8 12.4 12 13.2' fill='none'/%3E%3C/g%3E%3C/svg%3E"); /* Music button icons. */ /* The reference's own two shapes, to its exact geometry on a 24x24 box: a solid triangle 5,3 -> 19,12 -> 5,21, and two 4x14 bars at x=6 and x=14 with a 1px round. */ --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23000' points='5,3 19,12 5,21'/%3E%3C/svg%3E"); --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E"); /* Hairline rule under a seal label. */ --seal-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Cg fill='none' stroke='%23D4B36A' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M2,2 C8,2 10,0.6 14,2'/%3E%3Cpath d='M38,2 C32,2 30,0.6 26,2'/%3E%3C/g%3E%3Ccircle cx='20' cy='2' r='1.3' fill='%23D4B36A'/%3E%3C/svg%3E"); } /* ============================================================ 6 · Envelope gate (Phase 2) Stage one is a still of the sealed envelope. Stage two is a short film of it opening, which fades out as it finishes. ============================================================ */ .gate { position: fixed; inset: 0; z-index: 100; background: var(--cream); cursor: pointer; transition: opacity 0.8s var(--ease-out), visibility 0s linear 0.8s; } .gate[hidden] { display: none; } /* ---------- 6.1 · Stage one: the sealed envelope ---------- */ .gate__still, .gate__film { position: absolute; inset: 0; display: grid; place-items: center; } .gate__still { transition: opacity 0.9s var(--ease-out); } .gate__img, .gate__video { width: 100%; height: 100%; /* contain, not cover: the envelope is the whole subject and cropping its edges off on a wide screen makes it read as wallpaper. */ object-fit: contain; } /* The tap target is the whole screen; this button carries the label and gives keyboard users something real to focus. */ .gate__open { position: absolute; left: 50%; bottom: clamp(2rem, 9vh, 5rem); translate: -50% 0; padding: var(--space-2); } /* ---------- 6.2 · Stage two: the film --------------------- */ .gate__film { opacity: 0; transition: opacity 0.7s var(--ease-out); pointer-events: none; } .gate.is-playing .gate__still { opacity: 0; } .gate.is-playing .gate__film { opacity: 1; } /* As the film ends it dissolves, revealing the invitation beneath. */ .gate.is-closing .gate__film { opacity: 0; } .gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; } /* Scroll stays locked until the envelope is gone. position:fixed rather than overflow:hidden — iOS Safari scrolls the body regardless of the latter. The gate opens at scroll 0, so nothing needs restoring. */ body.is-gated { position: fixed; inset: 0; width: 100%; overflow: hidden; } /* Dignified instead of dramatic: no film at all, just a fade. */ @media (prefers-reduced-motion: reduce) { .gate, .gate__still, .gate__film { transition-duration: 0.35s; } } /* ============================================================ 7 · Hero (Phase 3) One painted scene — arch, columns, vines, lake, swans — with the couple's words as live text on top. Type is sized in cqw so the words keep their proportions against the painting at every panel width. ============================================================ */ .hero { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; /* No padding: the panel below is sized to fill this box exactly, so any padding here would leave a cream sliver top and bottom that the panel could never close. */ padding: 0; } .hero:focus { outline: none; } /* focus lands here from the gate, silently */ .hero__panel { position: relative; width: 100%; /* On a phone this is already ~100vw, so max-width has no effect there; it only caps the panel on wide screens, where .hero centers it and the cream either side is deliberate framing, not a gap to close. The cap is 78.3% of the invitation card's desktop width (556px), the ratio the reference holds between its hero video and its card at every breakpoint: the torn card is meant to be visibly wider than the photo and jut out past it either side. Below ~436px wide the cap stops applying and the photo goes full-bleed, which is how the reference reads on a phone too (there both its photo and its card are fixed widths that simply overflow the screen). All the hero type is sized in cqw against this panel, so narrowing it scales the whole composition rather than breaking it. */ max-width: 436px; /* Height is pinned to the full viewport, not the video's own aspect ratio — an aspect-ratio box only matches the screen by coincidence, and everywhere else it leaves cream showing above and below. Filling the height outright and letting object-fit: cover crop the sides instead is what keeps the top and bottom flush on every screen. */ height: 100vh; height: 100svh; overflow: hidden; container-type: inline-size; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Positions mirror where the original artwork had its text, measured off the source: eyebrow 17.7%, names 36.5-61.5%, cue 69.8% of the height. */ .hero__words, .hero__names, .hero__cue { position: absolute; left: 50%; translate: -50% 0; z-index: 2; width: 84%; text-align: center; } .hero__words { top: 16.4%; } .hero__eyebrow { font-size: 6.2cqw; line-height: 1; } .hero__date { font-size: 4.6cqw; letter-spacing: 0.04em; color: var(--gold); margin-top: 0.35em; } .hero__names { top: 33%; font-size: 15.5cqw; line-height: 1.06; margin: 0; } .hero__names .amp { font-size: 0.42em; margin-block: 0.02em; } .hero__cue { top: 67.5%; } .hero__cue .cue__label { font-size: 4.4cqw; } .hero__cue .cue__chevron { width: 3.4cqw; height: 3.4cqw; border-width: 1.5px; } /* ============================================================ 8 · Scroll reveals (Phase 4) Built once, used by every section after it. Mark an element `data-reveal`, or a container `data-reveal-stagger` to cascade its children one after another. ============================================================ */ /* Everything here hangs off `.js`, set by an inline script in . Keyed the other way round, a script that fails to load would leave the whole invitation invisible — the content must never depend on it. */ .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .js [data-reveal].is-revealed, .js [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } /* --reveal-i is set per child by the observer. */ .js [data-reveal-stagger] > * { transition-delay: calc(var(--reveal-i, 0) * var(--stagger)); } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; } } /* ============================================================ 9 · Content sections (Phases 5–7) ============================================================ */ /* Two adjacent sections each contribute their padding to the gap between them, so this is half the space the eye actually sees. The reference runs ~44–72px between one section's last line and the next one's first; at var(--space-6) each side we were putting 192px there, which is what made every band look adrift from the one above it. 36px a side lands on the reference's 72px at desktop and tightens to 56px on a phone. */ .section { padding-block: clamp(1.75rem, 4vw, 2.25rem); } .section__inner { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 768px) { .section__inner { max-width: var(--col-wide); } } /* ---------- 9.1 · Bismillah / invitation (Phase 5) -------- Matched to the live reference: its own torn-paper photograph as the card ground (assets/img/invite-card-bg.png, replacing the hand-drawn mask below), its own Bismillah calligraphy graphic rather than live Naskh text, and its own floral cutouts flanking the card. Colours and the script font for "Two Souls..." are taken from the reference's own CSS. Its serif for the greeting/body ("GT Super Display Light") is a paid commercial font we won't redistribute; Ovo (the sitewide body font already) stands in — see assets/img/README.md. ---------------------------------------------------------- */ /* The card rides up over the bottom of the hero rather than sitting below it in its own band. In the reference the two overlap by ~7% of the card's width — the photo runs on behind the torn edge and shows through its notches — and that seam is the whole reason the florals exist: they straddle it, tying the narrower photo to the wider card. Left in its own band (the section's default 96px of top padding) they have nothing to sit on and read as floating in empty cream. Both .hero__panel and .card are already positioned, and this comes later in the document, so it paints over the hero without needing a z-index. */ #invitation-card { padding-top: 0; margin-top: calc(-1 * clamp(24px, 7vw, 45px)); } /* Every card in the reference is a fixed 574px that simply overflows a phone screen, so its straight side edges are never in view and the art runs edge to edge. Below 484px we do the same by dropping the gutters. On the invitation card this is load-bearing rather than cosmetic: the card must never be narrower than the hero photo it overlaps, or the photo's bottom corners poke out past the torn edge at the seam. */ @media (max-width: 484px) { #invitation-card .section__inner, #schedule .section__inner, #venue .section__inner { max-width: none; padding-inline: 0; } /* Let the Schedule heading span the card's full width rather than its padded content box. The reference's scrollwork sits hard against the screen edges on a phone (measured: 1px and 390px on a 390 screen), which it can only do because its card is wider than the screen. Ours fits the screen, so the heading has to reclaim the padding or the flourishes get starved down to ~28px against the 41px title. */ .heading--schedule { margin-inline: calc(-1 * var(--space-3)); } /* #venue drops its gutters so the Location card's torn paper reaches the screen edges like every other card. The map frame and its link sit outside that card, though, and a bordered box hard against the bezel reads as a mistake — so they take the gutter back individually. */ #venue .venue__frame, #venue .venue__actions { margin-inline: var(--gutter); } } .invite { text-align: center; } /* The real photographed card replaces the CSS torn-paper mask: no more --tear reveal, no repeating grain overlay — both are baked into the photo. Left/right stay straight, same as the mask version, so the art still reads as a strip rather than a bounded rectangle. */ .card.invite { /* Top inset is padding, not a margin on the Bismillah: with no padding-top a child's margin-top collapses through the card and shifts the whole thing down instead of insetting the content. 10% ≈ the reference's 60px-below-the-torn-edge on its own card. */ padding: 10% var(--space-3) var(--space-4); background: url("../assets/img/invite-card-bg.png") center / 100% 100% no-repeat; -webkit-mask-image: none; mask-image: none; } .card.invite::before { display: none; } /* 49% of the card's width, measured off the reference; its distance from the torn edge comes from .card.invite's padding-top. The florals' vines hang past it either side, which is why it reads small against the card. */ .bismillah { display: block; /* 49% of the card's full width. As an in-flow child a bare % would resolve against the content box, which the card's inline padding has already narrowed — so add that padding back before taking the share. (The florals above are absolutely positioned and resolve against the padding box, so their percentages need no such correction.) */ width: calc(0.493 * (100% + 2 * var(--space-3))); height: auto; margin: 0 auto var(--space-3); } /* The reference sets these at a flat 41px / 21px (line-height 43 / 26) at every viewport — its layout is a fixed 1200px canvas, so nothing about it is fluid. Matched as a ceiling that only small phones scale back from, rather than a hard px value that would overflow a 320px screen: both hit the reference's exact size from ~390px up. The site's own --t-script-md / --t-body are deliberately not used here; they are a whole step smaller (25px / 14px on a phone) and left this section looking half the weight of the reference. */ .invite { --invite-script: clamp(1.9rem, 10.5vw, 2.5625rem); /* → 41px */ --invite-body: clamp(1rem, 5.4vw, 1.3125rem); /* → 21px */ } .invite__line { font-family: "Imperial Script", var(--font-script); color: #A67D2B; font-size: var(--invite-script); line-height: 1.05; } .invite__line:last-of-type { margin-bottom: var(--space-3); } .invite__greeting { color: #6A5140; font-size: var(--invite-body); line-height: 1.24; letter-spacing: 0.02em; margin-bottom: var(--space-1); } .invite__body { color: #6A5140; font-size: var(--invite-body); line-height: 1.24; text-wrap: pretty; } /* Two halves of one floral swag across the card's top: flush to each outer edge, hanging ~56% of their own height above the torn edge so the trailing vines drape down either side of the Bismillah. The sizing came from the live reference's rendered geometry, normalised against its *visible* paper (the source PNG floats the card inside a wider transparent canvas, so its own element box is 30% wider than the paper and can't be compared to ours directly). Its two halves are slightly mismatched — 39%/41% wide, 54.5%/57.5% up, because the art isn't mirrored — so both use the midpoint of each pair instead, giving a matching size and rise on either side. Sized and inset to the scale the reference reads at on a phone rather than on desktop: there its card is a fixed 574px overflowing a 390px screen, so its florals come out ~56% of the visible width and hang ~11–14% off each edge. That's the bigger, bolder look — on desktop the same art sits at only ~39% and well inside the card. Hanging off the edge is why the card clips them (overflow is hidden on the body), which is intended: they read as cut off by the frame, not as free-floating bouquets. */ /* The