/* ========================================================= Berhan + Coby · Save the Date Palette pulled from the Cabo oil painting: parchment, sunlit gold, sea-glass, olive, and ink-brown. ========================================================= */ :root{ --parchment: #f7f0e4; --parchment-2: #efe4d2; --sand: #e3d2b8; --gold: #c39a5c; --gold-deep: #a97f45; --gold-ink: #8a6535; /* deeper gold, for type laid over the painting */ --terracotta: #b3765a; --olive: #6d7355; --olive-deep: #4e5340; --sea: #9db6b5; --ink: #3b3227; --ink-soft: #6a5d4c; --ink-faint: #9b8d79; --shell: min(1120px, 100% - 2.5rem); --narrow: min(680px, 100% - 2.5rem); --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --sans: "Jost", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --script: "Allura", "Snell Roundhand", "Apple Chancery", cursive; --radius: 22px; --radius-sm: 15px; --pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out-soft: cubic-bezier(.16,1,.3,1); } *,*::before,*::after{ box-sizing:border-box; } /* The UA rule for [hidden] is display:none, which any class-level `display` quietly beats. The thank-you card is display:flex, so without this it shows up before anyone has submitted anything. */ [hidden]{ display:none !important; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--parchment); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Scroll stays locked until the envelope is opened. iOS Safari ignores overflow:hidden on alone, so the root element is sealed too. */ html.is-sealed, body.is-sealed{ overflow:hidden; height:100%; overscroll-behavior:none; } img{ max-width:100%; display:block; } .shell{ width:var(--shell); margin-inline:auto; } .shell--narrow{ width:var(--narrow); margin-inline:auto; } .amp{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--gold-deep); } /* ---------- Shared type ---------- */ .eyebrow{ margin:0; font-family:var(--sans); font-size:clamp(.66rem,1.6vw,.78rem); font-weight:400; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-deep); text-indent:.42em; } .eyebrow--dark{ color:var(--gold-deep); } .curtain .eyebrow, .reveal .eyebrow{ color:var(--gold-ink); font-weight:500; text-shadow:0 1px 2px rgba(255,253,247,.9), 0 2px 20px rgba(255,251,241,.8); } .ornament{ display:flex; align-items:center; justify-content:center; gap:.9rem; width:min(220px,52%); margin-inline:auto; } .ornament__rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold) 55%,transparent); opacity:.75; } .reveal .ornament__rule{ background:linear-gradient(90deg,transparent,var(--gold-ink) 55%,transparent); opacity:1; } .reveal .ornament__dot{ background:var(--gold-ink); } .ornament__dot{ width:5px; height:5px; flex:none; transform:rotate(45deg); background:var(--gold); opacity:.85; } /* ========================================================= 1 · THE CURTAIN + ENVELOPE ========================================================= */ .curtain{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; transition:opacity 1s var(--ease), visibility 1s; } /* The Cabo painting. Gradient underneath keeps it beautiful even before the image file is dropped in. */ .curtain__art, .reveal__art{ position:absolute; inset:0; background-color:#e9d9bd; background-image:url("../img/cabo-sunset.jpg"), linear-gradient(180deg,#f3e6cd 0%,#eddcbd 38%,#d8c9ac 62%,#b9b39a 100%); background-size:cover; background-position:center 42%; background-repeat:no-repeat; transform:scale(1.06); transition:transform 2.4s var(--ease-out-soft); } /* Soft vignette so cream type stays legible over the painting */ .curtain__veil, .reveal__veil{ position:absolute; inset:0; background: radial-gradient(125% 95% at 50% 42%, rgba(252,246,235,.14) 0%, rgba(250,243,230,.30) 58%, rgba(246,237,222,.46) 100%), linear-gradient(180deg, rgba(250,244,232,.40) 0%, rgba(250,244,232,.16) 30%, rgba(248,241,228,.20) 66%, rgba(244,235,219,.48) 100%); } .curtain__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(1.8rem,5vh,3.2rem); padding:2rem 1.25rem; text-align:center; transition:transform 1.25s var(--ease-out-soft); } .opening{ display:flex; flex-direction:column; align-items:center; gap:clamp(.7rem,2vh,1.1rem); animation:rise-in 1.9s var(--ease-out-soft) backwards; animation-delay:.3s; } .couple{ margin:0; font-family:var(--script); font-weight:400; font-size:clamp(3.6rem,12vw,7.2rem); line-height:1.12; letter-spacing:.005em; color:var(--ink); text-shadow:0 1px 2px rgba(255,253,247,.9), 0 2px 20px rgba(255,251,241,.8); } .couple .amp{ font-family:var(--script); font-style:normal; color:var(--gold-ink); font-size:.86em; padding-inline:.06em; vertical-align:.02em; } /* ---------- The envelope itself ---------- */ .envelope{ --w:clamp(255px, 40vw, 400px); --h:calc(var(--w) * .66); --flap:calc(var(--h) * .62); position:relative; width:var(--w); height:var(--h); padding:0; border:0; background:#fbf3e4; border-radius:3px; cursor:pointer; transform-style:preserve-3d; perspective:1400px; animation:rise-in 2s var(--ease-out-soft) backwards; animation-delay:.6s; transition:transform .7s var(--ease); } .envelope:hover, .envelope:focus-visible{ transform:translateY(-7px); } .envelope:focus-visible{ outline:1px solid var(--gold-deep); outline-offset:20px; } .envelope__shadow{ position:absolute; left:8%; right:8%; bottom:-9%; height:16%; background:radial-gradient(50% 50% at 50% 50%, rgba(42,32,20,.42), transparent 72%); filter:blur(7px); transition:opacity .9s var(--ease), transform .9s var(--ease); } /* The inside back of the envelope: a solid panel covering the whole rectangle, so no part of the envelope is ever see-through. */ .envelope__back{ position:absolute; inset:0; z-index:1; border-radius:2px; background:linear-gradient(170deg,#f0e3cd 0%,#e6d6bb 55%,#dfcdaf 100%); box-shadow:inset 0 0 22px rgba(120,95,62,.22); } /* Paper — a warm cream with the faintest laid-paper grain */ .envelope__pocket, .envelope__flap, .letter{ background-color:#fbf3e4; background-image: linear-gradient(115deg, rgba(255,255,255,.7), rgba(219,199,166,.26)), repeating-linear-gradient(90deg, rgba(160,138,104,.05) 0 1px, transparent 1px 3px); } /* The front pocket, with its V-shaped fold line */ .envelope__pocket{ position:absolute; inset:0; z-index:3; clip-path:polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); border-radius:6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 10px rgba(70,52,32,.16), 0 24px 50px -14px rgba(64,47,28,.34); border-radius:2px; } /* the bottom fold, folded up to meet the point of the V */ .envelope__pocket::after{ content:""; position:absolute; inset:0; clip-path:polygon(0 100%, 50% 46%, 100% 100%); background:linear-gradient(180deg, rgba(207,183,146,.34) 0%, rgba(236,220,192,.14) 70%); } /* The top flap, hinged along the envelope's top edge */ .envelope__flap{ position:absolute; top:0; left:0; width:100%; height:var(--flap); z-index:5; clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:top center; transform:rotateX(0deg); filter:brightness(.985); border-bottom:1px solid rgba(168,142,104,.28); box-shadow:0 6px 14px rgba(60,45,28,.16); transition:transform 1.5s var(--ease), z-index 0s linear .8s, filter 1.5s var(--ease); } /* The letter tucked inside */ .letter{ position:absolute; z-index:2; left:6%; width:88%; top:9%; height:84%; border-radius:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem; padding:1rem; background-color:#fefaf3; box-shadow:0 3px 14px rgba(60,45,28,.20); transition:transform 1.7s var(--ease-out-soft); } .letter__crest{ width:auto; height:62%; opacity:.72; } /* Wax seal — a photograph of the real one, background removed */ .seal{ position:absolute; z-index:6; left:50%; top:calc(var(--flap) - (var(--w) * .123)); width:calc(var(--w) * .265); height:auto; transform:translateX(-50%) rotate(-4deg); filter:drop-shadow(0 4px 7px rgba(74,42,26,.34)); transition:transform .8s var(--ease), opacity .6s ease; pointer-events:none; } /* ---------- The prompt ---------- */ .prompt{ margin:0; animation:rise-in 2s var(--ease-out-soft) backwards; animation-delay:1.05s; transition:opacity .5s ease; } .prompt__text{ font-family:var(--sans); font-size:clamp(.68rem,1.7vw,.8rem); font-weight:400; letter-spacing:.4em; text-transform:uppercase; text-indent:.4em; color:var(--ink-soft); padding-bottom:.55rem; border-bottom:1px solid rgba(122,104,80,.45); animation:breathe 3.4s ease-in-out infinite; display:inline-block; } /* ---------- Opening sequence ---------- */ body.is-opening .envelope{ cursor:default; pointer-events:none; } body.is-opening .seal{ transform:translateX(-50%) scale(.66) rotate(-22deg); opacity:0; } body.is-opening .envelope__flap{ transform:rotateX(-176deg); z-index:1; filter:brightness(.9); transition-delay:.35s, 1.1s, .35s; } body.is-opening .letter{ transform:translateY(-72%) scale(1.06); transition-delay:1.3s; } body.is-opening .envelope__shadow{ opacity:0; transform:scale(.85); } body.is-opening .opening, body.is-opening .prompt{ animation:none; opacity:0; transition:opacity 1.1s ease; } /* Lift the whole letter away, still solid, before anything fades */ body.is-opening .curtain__inner{ transform:translateY(-118vh); transition-delay:2.65s; } body.is-open .curtain{ opacity:0; visibility:hidden; pointer-events:none; } .curtain{ transition:opacity .75s var(--ease), visibility .75s; } /* ========================================================= 2 · THE PAGE ========================================================= */ .page{ position:relative; z-index:1; } /* Waves painting, fixed behind everything that scrolls */ .backdrop{ position:fixed; inset:0; z-index:-1; } .backdrop__waves{ position:absolute; inset:0; background-color:var(--parchment-2); background-image:url("../img/waves.jpg"), linear-gradient(170deg,#f4e7d3 0%,#ecdcc4 42%,#dfd9c4 70%,#cdd6cd 100%); background-size:cover; background-position:center; background-repeat:no-repeat; } .backdrop__wash{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(247,240,228,.74) 0%, rgba(247,240,228,.62) 45%, rgba(244,236,222,.78) 100%); } /* ---------- The reveal ---------- */ .reveal{ position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:clamp(4rem,12vh,7rem) 0 clamp(5rem,14vh,8rem); } .reveal__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(1.4rem,3.6vh,2.2rem); text-align:center; color:var(--ink); } /* Each line waits for the envelope to open, then arrives in turn */ [data-step]{ opacity:0; transform:translateY(22px); } body.is-open [data-step]{ animation:rise-in .8s var(--ease-out-soft) both; } body.is-open [data-step="1"]{ animation-delay:.06s; } body.is-open [data-step="2"]{ animation-delay:.2s; } body.is-open [data-step="3"]{ animation-delay:.3s; } body.is-open [data-step="4"]{ animation-delay:.42s; } body.is-open [data-step="5"]{ animation-delay:.54s; } body.is-open [data-step="6"]{ animation-delay:.7s; } body.is-open [data-step="7"]{ animation-delay:1s; } .reveal__lead{ margin:0; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.75rem,5.4vw,3.1rem); line-height:1.28; letter-spacing:.005em; color:var(--ink); text-shadow:0 1px 2px rgba(255,253,247,.9), 0 2px 20px rgba(255,251,241,.8); } .date{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(2.9rem,10.5vw,5.7rem); line-height:1.02; letter-spacing:.005em; white-space:nowrap; color:var(--ink); text-shadow:0 1px 2px rgba(255,253,247,.9), 0 2px 20px rgba(255,251,241,.8); } .place{ margin:0; font-family:var(--sans); font-size:clamp(.78rem,2vw,.94rem); font-weight:300; letter-spacing:.3em; text-transform:uppercase; text-indent:.3em; font-weight:400; color:var(--ink); text-shadow:0 1px 2px rgba(255,253,247,.9), 0 2px 20px rgba(255,251,241,.8); } .reveal__actions{ margin-top:.4rem; } /* ---------- Scroll cue ---------- */ .scroll-cue{ position:absolute; z-index:3; bottom:clamp(1.6rem,4vh,2.8rem); left:0; right:0; margin-inline:auto; width:max-content; display:flex; flex-direction:column; align-items:center; gap:.7rem; text-decoration:none; } .scroll-cue__label{ font-size:.62rem; font-weight:400; letter-spacing:.4em; text-transform:uppercase; text-indent:.4em; color:var(--ink); text-shadow:0 1px 2px rgba(255,253,247,.9); } .scroll-cue__line{ width:1px; height:46px; background:linear-gradient(180deg, rgba(59,50,39,.85), transparent); transform-origin:top; animation:drip 2.6s ease-in-out infinite; } body.is-open .scroll-cue{ animation-fill-mode:both; } /* ========================================================= 3 · SECTIONS ========================================================= */ .section{ padding:clamp(4.5rem,13vh,8.5rem) 0; position:relative; } .section__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:clamp(2.5rem,6vh,3.75rem); } .section__title{ margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(1.85rem,5vw,2.9rem); line-height:1.2; color:var(--ink); max-width:22ch; text-wrap:balance; } .section--guests .section__head, .section--travel .section__head, .travel-foot{ text-shadow:0 1px 2px rgba(255,253,247,.85), 0 2px 18px rgba(255,251,241,.7); } .section__lede{ margin:0; max-width:52ch; font-size:clamp(.94rem,2vw,1.02rem); color:var(--ink-soft); line-height:1.75; } /* Frosted paper card */ .card{ background:rgba(253,249,241,.90); backdrop-filter:blur(12px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05); border:1px solid rgba(190,167,128,.34); border-radius:var(--radius); box-shadow:0 18px 50px -24px rgba(70,52,32,.36); } /* ---------- The crest ---------- */ .crest{ display:block; width:auto; margin-inline:auto; } .crest--head{ height:clamp(58px,9vw,76px); margin-bottom:.4rem; opacity:.78; } /* ---------- Attending / not attending ---------- */ .rsvp{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-bottom:2rem; } .rsvp__btn{ font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-indent:.2em; color:var(--ink); padding:1.15rem 2.5rem; cursor:pointer; border:1px solid rgba(190,167,128,.55); border-radius:var(--pill); background:#fdfaf3; box-shadow:0 8px 22px -10px rgba(70,52,32,.42); transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .rsvp__btn:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 16px 30px -14px rgba(70,52,32,.55); } .rsvp__btn:focus-visible{ outline:1px solid var(--gold-deep); outline-offset:3px; } .rsvp__btn:active{ transform:translateY(0); } /* The one they picked fills in, so the choice stays obvious */ .rsvp__btn[aria-pressed="true"]{ background:var(--olive-deep); border-color:var(--olive-deep); color:var(--parchment); box-shadow:0 12px 26px -12px rgba(50,56,42,.7); } @media (max-width:520px){ .rsvp{ flex-direction:column; } .rsvp__btn{ width:100%; padding-inline:1rem; } } /* The address block only applies to guests who are coming */ .address-block[hidden]{ display:none; } /* ---------- Form ---------- */ .form{ padding:0; } .panel{ padding:clamp(1.7rem,4.5vw,2.9rem); animation:rise-in .7s var(--ease-out-soft) both; } .panel__intro{ margin:0 0 1.6rem; text-align:center; font-size:1.02rem; line-height:1.75; color:var(--ink-soft); } .thanks__reminder{ margin:.4rem 0 0; max-width:42ch; padding:.9rem 1.1rem; text-align:left; border-left:2px solid rgba(195,154,92,.6); background:rgba(233,220,196,.34); border-radius:0 var(--radius-sm,12px) var(--radius-sm,12px) 0; font-size:.9rem; line-height:1.7; color:var(--ink-soft); } .thanks__reminder-label{ display:block; margin-bottom:.25rem; font-size:.64rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); } .thanks__extra{ margin:.2rem 0 0; font-size:.86rem; color:var(--ink-faint); } .thanks__extra a{ color:var(--gold-deep); text-decoration:none; border-bottom:1px solid rgba(169,127,69,.5); } .thanks__extra a:hover{ color:var(--ink); border-color:var(--ink); } .notes{ list-style:none; margin:1.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem; } .note{ padding-left:1rem; border-left:2px solid rgba(195,154,92,.5); font-size:.92rem; line-height:1.7; color:var(--ink-soft); } .note__label{ display:block; font-size:.66rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.3rem; } .field{ display:flex; flex-direction:column; gap:.42rem; margin-bottom:1.15rem; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; } .field-row--three{ grid-template-columns:1.3fr 1fr 1fr; } label{ font-size:.7rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); } .req{ color:var(--terracotta); font-size:.85em; } .opt{ text-transform:none; letter-spacing:.02em; font-style:italic; color:var(--ink-faint); font-size:.85em; } input, textarea, select{ width:100%; font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--ink); background:rgba(255,253,248,.72); border:0; border-bottom:1px solid rgba(150,127,92,.42); border-radius:0; padding:.66rem .2rem; transition:border-color .3s ease, background .3s ease; -webkit-appearance:none; appearance:none; } textarea{ resize:vertical; line-height:1.6; min-height:5.2rem; } input::placeholder, textarea::placeholder{ color:var(--ink-faint); opacity:.65; } input:focus, textarea:focus, select:focus{ outline:none; border-bottom-color:var(--gold-deep); background:rgba(255,252,244,.95); } .select-wrap{ position:relative; } .select-wrap::after{ content:""; position:absolute; right:.35rem; top:47%; width:6px; height:6px; border-right:1px solid var(--ink-soft); border-bottom:1px solid var(--ink-soft); transform:translateY(-50%) rotate(45deg); pointer-events:none; } select{ cursor:pointer; padding-right:1.6rem; } .field--invalid input, .field--invalid textarea{ border-bottom-color:var(--terracotta); } .field__error{ margin:0; min-height:0; font-size:.78rem; font-style:italic; color:var(--terracotta); opacity:0; transition:opacity .25s ease; } .field--invalid .field__error{ opacity:1; } /* honeypot */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form__foot{ display:flex; flex-direction:column; align-items:center; gap:.9rem; margin-top:1.9rem; text-align:center; } .form__note{ margin:0; font-size:.8rem; font-style:italic; color:var(--ink-faint); } .form__status{ margin:.9rem 0 0; text-align:center; font-size:.88rem; min-height:1.2em; color:var(--terracotta); } .form__status--ok{ color:var(--olive); } /* ---------- Buttons ---------- */ .btn{ position:relative; font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; text-indent:.28em; padding:1.05rem 2.6rem; border-radius:var(--pill); cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .btn:active{ transform:translateY(1px); } .btn--solid{ border:1px solid var(--olive-deep); background:var(--olive-deep); color:var(--parchment); box-shadow:0 10px 24px -12px rgba(50,56,42,.7); } .btn--solid:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(50,44,32,.75); } /* White paper pill at rest, olive on hover */ .btn--ghost{ border:1px solid rgba(190,167,128,.55); background:#fdfaf3; color:var(--ink); box-shadow:0 8px 22px -10px rgba(70,52,32,.42); } .btn--ghost:hover{ background:var(--olive-deep); border-color:var(--olive-deep); color:var(--parchment); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(50,56,42,.6); } .btn__spinner{ display:none; position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-8px 0 0 -8px; border:1px solid rgba(247,240,228,.35); border-top-color:var(--parchment); border-radius:50%; animation:spin .75s linear infinite; } .btn.is-busy{ pointer-events:none; } .btn.is-busy .btn__label{ opacity:0; } .btn.is-busy .btn__spinner{ display:block; } /* ---------- Thank-you card ---------- */ .thanks{ padding:clamp(2.4rem,6vw,3.6rem); text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.1rem; animation:rise-in 1s var(--ease-out-soft) both; } .thanks__title{ margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,5vw,2.5rem); color:var(--ink); } .thanks__body{ margin:0; max-width:40ch; color:var(--ink-soft); line-height:1.75; } .thanks__sign{ margin:.4rem 0 0; font-family:var(--script); font-size:2rem; line-height:1.2; color:var(--gold-deep); } /* ---------- Travel ---------- */ /* Four cards, so a 2x2 block reads better than a cramped single row. */ .travel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem; max-width:900px; margin-inline:auto; } @media (max-width:720px){ .travel-grid{ grid-template-columns:1fr; } } .travel-card{ padding:clamp(1.6rem,3.5vw,2.1rem); display:flex; flex-direction:column; gap:.7rem; } .travel-card__num{ margin:0; font-family:var(--serif); font-size:1.6rem; font-weight:300; color:var(--gold); line-height:1; } .travel-card__title{ margin:0; font-family:var(--serif); font-weight:400; font-size:1.45rem; color:var(--ink); } .travel-card__body{ margin:0; font-size:.94rem; color:var(--ink-soft); line-height:1.72; } .travel-card__body strong{ font-weight:500; color:var(--ink); } .travel-card__pending{ margin:auto 0 0; /* sits at the bottom so cards line up */ padding-top:.85rem; border-top:1px solid rgba(190,167,128,.4); font-size:.74rem; font-style:italic; letter-spacing:.04em; color:var(--ink-faint); } /* ---------- Flights ---------- */ .prose{ max-width:56ch; margin-inline:auto; text-align:center; } .prose p{ margin:0 0 1.15rem; font-size:1rem; line-height:1.8; color:var(--ink-soft); } .prose p:last-child{ margin-bottom:0; } .prose strong{ font-weight:500; color:var(--ink); } .glance__caption{ margin:1.4rem auto 0; max-width:52ch; text-align:center; font-size:.92rem; line-height:1.7; color:var(--ink-soft); } .prose__foot{ margin:2.2rem auto 0; max-width:46ch; text-align:center; font-size:.88rem; font-style:italic; color:var(--ink-faint); } /* Airport / arrive / depart, set as three quiet columns — deliberately not cards, so this section reads differently from Where to Stay. */ .glance{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:clamp(2.2rem,5vh,3rem); padding:clamp(1.5rem,4vw,2rem) 1rem; border-top:1px solid rgba(190,167,128,.42); border-bottom:1px solid rgba(190,167,128,.42); } .glance__item{ text-align:center; } .glance__label{ margin:0 0 .55rem; font-size:.62rem; font-weight:400; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--gold-deep); } .glance__value{ margin:0 0 .3rem; font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,4.4vw,2.1rem); line-height:1; color:var(--ink); } .glance__note{ margin:0; font-size:.78rem; font-style:italic; color:var(--ink-soft); } @media (max-width:560px){ .glance{ grid-template-columns:1fr; gap:1.6rem; } } /* ---------- Hotel cards ---------- */ .hotel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem; max-width:900px; margin:1.15rem auto 0; } /* Three across for the stay section; the modifier must follow the base rule above, since both are single-class and source order decides. */ .hotel-grid--three{ grid-template-columns:repeat(3,1fr); max-width:1120px; } @media (max-width:980px){ .hotel-grid--three{ grid-template-columns:1fr; max-width:540px; } } @media (max-width:820px){ .hotel-grid{ grid-template-columns:1fr; } } .hotel-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; padding:clamp(1.6rem,3.5vw,2.1rem); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .hotel-card:hover{ transform:translateY(-3px); box-shadow:0 26px 60px -26px rgba(70,52,32,.5); } .hotel-card__badge{ margin:0; padding:.42rem 1rem; border-radius:var(--pill); font-size:.63rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-indent:.18em; } .hotel-card__badge--adults{ background:rgba(195,154,92,.18); color:var(--gold-deep); } .hotel-card__badge--family{ background:rgba(109,115,85,.18); color:var(--olive-deep); } .hotel-card__badge--rental{ background:rgba(157,182,181,.30); color:#4c605e; } .hotel-card__name{ margin:.15rem 0 0; font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.2; color:var(--ink); } .hotel-card__meta{ margin:0; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .hotel-card__body{ margin:.3rem 0 0; font-size:.93rem; line-height:1.72; color:var(--ink-soft); } .hotel-card__features{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; width:100%; flex:1; } .hotel-card__features li{ position:relative; padding-left:1.35rem; font-size:.86rem; line-height:1.55; color:var(--ink-soft); } /* small gold tick */ .hotel-card__features li::before{ content:""; position:absolute; left:.1rem; top:.45em; width:.42rem; height:.72rem; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(42deg); } .hotel-card__cta{ margin-top:1.1rem; align-self:stretch; text-align:center; font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-indent:.2em; text-decoration:none; color:var(--ink); padding:1rem 1.5rem; border:1px solid rgba(190,167,128,.6); border-radius:var(--pill); background:#fdfaf3; box-shadow:0 8px 22px -10px rgba(70,52,32,.42); transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .hotel-card__cta:hover{ background:var(--olive-deep); border-color:var(--olive-deep); color:var(--parchment); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(50,56,42,.6); } .hotel-card__cta:focus-visible{ outline:1px solid var(--gold-deep); outline-offset:3px; } .hotel-card__arrow{ font-size:.85em; opacity:.7; padding-left:.3em; } .travel-foot{ margin:clamp(2.4rem,6vh,3.4rem) auto 0; max-width:46ch; text-align:center; font-style:italic; color:var(--ink-soft); } /* ---------- Closing ---------- */ /* Built from live text over a text-free band of the same painting, so the height is ours to choose and the lettering stays sharp at any size. */ .footer{ position:relative; margin-top:clamp(2rem,5vh,3.25rem); padding:clamp(1.9rem,4.2vw,2.5rem) 1.25rem clamp(2rem,4.6vw,2.7rem); text-align:center; color:#fdf8ef; background-color:#6b5a48; overflow:hidden; /* clips the oversized blurred layer below */ } /* Blur softens the brushwork so it stops competing with the script. The layer is inset negatively because blur samples beyond an element's edges: at inset 0 the border would fade out and show the flat background-colour as a pale rim. Adjust blur() to taste. */ .footer__bg{ position:absolute; inset:-28px; z-index:0; background-image:url("../img/footer-band.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; filter:blur(5px); } /* Keeps the cream lettering off the lighter passages of the brushwork */ .footer::before{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(64% 86% at 50% 56%, rgba(28,18,10,.26) 0%, rgba(28,18,10,0) 78%), linear-gradient(180deg, rgba(38,26,15,.22) 0%, rgba(38,26,15,.16) 42%, rgba(34,23,13,.32) 100%); } .footer__inner{ position:relative; z-index:2; /* above the painting and the scrim */ display:flex; flex-direction:column; align-items:center; gap:.15rem; } .footer__crest{ width:auto; height:clamp(48px,6.8vw,64px); margin-bottom:.7rem; opacity:1; filter:drop-shadow(0 1px 3px rgba(30,20,11,.55)); } .footer__love{ margin:0; font-family:var(--script); font-size:clamp(1.4rem,4vw,1.85rem); line-height:1.2; color:#fdf8ef; text-shadow:0 1px 3px rgba(30,20,11,.55), 0 2px 18px rgba(30,20,11,.5); } .footer__names{ margin:0; font-family:var(--script); font-weight:400; font-size:clamp(2.05rem,6.2vw,3rem); line-height:1.15; color:#fdf8ef; text-shadow:0 1px 3px rgba(30,20,11,.55), 0 2px 20px rgba(30,20,11,.5); } .footer__meta{ margin:1.1rem 0 0; font-family:var(--sans); font-size:clamp(.66rem,1.7vw,.72rem); font-weight:400; letter-spacing:.28em; text-indent:.3em; text-transform:uppercase; color:rgba(253,248,239,.9); text-shadow:0 1px 3px rgba(30,20,11,.6), 0 2px 12px rgba(30,20,11,.5); } /* ---------- Scroll-triggered entrances ---------- */ .reveal-on-scroll{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease-out-soft), transform 1s var(--ease-out-soft); } .reveal-on-scroll.is-visible{ opacity:1; transform:none; } /* ========================================================= Keyframes ========================================================= */ @keyframes rise-in{ from{ opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } @keyframes breathe{ 0%,100%{ opacity:.72; } 50% { opacity:1; } } @keyframes drip{ 0% { transform:scaleY(0); opacity:0; } 35% { transform:scaleY(1); opacity:1; } 70% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1) translateY(14px); opacity:0; } } @keyframes spin{ to{ transform:rotate(360deg); } } /* ========================================================= Responsive ========================================================= */ @media (max-width:640px){ .field-row, .field-row--three{ grid-template-columns:1fr; } .form{ padding:1.6rem 1.35rem; } .curtain__inner{ gap:2rem; } .envelope{ --w:min(78vw,330px); } input, textarea, select{ font-size:16px; } /* stops iOS zoom-on-focus */ .btn{ width:100%; padding-inline:1rem; } .reveal__lead{ font-size:clamp(1.6rem,7vw,2.2rem); } } /* Wide screens: let the painting breathe */ @media (min-width:1500px){ .curtain__art, .reveal__art{ background-position:center 46%; } } /* ========================================================= Reduced motion — keep the reveal, drop the theatre ========================================================= */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal-on-scroll{ opacity:1; transform:none; } [data-step]{ opacity:1; transform:none; } }