/* ============================================================ Decorative layer v3 — Mayon watercolor heroes, botanicals, animated + scroll-driven doves, image effects. All 4 Higgsfield images (corner, divider, mayon, wreath) are used on every page. Removable: delete /media/decor and the two tags injected in each page . ============================================================ */ /* ---------- premium unified navbar (all pages, all scroll states) ---------- */ header.fixed{ background:rgba(250,247,238,.82)!important; -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); border-bottom:1px solid rgba(184,147,74,.38); box-shadow:0 12px 34px rgba(62,66,31,.09)!important; } header.fixed::before{ /* thin gold accent along the very top */ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,transparent 4%,var(--color-gold,#b8934a) 30%,#d4b878 50%,var(--color-gold,#b8934a) 70%,transparent 96%); opacity:.85; } header.fixed > div > a:first-child{ /* C & A monogram */ color:var(--color-wax,#8e3a28)!important; text-shadow:none; } header.fixed nav a:not([class*="btn"]){ color:var(--color-ink-soft,#5c5140)!important; text-shadow:none; position:relative; padding-bottom:4px; } header.fixed nav a:not([class*="btn"])::after{ content:""; position:absolute; left:0;right:0;bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--color-gold,#b8934a),transparent); transform:scaleX(0); transition:transform .35s ease; } header.fixed nav a:not([class*="btn"]):hover{color:var(--color-wax,#8e3a28)!important} header.fixed nav a:not([class*="btn"]):hover::after{transform:scaleX(1)} header.fixed nav a[class*="text-gold-light"]:not([class*="btn"]){ /* current page */ color:#8f7135!important; } header.fixed nav a[class*="text-gold-light"]:not([class*="btn"])::after{transform:scaleX(1)} header.fixed button{color:var(--color-ink,#322a20)!important} /* mobile burger */ /* ---------- corner botanicals — every page ---------- */ .decor-corners body::before, .decor-corners body::after{ content:""; position:fixed; width:min(30vw,300px); aspect-ratio:1; background:url(/media/decor/corner.webp) top left/contain no-repeat; opacity:.9; pointer-events:none; z-index:45; } .decor-corners body::before{top:60px;left:0} /* clears the fixed navbar */ .decor-corners body::after{bottom:0;right:0;transform:rotate(180deg)} @media (max-width:768px){ .decor-corners body::before, .decor-corners body::after{width:130px;opacity:.55} } /* ---------- painted section dividers — every page ---------- */ .hr-ornament{ background:url(/media/decor/divider.webp) center/contain no-repeat; min-height:52px; justify-content:center; } .hr-ornament::before, .hr-ornament::after{display:none} .hr-ornament span{visibility:hidden} /* ---------- Mayon watercolor hero (all pages) ---------- Extra radial parchment scrim behind the text keeps titles readable over the busy watercolor. */ .decor-hero{ background: radial-gradient(ellipse 64% 56% at 50% 58%, rgba(244,239,227,.82) 0%, rgba(244,239,227,.30) 55%, rgba(244,239,227,0) 78%), linear-gradient(180deg, rgba(244,239,227,.22) 0%, rgba(244,239,227,.06) 45%, rgba(244,239,227,.94) 100%), url(/media/decor/mayon.webp) center 38%/cover no-repeat, var(--color-parchment,#f4efe3); } .decor-hero > img{display:none!important} .decor-hero-home img{display:none!important} .decor-hero .vignette, .decor-hero .light-rays, .decor-hero-home [class*="bg-gradient-to-b"]{display:none!important} /* hero text recolor for the light watercolor backdrop */ .decor-hero h1{ color:var(--color-olive-dark,#3e421f)!important; text-shadow:0 2px 18px rgba(244,239,227,.95),0 1px 2px rgba(244,239,227,.8); } /* recolor hero text for the light backdrop — never touch filled buttons, whose cream label must stay cream against their solid fill */ .decor-hero [class*="text-cream"]:not(h1):not(button):not(a){ color:#463e30!important; text-shadow:0 1px 12px rgba(244,239,227,.95),0 0 22px rgba(244,239,227,.65); } /* gold accents (eyebrows, "Dear ," ornaments) sit over the volcano's mid-tone peak — deepen to an antique bronze and give them a parchment halo */ .decor-hero [class*="text-gold-light"]{ color:#5f4919!important; text-shadow:0 1px 10px rgba(244,239,227,.98),0 0 20px rgba(244,239,227,.85),0 0 3px rgba(244,239,227,.9); } /* home hero: light re-skin of countdown glass + ghost buttons */ .decor-hero-home .glass-dark{ background:rgba(250,247,238,.78)!important; border:1px solid rgba(184,147,74,.4); box-shadow:0 10px 30px rgba(62,66,31,.12); } .decor-hero-home .glass-dark [class*="text-cream"]{color:var(--color-olive-dark,#3e421f)!important} .decor-hero-home .btn-ghost-light{ color:var(--color-olive-dark,#3e421f)!important; border-color:rgba(62,66,31,.5)!important; text-shadow:none; } .decor-hero-home .btn-ghost-light:hover{ background:rgba(62,66,31,.08); } /* couple names lockup above inner-page titles */ .decor-hero-names{ font-family:var(--font-script,'Great Vibes',cursive); font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.1; color:var(--color-wax,#8e3a28); margin-bottom:.4rem; text-shadow:0 1px 12px rgba(244,239,227,.95); } .decor-hero-names .amp{color:#9a7a38;padding:0 .18em} .decor-hero-names::after{ content:""; display:block; width:72px;height:1px;margin:.55rem auto .9rem; background:linear-gradient(90deg,transparent,var(--color-gold,#b8934a),transparent); } /* wreath on the hero section (blends with the watercolor) */ .decor-hero .decor-wreath{ position:absolute; left:50%;top:52%; transform:translate(-50%,-50%); width:min(440px,86vw); aspect-ratio:1; background:url(/media/decor/wreath.webp) center/contain no-repeat; opacity:.4; pointer-events:none; } .decor-hero-home .decor-wreath{opacity:.26;top:44%;width:min(560px,92vw)} @media (prefers-reduced-motion:no-preference){ .decor-hero .decor-wreath{animation:decorWreathIn 1.8s ease both} @keyframes decorWreathIn{ from{opacity:0;transform:translate(-50%,-50%) scale(.94)} to{opacity:var(--wreath-o,.4);transform:translate(-50%,-50%) scale(1)} } } .decor-hero .decor-wreath{--wreath-o:.4} .decor-hero-home .decor-wreath{--wreath-o:.26} /* light compact page-heads (gallery) */ .decor-hero-lite{ position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(244,239,227,.6) 0%, rgba(244,239,227,.95) 100%), url(/media/decor/mayon.webp) center 30%/cover no-repeat; } .decor-hero-lite > *{position:relative;z-index:1} /* ---------- Mayon wash behind Travel Notes (details) ---------- */ .decor-mayon{ position:absolute; inset:0; background:url(/media/decor/mayon.webp) center/cover no-repeat; mix-blend-mode:multiply; opacity:.45; pointer-events:none; } /* ---------- doves ---------- */ .decor-doves{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; } .decor-dove{ position:absolute; left:-12%; color:#fffdf7; filter:drop-shadow(0 3px 6px rgba(50,42,32,.3)); animation:doveFly var(--fly-dur,20s) linear var(--fly-delay,0s) infinite; opacity:0; } .decor-hero .decor-dove, .decor-hero-lite .decor-dove{color:#fffdf7} .decor-dove svg{width:100%;height:auto;display:block} .decor-dove .wing{ transform-origin:44px 42px; animation:doveFlap 1.15s ease-in-out infinite alternate; } .decor-dove.d1{top:16%;width:52px;--fly-dur:19s;--fly-delay:1s} .decor-dove.d2{top:26%;width:38px;--fly-dur:24s;--fly-delay:4.5s} .decor-dove.d3{top:10%;width:28px;--fly-dur:29s;--fly-delay:8s} .decor-dove.d2 .wing{animation-duration:1.35s} .decor-dove.d3 .wing{animation-duration:1.5s} @keyframes doveFly{ 0%{transform:translate(0,0) rotate(2deg);opacity:0} 4%{opacity:.9} 25%{transform:translate(30vw,-2.2vh) rotate(-2deg)} 50%{transform:translate(60vw,1.6vh) rotate(2deg)} 75%{transform:translate(90vw,-1.4vh) rotate(-1deg)} 92%{opacity:.85} 100%{transform:translate(124vw,.6vh) rotate(1deg);opacity:0} } @keyframes doveFlap{ from{transform:rotate(-10deg)} to{transform:rotate(26deg)} } /* scroll-driven cinematic doves — fixed layer, driven by decor.js */ .decor-scroll-doves{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:44; } .decor-scroll-doves .decor-dove{ animation:none; opacity:0; transition:opacity .5s ease; will-change:transform; color:#efe6cf; filter:drop-shadow(0 4px 8px rgba(50,42,32,.35)); } .decor-scroll-doves .decor-dove .wing{animation:doveFlap 1.05s ease-in-out infinite alternate} .decor-scroll-doves .sd1{top:0;width:44px} .decor-scroll-doves .sd2{top:0;width:30px} .decor-scroll-doves.scrolling .decor-dove{opacity:.85} @media (prefers-reduced-motion:reduce){ .decor-doves,.decor-scroll-doves{display:none} } @media (max-width:640px){ .decor-dove.d1{width:38px} .decor-dove.d2{width:28px} .decor-dove.d3{display:none} .decor-scroll-doves .sd2{display:none} } /* Sponsors is a personal-invitation page (links sent individually from the admin panel) — keep the URL working but remove it from public navigation. */ a[href="/sponsors"]{display:none!important} /* The footer Admin link client-side-routes into the OLD compiled admin baked into the Next chunks — a different panel than /admin. Remove it everywhere; the couple reaches the real admin by typing /admin directly. */ a[href="/admin"]{display:none!important} /* invitation response buttons (sponsors & entourage): yes = olive green, decline = red */ button.decor-yes{ background:linear-gradient(180deg,#6b7036,#565b2b)!important; color:var(--color-cream,#faf7ee)!important; border:1px solid #4c5126!important; box-shadow:0 8px 22px rgba(86,91,43,.35); transition:transform .25s ease,box-shadow .25s ease,filter .25s ease; } button.decor-yes:hover{ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 12px 28px rgba(86,91,43,.45); } button.decor-no{ background:linear-gradient(180deg,#9d4030,#6f2b1d)!important; color:var(--color-cream,#faf7ee)!important; border:1px solid #5e2417!important; text-shadow:none; box-shadow:0 8px 22px rgba(111,43,29,.3); transition:transform .25s ease,box-shadow .25s ease,filter .25s ease; } button.decor-no:hover{ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 12px 28px rgba(111,43,29,.4); } /* RSVP attendance toggles — yes = olive green, no = red. Targeted structurally (first/last of the 2-button grid) because React rewrites these buttons' className on every toggle. The app marks the chosen button with .bg-wax, so selected and unselected are styled apart. */ .decor-rsvp main .grid.grid-cols-2 > button:first-child.bg-wax{ background:linear-gradient(180deg,#6b7036,#565b2b)!important; border-color:#4c5126!important; color:#faf7ee!important; text-shadow:none!important; box-shadow:0 8px 20px rgba(86,91,43,.32); } .decor-rsvp main .grid.grid-cols-2 > button:first-child:not(.bg-wax){ color:#565b2b!important; border-color:rgba(86,91,43,.45)!important; } .decor-rsvp main .grid.grid-cols-2 > button:first-child:not(.bg-wax):hover{ border-color:#565b2b!important; background:rgba(86,91,43,.09)!important; } .decor-rsvp main .grid.grid-cols-2 > button:last-child.bg-wax{ background:linear-gradient(180deg,#9d4030,#6f2b1d)!important; border-color:#5e2417!important; color:#faf7ee!important; text-shadow:none!important; box-shadow:0 8px 20px rgba(111,43,29,.3); } .decor-rsvp main .grid.grid-cols-2 > button:last-child:not(.bg-wax){ color:#8a3826!important; border-color:rgba(142,58,40,.4)!important; } .decor-rsvp main .grid.grid-cols-2 > button:last-child:not(.bg-wax):hover{ border-color:#8e3a28!important; background:rgba(142,58,40,.08)!important; } /* mobile: keep form font at 16px so iOS Safari doesn't zoom on focus */ @media (max-width:768px){ main input, main select, main textarea{font-size:16px!important} } /* ---------- home: remove the stuck cinematic letterbox bars ---------- The Save-the-Date section renders two 96px black bars that were meant to retract on scroll; they never animate, leaving hard black gaps against the parchment hero above and the olive section below. */ .bg-\[\#0d0a04\]{display:none!important} /* ---------- guest message wall ---------- The letter-paper texture goes on the post form (one large surface where it reads as real stationery). The message cards stay clean cream so the handwriting-style italic text is legible while the row scrolls. */ /* the "write a message" form — a sheet of vintage letter paper */ .decor-letter-form{ /* letter cutout only — no wash layer: a gradient over a transparent PNG paints the whole element box and reappears as a pale rectangle */ background-image:url(/media/decor/letter.webp)!important; background-size:100% 100%!important; background-repeat:no-repeat!important; /* drop the glass panel so only the paper sheet shows (its own soft shadow is baked into the image — a box-shadow here would re-draw a rectangle) */ background-color:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border:none!important; box-shadow:none!important; padding:3.6rem 3.6rem 3.2rem!important; /* keep fields inside the deckled edges */ } @media (max-width:640px){ .decor-letter-form{padding:2.8rem 2rem 2.4rem!important} } .decor-letter-form .label-luxe{color:#443c2d!important} .decor-letter-form .input-luxe{ background:rgba(255,254,250,.86)!important; border-color:rgba(184,147,74,.45)!important; } /* message cards — pressed note: clean paper, gold hairline, sprig watermark */ .decor-note{ background:linear-gradient(180deg,#fffdf8,#f8f3e8)!important; border:1px solid rgba(184,147,74,.4)!important; border-radius:3px!important; box-shadow:0 10px 26px rgba(62,66,31,.13),inset 0 1px 0 rgba(255,255,255,.75)!important; transform:none!important; overflow:hidden; transition:box-shadow .4s ease,transform .4s cubic-bezier(.22,1,.36,1); } .decor-note::before{ /* inner hairline frame */ content:""; position:absolute; inset:7px; border:1px solid rgba(184,147,74,.22); border-radius:2px; pointer-events:none; } .decor-note::after{ /* olive sprig watermark, bottom-right, behind nothing */ content:""; position:absolute; right:-16px; bottom:-18px; width:96px; height:96px; background:url(/media/decor/corner.webp) center/contain no-repeat; opacity:.10; transform:rotate(180deg); pointer-events:none; z-index:0; } .decor-note{cursor:pointer} .decor-note:hover, .decor-note:focus-visible{ transform:translateY(-4px)!important; box-shadow:0 18px 38px rgba(62,66,31,.2),inset 0 1px 0 rgba(255,255,255,.75)!important; outline:none; } .decor-note:focus-visible{border-color:#b8934a!important} /* long messages: clamp to keep every card uniform and never collide with the quote glyph or the sprig; the full text opens in the modal */ .decor-note .decor-letter-body{ color:#2c2419!important; font-style:italic; font-size:1.06rem; line-height:1.6; position:relative; z-index:1; padding-right:2.1rem; /* clears the quote glyph, top-right */ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .decor-note .decor-read-more{ position:relative; z-index:1; display:block; margin-top:.55rem; font-family:var(--font-sans,'Jost',sans-serif); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:#9a7a38; } /* ---------- message modal ---------- */ .decor-modal{ position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:1.4rem; background:rgba(35,29,18,.62); opacity:0; visibility:hidden; /* keep it fully out of the render path */ pointer-events:none; transition:opacity .35s ease,visibility 0s linear .35s; } .decor-modal.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease,visibility 0s; /* blur only while open — a permanent full-screen backdrop-filter forces a compositing layer over the whole page and stalls painting */ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .decor-modal-sheet{ position:relative; width:min(620px,100%); max-height:84vh; overflow:auto; padding:3.4rem 3rem 3rem; /* 9-slice keeps the deckled edge a fixed 46px thick at any sheet height (letter.webp is cropped to the paper; fade zone = outer ~18px) */ border:0 solid transparent; border-image:url(/media/decor/letter.webp) 46 fill / 46px stretch; transform:translateY(14px) scale(.98); transition:transform .4s cubic-bezier(.22,1,.36,1); text-align:center; } .decor-modal.open .decor-modal-sheet{transform:none} .decor-modal-quote{ font-family:var(--font-serif,'Cormorant Garamond',serif); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.35rem); line-height:1.7; color:#2c2419; margin:0 0 1.4rem; white-space:pre-wrap; overflow-wrap:anywhere; } .decor-modal-rule{ width:64px;height:1px;margin:0 auto 1rem; background:linear-gradient(90deg,transparent,#b8934a,transparent); } .decor-modal-name{ font-family:var(--font-sans,'Jost',sans-serif); font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; color:#4f4636;font-weight:500; } .decor-modal-date{ font-family:var(--font-sans,'Jost',sans-serif); font-size:.6rem;letter-spacing:.2em;text-transform:uppercase; color:#9a7a38;margin-top:.3rem; } .decor-modal-close{ position:absolute;top:1.3rem;right:1.4rem; /* stays inside the 18px deckle fade */ width:38px;height:38px;border-radius:50%; border:1px solid rgba(92,81,64,.3); background:rgba(255,253,248,.7); color:#5c5140;font-size:1.1rem;line-height:1;cursor:pointer; transition:background .25s,border-color .25s; } .decor-modal-close:hover{background:#fff;border-color:#8e3a28;color:#8e3a28} @media (max-width:640px){ .decor-modal-sheet{padding:2.8rem 1.8rem 2.2rem} } .decor-note [class*="text-gold"]{color:#9a7a38!important} .decor-note [class*="text-ink-soft"]{color:#4f4636!important} /* ---------- readability pass (all pages) ---------- Body copy and eyebrow labels sat too light over the watercolor art. */ main [class*="text-ink-soft"]{color:#4f4636!important} main [class*="text-wax"]:not(button):not([class*="bg-"]){color:#8a3826!important} main [class*="text-gold-light"]:not(.decor-hero *){color:#8f7135!important} main [class*="italic"]{text-shadow:0 1px 8px rgba(244,239,227,.75)} /* watercolor-backed sections need a touch more contrast for paragraphs */ .decor-mayon ~ * p, .decor-hero-lite p{color:#463e30!important} .label-luxe{color:#4f4636!important;font-weight:500} /* ---------- gentle effects for content imagery ---------- */ main img:not([class*="decor"]){ transition:transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease; } main a:hover img, main .card-luxe:hover img{ transform:scale(1.03); filter:saturate(1.06) brightness(1.02); } /* ============================================================ Gift section (home) — injected by decor.js from site_content.gift. Parchment card with a gold-shimmer QR frame, tap-to-copy account rows, drifting sparks and a scroll-triggered reveal. ============================================================ */ .decor-gift{ position:relative; overflow:hidden; padding:6rem 1.4rem; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(184,147,74,.16) 0%, rgba(184,147,74,0) 62%), linear-gradient(180deg,#f7f2e6 0%,#f2ecdd 100%); border-top:1px solid rgba(184,147,74,.28); border-bottom:1px solid rgba(184,147,74,.28); text-align:center; } .decor-gift-glow{ position:absolute;left:50%;top:-30%; width:min(760px,120%);aspect-ratio:1;transform:translateX(-50%); background:radial-gradient(circle,rgba(212,184,120,.28) 0%,rgba(212,184,120,0) 68%); pointer-events:none; animation:decor-gift-breathe 9s ease-in-out infinite; } @keyframes decor-gift-breathe{ 0%,100%{opacity:.55;transform:translateX(-50%) scale(1)} 50%{opacity:.95;transform:translateX(-50%) scale(1.08)} } /* drifting gold sparks */ .decor-gift-sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden} .decor-gift-sparks i{ position:absolute;bottom:-14px;left:var(--x); width:7px;height:7px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#e6cf94,#b8934a 60%,rgba(184,147,74,0) 72%); opacity:0; animation:decor-spark-rise 11s linear infinite; animation-delay:var(--t); } @keyframes decor-spark-rise{ 0%{opacity:0;transform:translateY(0) scale(.6)} 12%{opacity:.85} 70%{opacity:.5} 100%{opacity:0;transform:translateY(-88vh) translateX(26px) scale(1.05)} } .decor-gift.no-spark .decor-gift-sparks{display:none} .decor-gift-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto} .decor-gift-eyebrow{ display:block; font-family:'Jost',sans-serif;text-transform:uppercase; letter-spacing:.26em;font-size:.68rem;color:#8f7135; margin-bottom:.9rem; } .decor-gift-title{ font-family:'Great Vibes',cursive;font-weight:400; font-size:clamp(2.4rem,5.6vw,3.6rem);line-height:1.12; color:#3e421f;margin:0; } .decor-gift-rule{ width:120px;height:1px;margin:1.4rem auto; background:linear-gradient(90deg,transparent,#b8934a,transparent); } .decor-gift-intro{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.16rem;font-style:italic;line-height:1.75; color:#4f4636;max-width:56ch;margin:0 auto; } .decor-gift-note{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1rem;font-style:italic;color:#5c5140; max-width:52ch;margin:2.4rem auto 0; } /* layout: QR beside the account list, stacking on small screens */ .decor-gift-grid{ display:flex;align-items:center;justify-content:center; gap:2.6rem;flex-wrap:wrap;margin-top:2.8rem; } /* ---- QR frame with a slow shimmer sweep ---- */ .decor-gift-qr{margin:0;flex:0 0 auto} .decor-qr-frame{ position:relative;overflow:hidden; width:232px;height:232px;padding:14px; background:#fffdf8; border:1px solid rgba(184,147,74,.5); border-radius:6px; box-shadow:0 16px 40px rgba(62,66,31,.16),inset 0 0 0 1px rgba(255,255,255,.7); transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s; } .decor-qr-frame::before, .decor-qr-frame::after{ content:"";position:absolute;width:18px;height:18px; border:2px solid #b8934a;opacity:.75; } .decor-qr-frame::before{top:6px;left:6px;border-right:0;border-bottom:0} .decor-qr-frame::after{bottom:6px;right:6px;border-left:0;border-top:0} .decor-qr-frame img{ width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1; } .decor-qr-shine{ position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 62%); transform:translateX(-120%); animation:decor-qr-sweep 5.5s ease-in-out infinite; } @keyframes decor-qr-sweep{ 0%,62%{transform:translateX(-120%)} 92%,100%{transform:translateX(120%)} } .decor-gift-qr:hover .decor-qr-frame{ transform:translateY(-6px) scale(1.02); box-shadow:0 24px 54px rgba(62,66,31,.24),inset 0 0 0 1px rgba(255,255,255,.8); } .decor-gift-qr figcaption{ margin-top:.9rem; font-family:'Jost',sans-serif;text-transform:uppercase; letter-spacing:.2em;font-size:.64rem;color:#8f7135; } /* ---- account rows ---- */ .decor-gift-accounts{ flex:1 1 320px;max-width:430px; display:flex;flex-direction:column;gap:.85rem;text-align:left; } .decor-acct{ position:relative;overflow:hidden; display:grid; grid-template-columns:1fr auto; grid-template-areas:"bank copy" "name copy" "num copy"; align-items:center;gap:.1rem 1rem; padding:1rem 1.15rem; background:rgba(255,253,248,.92); border:1px solid rgba(184,147,74,.34); border-radius:5px; box-shadow:0 8px 22px rgba(62,66,31,.08); transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s; } .decor-acct::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(230,207,148,.4) 50%,rgba(255,255,255,0) 58%); transform:translateX(-130%); transition:transform .9s ease; } .decor-acct:hover{ transform:translateY(-3px); border-color:rgba(184,147,74,.7); box-shadow:0 16px 34px rgba(62,66,31,.15); } .decor-acct:hover::after{transform:translateX(130%)} .decor-acct-bank{ grid-area:bank; font-family:'Jost',sans-serif;text-transform:uppercase; letter-spacing:.2em;font-size:.62rem;color:#8f7135; } .decor-acct-name{ grid-area:name; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.06rem;color:#322a20; } .decor-acct-num{ grid-area:num; font-family:ui-monospace,Consolas,monospace; font-size:1.02rem;letter-spacing:.05em;color:#3e421f; word-break:break-all; } .decor-acct-copy{ grid-area:copy; font-family:'Jost',sans-serif;text-transform:uppercase; letter-spacing:.16em;font-size:.58rem; padding:.5rem .9rem;cursor:pointer; color:#565b2b;background:rgba(250,247,238,.9); border:1px solid rgba(124,129,64,.45);border-radius:3px; transition:background .25s,color .25s,border-color .25s,transform .25s; } .decor-acct-copy:hover{background:#7c8140;color:#faf7ee;border-color:#565b2b;transform:translateY(-1px)} .decor-acct-copy.copied{background:#565b2b;color:#faf7ee;border-color:#3e421f} /* ---- scroll reveal ---- */ .decor-gift .decor-rise{ opacity:0;transform:translateY(26px); transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0ms); } .decor-gift.in .decor-rise{opacity:1;transform:none} @media (max-width:640px){ .decor-gift{padding:4.4rem 1.2rem} .decor-gift-grid{gap:2rem} .decor-qr-frame{width:200px;height:200px} .decor-acct{grid-template-columns:1fr;grid-template-areas:"bank" "name" "num" "copy";gap:.25rem} .decor-acct-copy{justify-self:start;margin-top:.6rem} } @media (prefers-reduced-motion:reduce){ .decor-gift-glow,.decor-gift-sparks i,.decor-qr-shine{animation:none} .decor-gift .decor-rise{opacity:1;transform:none;transition:none} }