/* Kijin & Meganne — wedding invitation Rebuilt from the original design assets (May 2026). Decorative art is cropped out of layered SVGs exported on a shared 810 x 1440 canvas; see .art below. */ /* Subsetted woff2 — regenerate with ./tools/subset-fonts.sh after any Korean text edit, or new characters will render as empty boxes. */ @font-face { font-family: "Gowun Batang"; src: url("fonts/GowunBatang-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Gowun Batang"; src: url("fonts/GowunBatang-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } :root { --navy: #15074b; /* bottom bar, script lettering */ --blue: #25398b; /* page arrows */ --ink: #1d1d1b; /* heart outline, body copy */ --paper: #fff; --muted: #55555f; --canvas-w: 810; /* the shared SVG export canvas */ --canvas-h: 1440; --gap: 4px; --pad: 7.5%; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: #e9e7e2; color: var(--ink); /* Cormorant carries no Hangul, so Korean glyphs fall through to Gowun Batang automatically. app.js sets , which flips the primary face so each language leads with its own typeface. */ font-family: "Cormorant Garamond", "Gowun Batang", Georgia, serif; line-height: 1.5; } html[lang="ko"] body { font-family: "Gowun Batang", "Cormorant Garamond", Georgia, serif; } /* ---------- phone frame ---------- */ .phone { position: relative; max-width: 430px; margin: 0 auto; min-height: 100svh; background: var(--paper); box-shadow: 0 0 40px rgba(0, 0, 0, .09); overflow: hidden; } /* ---------- language toggle ---------- */ .lang { position: absolute; top: 14px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .04em; color: var(--muted); } .lang button { border: 0; background: none; padding: 4px 2px; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid transparent; } .lang button[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--navy); } /* ---------- page ---------- */ .page { display: flex; flex-direction: column; min-height: 100svh; padding-bottom: 0; } .page[hidden] { display: none; } /* ---------- cropped SVG art ---------- Each source SVG is the full 810x1440 canvas with one element positioned on it. We window onto that element with a crop rect (--cx/--cy/--cw/--ch, in canvas units) so the art keeps its vector crispness. */ .art { position: relative; overflow: hidden; aspect-ratio: calc(var(--cw) / var(--ch)); flex: none; } .art img { position: absolute; max-width: none; width: calc(var(--canvas-w) / var(--cw) * 100%); height: calc(var(--canvas-h) / var(--ch) * 100%); left: calc(-1 * var(--cx) / var(--cw) * 100%); top: calc(-1 * var(--cy) / var(--ch) * 100%); } /* header: heart outline + "We have Just Married" script, two stacked layers */ .header-art { --cx: 155; --cy: 82; --cw: 552; --ch: 385; width: 84%; margin: 52px auto 0; } .minimap-art { --cx: 264; --cy: 800.5; --cw: 284.5; --ch: 181.5; width: 72%; margin: 0 auto; } .car-art { --cx: 542; --cy: 1216.5; --cw: 187; --ch: 113.5; width: 33%; margin-left: auto; margin-right: 6%; } /* ---------- photo strip ---------- Source widths 250 / 304 / 212 at a shared height of 304, so proportional flex on a zero basis reproduces the original ribbon exactly. */ .photos { display: flex; gap: var(--gap); margin: 40px 0 0; } .photos img { display: block; height: auto; min-width: 0; } .photos img:nth-child(1) { flex: 250 1 0; } .photos img:nth-child(2) { flex: 304 1 0; } .photos img:nth-child(3) { flex: 212 1 0; } /* ---------- body copy ---------- */ .body { flex: 1; padding: 0 var(--pad); text-align: center; } .when { margin: 42px 0 0; font-size: 20px; line-height: 1.45; letter-spacing: .01em; } .when .stamp { display: block; margin-top: 6px; font-size: 18px; color: var(--muted); } .where { margin: 38px 0 0; font-size: 19px; line-height: 1.5; } .where .label { display: block; margin-bottom: 4px; letter-spacing: .06em; } .where .hall { display: block; } .where .addr { display: block; color: var(--muted); } /* parents — English puts the label first, Korean puts it after */ .parents { display: flex; justify-content: center; gap: 34px; margin: 40px 0 0; font-size: 17px; } .parent { display: flex; align-items: center; gap: 8px; } .parent .label { color: var(--muted); font-size: 15px; white-space: nowrap; } .parent .names { display: flex; flex-direction: column; line-height: 1.35; white-space: nowrap; } .couple { margin: 46px 0 0; font-size: 30px; letter-spacing: .02em; } /* ---------- page 2 blocks ---------- */ .section-title { margin: 40px 0 16px; font-size: 19px; letter-spacing: .04em; } .accounts { display: flex; flex-direction: column; gap: 12px; font-size: 17px; } .accounts .who { font-weight: 700; } .accounts .num { font-variant-numeric: tabular-nums; } .note { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); } .maplinks { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 24px 0 0; font-size: 17px; } .maplinks a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .maplinks a:hover { text-decoration: underline; } .maplinks img { height: 26px; width: auto; display: block; } .dress { margin: 34px 0 0; font-size: 16px; line-height: 1.55; text-align: left; } /* ---------- footer / navigation ---------- */ .foot { position: relative; margin-top: 44px; padding: 0 var(--pad); } .footrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nav { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0; font: inherit; font-size: 15px; line-height: 1.15; color: var(--blue); cursor: pointer; } .nav .caption { text-align: center; white-space: pre-line; } .nav .arrow { width: 62px; flex: none; } .nav .arrow.next { --cx: 701; --cy: 1159; --cw: 73.5; --ch: 42; } .nav-prev { flex-direction: row-reverse; } .nav-prev img.arrow-flat { width: 62px; display: block; } .bar { height: 15px; background: var(--navy); margin-top: 10px; } @media (max-width: 380px) { .when { font-size: 18px; } .where { font-size: 17px; } .couple { font-size: 26px; } .parents { gap: 22px; } }