@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500&display=swap'); @font-face { font-family: 'Kunstler Script'; src: url('../kunstlerscript.ttf') format('truetype'); font-weight: normal; font-style: normal; /* Block briefly while font loads instead of flashing Times New Roman. Preload tag in each HTML kicks off the download early so the block period is barely perceptible. */ font-display: block; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } html { scrollbar-gutter: stable both-edges; } body { font-family: 'Montserrat', sans-serif; font-weight: 500; background-color: #f8f7f5; color: #343434; min-height: 100vh; /* Positioned so the copyright pseudo-element below can absolute-anchor to the body's bottom — sits at the bottom of the document, scrolls with the page instead of floating. */ position: relative; } /* Tiny copyright notice anchored to the bottom-left of the document (not the viewport) — scrolls naturally with the page rather than hovering. On short pages it appears at the bottom of the viewport; on tall pages you scroll down to see it. */ body::before { content: "© Paris Reine 2026"; position: absolute; bottom: 10px; left: 14px; z-index: 200; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 8px; letter-spacing: 0.08em; color: #9a9892; pointer-events: none; } /* Global parchment overlay — fixed full-viewport SVG, multiplied at low opacity so the whole page reads as soft vellum without affecting layout or color. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url('../images/parchment-transparent-overlay.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.28; mix-blend-mode: multiply; } /* ── Header ── */ header { display: flex; align-items: center; padding: 16px clamp(16px, 3vw, 36px); background: #ffffff; position: sticky; top: 0; z-index: 100; gap: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .wordmark { font-family: 'Montserrat', sans-serif; font-weight: 400; /* Fluid: 10px floor, 15px ceiling. Hits floor below ~1110px viewport, ceiling above ~1670px. Visibly scales across normal desktop widths. */ font-size: clamp(10px, 0.9vw, 15px); letter-spacing: 0.18em; text-transform: uppercase; color: #343434; text-decoration: none; white-space: nowrap; min-width: 72px; /* Locked to the left at every viewport — never shrinks or wraps. */ flex-shrink: 0; } nav { margin-left: auto; display: flex; align-items: center; /* Fluid spacing — nav tightens as viewport shrinks. */ gap: clamp(14px, 2vw, 28px); padding-left: clamp(16px, 2.5vw, 32px); /* When the viewport is too narrow to fit all items beside the wordmark, the nav scrolls horizontally instead of stacking beneath the wordmark. Keeps wordmark-left / nav-right layout consistent at every width. */ overflow-x: auto; min-width: 0; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } nav a { flex-shrink: 0; } nav a { font-family: 'Montserrat', sans-serif; font-weight: 400; /* Fluid: 9px floor, 13px ceiling. Hits floor below ~1125px viewport, ceiling above ~1625px. Slope chosen so the font visibly scales across the typical desktop range (1280-1600px). */ font-size: clamp(9px, 0.8vw, 13px); color: #343434; text-decoration: none; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.15s; /* Letterpress: paired highlight below + shadow above. */ /* letterpress reverted — flat Kunstler-color ink */ } nav a:hover { opacity: 0.45; } nav a.active { border-bottom: 1px solid #343434; padding-bottom: 1px; } /* ── Main layout ── */ main { padding: clamp(16px, 3vw, 36px) clamp(12px, 3vw, 32px) clamp(24px, 4vw, 56px); display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 60px); } /* ── Canonical invitation card ── Single source of truth for the card style across every page. Width: 440px max. Height: content-driven (min-height = home card's natural 7:5 height ≈ 314px). Card is absolutely positioned inside the .invitation-frame so its TOP stays fixed; when content grows, the card extends DOWNWARD instead of shifting the card upward. */ .card { background-color: #fdfdfb; background-image: url('../images/paper-tile.png'); background-repeat: repeat; background-size: 220px; border: 1px solid #e6e6e3; border-radius: 22px; box-shadow: 0 6px 24px rgba(40, 30, 60, 0.15); width: 100%; max-width: 440px; min-height: calc(440px * 5 / 7); position: absolute; top: calc(50% - 157px); left: 50%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px); } .card::before { content: ""; position: absolute; inset: 10px; border: 1px solid #000000; border-radius: 12px; pointer-events: none; } /* ── Invitation frame ── Universal wrapper that anchors the card to the same Y on every page. Same dimensions across all pages, so when centered in main, the card sits at the same vertical offset from the nav bar everywhere. Home additionally renders the floral border via ::before. */ .invitation-frame { position: relative; width: 100%; max-width: 720px; aspect-ratio: 1066 / 712; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .page-home .invitation-frame::before { content: ""; position: absolute; inset: 0; background: url('../images/Home Border Floral.svg') center/cover no-repeat; opacity: 0.88; filter: drop-shadow(0 10px 28px rgba(20, 15, 30, 0.22)); z-index: 0; } /* ── Scalable floral frame (inner pages) ── Uses background-image (same approach as home page) so the floral composition reads as ONE piece with no tile seams. The image stretches to fit the frame, which grows with the card content. */ .scalable-frame { position: relative; width: 100%; /* Frame max-width is FIXED. The card inside has a 7:5 invitation proportion via min-height; if we scale the frame width down with viewport, the height stays fixed and the card goes portrait — wrong for an invitation. So the frame stays at its design size and the contents inside (hero, photos) handle the responsive scaling. The frame still shrinks naturally below max via width: 100% when the viewport is too narrow to contain it. */ max-width: 640px; margin: 0 auto; padding: clamp(18px, 6vw, 50px); border-radius: 19px; box-sizing: border-box; /* Soft cast shadow — gives the floral border a raised feel. */ box-shadow: 0 10px 28px rgba(20, 15, 30, 0.20); } /* Floral background lives on a pseudo-element so its opacity can be tuned independently of the card on top. */ .scalable-frame::before { content: ""; position: absolute; inset: 0; background-size: 100% auto; background-position: top center; background-repeat: repeat-y; border-radius: inherit; opacity: 0.85; z-index: 0; } /* Home now uses the same frame width as other inner pages (default 640 from .scalable-frame above) — no override needed. Card max-width is matched to 540 below. */ .page-home .scalable-frame::before { background-image: url('../images/border-home.png'); } .page-schedule .scalable-frame::before { background-image: url('../images/border-rsvp.png'); } .page-travel .scalable-frame::before { background-image: url('../images/border-faq.png'); } .page-rsvp .scalable-frame::before { background-image: url('../images/border-home.png'); } .page-gallery .scalable-frame::before { background-image: url('../images/border-rsvp.png'); } .page-faq .scalable-frame::before { background-image: url('../images/border-faq.png'); } .page-registry .scalable-frame::before { background-image: url('../images/border-home.png'); } /* Gallery: frame is fixed at 1100 (expanded to accommodate larger photos). */ .page-gallery .scalable-frame { max-width: 1100px; } .page-gallery .card { max-width: none; width: 100%; } /* Gallery and Travel pages have content taller than the viewport, so they don't benefit from main's vertical centering and end up hugging the header. Add a viewport-relative top padding that mirrors where centered content lands on shorter pages — matches the visual rhythm of Home / Schedule / RSVP / FAQ / Registry. The 50vh-250 formula targets the same Y as a centered ~410-tall scalable-frame on those short-content pages. */ .page-gallery main, .page-travel main { padding-top: clamp(30px, calc(50vh - 250px), 300px); align-items: flex-start; } /* Gallery grid: 2 columns on desktop. Generous 44px gap and matching padding-inline so each photo has plenty of breathing room and reads as its own piece. 14 photos = 7 rows. */ .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-inline: 44px; width: 100%; margin-top: 8px; align-items: start; justify-items: center; box-sizing: border-box; } /* Override the shared .page-content max-width (560px) on the gallery so the grid can fill the full card inner width — without this the photos are confined to 560px even though the card is wider. */ .page-gallery .page-content { max-width: none; width: 100%; } /* White matting around each photo: 14px solid white border, rounded corners, soft 8px-blur drop shadow — reads like a physical photo print laid on the page. */ .gallery-item { width: 100%; background: #fff; padding: 14px; border-radius: 10px; box-shadow: 0 4px 8px rgba(20, 15, 30, 0.12); box-sizing: border-box; } .gallery-item img { width: 100%; height: auto; display: block; border-radius: 5px; } /* On narrow viewports keep the 2-column layout but tighten gap & mat so photos keep readable size on small screens. */ @media (max-width: 640px) { .gallery-grid { gap: 12px; } .gallery-item { padding: 6px; } } /* Photographer byline at end of gallery — italic, soft gray, generous space above to separate it from the last row of photos. */ .gallery-byline { margin: 28px auto 0; width: fit-content; text-align: center; font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 300; font-size: 10px; letter-spacing: 0.04em; color: #6b6b6b; line-height: 1.35; white-space: nowrap; } /* On narrow viewports the byline can't fit on one line at 10px — let it wrap and shrink slightly. */ @media (max-width: 640px) { .gallery-byline { white-space: normal; font-size: 9px; } } /* Blue floral border (travel + FAQ): saturate more than the dark/yellow borders, so the opacity is dialed lower for visual balance. */ .page-travel .scalable-frame::before, .page-faq .scalable-frame::before { opacity: 0.65; } /* Card inside a scalable frame is in normal flow (so the frame can grow with content), overriding the absolute positioning used in the home/no-border setups. */ .scalable-frame > .card { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; } /* ── Vellum envelope effect (home page only) ── The envelope is sized larger than the card (containing it). The card sits centered horizontally, anchored so its top half projects above the envelope's open mouth. Envelope back is behind everything. */ .envelope-stage { position: relative; width: 100%; /* Stage's max-width is the card area; envelopes scale to 130% of stage so they explicitly surround the card. Height is loosely bounded so the envelope can grow but mostly stays in viewport. */ max-height: calc(100vh - 60px); aspect-ratio: 810 / 1012.5; max-width: min(560px, calc((100vh - 60px) * 810 / 1012.5)); display: block; margin: 0 auto; } .envelope-back, .envelope-front { position: absolute; pointer-events: none; user-select: none; height: auto; left: 50%; transform: translateX(-50%); } .envelope-back { /* Envelope extends 50% beyond stage width so it visibly surrounds the card. Drop shadow gives the vellum body a readable silhouette against the light page background. */ width: 150%; bottom: 0; z-index: 0; opacity: 0.95; filter: drop-shadow(0 8px 22px rgba(30, 25, 45, 0.18)); } .envelope-front { /* Same 150% width so the vellum front face matches the back's footprint. Translucent V-flap reaches up to overlap the card's lower edge. */ width: 150%; bottom: 0; z-index: 2; opacity: 0.55; } /* Editorial label on the visible bottom face of the envelope. Hairlines bracket the two-line label (decorative ornaments). */ .envelope-text { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 8px; line-height: 2.1; letter-spacing: 0.36em; text-transform: uppercase; white-space: nowrap; color: #7a7873; pointer-events: none; } .envelope-text::before, .envelope-text::after { content: ""; display: block; width: 70%; height: 1px; background: #b0aea9; margin: 0 auto; } .envelope-text::before { margin-bottom: 12px; } .envelope-text::after { margin-top: 12px; } /* Card sits centered horizontally, lowered into the envelope so the envelope's mouth/flap area projects above and around it. */ .page-home .envelope-stage .card { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); z-index: 1; } /* All inner pages and home now share the same card width (540) so the layout is uniform across the site. */ .page-schedule .card, .page-travel .card, .page-rsvp .card, .page-faq .card, .page-registry .card, .page-home .card { max-width: 540px; } /* Home card vertically centers the hero (Paris / camellia / Joseph) inside the card. Since three-col (date/location) is position:absolute at the bottom, the hero is the only flex child and ends up sitting at the visual center of the card — same Y position relative to the card at every viewport. */ .page-home .card { justify-content: center; } /* ── Camellia icon (inner pages) ── */ .camellia-icon { width: 42px; height: 42px; margin-bottom: 32px; opacity: 0.88; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85)) drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.18)); } /* ── Page title (Kunstler) ── */ .page-title { font-family: 'Kunstler Script', serif; font-weight: normal; font-size: clamp(40px, 6vw, 56px); line-height: 1; color: #343434; margin-bottom: clamp(32px, 6vw, 56px); text-align: center; transform: translateX(-10px); } /* Smaller variant for long titles ("Travel & Accommodations", "Frequently Asked Questions", "Répondez s'il vous plaît") so they fit on one line. Small Kunstler script reads as more delicate. */ .page-title-lg { font-size: clamp(26px, 3.5vw, 36px); white-space: nowrap; } /* ── Home hero ── Sized for the wider 540 card (matches the rest of the site). The hero's margin-top is removed so the hero top sits at card-padding-top — matches the Y position of the camellia-icon on inner pages. */ .hero { position: relative; z-index: 1; width: 100%; height: 96px; /* Margin removed — vertical position is now handled by the justify-content: center on .page-home .card (above). */ margin: 0; } .hero-camellia { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; } .hero-name { position: absolute; top: 50%; transform: translateY(-50%); font-family: 'Kunstler Script', serif; font-size: 80px; line-height: 1; color: #343434; white-space: nowrap; } .hero-name-left { right: calc(50% + 74px); } .hero-name-right { left: calc(50% + 58px); } /* ── Three-column row ── */ /* Three equal columns spanning the card width. Text centered in each. Hairline dividers on the column boundaries. "SAVE-THE-DATE" and "INVITATION-TO-FOLLOW" are near-identical lengths, so centered-in-equal-columns produces visually matched divider gaps. */ .three-col { position: absolute; z-index: 1; bottom: clamp(24px, 3.5vw, 40px); left: clamp(28px, 4vw, 44px); right: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .col-left, .col-right { position: relative; } .col-left { text-align: left; } .col-right { text-align: right; } .three-col p { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 9px; line-height: 1.85; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: #343434; /* Letterpress: lighter ink + paired highlight below + shadow above. */ /* letterpress reverted — flat Kunstler-color ink */ } /* Three-col stays as two side-by-side columns at every viewport width. "October 17, 2026" stays left-aligned, "Keswick, Virginia" stays right-aligned — same as the desktop layout — even as the window resizes. No stacking media query. */ /* ── Inner page content ── */ .page-content { width: 100%; max-width: 560px; text-align: center; } .placeholder-text { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #b8b6b1; margin-bottom: 24px; /* letterpress reverted — flat Kunstler-color ink */ } .content-items { list-style: none; display: flex; flex-direction: column; gap: 20px; } .content-items li { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #343434; /* letterpress reverted — flat Kunstler-color ink */ } /* ── Registry page link ── */ /* Reduce the title's bottom margin on the registry page so the card stays at its 314px min-height (no growth) — that gives the flex centering below actual space to work with. */ .page-registry .page-title { margin-bottom: 32px; } /* On the registry page, the page-content area expands to fill the remaining card height below the title, and centers the Zola button within that space — sits in the middle between the bottom of "Registry" and the bottom of the card's black border. */ .page-registry .page-content { flex: 1; display: flex; align-items: center; justify-content: center; } .registry-link { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: #343434; padding: 14px 28px; border: 1px solid #343434; border-radius: 2px; transition: opacity 0.2s; } .registry-link:hover { opacity: 0.5; } /* ── Hotel listings ── */ .hotel-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; width: 100%; } .hotel-item { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .hotel-item a { display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; width: 100%; } .hotel-item a:hover .hotel-card { opacity: 0.85; } .hotel-item a:hover .hotel-name { opacity: 0.45; } .hotel-card { width: 100%; background: #ffffff; border-radius: 18px; box-shadow: 0 2px 32px rgba(0, 0, 0, 0.06); overflow: hidden; } .hotel-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .hotel-card--placeholder { height: 220px; background: #f0eeea; display: flex; align-items: center; justify-content: center; } .hotel-placeholder-label { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: #343434; /* letterpress reverted — flat Kunstler-color ink */ } .hotel-info { display: flex; flex-direction: column; align-items: center; gap: 8px; } .hotel-name { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #343434; text-decoration: none; transition: opacity 0.2s; /* letterpress reverted — flat Kunstler-color ink */ } .hotel-name:hover { opacity: 0.45; } .hotel-note { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 9px; letter-spacing: 0.04em; color: #343434; font-style: italic; /* letterpress reverted — flat Kunstler-color ink */ } /* ────────────────────────────────────────────── */ /* ── Tablet (≤ 1024px) ── */ /* Header stacks below — wordmark on top, nav below as a horizontally scrollable strip. */ /* ────────────────────────────────────────────── */ @media (max-width: 1024px) { /* Header stays in single-row desktop layout (wordmark left, nav right). The nav's overflow-x: auto handles narrow viewports by letting items scroll horizontally without breaking the layout. Only the hero is downsized at this breakpoint. */ /* Hero — slightly smaller on tablet to fit shrunk card */ .hero { height: 88px; } .hero-name { font-size: 70px; } .hero-camellia { width: 60px; height: 60px; } .hero-name-left { right: calc(50% + 68px); } .hero-name-right { left: calc(50% + 52px); } } /* ────────────────────────────────────────────── */ /* ── Mobile (≤ 600px) ── */ /* ────────────────────────────────────────────── */ @media (max-width: 600px) { nav { gap: 14px; } nav a { font-size: 10px; letter-spacing: 0.16em; } .card { border-radius: 14px; } /* Hero — even smaller on phone widths */ .hero { height: 60px; } .hero-name { font-size: 44px; } .hero-camellia { width: 38px; height: 38px; } .hero-name-left { right: calc(50% + 42px); } .hero-name-right { left: calc(50% + 30px); } /* Camellia icon (inner pages) — smaller accent on phone */ .camellia-icon { width: 34px; height: 34px; margin-bottom: 24px; } /* Three-col text — keep at desktop scale on phone (already small) */ .three-col p { font-size: 8px; line-height: 1.85; } /* Hotels — single column on phone */ .hotel-list { gap: 24px; } .hotel-item { width: 100%; } } /* ────────────────────────────────────────────── */ /* ── Small phones (≤ 400px) ── */ /* ────────────────────────────────────────────── */ @media (max-width: 400px) { /* Hero — shrink further so it fits in the narrower card on iPhone SE etc. */ .hero { height: 50px; } .hero-name { font-size: 36px; } .hero-camellia { width: 32px; height: 32px; } .hero-name-left { right: calc(50% + 36px); } .hero-name-right { left: calc(50% + 26px); } /* Three-col on very narrow screens — even more compact */ .three-col p { font-size: 7px; letter-spacing: 0.18em; } .hotel-card img { height: 180px; } /* Inner page content */ .page-content { max-width: 100%; } .content-items li { font-size: 10px; letter-spacing: 0.16em; } }