/* ------------------------------------------------------------- Jamie & Jeff — 10.10.2026 Palette pulled from the golden-hour engagement photos: cream sand, sage olive, warm ink, dusty blush, seafoam sky -------------------------------------------------------------- */ :root { --cream: #f3ecdd; --cream-2: #ece1c9; --sand: #d9c7a4; --blush: #d9a98a; --rose: #b87a63; --olive: #7f8a6b; --olive-deep: #566049; --ink: #3a2e24; --ink-soft: #6b5a4a; --font-display: "Italiana", "Cormorant Garamond", Georgia, serif; --font-body: "Cormorant Garamond", Georgia, serif; --font-script: "Pinyon Script", "Italiana", cursive; --maxw: 1180px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip` instead of `hidden` so that position: sticky descendants (the polaroid viewport) still pin correctly. */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* RSVP feature flag — see the matching comment on in index.html. Hides every link to #rsvp (nav CTA + hero CTA) and the section itself. */ body[data-rsvp="disabled"] a[href="#rsvp"], body[data-rsvp="disabled"] #rsvp { display: none !important; } /* ------------------------- Typography ------------------------- */ .display { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.08; letter-spacing: 0.005em; margin: 0 0 1.2em; color: var(--ink); } .display em { font-family: var(--font-script); font-style: normal; color: var(--rose); font-weight: 400; } .display .thin { color: var(--ink-soft); font-style: normal; } .display-sm { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.15; margin: 0 0 .6em; } .display-center { text-align: center; } .kicker { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.38em; font-size: 0.78rem; color: var(--olive-deep); margin: 0 0 1.2em; } .kicker-center { text-align: center; } .lede { font-size: 1.18rem; line-height: 1.7; color: var(--ink-soft); max-width: 54ch; font-style: italic; } .lede-center { margin-inline: auto; text-align: center; } .lede-sm { font-size: 1rem; color: var(--ink-soft); font-style: italic; } /* -------------------------- Buttons --------------------------- */ .btn { display: inline-block; padding: 0.95em 2.4em; font-family: var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.85rem; border: 1px solid currentColor; color: var(--ink); background: transparent; transition: background .35s ease, color .35s ease, transform .35s ease; border-radius: 999px; cursor: pointer; } .btn:hover { background: var(--ink); color: var(--cream); transform: translateY(-1px); } .btn-solid { background: var(--ink); color: var(--cream); } .btn-solid:hover { background: var(--olive-deep); } /* -------------------------- Navigation ------------------------ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 4vw, 48px); background: linear-gradient(to bottom, rgba(243,236,221,0.85), rgba(243,236,221,0)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .4s ease, box-shadow .4s ease; } .nav.scrolled { background: rgba(243,236,221,0.92); box-shadow: 0 1px 0 rgba(58,46,36,0.08); } .nav-logo { display: inline-flex; color: var(--ink); } .monogram { width: 76px; height: 40px; color: var(--ink); } .monogram-lg { width: 120px; height: 64px; } .mg-letter { font-family: var(--font-display); font-size: 36px; fill: currentColor; text-anchor: middle; dominant-baseline: alphabetic; } .mg-amp { font-family: var(--font-script); font-size: 34px; fill: var(--rose); text-anchor: middle; dominant-baseline: alphabetic; } .nav-links { display: flex; gap: clamp(14px, 2.5vw, 34px); align-items: center; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.24em; text-transform: uppercase; } .nav-links a { position: relative; color: var(--ink); padding: 6px 2px; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .4s ease; } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { border: 1px solid var(--ink); border-radius: 999px; padding: 8px 20px !important; } .nav-cta::after { display: none; } .nav-cta:hover { background: var(--ink); color: var(--cream); } @media (max-width: 720px) { .nav-links { gap: 14px; font-size: 0.75rem; letter-spacing: 0.18em; } .nav-links a:not(.nav-cta) { display: none; } } /* ---------------------------- Hero ---------------------------- */ .hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; } .hero-image { position: absolute; inset: 0; background-size: cover; background-position: center 40%; filter: saturate(0.95) brightness(0.92); transform: scale(1.06); z-index: -2; } .hero-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(243,236,221,0.05), rgba(58,46,36,0.55) 85%), linear-gradient(to bottom, rgba(243,236,221,0.25), rgba(58,46,36,0.45) 80%); z-index: -1; } .hero-inner { text-align: center; color: var(--cream); padding: 0 24px; max-width: 1000px; } .hero-eyebrow { font-family: var(--font-display); letter-spacing: 0.32em; text-transform: uppercase; font-size: .8rem; opacity: 0.9; margin: 0 0 2.4em; } .hero-names { font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 13vw, 11rem); line-height: 0.92; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 28px); } .hero-first, .hero-last { display: inline-block; animation: riseIn 1.2s cubic-bezier(.22,.8,.2,1) both; } .hero-last { animation-delay: .25s; } .hero-amp { font-family: var(--font-script); font-size: clamp(4.5rem, 12vw, 10rem); color: var(--blush); line-height: 1; transform: translateY(0.08em); animation: fadeIn 1.4s ease .45s both; } .hero-meta { margin: 1.6em auto 2.2em; font-family: var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; font-size: clamp(.78rem, 1.1vw, .95rem); display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .6em 1em; animation: fadeIn 1.4s ease .8s both; } .hero-meta .dot { color: var(--blush); opacity: .85; } .hero .btn { color: var(--cream); animation: fadeIn 1.4s ease 1s both; } .hero .btn:hover { background: var(--cream); color: var(--ink); } .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--cream); font-family: var(--font-display); font-size: .7rem; letter-spacing: 0.3em; text-transform: uppercase; display: grid; gap: 8px; justify-items: center; opacity: .75; } .hero-scroll .line { width: 1px; height: 48px; background: currentColor; animation: scrollCue 2.2s ease-in-out infinite; transform-origin: top; } @keyframes riseIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollCue { 0%,100% { transform: scaleY(0.2); opacity: .3; } 50% { transform: scaleY(1); opacity: .9; } } /* --------------------------- Story ---------------------------- */ .story { padding: clamp(90px, 14vh, 160px) 24px; background: var(--cream); } .story-inner { max-width: 860px; margin: 0 auto; text-align: center; } .story .kicker { display: inline-block; } .story .display { margin-bottom: .9em; } .story .lede { margin: 0 auto; text-align: center; } /* --------------------- Polaroid stack section ------------------ */ .stack-section { position: relative; background: linear-gradient(to bottom, var(--cream), var(--cream-2)); padding: 60px 24px 24px; } .stack-section .kicker-center { margin-top: 20px; } .stack-section .display-center { max-width: 720px; margin-inline: auto; } .stack-hint { text-align: center; font-style: italic; color: var(--ink-soft); margin: -1em auto 2em; } .stack-track { position: relative; /* ~60vh of scroll per polaroid plus one sticky viewport */ height: calc(60vh * 14 + 100vh); } .stack-viewport { position: sticky; top: 0; height: 100vh; width: 100%; display: grid; place-items: center; overflow: hidden; } .polaroid { position: absolute; top: 50%; left: 50%; /* Width and aspect give a true polaroid feel */ width: clamp(260px, 30vw, 400px); padding: 14px 14px 54px; background: #fbf6eb; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px -14px rgba(58,46,36,0.35), 0 6px 14px -6px rgba(58,46,36,0.25); border-radius: 2px; margin: 0; /* Each polaroid flies in from below and lands at its (--tx, --ty) slot */ --rot: 0deg; --tx: 0vw; --ty: 0vh; --p: 0; /* progress 0 -> 1 driven by JS */ transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--p)), calc(110vh * (1 - var(--p)) + var(--ty) * var(--p))) rotate(calc(var(--rot) * var(--p))) scale(calc(0.85 + 0.15 * var(--p))); opacity: var(--p); transition: box-shadow .35s ease; cursor: zoom-in; will-change: transform, opacity; } .polaroid:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 26px 50px -14px rgba(58,46,36,0.45), 0 10px 20px -8px rgba(58,46,36,0.3); } .polaroid-photo { aspect-ratio: 3 / 4; width: 100%; background-size: cover; background-position: center; background-color: #e8dcc4; filter: saturate(1) contrast(1.02); } .polaroid figcaption { margin-top: 14px; text-align: center; font-family: "Caveat", "Pinyon Script", var(--font-script); font-size: 1.2rem; color: var(--ink-soft); letter-spacing: 0.02em; } /* We want the handwriting feeling for captions even without Caveat loaded */ .polaroid figcaption { font-family: var(--font-script); font-size: 1.35rem; } @media (max-width: 720px) { .polaroid { width: clamp(220px, 66vw, 280px); padding: 12px 12px 42px; } .stack-track { height: calc(55vh * 14 + 100vh); } } /* --------------------------- Details --------------------------- */ .details { padding: clamp(90px, 14vh, 150px) 24px; background: var(--cream-2); } .details-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; } .detail-card { text-align: center; } .detail-card-accent { color: var(--olive-deep); } .mini-mark { width: 96px; height: 96px; } @media (max-width: 820px) { .details-grid { grid-template-columns: 1fr; } .detail-card-accent { order: -1; } } /* -------------------------- Schedule --------------------------- */ .schedule { padding: clamp(90px, 14vh, 150px) 24px; background: var(--cream); text-align: center; } .timeline { list-style: none; padding: 0; margin: 2em auto 0; max-width: 720px; display: grid; gap: 28px; } .timeline li { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(58,46,36,0.12); } .timeline li:last-child { border-bottom: 1px solid rgba(58,46,36,0.12); } .timeline .time { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--rose); letter-spacing: 0.02em; } .timeline .line { display: none; } .timeline .what { text-align: left; font-family: var(--font-body); font-size: 1.15rem; color: var(--ink); } .timeline .what strong { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-size: .95rem; } .timeline .what em { color: var(--ink-soft); font-size: 1rem; } /* ---------------------------- RSVP ----------------------------- */ .rsvp { position: relative; padding: clamp(110px, 16vh, 180px) 24px; background: var(--olive-deep); color: var(--cream); text-align: center; overflow: hidden; } .rsvp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(243,236,221,0.08), transparent 40%), radial-gradient(circle at 80% 70%, rgba(217,169,138,0.15), transparent 45%); pointer-events: none; } .rsvp-inner { position: relative; max-width: 760px; margin: 0 auto; } .rsvp-mark { width: 160px; height: 160px; color: var(--cream); opacity: .85; margin-bottom: 8px; } .rsvp-mark .mg-amp { fill: var(--blush); } .rsvp .display, .rsvp .lede { color: var(--cream); } .rsvp .lede { opacity: .85; } .rsvp .btn-solid { background: var(--cream); color: var(--ink); margin-top: .6em; } .rsvp .btn-solid:hover { background: var(--blush); color: var(--ink); } .hashtag { margin-top: 2.6em; font-family: var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; font-size: .85rem; opacity: .7; } /* ---------------------------- Closer --------------------------- */ .closer { position: relative; min-height: 92vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; } .closer-image { position: absolute; inset: 0; background-size: cover; background-position: center 40%; filter: saturate(0.98); transform: scale(1.04); z-index: -2; } .closer-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(58,46,36,0.35), rgba(58,46,36,0.55)), radial-gradient(ellipse at 50% 45%, rgba(243,236,221,0.08), transparent 55%); z-index: -1; } .closer-inner { text-align: center; color: var(--cream); padding: 0 24px; max-width: 1100px; } .closer-kicker { font-family: var(--font-display); letter-spacing: 0.34em; text-transform: uppercase; font-size: .78rem; opacity: .9; margin: 0 0 1.6em; } .closer-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 10vw, 8rem); line-height: 0.95; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 24px); } .closer-amp { font-family: var(--font-script); color: var(--blush); font-size: clamp(3.4rem, 10vw, 8.4rem); line-height: 1; transform: translateY(0.06em); } .closer-meta { margin: 2em auto 0; font-family: var(--font-display); letter-spacing: 0.28em; text-transform: uppercase; font-size: clamp(.78rem, 1.1vw, .95rem); opacity: .9; } /* ---------------------------- Footer --------------------------- */ .footer { padding: 70px 24px 90px; text-align: center; background: var(--cream); color: var(--ink-soft); } .footer .monogram-lg { margin: 0 auto 14px; display: block; } .footer p { margin: .3em 0; font-family: var(--font-display); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; } .footer .credit { margin-top: .9em; } .footer .credit a { border-bottom: 1px solid rgba(58,46,36,0.25); padding-bottom: 1px; transition: border-color .25s ease, color .25s ease; } .footer .credit a:hover { color: var(--rose); border-bottom-color: var(--rose); } .footer .tiny { font-family: var(--font-script); text-transform: none; letter-spacing: 0; font-size: 1.25rem; color: var(--rose); margin-top: 1em; } /* --------------------------- Lightbox --------------------------- */ .lightbox { position: fixed; inset: 0; background: rgba(20, 14, 8, 0.92); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; opacity: 0; transition: opacity .3s ease; } .lightbox.open { display: flex; opacity: 1; } .lightbox-img { max-width: min(92vw, 1400px); max-height: 88vh; border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); background: #1a1410; animation: zoomIn .35s cubic-bezier(.22,.8,.2,1); } @keyframes zoomIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lightbox-close, .lightbox-nav { position: absolute; background: transparent; border: none; color: var(--cream); font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 8px 16px; font-family: var(--font-display); opacity: .75; transition: opacity .2s; } .lightbox-close:hover, .lightbox-nav:hover { opacity: 1; } .lightbox-close { top: 12px; right: 18px; font-size: 2.2rem; } .lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; } .lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; } /* ------------------- Reduced motion preference ------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .polaroid { transition: none; } }