/* Isha & Aman — shared stylesheet for every page. */ body{margin:0} img{max-width:100%} [hidden]{display:none !important} /* ============================================================ TOKENS — one family: dusty pink, from blush through to wine. Every colour on the site is derived from the four tones the guest guide actually shows guests as the palette: Blush #E8D3DA Mauve #8C5F73 Dusty rose #C4A2B0 Wine #5E3A4C The grounds and hairlines are those four desaturated toward paper; the labels are those four darkened. There is no second hue anywhere — an earlier version leaned on an antique gold for rules and eyebrows and it read as a different wedding. This design commits to a single light palette (an invitation is printed on paper), so every colour is stated explicitly here and the page renders the same in any viewer theme. ============================================================ */ :root{ --paper:#FCF9F9; /* off-white ground, the faintest rose in it */ --paper-3:#F2E6EA; /* deep blush — alternating sections */ --paper-2:#F8F0F2; /* pale blush — alternating sections */ --card:#FFFCFD; --ink:#2B2427; --ink-soft:#6A5D61; --ink-faint:#8C7F82; --rose:#C9A6B4; /* rules, dots, hairlines — dusty rose, lifted */ --rose-deep:#7A4E60; /* labels and eyebrows — 6.5:1 on paper */ --mauve:#8C5F73; /* the accent: buttons, the ampersand */ --mauve-soft:#C4A2B0; /* the palette's Dusty rose, exactly */ --blush:#E8D3DA; /* the palette's Blush, exactly */ --blush-wash:#F5E9ED; --wine:#5E3A4C; /* the palette's Wine, exactly */ --wine-soft:#6E4759; --line:#EBDFE3; --line-strong:#D6C3CB; --focus:#8C5F73; --on-mauve:#FFFAFB; --shadow:0 1px 2px rgba(60,44,40,.05), 0 8px 26px -18px rgba(60,44,40,.35); --measure:41rem; --wide:64rem; --step:clamp(4rem, 9vw, 7rem); --r:3px; } *,*::before,*::after{box-sizing:border-box} body{ background:var(--paper); color:var(--ink); font-family:"Karla","Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block} a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rose)} a:hover{text-decoration-color:var(--mauve)} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px} h1,h2,h3{font-family:"Marcellus","Iowan Old Style",Georgia,serif;font-weight:400;text-wrap:balance;letter-spacing:.005em} h2{font-size:clamp(1.65rem,4.2vw,2.15rem);line-height:1.2;margin:0} h3{font-size:1.12rem;line-height:1.35;margin:0} p{margin:0} /* ---------- shared layout ---------- */ .wrap{width:min(100% - 2.5rem, var(--measure));margin-inline:auto} .wrap-wide{width:min(100% - 2.5rem, var(--wide));margin-inline:auto} section{padding-block:var(--step)} .stack{display:flex;flex-direction:column;gap:1.15rem} .stack-lg{display:flex;flex-direction:column;gap:2.5rem} .eyebrow{ font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--rose-deep);font-weight:600; } .sec-head{display:flex;flex-direction:column;gap:.55rem;margin-bottom:2.25rem} .sec-head .rule{width:2.25rem;height:1px;background:var(--rose);margin-top:.35rem} .lede{color:var(--ink-soft);font-size:1.03rem} .tint{background:var(--paper-2)} .tint-blush{background:var(--paper-3)} /* a small, honest marker on content the couple still needs to supply */ .todo{ display:inline-flex;align-items:center;gap:.4rem; font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600; color:var(--mauve);border:1px dashed var(--mauve-soft); padding:.15rem .5rem;border-radius:99px;align-self:flex-start;line-height:1.6; } /* Delete-when-done: add class "final" to to hide every .todo chip. */ body.final .todo{display:none} /* ---------- nav ---------- */ .topbar{ position:sticky;top:0;z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .25s ease; } .topbar.stuck{border-bottom-color:var(--line)} .topbar-in{ width:min(100% - 2.5rem, var(--wide));margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:1rem; height:56px; } .monogram{font-family:"Marcellus",Georgia,serif;font-size:1.2rem;letter-spacing:.01em;color:var(--ink)} .monogram .amp{color:var(--mauve);margin-right:0;letter-spacing:0} .navlinks{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0} .navlinks a{ font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft); text-decoration:none;padding-block:.35rem;border-bottom:1px solid transparent; } .navlinks a:hover{color:var(--ink);border-bottom-color:var(--rose)} .nav-cta{ font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--mauve);color:var(--mauve); padding:.42rem .9rem;border-radius:99px;text-decoration:none;white-space:nowrap; transition:background .2s ease,color .2s ease; } .nav-cta:hover{background:var(--mauve);color:var(--on-mauve)} @media (max-width:760px){.navlinks{display:none}} /* ---------- hero ---------- */ .hero{ position:relative;overflow:hidden; padding-block:clamp(1.75rem,4.5vw,3rem) clamp(3.5rem,8vw,5.5rem); text-align:center; } .hero-bloom{ position:absolute;inset:auto 50% auto 50%;transform:translateX(-50%); top:-28%;width:min(120vw,900px);aspect-ratio:1;pointer-events:none; background: radial-gradient(closest-side, var(--blush-wash), transparent 70%), radial-gradient(closest-side at 62% 58%, color-mix(in srgb, var(--rose) 20%, transparent), transparent 72%); opacity:.85; } .hero .wrap{position:relative} .hero .eyebrow{font-size:.88rem} .hero-names{ font-size:clamp(3.375rem,13.1vw,6.375rem);line-height:1.02;margin:0; letter-spacing:.01em; } .hero-names .amp{display:block;font-style:italic;color:var(--mauve);font-size:.42em;margin-block:.22em} .lineage{ margin-top:1.9rem;display:flex;flex-direction:column;align-items:center;gap:.75rem; font-size:1.04rem;line-height:1.55;color:var(--ink-soft); } .lineage b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.18rem;color:var(--ink);letter-spacing:.02em} .lineage-sep{font-family:"Marcellus",Georgia,serif;font-style:italic;color:var(--mauve);line-height:1} @media (min-width:720px){ .lineage{ display:grid;grid-template-columns:1fr auto 1fr;align-items:start; gap:1.4rem; /* step outside the 41rem measure so each name sits on one line */ position:relative;left:50%;transform:translateX(-50%); width:min(66rem, calc(100vw - 3rem)); } .lineage p:first-child{text-align:right} .lineage p:last-child{text-align:left} .lineage-sep{font-size:1.3rem;padding-top:.2rem} } .hero-invite{ margin-top:1.5rem;font-family:"Marcellus",Georgia,serif;font-style:italic; font-size:1.04rem;line-height:1.5;color:var(--ink-soft);letter-spacing:.01em; } .hero-meta{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem 1rem; margin-top:1.15rem;font-size:.98rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft); } .hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--rose);flex:none} .hero-brief{ margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center; gap:1.4rem 2.4rem;list-style:none;padding:0; } .hero-brief li{display:flex;flex-direction:column;gap:.3rem} .hero-brief b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.05rem;color:var(--ink);letter-spacing:.02em} .hero-brief span{font-size:.92rem;line-height:1.45;color:var(--ink-soft)} .hero-brief .where{color:var(--ink-faint)} @media (min-width:640px){ .hero-brief li + li{border-left:1px solid var(--line);padding-left:2.4rem} } .count{ margin-top:2.4rem;display:inline-flex;align-items:baseline;gap:.5rem; border-top:1px solid var(--line);padding-top:1.1rem; font-size:.84rem;color:var(--ink-soft);letter-spacing:.04em; } .count b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.6rem;color:var(--mauve);font-variant-numeric:tabular-nums} /* ---------- story timeline ---------- */ .thread{list-style:none;margin:0;padding:0;position:relative} .thread::before{ content:"";position:absolute;left:5px;top:.7rem;bottom:.7rem;width:1px;background:var(--line-strong); } .thread li{position:relative;padding-left:2.2rem;padding-bottom:2.1rem} .thread li:last-child{padding-bottom:0} .thread li::before{ content:"";position:absolute;left:0;top:.55rem;width:11px;height:11px;border-radius:50%; background:var(--paper);border:1px solid var(--rose); } .thread li.is-day::before{background:var(--mauve);border-color:var(--mauve)} .thread .when{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);font-weight:600} .thread h3{margin-top:.3rem} .thread p{color:var(--ink-soft);margin-top:.35rem} .thread p em{font-style:italic} /* ---------- events ---------- */ .events{display:flex;flex-direction:column;gap:0} .event{ display:grid;grid-template-columns:9.9rem 1fr;gap:1.2rem; padding-block:1.6rem;border-top:1px solid var(--line); } .event:last-child{border-bottom:1px solid var(--line)} .event-time{ font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-deep); font-variant-numeric:tabular-nums;font-weight:600;padding-top:.2rem; } .event-time small{display:block;font-size:.68rem;letter-spacing:.12em;color:var(--ink-faint);font-weight:500;margin-top:.2rem} .event-body{display:flex;flex-direction:column;gap:.4rem;min-width:0} .event-body p{color:var(--ink-soft);font-size:.97rem} .event-where{font-size:.85rem;color:var(--ink-faint)} .event-where b{font-weight:500;color:var(--ink-soft);font-family:inherit} .event-where a{color:inherit;text-decoration-color:var(--line-strong)} .event-where a:hover{color:var(--ink);text-decoration-color:var(--rose)} .event-day{ display:flex;align-items:baseline;gap:.9rem;padding-top:2.4rem;padding-bottom:.5rem; } .event-day:first-child{padding-top:0} .event-day h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);font-family:"Karla",sans-serif;font-weight:600} .event-day .hr{flex:1;height:1px;background:var(--line)} .event-dress{ align-self:flex-start;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--rose-deep);background:color-mix(in srgb, var(--rose) 16%, transparent); padding:.2rem .55rem;border-radius:99px; } @media (max-width:560px){ .event{grid-template-columns:1fr;gap:.5rem} .event-time small{display:inline;margin-left:.5rem} } /* ---------- glossary / guide ---------- */ .guide-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media (min-width:640px){.guide-grid{grid-template-columns:1fr 1fr}} .guide-cell{background:var(--card);padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:.45rem} .guide-cell .term{font-family:"Marcellus",Georgia,serif;font-size:1.05rem} .guide-cell .say{font-size:.74rem;letter-spacing:.06em;color:var(--mauve);font-style:italic} .guide-cell p{font-size:.94rem;color:var(--ink-soft)} .notes{display:flex;flex-direction:column;gap:1.5rem;margin-top:2.5rem} .note{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start} .note-k{ font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);font-weight:600; width:6.5rem;padding-top:.25rem; } .note p{color:var(--ink-soft);font-size:.97rem} @media (max-width:560px){.note{grid-template-columns:1fr;gap:.3rem}.note-k{width:auto}} /* ---------- outfit palette swatches ---------- */ .acc details > .palette{max-width:none} .palette{display:flex;flex-wrap:wrap;gap:1.1rem .95rem;margin-top:1.25rem;padding-bottom:.2rem} .sw{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:4.15rem} .sw i{ display:block;width:2.65rem;height:2.65rem;border-radius:50%; border:1px solid rgba(43,36,39,.14); box-shadow:inset 0 -6px 12px -8px rgba(43,36,39,.35); } .sw b{font-weight:500;font-size:.74rem;line-height:1.25;text-align:center;color:var(--ink-soft)} .sw small{font-size:.62rem;letter-spacing:.06em;color:var(--ink-faint);font-variant-numeric:tabular-nums} .acc details > .palette-note{max-width:44ch;padding-top:1.1rem} .acc details > .examples{max-width:56ch;padding-bottom:1.4rem} .examples{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem} .ex-k{ font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--rose-deep);margin-top:.9rem; } .examples ul{list-style:none;margin:.15rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem} .examples li{position:relative;padding-left:1.05rem;font-size:.95rem;color:var(--ink-soft)} .examples li::before{ content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%; background:var(--mauve-soft); } .palette-note{ font-family:"Marcellus","Iowan Old Style",Georgia,serif; font-size:1.08rem;line-height:1.65;color:var(--mauve);letter-spacing:.005em; } /* ---------- gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.85rem} .shot{ position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden; background:linear-gradient(150deg, var(--blush-wash), color-mix(in srgb, var(--rose) 22%, var(--paper))); display:grid;place-items:center;border:1px solid var(--line); } .shot:nth-child(3n+2){background:linear-gradient(150deg, color-mix(in srgb, var(--mauve) 14%, var(--paper)), var(--blush-wash))} .shot:nth-child(4n+3){background:linear-gradient(200deg, color-mix(in srgb, var(--rose) 26%, var(--paper)), var(--blush))} .shot span{ font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint); text-align:center;padding:0 1rem; } .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---------- cards (registry / travel / orlando) ---------- */ .cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .cards-3{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:1.4rem;display:flex;flex-direction:column;gap:.55rem; } .card h3{font-size:1.06rem} .card p{font-size:.94rem;color:var(--ink-soft);flex:1} .card-link{ align-self:flex-start;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mauve);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15rem; } .card-link:hover{color:var(--ink)} .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .list li{ display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:baseline; padding-block:.85rem;border-bottom:1px solid var(--line); } .list li:first-child{border-top:1px solid var(--line)} .list .what{font-size:1rem} .list .what em{display:block;font-style:normal;font-size:.9rem;color:var(--ink-soft);margin-top:.15rem} .list .what .tag{ display:inline-block;margin-right:.55rem;vertical-align:2px; font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600; color:var(--on-mauve);background:var(--mauve);padding:.16rem .5rem;border-radius:99px; } .list .what em a.book{ display:inline-block;margin-top:.5rem; font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600; color:var(--mauve);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15rem; } .list .what em a.book:hover{color:var(--ink)} .list .what em b{font-weight:600;color:var(--ink);letter-spacing:.04em} .list .what em a{color:inherit;text-decoration-color:var(--line-strong)} .list .what em a:hover{color:var(--ink);text-decoration-color:var(--rose)} .list .far{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums} /* ---------- RSVP ---------- */ .rsvp-shell{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.4rem,4vw,2.2rem);box-shadow:var(--shadow); } .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.15rem} .field > label,.legend{ font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600; } .field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{ font:inherit;font-size:.97rem;color:var(--ink);background:var(--paper); border:1px solid var(--line-strong);border-radius:var(--r); padding:.7rem .8rem;width:100%; } .field textarea{min-height:5.5rem;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rose);outline:2px solid color-mix(in srgb, var(--rose) 35%, transparent);outline-offset:0} .hint{font-size:.8rem;color:var(--ink-faint)} fieldset{border:0;padding:0;margin:0 0 1.15rem} .choices{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.6rem} .choice input{position:absolute;opacity:0;width:0;height:0} .choice span{ display:inline-block;border:1px solid var(--line-strong);border-radius:99px; padding:.45rem .95rem;font-size:.88rem;cursor:pointer;transition:all .16s ease;color:var(--ink-soft); } .choice:hover span{border-color:var(--rose)} .choice input:checked + span{background:var(--rose-deep);border-color:var(--rose-deep);color:var(--paper)} .choice input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px} :root[data-theme="dark"] .choice input:checked + span, .choice input:checked + span{color:var(--paper)} .btn{ font:inherit;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; background:var(--mauve);color:var(--on-mauve);border:1px solid var(--mauve); padding:.85rem 1.8rem;border-radius:99px;cursor:pointer; transition:filter .2s ease,transform .1s ease; } .btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.55;cursor:progress} .form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem} .form-msg{font-size:.9rem;color:var(--ink-soft)} .form-msg.err{color:var(--mauve)} .thanks{display:flex;flex-direction:column;gap:.8rem;text-align:center;padding:1.5rem 0} .thanks h3{font-size:1.5rem} .hidden{display:none !important} /* ---------- accordion (FAQ, guide notes, Orlando) ---------- */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{ cursor:pointer;list-style:none;padding-block:1.1rem; display:flex;justify-content:space-between;align-items:center;gap:1.5rem; font-family:"Marcellus",Georgia,serif;font-size:1.05rem;color:var(--ink); } .acc summary:hover{color:var(--mauve)} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+";color:var(--rose);font-family:"Karla",sans-serif;font-size:1.2rem;flex:none;transition:transform .2s ease} .acc details[open] summary::after{transform:rotate(45deg)} .acc details > *:not(summary){color:var(--ink-soft);font-size:.97rem;max-width:60ch} .acc details p:last-child,.acc details ul:last-child{padding-bottom:1.2rem} .acc summary .sum-k{ font-family:"Karla",sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--rose-deep);font-weight:600; } /* a collapsible that wraps a whole block (list, cards) */ .acc-block{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .acc-block > summary{ cursor:pointer;list-style:none;padding-block:1.15rem; display:flex;justify-content:space-between;align-items:center;gap:1.5rem; font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--rose-deep); } .acc-block > summary:hover{color:var(--mauve)} .acc-block > summary::-webkit-details-marker{display:none} .acc-block > summary::after{content:"+";font-size:1.2rem;letter-spacing:0;color:var(--rose);flex:none;transition:transform .2s ease} .acc-block[open] > summary::after{transform:rotate(45deg)} .acc-block .acc-body{padding-bottom:1.6rem} .acc-block .list li:first-child{border-top:0} /* ---------- footer ---------- */ footer{padding-block:var(--step) 3.5rem;text-align:center;border-top:1px solid var(--line)} .foot-names{font-family:"Marcellus",Georgia,serif;font-size:1.6rem} .foot-names .amp{font-style:italic;color:var(--mauve)} .foot-meta{margin-top:.7rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* ============================================================ MULTIPAGE ADDITIONS Everything below was added when the site went from one page to five. Above this line is the original single-page CSS. ============================================================ */ /* ---------- interior page banner (replaces the hero on sub-pages) ---------- */ .page-head{ position:relative;overflow:hidden;text-align:center; padding-block:clamp(2.6rem,7vw,4.2rem) clamp(2rem,5vw,3rem); border-bottom:1px solid var(--line); } .page-head .bloom{ position:absolute;inset:auto 50% auto 50%;transform:translateX(-50%); top:-70%;width:min(120vw,760px);aspect-ratio:1;pointer-events:none; background:radial-gradient(closest-side, var(--blush-wash), transparent 70%); opacity:.9; } .page-head .wrap{position:relative} .page-head h1{ font-family:"Marcellus","Iowan Old Style",Georgia,serif;font-weight:400; font-size:clamp(2rem,5.4vw,3rem);line-height:1.1;margin:.5rem 0 0;letter-spacing:.01em; } .page-head .rule{width:2.25rem;height:1px;background:var(--rose);margin:1.1rem auto 0} .page-head .lede{margin-top:1.1rem;max-width:46ch;margin-inline:auto} /* ---------- hand-drawn sprig, used on the collage ---------- */ .sprig{display:block;pointer-events:none;overflow:visible} .sprig .stem{fill:none;stroke:var(--rose);stroke-width:1.2;stroke-linecap:round;opacity:.7} .sprig .leaf{fill:var(--mauve-soft);opacity:.45} .sprig .bloom{fill:var(--blush)} .sprig .bloom-deep{fill:var(--mauve-soft);opacity:.8} /* ============================================================ THE ENVELOPE GATE Hidden in the markup by default and revealed by JS, so that with JS off nobody is ever shut out of the page behind it. ============================================================ */ .gate{ position:fixed;inset:0;z-index:100;background:var(--paper); display:grid;place-items:center;padding:1.5rem; transition:opacity .7s ease, visibility .7s; } .gate.is-gone{opacity:0;visibility:hidden} body.gated{overflow:hidden} .gate-in{ position:relative;text-align:center;width:min(100%,32rem); display:flex;flex-direction:column;align-items:center; } .gate-bloom{ position:absolute;inset:auto 50% auto 50%;transform:translateX(-50%); top:-18%;width:min(130vw,720px);aspect-ratio:1;pointer-events:none; background: radial-gradient(closest-side, var(--blush-wash), transparent 70%), radial-gradient(closest-side at 60% 60%, color-mix(in srgb, var(--rose) 18%, transparent), transparent 72%); } .gate-kicker{ font-size:.82rem;letter-spacing:.24em;text-transform:uppercase; color:var(--rose-deep);font-weight:600; } .gate-script{ font-family:"Marcellus","Iowan Old Style",Georgia,serif;font-style:italic;font-weight:400; font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.1;color:var(--mauve);margin:.2rem 0 0; } .gate-cue{ margin-top:1.9rem;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint);font-weight:600; } .gate-skip{ margin-top:.9rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint);background:none;border:0;cursor:pointer;font-family:inherit; text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong); } .gate-skip:hover{color:var(--mauve)} /* the envelope itself is a button, so it is reachable by keyboard */ .env{ position:relative;margin-top:2.2rem;width:min(100%,23rem);aspect-ratio:1.45; background:none;border:0;padding:0;cursor:pointer;font:inherit; perspective:1100px; } .env-body{ position:absolute;inset:0;border-radius:4px; background:linear-gradient(168deg, color-mix(in srgb, var(--blush) 62%, var(--paper)), color-mix(in srgb, var(--mauve-soft) 42%, var(--paper))); box-shadow:var(--shadow); } /* the card that rises out when it opens */ .env-card{ position:absolute;left:7%;right:7%;top:9%;bottom:12%;z-index:2; background:var(--card);border:1px solid var(--line);border-radius:3px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem; box-shadow:0 8px 22px -16px rgba(60,44,40,.5); transition:transform .85s cubic-bezier(.22,.9,.3,1); } .env-card .c-k{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);font-weight:600} .env-card .c-n{font-family:"Marcellus",Georgia,serif;font-size:1.5rem;line-height:1.15;color:var(--ink)} .env-card .c-n i{font-style:italic;color:var(--mauve)} .env-card .c-d{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)} /* front pocket — side flaps and base, drawn as one shape */ .env-front{ position:absolute;inset:0;z-index:3;border-radius:4px; background:linear-gradient(180deg, color-mix(in srgb, var(--mauve-soft) 34%, var(--paper)), color-mix(in srgb, var(--blush) 78%, var(--paper))); clip-path:polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); } .env-front::after{ content:"";position:absolute;inset:0; background:linear-gradient(178deg, rgba(255,255,255,.45), transparent 42%); opacity:.9; } /* the top flap, hinged along its top edge */ .env-flap{ position:absolute;left:0;right:0;top:0;height:52%;z-index:4; transform-origin:top center;transform-style:preserve-3d; transition:transform .9s cubic-bezier(.6,.02,.3,1); background:linear-gradient(180deg, color-mix(in srgb, var(--mauve-soft) 74%, var(--paper)), color-mix(in srgb, var(--mauve-soft) 44%, var(--paper))); filter:drop-shadow(0 2px 3px rgba(60,44,40,.16)); clip-path:polygon(0 0, 100% 0, 50% 100%); } .seal{ position:absolute;left:50%;top:46%;z-index:5; transform:translate(-50%,-50%); width:22%;aspect-ratio:1;border-radius:50%; display:grid;place-items:center; background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--mauve) 78%, #fff), var(--mauve) 58%, var(--wine) 100%); box-shadow:0 2px 6px -1px rgba(60,44,40,.45), inset 0 -2px 5px -1px rgba(0,0,0,.35), inset 0 2px 4px -1px rgba(255,255,255,.4); transition:opacity .35s ease, transform .35s ease; } .seal span{ font-family:"Marcellus",Georgia,serif;font-size:.9rem;letter-spacing:.02em; color:color-mix(in srgb, var(--blush) 82%, #fff);text-shadow:0 1px 1px rgba(0,0,0,.3); } .env:hover .env-flap{transform:rotateX(-14deg)} .env:hover .seal{transform:translate(-50%,-50%) scale(1.04)} /* opened */ .env.is-open .env-flap{transform:rotateX(-172deg)} .env.is-open .seal{opacity:0;transform:translate(-50%,-50%) scale(.7)} .env.is-open .env-card{transform:translateY(-42%)} /* the staggered entrance */ .gate .rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.8,.3,1) forwards} .gate .rise-1{animation-delay:.15s} .gate .rise-2{animation-delay:.35s} .gate .rise-3{animation-delay:.75s} .gate .rise-4{animation-delay:1.35s} .gate .rise-5{animation-delay:1.6s} @keyframes rise{to{opacity:1;transform:none}} /* ============================================================ THE COLLAGE HOME A fixed-ratio stage on wide screens with every piece placed in per-cent coordinates and sized in em, so the whole arrangement scales as one object. Below 900px it unstacks into an ordinary column. ============================================================ */ .collage-sec{padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem)} .stage{ position:relative;width:min(100% - 2rem, 62rem);margin-inline:auto; font-size:clamp(10px,1.32vw,15px); } .stage-title{text-align:center;margin-bottom:2.5rem} .stage-title .k{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-deep);font-weight:600} .stage-title h1{ font-family:"Marcellus",Georgia,serif;font-weight:400;margin:.5rem 0 0; font-size:clamp(2.6rem,8vw,4.4rem);line-height:1.05; } .stage-title h1 i{font-style:italic;color:var(--mauve);font-size:.5em;display:block;margin-block:.12em} .piece{ position:relative;display:block;text-decoration:none;color:inherit; background:var(--card);border:1px solid var(--line);border-radius:3px; box-shadow:0 2px 5px -3px rgba(60,44,40,.4), 0 18px 34px -28px rgba(60,44,40,.75); transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease; } a.piece:hover,a.piece:focus-visible{ transform:translateY(-5px) rotate(0deg); box-shadow:0 3px 8px -3px rgba(60,44,40,.4), 0 26px 44px -28px rgba(60,44,40,.9); z-index:20; } .piece .go{ font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--mauve); } /* the open envelope the cards spill out of */ .env-open{ position:relative;border-radius:4px; background:linear-gradient(168deg, color-mix(in srgb, var(--blush) 60%, var(--paper)), color-mix(in srgb, var(--mauve-soft) 40%, var(--paper))); border:1px solid color-mix(in srgb, var(--mauve-soft) 70%, var(--paper)); box-shadow:0 2px 6px -3px rgba(60,44,40,.35); } .env-open::before{ /* the flap, fallen open behind */ content:"";position:absolute;left:-1px;right:-1px;top:-38%;height:38%; background:linear-gradient(0deg, color-mix(in srgb, var(--mauve-soft) 46%, var(--paper)), color-mix(in srgb, var(--blush) 70%, var(--paper))); border:1px solid color-mix(in srgb, var(--mauve-soft) 60%, var(--paper)); clip-path:polygon(0 100%, 50% 0, 100% 100%); } .env-open::after{ /* the front pocket */ content:"";position:absolute;inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--mauve-soft) 30%, var(--paper)), color-mix(in srgb, var(--blush) 76%, var(--paper))); clip-path:polygon(0 0, 50% 44%, 100% 0, 100% 100%, 0 100%); border-radius:4px; } /* the invitation card — the dark one */ .p-invite{ background:linear-gradient(160deg, var(--mauve), var(--wine-soft)); border-color:var(--wine-soft);color:var(--on-mauve); padding:2.2em 1.8em;text-align:center; } .p-invite .k,.p-invite .n,.p-date .d,.p-date .m,.p-date .y,.p-date .w, .p-badge .k,.p-badge .s,.p-rsvp .s,.p-rsvp .big,.p-ticket .k,.p-ticket .s{display:block} .p-invite .k{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;line-height:1.8} .p-invite .n{ font-family:"Marcellus",Georgia,serif;font-size:2.5em;line-height:1.1;margin-top:.35em; } .p-invite .n i{font-style:italic;display:block;font-size:.52em;margin-block:.1em;opacity:.85} .p-invite::after{ content:"";position:absolute;inset:.55em;border:1px solid rgba(255,255,255,.28);border-radius:2px;pointer-events:none; } /* the date card */ .p-date{padding:2.2em 1.6em;text-align:center} .p-date .d{font-family:"Marcellus",Georgia,serif;font-size:2.1em;line-height:1.15;color:var(--ink)} .p-date .m{font-family:"Marcellus",Georgia,serif;font-style:italic;font-size:1.5em;color:var(--mauve);line-height:1.2} .p-date .y{font-family:"Marcellus",Georgia,serif;font-size:1.7em;color:var(--ink);line-height:1.3} .p-date .w{margin-top:.9em;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);line-height:2} .p-date::after{ content:"";position:absolute;inset:.55em;border:1px solid var(--line);border-radius:2px;pointer-events:none; } /* the round "click for the details" badge */ .p-badge{ border-radius:50%;aspect-ratio:1;border:0; background:radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--wine) 72%, var(--mauve)), var(--wine) 72%); color:var(--blush);display:grid;place-items:center;text-align:center;padding:1em; } .p-badge .k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.9} .p-badge .s{font-family:"Marcellus",Georgia,serif;font-style:italic;font-size:1.9em;line-height:1} /* the RSVP card, with its own little seal */ .p-rsvp{padding:1.9em 1.5em;text-align:center} .p-rsvp .s{font-family:"Marcellus",Georgia,serif;font-style:italic;font-size:1.5em;color:var(--mauve);line-height:1.2} .p-rsvp .big{font-family:"Marcellus",Georgia,serif;font-size:2.4em;letter-spacing:.06em;color:var(--ink);line-height:1.1} .p-rsvp .mini-seal{ position:absolute;left:-.9em;top:50%;transform:translateY(-50%); width:3.2em;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--mauve) 78%, #fff), var(--mauve) 58%, var(--wine) 100%); box-shadow:0 2px 5px -1px rgba(60,44,40,.4), inset 0 -2px 4px -1px rgba(0,0,0,.3); display:grid;place-items:center; } .p-rsvp .mini-seal span{font-family:"Marcellus",Georgia,serif;font-size:.8em;color:color-mix(in srgb, var(--blush) 85%, #fff)} /* polaroid-style photo frames */ .p-photo{padding:.7em .7em 4.4em;background:var(--card)} .p-photo .well{ aspect-ratio:1/1;display:grid;place-items:center;text-align:center;padding:.8em; background:linear-gradient(150deg, var(--blush-wash), color-mix(in srgb, var(--rose) 20%, var(--paper))); border:1px solid var(--line); } .p-photo .well.has-img{padding:0} .p-photo .well img{width:100%;height:100%;object-fit:cover} .p-photo .cap{ position:absolute;left:0;right:0;bottom:.6em;text-align:center;line-height:1.5; font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint); } .p-photo .cap em{font-family:"Marcellus",Georgia,serif;font-style:italic;text-transform:none;letter-spacing:.01em;color:var(--mauve);font-size:1.25em} /* the torn ticket for travel */ .p-ticket{ padding:1.5em 1.6em;text-align:center; background:linear-gradient(160deg, var(--paper-3), var(--card)); } .p-ticket .k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);font-weight:600;line-height:1.9} .p-ticket .s{font-family:"Marcellus",Georgia,serif;font-style:italic;font-size:1.7em;color:var(--mauve);line-height:1.15} /* placement — wide screens only */ @media (min-width:900px){ .stage-art{position:relative;aspect-ratio:100/74} .stage-art > *{position:absolute;margin:0} .stage-art .env-open{left:26%;top:21%;width:48%;aspect-ratio:1.42;z-index:1} .stage-art .p-invite{left:7%;top:33%;width:30%;transform:rotate(-4.5deg);z-index:6} .stage-art .p-date{left:43%;top:25%;width:29%;transform:rotate(3deg);z-index:7} .stage-art .p-badge{left:71%;top:52%;width:20%;z-index:8} .stage-art .p-rsvp{left:13%;top:72%;width:26%;transform:rotate(2.5deg);z-index:9} .stage-art .p-photo{left:43%;top:74%;width:21%;transform:rotate(-3deg);z-index:8} .stage-art .p-ticket{left:65%;top:82%;width:24%;transform:rotate(4deg);z-index:9} .stage-art .sprig-a{left:0;top:22%;width:16%;z-index:10} .stage-art .sprig-b{left:62%;top:6%;width:18%;z-index:10;transform:scaleX(-1)} .stage-art .sprig-c{left:33%;top:60%;width:15%;z-index:10} /* hover lifts the piece but must not lose its rotation */ .stage-art a.p-invite:hover,.stage-art a.p-invite:focus-visible{transform:rotate(-4.5deg) translateY(-6px)} .stage-art a.p-date:hover,.stage-art a.p-date:focus-visible{transform:rotate(3deg) translateY(-6px)} .stage-art a.p-rsvp:hover,.stage-art a.p-rsvp:focus-visible{transform:rotate(2.5deg) translateY(-6px)} .stage-art a.p-photo:hover,.stage-art a.p-photo:focus-visible{transform:rotate(-3deg) translateY(-6px)} .stage-art a.p-ticket:hover,.stage-art a.p-ticket:focus-visible{transform:rotate(4deg) translateY(-6px)} .stage-art a.p-badge:hover,.stage-art a.p-badge:focus-visible{transform:translateY(-6px)} } /* narrow screens: an honest stack, rotations dropped */ @media (max-width:899px){ .stage{font-size:14px} .stage-art{display:flex;flex-direction:column;align-items:center;gap:1.7rem} .stage-art .piece{width:min(100%,22rem);transform:none} .stage-art .env-open,.stage-art .sprig-a,.stage-art .sprig-b{display:none} .stage-art .sprig-c{width:9rem;opacity:.85} .stage-art .p-badge{width:min(62%,13rem)} .stage-art .p-photo{width:min(72%,16rem)} .stage-art .p-rsvp{margin-left:.9em} } /* the collage and the gate are decorative motion; respect the setting */ @media (prefers-reduced-motion: reduce){ .gate .rise{animation:none;opacity:1;transform:none} .env-flap,.env-card,.seal,.piece{transition:none} } /* ---------- nav, revisited for five pages ---------- The single-page version hid the nav below 760px, which was fine when every section was one scroll away. On a multipage site that strands phone guests, so instead the links wrap onto a second row. */ @media (max-width:760px){ .navlinks{ display:flex;order:3;width:100%;justify-content:center;flex-wrap:wrap; gap:.35rem 1.15rem;padding-bottom:.55rem; } .navlinks a{font-size:.7rem;letter-spacing:.1em} .topbar-in{flex-wrap:wrap;height:auto;padding-top:.55rem;row-gap:.15rem} } .navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--rose)} .nav-cta[aria-current="page"]{background:var(--mauve);color:var(--on-mauve)} /* ---------- an eyebrow carrying a deadline ---------- Louder than the ordinary section eyebrow, because it is the one line on the page a guest has to act on. */ .eyebrow-strong{font-size:.95rem;letter-spacing:.16em;line-height:1.6} .eyebrow-strong b{font-weight:700;color:var(--mauve)} /* ---------- real checkboxes ---------- The pill `.choice` style reads as a set of buttons, which is right for the yes/no radios but wrong for a list you tick. These draw an actual box, so it is obvious more than one can be chosen. */ .checks{display:flex;flex-direction:column;gap:.85rem;margin-top:.8rem} .check{display:block;cursor:pointer} .check input{position:absolute;opacity:0;width:0;height:0} .check span{ position:relative;display:block;padding-left:2rem; font-size:.97rem;line-height:1.5;color:var(--ink-soft); } .check span::before{ /* the box */ content:"";position:absolute;left:0;top:.12em; width:1.2rem;height:1.2rem;border-radius:3px; border:1px solid var(--line-strong);background:var(--paper); transition:background .16s ease,border-color .16s ease; } .check span::after{ /* the tick */ content:"";position:absolute;left:.42rem;top:.28em; width:.36rem;height:.68rem; border:solid var(--on-mauve);border-width:0 2px 2px 0; transform:rotate(45deg) scale(.5);transform-origin:center; opacity:0;transition:opacity .16s ease,transform .16s ease; } .check:hover span{color:var(--ink)} .check:hover span::before{border-color:var(--mauve-soft)} .check input:checked + span{color:var(--ink)} .check input:checked + span::before{background:var(--mauve);border-color:var(--mauve)} .check input:checked + span::after{opacity:1;transform:rotate(45deg) scale(1)} .check input:focus-visible + span::before{outline:2px solid var(--focus);outline-offset:2px} /* ---------- footer contact ---------- Not .foot-meta: uppercasing an email address makes it wide, ugly and slightly harder to read back to someone over the phone. */ .foot-mail{ margin-top:1.2rem;display:flex;flex-wrap:wrap;justify-content:center; gap:.25rem 1.2rem;font-size:.85rem;color:var(--ink-faint); } .foot-mail a{color:inherit;text-decoration-color:var(--line-strong)} .foot-mail a:hover{color:var(--mauve);text-decoration-color:var(--mauve)} /* ---------- a section whose content is not written yet ---------- Deliberately quiet: it should read as a promise, not as a hole. */ .soon{ display:flex;flex-direction:column;align-items:center;gap:1.1rem; text-align:center; } .soon-mark{ font-family:"Marcellus","Iowan Old Style",Georgia,serif;font-style:italic; font-size:clamp(1.9rem,5.4vw,2.8rem);line-height:1.15;color:var(--mauve); } .soon .rule-sm{width:2.25rem;height:1px;background:var(--rose)} .soon p{color:var(--ink-soft);max-width:42ch} /* .todo sits left-aligned by default; centre it inside this block */ .soon .todo{align-self:center} /* ---------- photograph tone ---------- Photographs are graded toward the palette rather than dropped in as shot: saturation pulled back, then a blush-to-mauve wash in soft-light and a thin lift of the paper ground. A gold sequin backdrop would otherwise be the only warm hue on the whole site. This is done in CSS, not baked into the JPEG, so the original crop stays untouched and the strength is one number to change. Add the class alongside .shot or .well — the gallery in site.js applies it to every photo it generates. */ .tone{position:relative;overflow:hidden} .tone img{filter:saturate(.5) contrast(1.05) brightness(1.03)} .tone::before{ /* knock the whites back toward paper */ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:var(--blush-wash);opacity:.16; } .tone::after{ /* the palette wash itself */ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(155deg, var(--blush), var(--mauve)); mix-blend-mode:soft-light; } /* A grade is a colour effect, not motion — it stays under reduced motion, but honour forced-colours mode, where it only gets in the way. */ @media (forced-colors: active){ .tone img{filter:none} .tone::before,.tone::after{display:none} }