@import url('./fonts.css'); /* ============================================================ Reset / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'EB Garamond', serif; color: #1d1d1b; background: #ffffff; /* mat between letterboxed page */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ============================================================ Korean — uses Gowun Batang in place of EB Garamond. Triggered by on Korean pages. ============================================================ */ html[lang="ko"] body, html[lang="ko"] .t, html[lang="ko"] .parents, html[lang="ko"] .map-links, html[lang="ko"] .nav-link__label { font-family: 'Gowun Batang', serif; letter-spacing: 0; } html[lang="ko"] .t--display { font-family: 'Gowun Batang', serif; font-weight: 700; letter-spacing: 0.08em; } /* Korean parents block — slightly larger than English default for readability */ html[lang="ko"] .parents { font-size: calc(14 * var(--u)); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ============================================================ Design canvas — 393 × 852 (iPhone 14 / 15 Pro logical px). On the target device, 1 design px == 1 CSS px (--u = 1). On other sizes the whole composition scales proportionally so the layout stays pixel-accurate to Figma. ============================================================ */ :root { --design-w: 393; /* Default canvas height — pages may override per-section. The page can be taller than the viewport; body scrolls. */ --design-h: 1000; /* 1 design px in CSS px. Cap the visible width so on wide screens the invite stays phone-shaped, centered. */ --u: calc(min(100vw, var(--design-w) * 1px) / var(--design-w)); /* palette */ --bg-cream: #ffffff; --ink: #1d1d1b; --navy: #1a2a4f; } .page { position: relative; width: calc(var(--design-w) * var(--u)); height: calc(var(--design-h) * var(--u)); margin: 0 auto; overflow: hidden; background: var(--bg-cream); } /* ============================================================ Position helpers — everything inside .page positions in design pixels via --x / --y / --w / --h ============================================================ */ .abs { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); width: calc(var(--w, auto) * var(--u)); } .abs--h { height: calc(var(--h, auto) * var(--u)); } .abs img, .abs svg { width: 100%; height: 100%; display: block; } /* ============================================================ Decorative heart line + script text (top of each page) - .hero-heart → manual position via --x, --y, --w (gray tint) - .hero-script → auto horizontally centered; tweak --w + --y ============================================================ */ .hero-heart { position: absolute; left: calc(var(--x, 190) * var(--u)); top: calc(var(--y, 30) * var(--u)); width: calc(var(--w, 150) * var(--u)); height: auto; opacity: 0.18; /* softens the near-black stroke to very light gray */ pointer-events: none; } .hero-script { position: absolute; left: 50%; top: calc(var(--y, 110) * var(--u)); width: calc(var(--w, 250) * var(--u)); height: auto; transform: translateX(-50%); pointer-events: none; } /* ============================================================ Photo strip (3 photos in a row, full width) ============================================================ */ .photo-row { position: absolute; left: 0; width: 100%; display: flex; gap: calc(6 * var(--u)); } .photo-row img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-row__cell { overflow: hidden; } /* ============================================================ Typography ============================================================ */ .t { position: absolute; font-family: 'EB Garamond', serif; color: var(--ink); left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); width: calc(var(--w, var(--design-w)) * var(--u)); font-size: calc(var(--fs, 11) * var(--u)); line-height: var(--lh, 1.55); text-align: var(--ta, center); font-weight: var(--fw, 400); letter-spacing: var(--ls, 0); } .t--display { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-weight: 500; letter-spacing: 0.18em; } /* ============================================================ Parents block (two columns) — label vertically centered on the two-line names beside it ============================================================ */ .parents { position: absolute; left: 0; width: 100%; display: flex; justify-content: center; gap: calc(40 * var(--u)); color: var(--ink); font-size: calc(11 * var(--u)); line-height: 1.55; font-family: 'EB Garamond', serif; } .parents__col { display: flex; align-items: center; gap: calc(8 * var(--u)); } .parents__label { white-space: nowrap; } .parents__names { white-space: nowrap; } /* ============================================================ Bottom: wedding-car illustration + heart-link + bar ============================================================ */ /* Wedding car — anchored above the navy bar (position: absolute). Animation runs ONCE when the car is scrolled into view: - opacity fades 0 → 1 - drifts a short distance horizontally, ending at the right end No ongoing scroll dependency. */ .deco-car { position: absolute; left: 50%; bottom: calc(28 * var(--u)); width: calc(96 * var(--u)); height: auto; pointer-events: none; z-index: 5; --car-end-x: 100; /* final horizontal offset from center (design px) */ --car-start-x: 70; /* starting offset (design px) — small drift = end - start */ /* Initial state: invisible, at start position */ opacity: 0; transform: translateX(calc(-50% + var(--car-start-x) * var(--u))); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .deco-car.is-visible { opacity: 1; transform: translateX(calc(-50% + var(--car-end-x) * var(--u))); } /* nav-link composes a combined heart+arrow SVG with a "Next Page" label overlaid on top of the arrow (right) portion of the SVG. The SVG viewBox is 61×35; the heart occupies roughly the left 42% (x=0..26 of 61) and the arrow tail the right 58%. */ .nav-link { position: absolute; display: block; cursor: pointer; transition: transform 0.18s ease; color: var(--ink); } .nav-link:hover { transform: translateX(2px); } .nav-link__arrow { display: block; width: calc(var(--arrow-w, 78) * var(--u)); height: calc(var(--arrow-w, 78) * 35 / 61 * var(--u)); } .nav-link__label { position: absolute; left: calc((var(--arrow-w, 78) * 26 / 61 + var(--label-dx, -8)) * var(--u)); top: calc(50% + var(--label-dy, -20) * var(--u)); transform: translateY(-50%); width: calc(var(--arrow-w, 78) * 35 / 61 * var(--u)); font-size: calc(var(--label-fs, 15) * var(--u)); line-height: var(--label-lh, 1.1); text-align: var(--label-ta, center); /* override inline: left | center | right */ white-space: nowrap; pointer-events: none; } .nav-link--prev:hover { transform: translateX(-2px); } .nav-link--prev .nav-link__label { /* prev_page_arrow.svg already has heart on right + swirl on left, so the label sits over the LEFT portion (the swirl tail). --label-dx still nudges left/right per inline override. */ left: calc(var(--label-dx, -3) * var(--u)); width: calc(var(--arrow-w, 78) * 35 / 61 * var(--u)); } .bottom-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(15 * var(--u)); background: var(--navy); } /* ============================================================ Page 2 extras: map vector + map links ============================================================ */ .map-vector { position: absolute; left: 50%; transform: translateX(-50%); width: calc(220 * var(--u)); height: auto; } .map-links { position: absolute; left: 0; width: 100%; text-align: center; font-size: calc(14 * var(--u)); line-height: 1.7; color: var(--ink); } .map-links a { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); } .map-links img { display: inline-block; width: calc(18 * var(--u)); height: calc(18 * var(--u)); object-fit: contain; }