/* Wedding Party — load ../styles.css first */ /* * Paint the photo on , not only . Mobile Safari often limits a body * background to ~one viewport tall on long pages. repeat-y + 100% auto on * fills the full scroll height. html:has() keeps other pages unchanged. */ html:has(body.page-party) { min-height: 100%; background-color: #fbf7ef; background-image: url("background.jpg"); background-image: image-set( url("background.webp") type("image/webp"), url("background.jpg") type("image/jpeg") ); /* Full width keeps side leaves; repeat-y fills long scroll on all viewports */ background-repeat: repeat-y; background-position: center top; background-size: 100% auto; background-attachment: scroll; } body.page-party { --party-reveal-delay: 0.38s; --party-reveal-duration: 1.35s; /* Unitless slot × step → delay, same idea as photos --photos-slot */ --party-stagger-step: 0.07s; position: relative; min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; background-color: #fbf7ef; background-image: url("background.jpg"); background-image: image-set( url("background.webp") type("image/webp"), url("background.jpg") type("image/jpeg") ); background-repeat: repeat-y; background-position: center top; background-size: 100% auto; background-attachment: scroll; } /* When :has() works, only paints the image so it tiles the full document */ html:has(body.page-party) body.page-party { background-image: none; background-color: transparent; } /* * Mobile: scale the strip slightly wider than the viewport so the outer leaf * detail is clipped; leaves read closer to the edges and intrude less toward center. */ @media (max-width: 48rem) { html:has(body.page-party) { background-size: 107% auto; background-position: center top; } body.page-party { background-size: 107% auto; background-position: center top; } } @media (max-width: 60rem) { body.page-party { --party-stagger-step: 0.04s; } } @media (max-width: 48rem) { body.page-party { --party-stagger-step: 0.022s; } } body.page-party .nav { background: #414f39; } .party-main { --party-pad: clamp(2.2rem, 5vw, 3.5rem); max-width: 75rem; margin: 0 auto; padding-top: calc(clamp(12rem, 20vh, 15rem)); padding-bottom: max(6.5rem, env(safe-area-inset-bottom, 0px)); padding-left: max(var(--party-pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--party-pad), env(safe-area-inset-right, 0px)); box-sizing: border-box; } .party-header { text-align: center; display: flex; flex-direction: column; align-items: center; max-width: min(70vw, 42rem); margin: 6rem auto clamp(7rem, 12vw, 10rem); } /* * Full-bleed title band within .party-main: cancel horizontal padding with negative * margins so the band is symmetric. Avoids 100vw + calc(50% - 50vw), which often * shifts text off-center (scrollbar, % vs vw, containing block width). */ .party-header--leaves { --party-header-outset-left: max(var(--party-pad), env(safe-area-inset-left, 0px)); --party-header-outset-right: max(var(--party-pad), env(safe-area-inset-right, 0px)); max-width: none; width: calc(100% + var(--party-header-outset-left) + var(--party-header-outset-right)); margin-left: calc(-1 * var(--party-header-outset-left)); margin-right: calc(-1 * var(--party-header-outset-right)); margin-top: 0; margin-bottom: clamp(5rem, 10vw, 8rem); box-sizing: border-box; background: transparent; text-align: center; align-items: center; } .party-header--leaves .party-title, .party-header--leaves .party-subtitle { display: block; box-sizing: border-box; max-width: min(70vw, 42rem); width: 100%; min-width: 0; margin-inline: auto; text-align: center; text-wrap: balance; } .party-header--leaves .party-subtitle { margin-top: 0.65rem; } .party-title { font-family: "Instrument Serif", serif; text-transform: uppercase; font-size: clamp(3rem, 8vw, 6rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.02em; margin: 0; color: #1a1a1a; } .party-subtitle { font-family: "Luxurious Script", cursive; font-size: clamp(1.85rem, 4.5vw, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: 0.02em; margin: 0.65rem 0 0; color: #1a1a1a; } .party-lede { font-family: "Aboreto", serif; font-size: clamp(0.72rem, 1.6vw, 0.82rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.75; margin: 1.35rem 0 0; color: rgba(26, 26, 26, 0.68); } .party-layout { display: flex; flex-direction: column; gap: clamp(4rem, 8vw, 6rem); padding: 1rem; box-sizing: border-box; } /* 3-across but narrow: reclaim horizontal space for smaller portraits */ @media (max-width: 48rem) and (min-width: 36.0625rem) { .party-layout { padding-left: max(0.45rem, env(safe-area-inset-left, 0px)); padding-right: max(0.45rem, env(safe-area-inset-right, 0px)); } } .party-row { display: grid; row-gap: clamp(2.25rem, 5.5vw, 4.75rem); column-gap: clamp(0.65rem, 2.8vw, 2.75rem); align-items: start; } .party-row--honors { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Bridesmaids / groomsmen: stacked subrows (3 per row for bridesmaids; 3+3+1 for groomsmen) */ .party-row--party { display: flex; flex-direction: column; gap: clamp(3rem, 6.5vw, 4.75rem); } .party-subrow { display: grid; column-gap: clamp(0.65rem, 2.8vw, 2.75rem); row-gap: clamp(2.25rem, 5.5vw, 4.75rem); align-items: start; width: 100%; } .party-subrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .party-subrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(100%, 52rem); margin-inline: auto; } .party-subrow--1 { display: flex; justify-content: center; width: 100%; } /* Between 1-col (≤36rem) and desktop: stay 3-up; scale circles & gaps via clamp above */ .party-card { margin: 0; display: flex; flex-direction: column; align-items: center; } .party-photo { margin: 0; padding: 0; width: clamp(5.35rem, 26vw, 12rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: transparent; flex-shrink: 0; } .party-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Scroll reveals: ../script.js + [data-home-reveal] (same pattern as Our Story / Registry) */ body.page-party .party-header[data-home-reveal], body.page-party .party-card[data-home-reveal] { opacity: 0; /* Move up into place; stagger (--party-reveal-stagger) delays L→R within each row */ transform: translateY(1.15rem); transition: opacity var(--party-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1), transform var(--party-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } body.page-party .party-header[data-home-reveal].is-visible, body.page-party .party-card[data-home-reveal].is-visible { opacity: 1; transform: translateY(0); will-change: auto; transition-delay: calc( var(--party-reveal-delay) + (var(--party-reveal-stagger, 0) * var(--party-stagger-step)) ); } @media (hover: hover) and (pointer: fine) { body.page-party .party-photo img { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } body.page-party .party-card:hover .party-photo img { transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { body.page-party .party-header[data-home-reveal], body.page-party .party-card[data-home-reveal] { opacity: 1; transform: none; transition: none; will-change: auto; } body.page-party .party-photo img { transition: none; } body.page-party .party-card:hover .party-photo img { transform: none; } } .party-card__body { margin-top: 1.45rem; text-align: center; } .party-name { font-family: "Aboreto", serif; font-size: clamp(0.82rem, 2.15vw, 1.15rem); font-weight: 400; letter-spacing: 0.015em; line-height: 1.25; margin: 0; color: #1a1a1a; } .party-role { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(0.6rem, 1.65vw, 0.8rem); font-weight: 400; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; margin: 0.5rem 0 0; color: rgba(26, 26, 26, 0.5); } /* All-caps Aboreto — same voice as .party-lede / registry lede */ .party-bio { font-family: "Aboreto", serif; font-size: clamp(0.56rem, 0.38rem + 1.15vw, 0.82rem); font-weight: 400; line-height: 1.76; letter-spacing: 0.17em; text-transform: uppercase; margin: 1rem auto 0; max-width: min(22.5rem, 100%); color: rgba(26, 26, 26, 0.7); text-align: center; } /* Narrow viewports: base clamps sit too small (especially all-caps bios). */ @media (max-width: 48rem) { .party-lede { font-size: clamp(0.78rem, 0.68rem + 0.55vw, 0.82rem); letter-spacing: 0.17em; } .party-name { font-size: clamp(0.92rem, 0.82rem + 1.25vw, 1.15rem); } .party-role { font-size: clamp(0.66rem, 0.58rem + 1.05vw, 0.8rem); letter-spacing: 0.19em; } .party-bio { font-size: clamp(0.68rem, 0.5rem + 1.55vw, 0.88rem); letter-spacing: 0.15em; line-height: 1.74; } } @media (max-width: 36rem) { /* Match Where to Stay (.stay-main): avoid the tighter mobile top pad */ .party-main { padding-top: clamp(11rem, 20vh, 20rem); } .party-header { max-width: 100%; margin: 0 auto clamp(3.25rem, 10vw, 5rem); } .party-header--leaves { margin-top: 0; margin-bottom: clamp(3rem, 8vw, 4.5rem); padding-top: clamp(2.75rem, 8vw, 4rem); padding-bottom: clamp(2.75rem, 8vw, 4rem); padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .party-header--leaves .party-title, .party-header--leaves .party-subtitle { max-width: 100%; } .party-layout { gap: clamp(3rem, 8vw, 4.5rem); padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .party-row { row-gap: clamp(2.5rem, 7vw, 3.5rem); } .party-row--honors { grid-template-columns: 1fr; max-width: min(24rem, 100%); margin-inline: auto; } .party-row--party { max-width: min(24rem, 100%); margin-inline: auto; } .party-subrow--2, .party-subrow--3 { grid-template-columns: 1fr; } .party-subrow--3 .party-card:nth-child(3) { grid-column: auto; justify-self: stretch; width: auto; } .party-photo { width: min(16.5rem, 88%); max-width: 100%; } .party-lede { font-size: clamp(0.84rem, 0.74rem + 1.9vw, 0.92rem); } .party-name { font-size: clamp(1.02rem, 0.9rem + 2.75vw, 1.22rem); } .party-role { font-size: clamp(0.74rem, 0.64rem + 1.85vw, 0.88rem); letter-spacing: 0.17em; } .party-bio { font-size: clamp(0.82rem, 0.65rem + 2.85vw, 1.02rem); letter-spacing: 0.12em; line-height: 1.72; max-width: min(26rem, 100%); } }