:root { --gold: #b08d4f; --gold-deep: #8a6d3c; --gold-light: #e6d6ae; --sage: #8a9678; --sage-deep: #5f6b53; --sage-light: #e6ebe0; --ink: #38362f; --charcoal: #211f1a; --cream: #f9f9f7; --paper: #fffdf9; --error: #9b4438; --radius: 20px; --radius-sm: 14px; --radius-pill: 999px; /* Guest page theme — customizable per-wedding via the admin "Personnaliser" panel. */ --guest-bg: #f9f9f7; --guest-card-bg: #fffdf9; --guest-text: #38362f; --guest-title: #5f6b53; --guest-accent: #b08d4f; --guest-input-bg: #e6ebe0; --guest-input-text: #38362f; --guest-input-border: #e6d6ae; --guest-table-color: #b08d4f; --guest-chair-color: #5f6b53; --guest-canvas-bg: #e6ebe0; --guest-font-title: 'Playfair Display', serif; --guest-font-body: 'Inter', sans-serif; } * { box-sizing: border-box; } /* Mobile Chrome's address bar collapses/expands on scroll or even a tap, which changes the visual viewport height after `100vh` was already measured — if body's own painted area ends just short of the new, taller viewport, the gap shows through to 's default (white) background instead of the page's own, looking like a hard line cutting across whatever happens to sit near the bottom of the screen at that moment. The background lives here (not on body) so it stays the document's canvas background: body has none of its own, which lets elements like .guest-decoration-layer (negative z-index) keep painting above the canvas instead of being covered by a separate, opaque body box. --guest-bg defaults to --cream and gets overridden per-wedding on guest-facing pages, so this tracks whichever theme is actually in use. */ html { background: var(--guest-bg); background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, var(--guest-bg) 60%); } body { margin: 0; font-family: 'Inter', sans-serif; font-weight: 400; color: var(--ink); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; } .page { max-width: 680px; margin: 0 auto; padding: 56px 24px 96px; } .page.page-wide { max-width: 1080px; } .page.poster-page { padding-top: 24px; } .page.invitation-page { padding-top: 24px; } header.hero { position: relative; /* Gives the negative z-index .guest-decoration-layer its own stacking context, scoped to this element's children only — so it can never again end up hidden behind an ancestor's background (e.g. body/html), no matter what gets added there later. */ isolation: isolate; text-align: center; margin-bottom: 44px; padding: 12px 50px; } header.hero::before, header.hero::after { content: ''; position: absolute; width: 68px; height: 68px; background-repeat: no-repeat; background-size: contain; opacity: 0.55; } header.hero::before { top: -10px; left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 92 C 34 70, 22 42, 54 10' stroke='%238a9678' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='32' cy='62' rx='11' ry='5.5' fill='%238a9678' transform='rotate(-45 32 62)'/%3E%3Cellipse cx='42' cy='42' rx='10' ry='5' fill='%238a9678' transform='rotate(-35 42 42)'/%3E%3Cellipse cx='53' cy='22' rx='8.5' ry='4.5' fill='%23b08d4f' transform='rotate(-22 53 22)'/%3E%3C/svg%3E"); } header.hero::after { bottom: -10px; right: 0; transform: rotate(180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 92 C 34 70, 22 42, 54 10' stroke='%238a9678' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='32' cy='62' rx='11' ry='5.5' fill='%238a9678' transform='rotate(-45 32 62)'/%3E%3Cellipse cx='42' cy='42' rx='10' ry='5' fill='%238a9678' transform='rotate(-35 42 42)'/%3E%3Cellipse cx='53' cy='22' rx='8.5' ry='4.5' fill='%23b08d4f' transform='rotate(-22 53 22)'/%3E%3C/svg%3E"); } .guest-decoration-layer { position: absolute; inset: 0; pointer-events: none; z-index: -1; } .guest-decoration-item { position: absolute; width: 130px; height: 130px; color: var(--guest-accent); opacity: 0.85; } .guest-decoration-item svg, .guest-decoration-item img { width: 100%; height: 100%; display: block; } .guest-decoration-item img { object-fit: contain; } .guest-decoration-fireworks { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } @media (max-width: 640px) { .guest-decoration-item { width: 88px; height: 88px; } } header.hero.invite-hero { padding: 96px 20px 16px; margin-bottom: 36px; } /* The corner branches used to be hardcoded here — now superseded by the couple's own choice of decoration (.guest-decoration-layer), so this header no longer draws its own. */ header.hero.invite-hero::before, header.hero.invite-hero::after { content: none; } .script-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 0; min-height: 3.4rem; } .script-word { font-family: 'Parisienne', cursive; font-size: 3.4rem; font-weight: 400; color: var(--sage-deep); line-height: 1; } .title-heart { font-size: 1.8rem; color: var(--gold-light); transform: translateY(2px); } .tracked-subtitle { text-transform: uppercase; letter-spacing: 2.2px; font-size: 0.78rem; font-weight: 500; font-style: normal !important; font-family: var(--guest-font-body) !important; color: #8a7e6e; margin: 16px 0 0 !important; } header.hero .eyebrow { display: inline-block; margin: 0 0 14px; padding: 5px 18px; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sage-deep); font-weight: 600; background: var(--sage-light); border-radius: var(--radius-pill); } header.hero h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 600; letter-spacing: 0.2px; color: var(--charcoal); margin: 0; line-height: 1.25; } header.hero p:not(.eyebrow) { color: #8a7e6e; margin: 14px 0 0; font-size: 1.02rem; font-style: italic; font-family: 'Playfair Display', serif; } .divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; } .divider::before, .divider::after { content: ''; height: 1px; width: 46px; background: linear-gradient(90deg, transparent, var(--gold-light)); } .divider::after { background: linear-gradient(90deg, var(--gold-light), transparent); } .divider span { font-size: 0.9rem; color: var(--gold); line-height: 1; } .divider span::after { content: '♥'; } .card { position: relative; background: var(--paper); border: 1px solid var(--gold-light); border-radius: var(--radius); padding: 34px; margin-bottom: 22px; box-shadow: 0 20px 44px rgba(138, 109, 60, 0.1); } .card::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(176, 141, 79, 0.18); border-radius: calc(var(--radius) - 7px); pointer-events: none; } input, select, textarea { font-family: 'Inter', sans-serif; font-size: 16px; padding: 0 14px; height: 42px; border: 1px solid rgba(176, 141, 79, 0.3); border-radius: var(--radius-sm); background: var(--sage-light); color: var(--ink); width: 100%; min-width: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; } textarea { height: auto; min-height: 90px; padding: 10px 14px; line-height: 1.5; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--sage-deep); opacity: 0.45; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(176, 141, 79, 0.14); } .phone-input-group { display: flex; border-radius: var(--radius-sm); transition: box-shadow 0.15s ease; } /* The select and input each keep their own (half-rounded) border-radius so they read as one merged pill, but that means each one's default focus box-shadow doesn't line up with the pill's true outer shape and visibly bleeds past the seam between them. Suppress the per-control glow and draw a single correctly-rounded one on the shared wrapper instead. */ .phone-input-group .phone-code-select:focus, .phone-input-group input:focus { box-shadow: none; } .phone-input-group:focus-within { box-shadow: 0 0 0 4px rgba(176, 141, 79, 0.14); } .phone-input-group .phone-code-select { flex: 0 0 auto; width: 88px; min-width: 88px; padding: 0 6px; border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phone-input-group input { flex: 1; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .search-field { position: relative; display: flex; align-items: center; } .search-field .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sage-deep); pointer-events: none; } .search-field input { padding-left: 42px; padding-right: 42px; } .search-clear-btn { position: absolute; right: 5px; top: 50%; margin-top: -15px; } .icon-btn.search-clear-btn { width: 30px; height: 30px; } .search-clear-btn[hidden] { display: none; } button, a.secondary { display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 0.88rem; letter-spacing: 0.2px; font-weight: 600; padding: 0 22px; height: 42px; border: 1px solid transparent; border-radius: var(--radius-pill); background: linear-gradient(135deg, #c8a868, var(--gold-deep)); color: #fff; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 14px rgba(138, 109, 60, 0.22); transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } button:hover, a.secondary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(138, 109, 60, 0.3); } /* `button { display: inline-flex }` above is an author rule, which beats the browser's own `[hidden] { display: none }` regardless of specificity — without this, setting `.hidden = true` on any button silently does nothing and it stays visible. */ button[hidden], a[hidden] { display: none; } button:active, a.secondary:active { transform: translateY(0); } button.secondary, a.secondary { background: transparent; color: var(--sage-deep); border: 1.5px solid var(--sage-deep); text-decoration: underline; text-decoration-color: rgba(95, 107, 83, 0.5); text-underline-offset: 3px; box-shadow: none; } button.secondary:hover, a.secondary:hover { background: var(--sage-light); color: var(--charcoal); filter: none; box-shadow: none; } .result { margin-top: 24px; display: flex; flex-direction: column; align-items: center; } .result .table-number { display: inline-flex; align-items: center; gap: 22px; padding: 16px 30px; border: 1px solid var(--gold-light); border-radius: var(--radius-pill); background: var(--sage-light); } .result .guest-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--ink); } .result .table-sep { width: 1px; height: 30px; background: var(--gold-light); } .result .table-tag { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .result .table-label { font-size: 0.62rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sage-deep); font-weight: 600; } .result .table-value { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.55rem; color: var(--gold-deep); } .guest-match { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; margin-bottom: 8px; border-radius: var(--radius-sm); cursor: pointer; font-family: 'Playfair Display', serif; font-size: 1.05rem; background: var(--paper); border: 1px solid rgba(176, 141, 79, 0.18); transition: background 0.15s ease, transform 0.1s ease; } .guest-match:last-child { margin-bottom: 0; } .guest-match .match-table { font-weight: 700; font-size: 1.2rem; color: var(--gold-deep); } .guest-match:hover { background: var(--gold-light); transform: translateX(2px); } .muted { color: #998c77; font-size: 0.88rem; } .support-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; padding: 28px 0 4px; font-size: 0.82rem; color: #998c77; margin: 0; } .support-footer svg { flex-shrink: 0; opacity: 0.75; } .support-footer a { color: var(--accent-teal); font-weight: 600; text-decoration: none; } .support-footer a:hover { text-decoration: underline; } .error-msg { color: var(--sage-deep); margin-top: 6px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.98rem; text-align: center; line-height: 1.5; } nav.admin-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 36px; font-size: 0.85rem; } nav.admin-nav strong { letter-spacing: 0.4px; font-size: 0.95rem; color: var(--charcoal); font-weight: 700; font-family: 'Playfair Display', serif; } nav.admin-nav a { color: var(--sage-deep); text-decoration: none; font-weight: 600; } nav.admin-nav a:hover { color: var(--charcoal); } .admin-nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* Specificity note: `nav.admin-nav a` (element+class+element) already sets a plain text color with no background, and would otherwise win over a bare `.admin-nav-chip` rule — scoping through the parent class here is what lets this pill styling actually take effect instead of looking like plain text. */ .admin-nav-actions .admin-nav-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--accent-teal-light); color: var(--accent-teal-deep); font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease; } .admin-nav-actions .admin-nav-chip:hover { color: var(--accent-teal-deep); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(27, 36, 64, 0.18); } nav.admin-nav:not(.admin-nav-stacked) .admin-nav-actions { margin-top: 14px; } nav.admin-nav.admin-nav-stacked { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 8px; } .wedding-countdown { text-align: center; margin-bottom: 32px; } .wedding-countdown-units { display: flex; justify-content: center; gap: 14px; } .wedding-countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold-light) 55%, transparent); } .wedding-countdown-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--charcoal); font-variant-numeric: tabular-nums; } .wedding-countdown-label { margin-top: 2px; font-size: 0.65rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); } .wedding-countdown-caption { margin-top: 8px; font-size: 0.72rem; font-style: italic; color: var(--ink); } .poster-workspace { display: flex; gap: 20px; align-items: flex-start; } .poster-toolbox { flex: 0 0 auto; margin-top: 36px; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius); background: var(--paper); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1); } .poster-toolbox-title { margin: 0; font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--ink); } .poster-bg-field { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(245, 248, 249, 0.92); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); font-size: 0.78rem; color: var(--ink); white-space: nowrap; } .poster-bg-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .poster-bg-swatch svg { pointer-events: none; } .poster-bg-swatch input[type='color'] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; opacity: 0; cursor: pointer; } .color-hex-input { width: 78px; height: 28px; padding: 0 8px; font-size: 0.78rem; font-family: 'Inter', monospace; text-transform: uppercase; letter-spacing: 0.4px; } .icon-number-field { position: relative; align-items: center; } .icon-number-field:not([hidden]) { display: inline-flex; } .icon-number-field-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--ink); opacity: 0.6; } .poster-text-toolbar .icon-number-field input[type='number'] { padding-left: 26px; } .poster-toolbox-tools { display: flex; flex-direction: column; gap: 10px; } .poster-tool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 62px; height: 62px; padding: 6px; font-size: 0.62rem; white-space: normal; text-align: center; border-radius: var(--radius-sm); background: none; box-shadow: none; border: 1.5px solid var(--ink); color: var(--ink); } .poster-tool-btn:hover { background: rgba(15, 23, 42, 0.04); box-shadow: none; transform: none; } .poster-canvas-area { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18px 12px; overflow: auto; } #poster-content nav.admin-nav { margin-bottom: 16px; } .poster-sheet { position: relative; flex: 0 0 auto; background: #ffffff; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12); overflow: hidden; } .poster-sheet-content { position: relative; width: 100%; height: 100%; } .poster-guide { position: absolute; background: var(--gold-deep); opacity: 0.45; pointer-events: none; z-index: 50; } .poster-guide:not([hidden]) { display: block; } .poster-guide-v { top: 0; bottom: 0; width: 1px; } .poster-guide-h { left: 0; right: 0; height: 1px; } .poster-text-el { position: absolute; } .poster-text-content { min-width: 24px; min-height: 1.2em; padding: 2px 6px; outline: none; cursor: text; white-space: pre-wrap; } .poster-el { /* Without this, a touch-drag on these elements scrolls/zooms the page instead of being delivered as pointermove events. */ touch-action: none; } .poster-el.selected { outline: 1.5px dashed var(--gold-deep); } .poster-text-drag-handle { position: absolute; top: 50%; left: -28px; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--gold-deep); color: #fff; cursor: move; user-select: none; touch-action: none; } .poster-el.selected .poster-text-drag-handle { display: flex; } .poster-qr-el, .poster-icon-el, .poster-image-el { position: absolute; cursor: move; } .poster-image-img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; } .poster-qr-canvas { width: 100%; height: 100%; } .poster-qr-canvas canvas, .poster-qr-canvas img { width: 100%; height: 100%; display: block; } .poster-resize-handle { position: absolute; right: -6px; bottom: -6px; display: none; width: 14px; height: 14px; border-radius: 4px; background: var(--gold-deep); cursor: nwse-resize; touch-action: none; } .poster-el.selected .poster-resize-handle { display: block; } .poster-text-width-handle { position: absolute; top: 50%; right: -6px; transform: translateY(-50%); display: none; width: 14px; height: 14px; border-radius: 4px; background: var(--gold-deep); cursor: ew-resize; touch-action: none; } .poster-el.selected .poster-text-width-handle { display: block; } .poster-rotate-handle { position: absolute; left: -6px; bottom: -6px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-deep); color: #fff; cursor: grab; user-select: none; touch-action: none; } .poster-el.selected .poster-rotate-handle { display: flex; } .poster-divider-resize-handle { position: absolute; top: 50%; right: -6px; transform: translateY(-50%); display: none; width: 14px; height: 14px; border-radius: 4px; background: var(--gold-deep); cursor: ew-resize; touch-action: none; } .poster-el.selected .poster-divider-resize-handle { display: block; } .poster-divider-el { position: absolute; display: flex; align-items: center; height: 24px; cursor: move; } .poster-divider-line { flex: 1; height: 1px; background: currentColor; } .poster-divider-ornament { padding: 0 8px; font-size: 16px; line-height: 1; white-space: nowrap; } .poster-icon-glyph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; line-height: 1; } .poster-image-menu { position: fixed; z-index: 60; flex-direction: column; gap: 6px; width: 220px; padding: 10px; border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25); } .poster-image-menu:not([hidden]) { display: flex; } .poster-image-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 0.82rem; text-align: left; background: none; box-shadow: none; border: 1px solid transparent; color: var(--ink); } .poster-image-menu-item:hover { background: rgba(15, 23, 42, 0.05); box-shadow: none; transform: none; } .poster-image-menu-url { display: flex; align-items: center; gap: 6px; padding: 4px 10px; color: var(--ink); } .poster-image-menu-url input[type='text'] { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-size: 0.8rem; } .poster-image-menu-url button { flex: 0 0 auto; height: 32px; padding: 0 12px; font-size: 0.78rem; } .poster-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; } .poster-text-toolbar { position: fixed; z-index: 60; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 86px 6px 8px; max-width: calc(100vw - 16px); border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25); } #poster-delete-text-btn { position: absolute; top: 6px; right: 8px; } #poster-duplicate-btn { position: absolute; top: 6px; right: 46px; } .poster-text-toolbar:not([hidden]) { display: flex; } .poster-text-toolbar select { width: auto; height: 32px; padding: 0 8px; font-size: 0.78rem; } .poster-text-toolbar input[type='number'] { width: 80px; height: 32px; padding: 0 6px; } .poster-text-toolbar input[type='color'] { width: 32px; height: 32px; padding: 2px; } .poster-text-toolbar .color-hex-input { width: 70px; height: 32px; } .poster-text-toolbar .icon-btn { width: 32px; height: 32px; } .poster-text-toolbar .icon-btn.active { background: var(--gold-light); border-color: var(--gold); color: var(--gold-deep); } @media (max-width: 760px) { .poster-workspace { flex-direction: column; align-items: center; } .poster-toolbox { flex: 0 0 auto; margin-top: 0; } .poster-toolbox-tools { flex-direction: row; flex-wrap: wrap; } .poster-canvas-area { width: 100%; } } .invitation-workspace { display: flex; gap: 20px; align-items: flex-start; } .invitation-toolbox { flex: 0 0 auto; width: 200px; margin-top: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius); background: var(--paper); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1); } .invitation-toolbox-title { margin: 0; font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--ink); } .invitation-toolbox-tools { display: flex; flex-direction: column; gap: 10px; } .invitation-tool-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; font-size: 0.82rem; font-weight: 500; text-align: left; border-radius: var(--radius-sm); background: none; box-shadow: none; border: 1px solid rgba(15, 23, 42, 0.12); color: var(--ink); } .invitation-tool-btn:hover { background: rgba(15, 23, 42, 0.04); box-shadow: none; transform: none; } .invitation-canvas-area { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18px 12px; overflow: auto; } #invitation-content nav.admin-nav { margin-bottom: 16px; } /* Real iPhone mockup PNG (images/phone-frame.png, 1146x2443 — status bar, notch and home indicator are baked into the image, not drawn in CSS). The frame keeps that exact aspect ratio so the artwork never distorts; the iframe sits inside it as a normal child, which is enough to paint it "above" the image (the image is this element's own background, children always paint over their parent's background) while leaving the image's status bar / notch / home indicator visible in the margins around it. */ .invitation-phone-frame { position: relative; flex: 0 0 auto; width: 320px; aspect-ratio: 1146 / 2443; background: url('../images/phone-frame.png') center / 100% 100% no-repeat; } .invitation-phone-screen { /* top/bottom + height:auto doesn't reliably stretch a replaced element like