@charset "UTF-8"; /* =========================================================================== Eloise — a baby shower Cream, cloud-borne, unhurried. Motion is driven entirely by html[data-motion="full" | "calm"], set in before this file loads. There is deliberately no prefers-reduced-motion media query here: it would override ?motion=full, and "calm" is a quieter variant of the site, never an off switch. =========================================================================== */ /* ---------------------------------------------------------------- Tokens */ :root { /* Surface */ --cream: #faf6f0; --cream-2: #f5eee3; --cream-3: #f1e7d9; --sand: #e7dac6; --sand-2: #d9c7ab; --blush: #e7cdc6; --blush-2: #cfa79c; --sage: #cbd6c7; --sage-2: #9fb09a; /* Ink */ --ink: #3a3129; --ink-2: #6d6055; --ink-3: #7a6c5f; /* was #9c8f83 — 2.92:1 on cream, below AA at 11px */ --ink-4: #9a8c7e; /* was #b9ac9f */ /* Hairlines */ --line: rgba(58, 49, 41, .22); --line-soft: rgba(58, 49, 41, .12); /* Type */ --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; /* Rhythm */ --shell: 1180px; --shell-narrow: 760px; --gutter: clamp(1.25rem, 5vw, 4rem); --band: clamp(5.5rem, 13vw, 11rem); /* Motion — FULL */ --ease: cubic-bezier(.22, .61, .28, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --rise: 24px; --rise-sm: 13px; --t-reveal: 1.15s; --t-hover: .55s; --drift-span: 1; --drift-time: 1; --hover-lift: -5px; --hero-in: 1.45s; --loader-total: 2.25s; --glow: 0 22px 50px -22px rgba(150, 112, 78, .34); --glow-soft: 0 14px 34px -20px rgba(150, 112, 78, .26); } /* Motion — CALM. Less travel, slower drift, softer glow. Everything still moves; nothing is switched off. */ html[data-motion="calm"] { --rise: 9px; --rise-sm: 5px; --t-reveal: .95s; --t-hover: .45s; --drift-span: .42; --drift-time: 1.6; --hover-lift: -2px; --hero-in: 1.2s; --loader-total: 1.95s; } /* ---------------------------------------------------------------- Base */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.75; letter-spacing: .008em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 300; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } img, svg { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } :focus-visible { outline: 2px solid var(--ink-2); outline-offset: 4px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 300; transform: translate3d(0, -180%, 0); background: var(--cream); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.4rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: transform .4s var(--ease); } .skip-link:focus-visible { transform: none; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: var(--shell-narrow); } /* ---------------------------------------------------------------- Preloader */ .preloader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--cream); pointer-events: none; animation: pre-veil var(--loader-total) var(--ease-soft) forwards; } .preloader--gone { display: none; } @keyframes pre-veil { 0%, 74% { opacity: 1; } 100% { opacity: 0; } } .preloader__stage { position: relative; width: min(360px, 68vw); text-align: center; } .preloader__cloud { display: block; width: 100%; height: auto; overflow: visible; filter: blur(6px); opacity: 0; transform: translate3d(calc(-70px * var(--drift-span)), 0, 0) scale(.94); animation: pre-cloud calc(var(--loader-total) * .95) var(--ease-soft) forwards; } @keyframes pre-cloud { 0% { opacity: 0; transform: translate3d(calc(-70px * var(--drift-span)), 6px, 0) scale(.94); } 32% { opacity: 1; } 62% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } 100% { opacity: 0; transform: translate3d(calc(56px * var(--drift-span)), -10px, 0) scale(1.09); } } .preloader__word { margin: -1.6em 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1; color: var(--ink); opacity: 0; animation: pre-word calc(var(--loader-total) * .95) var(--ease-soft) forwards; } @keyframes pre-word { 0% { opacity: 0; transform: translate3d(0, calc(.35 * var(--rise)), 0); } 40% { opacity: 1; transform: none; } 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, calc(-.3 * var(--rise)), 0); } } .preloader__rule { display: block; width: 76px; height: 1px; margin: 1.6rem auto 0; background: var(--ink-4); transform: scaleX(0); transform-origin: 50% 50%; opacity: 0; animation: pre-rule calc(var(--loader-total) * .95) var(--ease) forwards; } @keyframes pre-rule { 0% { transform: scaleX(0); opacity: 0; } 46% { transform: scaleX(1); opacity: .85; } 76% { transform: scaleX(1); opacity: .85; } 100% { transform: scaleX(.2); opacity: 0; } } /* ---------------------------------------------------------------- Sky */ .sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint; } .sky__wash { position: absolute; inset: -10%; background: radial-gradient(120% 78% at 50% -8%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%), radial-gradient(70% 52% at 84% 24%, rgba(231, 205, 198, .34) 0%, rgba(231, 205, 198, 0) 70%), radial-gradient(66% 50% at 12% 68%, rgba(203, 214, 199, .30) 0%, rgba(203, 214, 199, 0) 72%), radial-gradient(90% 60% at 50% 108%, rgba(231, 218, 198, .42) 0%, rgba(231, 218, 198, 0) 66%); } .cloud-layer { position: absolute; inset: 0; will-change: transform; } .cloud { position: absolute; animation: drift var(--dur, 90s) var(--ease-soft) infinite alternate; animation-delay: var(--delay, 0s); will-change: transform; } .cloud svg { display: block; width: 100%; height: auto; overflow: visible; fill: url(#g-cloud); } @keyframes drift { to { transform: translate3d( calc(var(--span, 80px) * var(--drift-span)), calc(var(--lift, -16px) * var(--drift-span)), 0); } } /* Far — big, pale, nearly still */ .cloud--1 { top: 6%; left: -12%; width: 52vw; opacity: .50; filter: blur(13px); --span: 96px; --lift: -14px; --dur: 118s; --delay: -22s; } .cloud--2 { top: 26%; left: 58%; width: 46vw; opacity: .42; filter: blur(15px); --span: -84px; --lift: -20px; --dur: 134s; --delay: -60s; } .cloud--3 { top: 74%; left: -6%; width: 58vw; opacity: .38; filter: blur(16px); --span: 74px; --lift: -12px; --dur: 146s; --delay: -95s; } /* Mid */ .cloud--4 { top: 12%; left: 62%; width: 30vw; opacity: .62; filter: blur(8px); --span: -70px; --lift: -22px; --dur: 92s; --delay: -14s; } .cloud--5 { top: 52%; left: -10%; width: 38vw; opacity: .55; filter: blur(10px); --span: 86px; --lift: -18px; --dur: 106s; --delay: -48s; } .cloud--6 { top: 84%; left: 56%; width: 34vw; opacity: .48; filter: blur(11px); --span: -66px; --lift: -24px; --dur: 98s; --delay: -70s; } .cloud--5 svg { fill: url(#g-cloud-blush); } .cloud--6 svg { fill: url(#g-cloud-sage); } /* Near — smaller, crisper, fastest */ .cloud--7 { top: 40%; left: 22%; width: 24vw; opacity: .70; filter: blur(5px); --span: 62px; --lift: -28px; --dur: 74s; --delay: -30s; } .cloud--8 { top: 66%; left: 64%; width: 30vw; opacity: .52; filter: blur(7px); --span: -58px; --lift: -20px; --dur: 84s; --delay: -55s; } /* ---------------------------------------------------------------- Masthead */ .masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 246, 240, 0); border-bottom: 1px solid transparent; transition: background .7s var(--ease-soft), border-color .7s var(--ease-soft), backdrop-filter .7s var(--ease-soft); } .masthead.is-stuck { background: rgba(250, 246, 240, .78); border-bottom-color: var(--line-soft); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); } .masthead__inner { max-width: var(--shell); margin-inline: auto; padding: clamp(.9rem, 2vw, 1.4rem) var(--gutter); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } .mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); opacity: 0; animation: fade-up 1.2s var(--ease) calc(var(--hero-in) - .35s) forwards; } .mark__glyph { width: 34px; height: auto; color: var(--ink-3); transition: color var(--t-hover) var(--ease); } .mark__word { font-family: var(--serif); font-style: italic; font-size: 1.35rem; letter-spacing: .01em; } .mark:hover .mark__glyph { color: var(--blush-2); } .nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); margin-left: auto; opacity: 0; animation: fade-up 1.2s var(--ease) calc(var(--hero-in) - .25s) forwards; } .nav a { position: relative; text-decoration: none; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding-block: .35rem; transition: color var(--t-hover) var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; opacity: .5; transition: transform .6s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); } .nav a.is-current { color: var(--ink); } @keyframes fade-up { from { opacity: 0; transform: translate3d(0, calc(.5 * var(--rise)), 0); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- Pills */ .pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .5); padding: .78em 1.9em; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); cursor: pointer; transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); } .pill:hover { transform: translate3d(0, var(--hover-lift), 0); box-shadow: var(--glow); background: rgba(255, 255, 255, .82); border-color: rgba(207, 167, 156, .55); } .pill--head { flex: 0 0 auto; opacity: 0; animation: fade-up 1.2s var(--ease) calc(var(--hero-in) - .15s) forwards; } .ghost-btn { background: none; border: 0; border-bottom: 1px solid var(--line); padding: .35rem 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); } .ghost-btn:hover { color: var(--ink); border-bottom-color: var(--ink-3); } /* ---------------------------------------------------------------- Type */ .eyebrow { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.4rem; } .section-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.15rem, 1.2rem + 4.2vw, 4.1rem); line-height: 1.08; letter-spacing: -.005em; margin-bottom: 1.4rem; } .section-title em { font-style: italic; color: var(--ink-2); } .section-note { max-width: 46ch; color: var(--ink-2); font-size: 1rem; } .section-head { margin-bottom: clamp(3rem, 7vw, 5.5rem); } .section-head--center { text-align: center; } .section-head--center .section-note { margin-inline: auto; } /* Scroll reveal — only armed when JS is present, so a failed script never leaves the page blank. */ html.js [data-reveal] { opacity: 0; transform: translate3d(0, var(--rise), 0); transition: opacity var(--t-reveal) var(--ease) var(--d, 0s), transform var(--t-reveal) var(--ease) var(--d, 0s); } html.js [data-reveal].is-in { opacity: 1; transform: none; } /* ---------------------------------------------------------------- Main */ main { position: relative; z-index: 1; } section { position: relative; } /* ---------------------------------------------------------------- Hero */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(6rem, 12vh, 8rem); overflow: hidden; } .hero__halo { position: absolute; left: 50%; top: 46%; width: min(1000px, 130vw); aspect-ratio: 1; transform: translate3d(-50%, -50%, 0); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .92) 0%, rgba(255, 253, 248, .5) 42%, rgba(255, 255, 255, 0) 68%); opacity: 0; animation: halo-in 2.6s var(--ease-soft) calc(var(--hero-in) - .6s) forwards; pointer-events: none; } @keyframes halo-in { to { opacity: 1; } } .hero__arch { position: absolute; left: 50%; bottom: 0; width: min(560px, 88vw); height: min(78vh, 660px); transform: translate3d(-50%, 0, 0); color: var(--ink-4); opacity: 0; pointer-events: none; animation: arch-in 2.4s var(--ease) calc(var(--hero-in) - .5s) forwards; } @keyframes arch-in { to { opacity: .5; } } .hero__arch path { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: arch-draw 3.4s var(--ease) calc(var(--hero-in) - .3s) forwards; } .hero__arch path:nth-child(2) { animation-delay: calc(var(--hero-in) - .05s); } @keyframes arch-draw { to { stroke-dashoffset: 0; } } .hero__body { position: relative; z-index: 2; max-width: 42rem; } .hero__eyebrow { opacity: 0; animation: fade-up 1.3s var(--ease) calc(var(--hero-in) - .1s) forwards; } .hero__name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(4.4rem, 1.5rem + 15vw, 11rem); line-height: .95; letter-spacing: -.015em; margin: 0 0 .28em; } .hero__name span { display: inline-block; opacity: 0; transform: translate3d(0, var(--rise), 0); animation: letter-in 1.7s var(--ease) forwards; animation-delay: calc(var(--hero-in) + var(--i) * .09s); } @keyframes letter-in { to { opacity: 1; transform: none; } } .hero__tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem); color: var(--ink-2); line-height: 1.5; margin-bottom: 0; opacity: 0; animation: fade-up 1.4s var(--ease) calc(var(--hero-in) + .65s) forwards; } .hero__rule { margin: clamp(2rem, 5vw, 3rem) auto; width: 100%; max-width: 300px; opacity: 0; animation: fade-up 1.2s var(--ease) calc(var(--hero-in) + .8s) forwards; } .hero__rule span { display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--ink-4), transparent); transform: scaleX(0); animation: rule-draw 1.8s var(--ease) calc(var(--hero-in) + .85s) forwards; } @keyframes rule-draw { to { transform: scaleX(1); } } .hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.75rem, 6vw, 4.5rem); margin: 0 0 clamp(2.5rem, 6vw, 3.5rem); opacity: 0; animation: fade-up 1.4s var(--ease) calc(var(--hero-in) + .95s) forwards; } .hero__facts dt { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; } .hero__facts dd { margin: 0; font-family: var(--serif); font-size: clamp(1rem, .92rem + .35vw, 1.2rem); line-height: 1.55; color: var(--ink); } .pill--hero { opacity: 0; animation: fade-up 1.4s var(--ease) calc(var(--hero-in) + 1.1s) forwards; } .scroll-cue { position: absolute; left: 50%; bottom: clamp(1.75rem, 4vh, 3rem); transform: translate3d(-50%, 0, 0); display: flex; flex-direction: column; align-items: center; gap: .85rem; text-decoration: none; color: var(--ink-3); opacity: 0; animation: fade-up 1.4s var(--ease) calc(var(--hero-in) + 1.3s) forwards; z-index: 2; } .scroll-cue__label { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; } .scroll-cue__line { display: block; width: 1px; height: 52px; background: linear-gradient(180deg, var(--ink-4), transparent); transform-origin: 50% 0; animation: cue-breathe 4.6s var(--ease-soft) infinite; } @keyframes cue-breathe { 0%, 100% { transform: scaleY(.55); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } } .scroll-cue:hover { color: var(--ink-2); } /* ---------------------------------------------------------------- Note */ .note { padding-block: var(--band); } .note__body { max-width: 40rem; font-size: clamp(1rem, .95rem + .25vw, 1.1rem); color: var(--ink-2); } .note__lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem); line-height: 1.5; color: var(--ink); margin-bottom: 1.6rem; } .signature { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); max-width: 40rem; } .signature__names { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.2; color: var(--ink); } .signature__sub { display: block; margin-top: .5rem; font-size: .8rem; letter-spacing: .04em; color: var(--ink-3); } /* ---------------------------------------------------------------- Agenda */ .day { padding-block: var(--band); } .agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .agenda__row { display: grid; grid-template-columns: minmax(4.5rem, 7rem) 3.25rem 1fr; align-items: baseline; gap: clamp(.75rem, 2vw, 1.5rem); padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(.5rem, 2vw, 1.5rem); border-bottom: 1px solid var(--line); border-radius: 18px; transition: background-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .agenda__row:hover { background: rgba(255, 255, 255, .55); transform: translate3d(0, var(--hover-lift), 0); box-shadow: var(--glow-soft); } .agenda__time { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem); line-height: 1; color: var(--ink-2); font-variant-numeric: lining-nums; } .agenda__mark { display: block; align-self: center; color: var(--sand-2); } .agenda__mark svg { display: block; width: 100%; height: auto; fill: currentColor; opacity: .8; transition: transform var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease); } .agenda__row:hover .agenda__mark svg { transform: translate3d(5px, 0, 0); opacity: 1; } .agenda__text { display: block; } .agenda__title { display: block; font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.3; color: var(--ink); margin-bottom: .35rem; } .agenda__desc { display: block; font-size: .92rem; line-height: 1.7; color: var(--ink-3); max-width: 44ch; } .day__aside { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .42); max-width: 46rem; font-size: .92rem; color: var(--ink-2); } .day__aside p { margin: 0; } .day__aside-k { display: inline-block; min-width: 6.5rem; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); } /* ---------------------------------------------------------------- Registry */ .registry { padding-block: var(--band); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); } .card { display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 28px; background: rgba(255, 255, 255, .5); transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); } .card:hover { transform: translate3d(0, var(--hover-lift), 0); box-shadow: var(--glow); background: rgba(255, 255, 255, .78); border-color: rgba(217, 199, 171, .8); } .card__plate { width: 56px; height: 68px; display: grid; place-items: center; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: 50% 50% 7px 7px / 42% 42% 4% 4%; background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(231, 218, 198, .5)); color: var(--ink-2); transition: color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); } .card__plate svg { width: 34px; height: 34px; display: block; } .card:hover .card__plate { color: var(--blush-2); transform: translate3d(0, -2px, 0); } .card__name { font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + .5vw, 1.6rem); line-height: 1.25; margin-bottom: .3rem; } .card__kind { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; } .card__copy { font-size: .9rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 1.6rem; } .card__link { margin-top: auto; align-self: flex-start; text-decoration: none; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .35rem; transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); } .card__arrow { display: inline-block; margin-left: .5em; transition: transform var(--t-hover) var(--ease); } .card__link:hover { border-bottom-color: var(--blush-2); color: var(--blush-2); } .card__link:hover .card__arrow { transform: translate3d(4px, 0, 0); } .registry__foot { margin-top: clamp(2rem, 5vw, 3rem); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--ink-2); max-width: 40rem; } /* ---------------------------------------------------------------- Gallery */ .gallery { padding-block: var(--band); } .plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem); } .plate { margin: 0; } .plate__frame { position: relative; aspect-ratio: 26 / 34; overflow: hidden; border: 1px solid var(--line); border-radius: 50% 50% 12px 12px / 34% 34% 2% 2%; background: var(--cream-2); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; transition: box-shadow var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); } .plate:hover .plate__frame { transform: translate3d(0, var(--hover-lift), 0); box-shadow: var(--glow); } .plate__art { display: block; width: 100%; height: 100%; transition: transform 1.1s var(--ease); } .plate:hover .plate__art { transform: scale(1.035); } .plate__cap { display: block; margin-top: 1.15rem; text-align: center; } .plate__num { display: block; font-size: .6rem; letter-spacing: .3em; color: var(--ink-4); margin-bottom: .4rem; } .plate__title { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.3; color: var(--ink); } .plate__sub { display: block; margin-top: .2rem; font-size: .76rem; color: var(--ink-3); } /* Plate artwork motion — ambient, kept in both modes */ .p1-sun { transform-box: fill-box; transform-origin: 50% 50%; animation: sun-breathe 16s var(--ease-soft) infinite; } @keyframes sun-breathe { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.045); opacity: .95; } } .p1-cloud { animation: plate-drift 34s var(--ease-soft) infinite alternate; } .p1-cloud--b { animation-duration: 46s; animation-delay: -12s; } @keyframes plate-drift { to { transform: translateX(calc(16px * var(--drift-span))); } } .p2-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: ring-turn 150s linear infinite; } @keyframes ring-turn { to { transform: rotate(360deg); } } .p2-letter { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 116px; fill: var(--ink); } .p2-year { font-family: var(--sans); font-size: 11px; letter-spacing: 4px; fill: #a08a72; } .p3-swing { transform-box: fill-box; transform-origin: 50% 0%; animation: swing 9s var(--ease-soft) infinite alternate; } .p3-swing--b { animation-duration: 11s; animation-delay: -3s; } .p3-swing--c { animation-duration: 8s; animation-delay: -5s; } @keyframes swing { from { transform: rotate(calc(-1.6deg * var(--drift-span))); } to { transform: rotate(calc(1.6deg * var(--drift-span))); } } .p4-stems, .p4-heads { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 13s var(--ease-soft) infinite alternate; } .p4-heads { animation-duration: 13s; } @keyframes sway { from { transform: rotate(calc(-.9deg * var(--drift-span))); } to { transform: rotate(calc(.9deg * var(--drift-span))); } } .tw { animation: twinkle 6.5s var(--ease-soft) infinite; } .tw--2 { animation-duration: 8.5s; animation-delay: -2s; } .tw--3 { animation-duration: 7.4s; animation-delay: -4s; } @keyframes twinkle { 0%, 100% { opacity: .28; } 50% { opacity: .85; } } .p5-drift { animation: plate-drift 40s var(--ease-soft) infinite alternate; } .p6-path { stroke-dasharray: 340; stroke-dashoffset: 340; animation: trace 4.5s var(--ease) forwards; } html.js .p6-path { animation-play-state: paused; } html.js .plate.is-in .p6-path { animation-play-state: running; } @keyframes trace { to { stroke-dashoffset: 0; } } .p6-dots circle { transform-box: fill-box; transform-origin: 50% 50%; animation: dot-pulse 7s var(--ease-soft) infinite alternate; } .p6-dots circle:nth-child(2n) { animation-duration: 9s; animation-delay: -2s; } .p6-dots circle:nth-child(3n) { animation-duration: 8s; animation-delay: -4s; } @keyframes dot-pulse { from { transform: scale(.9); opacity: .75; } to { transform: scale(1.1); opacity: 1; } } /* ---------------------------------------------------------------- RSVP */ .rsvp { padding-block: var(--band); } .rsvp__panel { position: relative; border: 1px solid var(--line); border-radius: clamp(26px, 5vw, 40px); background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: clamp(1.75rem, 5vw, 3.5rem); box-shadow: var(--glow-soft); } .form__intro { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); color: var(--ink-2); margin-bottom: 2.25rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line-soft); } .field { margin-bottom: 1.75rem; border: 0; padding: 0; } .field--choice { margin-bottom: 2rem; } .field__label { display: block; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .7rem; padding: 0; } .field__opt { text-transform: none; letter-spacing: .04em; font-size: .72rem; color: var(--ink-4); margin-left: .5em; } .field__input { width: 100%; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1.05rem; font-family: var(--sans); font-size: .98rem; font-weight: 300; color: var(--ink); transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .field__input::placeholder { color: var(--ink-4); } .field__input:hover { border-color: var(--sand-2); } .field__input:focus { outline: none; border-color: var(--blush-2); background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 4px rgba(231, 205, 198, .35); } .field__input:focus-visible { outline: none; } .field__area { resize: vertical; min-height: 6rem; line-height: 1.65; } .select-wrap { position: relative; } .field__select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; } .select-wrap__chev { position: absolute; right: 1.15rem; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; } .choices { display: grid; gap: .75rem; } @media (min-width: 620px) { .choices { grid-template-columns: 1fr 1fr; } } .choice { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding: 1.05rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .choice:hover { border-color: var(--sand-2); background: rgba(255, 255, 255, .72); transform: translate3d(0, var(--hover-lift), 0); box-shadow: var(--glow-soft); } .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .choice__dot { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .34rem; border: 1px solid var(--ink-4); border-radius: 50%; position: relative; transition: border-color var(--t-hover) var(--ease); } .choice__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blush-2); transform: scale(0); transition: transform .45s var(--ease); } .choice input:checked ~ .choice__dot { border-color: var(--blush-2); } .choice input:checked ~ .choice__dot::after { transform: scale(1); } .choice:has(input:checked) { border-color: var(--blush-2); background: rgba(255, 255, 255, .85); } .choice input:focus-visible ~ .choice__dot { outline: 2px solid var(--ink-2); outline-offset: 3px; } .choice__text { display: block; } .choice__title { display: block; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; color: var(--ink); } .choice__sub { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .1rem; } .field__error { margin: .6rem 0 0; font-size: .78rem; color: #a8695c; letter-spacing: .02em; animation: err-in .45s var(--ease); } @keyframes err-in { from { opacity: 0; transform: translate3d(0, calc(-.35 * var(--rise)), 0); } to { opacity: 1; transform: none; } } .field__input[aria-invalid="true"] { border-color: #c48d80; } .pill--submit { margin-top: .5rem; background: rgba(255, 255, 255, .72); border-color: var(--sand-2); } .pill--submit:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; } .form__status { margin: 1rem 0 0; min-height: 1.2em; font-size: .82rem; color: #a8695c; } /* Confirmation */ .done { text-align: center; padding-block: clamp(.5rem, 2vw, 1.5rem); } .done[hidden] { display: none; } .done__cloud { display: block; width: min(240px, 62%); height: auto; margin: 0 auto 1.25rem; overflow: visible; filter: drop-shadow(0 14px 26px rgba(150, 112, 78, .16)); } .done__tick { stroke-dasharray: 96; stroke-dashoffset: 96; } .done.is-in .done__cloud { animation: done-float 7s var(--ease-soft) infinite alternate; } @keyframes done-float { to { transform: translate3d(0, calc(-9px * var(--drift-span)), 0); } } .done.is-in .done__tick { animation: tick-draw 1s var(--ease) .35s forwards; } @keyframes tick-draw { to { stroke-dashoffset: 0; } } .done__eyebrow { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; } .done__title { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.15; margin-bottom: 1rem; } .done__copy { max-width: 34rem; margin-inline: auto; color: var(--ink-2); } .done__meta { font-size: .78rem; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 1.75rem; } .done > * { opacity: 0; transform: translate3d(0, var(--rise-sm), 0); } .done.is-in > * { animation: done-in .95s var(--ease) forwards; } .done.is-in > *:nth-child(1) { animation-delay: .05s; } .done.is-in > *:nth-child(2) { animation-delay: .16s; } .done.is-in > *:nth-child(3) { animation-delay: .26s; } .done.is-in > *:nth-child(4) { animation-delay: .36s; } .done.is-in > *:nth-child(5) { animation-delay: .46s; } .done.is-in > *:nth-child(6) { animation-delay: .56s; } @keyframes done-in { to { opacity: 1; transform: none; } } .form.is-out { animation: form-out .5s var(--ease) forwards; pointer-events: none; } @keyframes form-out { to { opacity: 0; transform: translate3d(0, calc(-.4 * var(--rise)), 0); } } /* ---------------------------------------------------------------- Footer */ .foot { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line); text-align: center; background: linear-gradient(180deg, rgba(250, 246, 240, 0), rgba(245, 238, 227, .8)); } .foot__mark { display: block; width: 110px; height: auto; margin: 0 auto 1.5rem; color: var(--ink-4); } .foot__line { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); margin-bottom: .35rem; } .foot__line em { font-style: italic; } .foot__sub { font-size: .8rem; color: var(--ink-3); margin-bottom: 1.5rem; } .foot__fine { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-4); } /* ---------------------------------------------------------------- 768 and under */ @media (max-width: 900px) { .nav { display: none; } .pill--head { margin-left: auto; } } @media (max-width: 768px) { .agenda__row { grid-template-columns: minmax(3.6rem, auto) 1fr; align-items: start; } .agenda__mark { display: none; } .hero__arch { width: min(440px, 92vw); } } /* ---------------------------------------------------------------- 360 */ @media (max-width: 460px) { :root { --band: 4.5rem; } .masthead__inner { padding-block: .85rem; } .mark__glyph { width: 28px; } .mark__word { font-size: 1.15rem; } .pill { padding: .7em 1.3em; font-size: .66rem; letter-spacing: .16em; } .hero { padding-top: 6.5rem; } .hero__facts { gap: 1.5rem; flex-direction: column; } .hero__tagline { font-size: 1.02rem; } .agenda__row { grid-template-columns: 1fr; gap: .35rem; padding-inline: .25rem; } .agenda__time { font-size: 1.3rem; } .day__aside-k { display: block; margin-bottom: .1rem; } .plates { grid-template-columns: 1fr; } .plate__frame { max-width: 300px; margin-inline: auto; } .plate__cap { max-width: 300px; margin-inline: auto; } .rsvp__panel { padding: 1.4rem 1.15rem; border-radius: 22px; } .card { padding: 1.35rem; border-radius: 22px; } .field__input { padding: .78rem .9rem; } .choice { padding: .9rem 1rem; } } /* Wide */ @media (min-width: 1280px) { .plates { grid-template-columns: repeat(3, 1fr); } .cards { grid-template-columns: repeat(4, 1fr); } }