:root { --white: #ffffff; --cream: #fbf8f3; --green-soft: #f3f8ef; --green-light: #dfead4; --green-medium: #a9bc9d; --green-main: #046307; --green-dark: #465840; --pink-bg-1: #fff9fc; --pink-bg-2: #fff1f7; --pink-bg-3: #ffe5ef; --pink-bg-4: #fbd5e4; --pink-bg-5: #f5bdd3; --pink-main: #d98aa5; --pink-dark: #a94f70; --pink-deep: #8f3f5f; --pink-ink: #6f2f48; --gold: #b99158; --gold-dark: #8c683a; --gold-soft: #ead5ae; --ink: #34312c; --muted: #6c655a; --glass-bg: rgba(255, 255, 255, 0.78); --glass-strong: rgba(255, 255, 255, 0.9); --glass-border: rgba(255, 255, 255, 0.78); --border-soft: rgba(169, 79, 112, 0.18); --border-medium: rgba(169, 79, 112, 0.34); --shadow-soft: 0 18px 45px rgba(105, 45, 67, 0.08); --shadow-card: 0 28px 80px rgba(105, 45, 67, 0.13); --shadow-hover: 0 38px 100px rgba(169, 79, 112, 0.22); --shadow-button: 0 18px 36px rgba(169, 79, 112, 0.30); --font-title: "Great Vibes", cursive; --font-serif: "Cormorant Garamond", serif; --font-body: "Montserrat", sans-serif; --floral: url("assets/Bujori.webp"); --ease-premium: cubic-bezier(.16, .84, .24, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: linear-gradient(135deg, rgba(255, 249, 252, 0.96) 0%, rgba(255, 229, 239, 0.98) 44%, rgba(251, 213, 228, 0.96) 100%); overflow-x: hidden; overflow-y: auto; position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.28)), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 18px); opacity: 0.72; } body.locked { overflow: hidden; } img, iframe { max-width: 100%; } img { display: block; height: auto; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } html.locked, body.locked { overflow: hidden !important; height: 100%; } body.locked { position: fixed; inset: 0; width: 100%; height: 100svh; overscroll-behavior: none; touch-action: none; } .floating-hearts-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; } .floating-hearts-bg span { position: absolute; bottom: -90px; left: var(--heart-left); width: var(--heart-size); height: var(--heart-size); opacity: 0; animation: floatingHeart var(--heart-duration) linear infinite; animation-delay: var(--heart-delay); filter: blur(var(--heart-blur)); } .floating-hearts-bg span::before { content: "♥"; display: block; font-family: Georgia, serif; font-size: var(--heart-size); line-height: 1; color: var(--heart-color); opacity: var(--heart-opacity); text-shadow: 0 0 12px rgba(255, 206, 222, 0.9), 0 0 24px rgba(217, 138, 165, 0.34), 0 10px 22px rgba(169, 79, 112, 0.12); } .floating-hearts-bg span:nth-child(1) { --heart-left: 4%; --heart-size: 26px; --heart-delay: -2s; --heart-opacity: 0.52; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.68); } .floating-hearts-bg span:nth-child(2) { --heart-left: 10%; --heart-size: 38px; --heart-duration: 22s; --heart-opacity: 0.38; --heart-blur: 0.2px; --heart-color: rgba(248, 153, 185, 0.52); } .floating-hearts-bg span:nth-child(3) { --heart-left: 17%; --heart-size: 22px; --heart-delay: -5s; --heart-opacity: 0.5; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.62); } .floating-hearts-bg span:nth-child(4) { --heart-left: 24%; --heart-size: 48px; --heart-delay: -11s; --heart-opacity: 0.28; --heart-blur: 0.4px; --heart-color: rgba(229, 156, 181, 0.46); } .floating-hearts-bg span:nth-child(5) { --heart-left: 31%; --heart-size: 28px; --heart-delay: -3s; --heart-opacity: 0.44; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.56); } .floating-hearts-bg span:nth-child(6) { --heart-left: 39%; --heart-size: 20px; --heart-duration: 15s; --heart-delay: -9s; --heart-opacity: 0.48; --heart-blur: 0px; --heart-color: rgba(248, 180, 202, 0.62); } .floating-hearts-bg span:nth-child(7) { --heart-left: 46%; --heart-size: 42px; --heart-delay: -13s; --heart-opacity: 0.32; --heart-blur: 0.35px; --heart-color: rgba(217, 138, 165, 0.48); } .floating-hearts-bg span:nth-child(8) { --heart-left: 53%; --heart-size: 24px; --heart-duration: 18s; --heart-delay: -4s; --heart-opacity: 0.48; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.62); } .floating-hearts-bg span:nth-child(9) { --heart-left: 60%; --heart-size: 32px; --heart-duration: 23s; --heart-delay: -10s; --heart-opacity: 0.4; --heart-blur: 0px; --heart-color: rgba(248, 153, 185, 0.54); } .floating-hearts-bg span:nth-child(10) { --heart-left: 67%; --heart-size: 18px; --heart-duration: 16s; --heart-delay: -6s; --heart-opacity: 0.5; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.64); } .floating-hearts-bg span:nth-child(11) { --heart-left: 73%; --heart-size: 46px; --heart-delay: -15s; --heart-opacity: 0.28; --heart-blur: 0.5px; --heart-color: rgba(229, 156, 181, 0.44); } .floating-hearts-bg span:nth-child(12) { --heart-left: 80%; --heart-size: 26px; --heart-duration: 19s; --heart-delay: -2s; --heart-opacity: 0.46; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.58); } .floating-hearts-bg span:nth-child(13) { --heart-left: 86%; --heart-size: 34px; --heart-duration: 24s; --heart-delay: -8s; --heart-opacity: 0.36; --heart-blur: 0.2px; --heart-color: rgba(248, 180, 202, 0.52); } .floating-hearts-bg span:nth-child(14) { --heart-left: 92%; --heart-size: 22px; --heart-delay: -12s; --heart-opacity: 0.48; --heart-blur: 0px; --heart-color: rgba(217, 138, 165, 0.62); } @keyframes floatingHeart { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.76); opacity: 0; } 8% { opacity: 1; } 28% { transform: translate3d(28px, -28vh, 0) rotate(12deg) scale(0.95); } 55% { transform: translate3d(-24px, -56vh, 0) rotate(-10deg) scale(1.08); } 82% { opacity: 1; } 100% { transform: translate3d(34px, -112vh, 0) rotate(20deg) scale(1.2); opacity: 0; } } .intro, .page { position: relative; z-index: 3; } .intro-content, .container, .back-to-top { position: relative; z-index: 5; } .page { overflow: hidden; background: linear-gradient(180deg, rgba(255, 249, 252, 0.96) 0%, rgba(255, 229, 239, 0.98) 38%, rgba(251, 213, 228, 0.96) 100%); } .container { width: min(1140px, calc(100% - 40px)); margin-inline: auto; } .text-center { text-align: center; } .section-padding { padding: clamp(88px, 8vw, 140px) 0; scroll-margin-top: 96px; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-family: var(--font-title); line-height: 1; font-weight: 400; } h2 { font-size: clamp(48px, 7vw, 92px); margin-bottom: 22px; color: var(--green-main); text-wrap: balance; } h3 { font-size: clamp(34px, 3.8vw, 52px); margin-bottom: 14px; color: var(--premium-green-700); } p { color: var(--muted); line-height: 1.82; font-size: clamp(15px, 1.2vw, 16.5px); } .section-kicker, .eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pink-dark); } .section-kicker::before, .section-kicker::after, .eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink-main), transparent); } .intro { min-height: 100svh; width: 100%; overflow: hidden; background: linear-gradient(135deg, var(--pink-bg-1) 0%, var(--pink-bg-2) 48%, var(--pink-bg-4) 100%); } .intro-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(255, 249, 252, 0.96), rgba(255, 229, 239, 0.94)), var(--floral) center / cover no-repeat; opacity: 0.78; } .intro-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 249, 252, 0.88), rgba(255, 229, 239, 0.74)), linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08) 52%, rgba(185, 145, 88, 0.10)); } .intro-content { min-height: 100svh; width: 100%; padding: clamp(22px, 3vw, 42px) 20px 28px; display: grid; place-items: center; align-content: center; } .envelope-scene { position: relative; width: min(1040px, 92vw); aspect-ratio: 1.65 / 1; display: grid; place-items: center; perspective: 2400px; } .scene-light { position: absolute; border-radius: 999px; filter: blur(24px); opacity: 0.5; pointer-events: none; animation: softFloat 9s ease-in-out infinite alternate; } .scene-light-left { width: 280px; height: 280px; left: -3%; top: -4%; background: rgba(255, 255, 255, 0.72); } .scene-light-right { width: 280px; height: 280px; right: 0; bottom: 0; background: rgba(217, 138, 165, 0.28); animation-delay: -2s; } @keyframes softFloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(24px, -18px, 0) scale(1.08); } } .envelope { position: relative; width: min(980px, 88vw); aspect-ratio: 1.65 / 1; cursor: pointer; transform-style: preserve-3d; animation: envelopeEntrance 1.3s cubic-bezier(.16, .84, .24, 1) both; transition: transform 0.45s var(--ease-premium), filter 0.45s ease; } .envelope:hover { transform: translateY(-4px) rotateX(1.2deg); filter: saturate(1.04); } .envelope:focus-visible { outline: 3px solid rgba(169, 79, 112, 0.34); outline-offset: 10px; } @keyframes envelopeEntrance { 0% { opacity: 0; transform: translateY(70px) scale(0.92) rotateX(8deg); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); } } .envelope-shadow { position: absolute; left: 8%; right: 8%; bottom: -8%; height: 18%; border-radius: 50%; background: rgba(60, 46, 25, 0.18); filter: blur(30px); z-index: 0; transition: transform 2s ease, opacity 2s ease; } .envelope-back { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.04) 100%), var(--floral) center 38% / 100% auto no-repeat; box-shadow: 0 24px 64px rgba(64, 50, 31, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(230, 224, 214, 0.82); } .envelope-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 82% 20%, rgba(217, 138, 165, 0.14), transparent 30%), linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.08) 100%); } .envelope-top-flap { background: linear-gradient(180deg, rgba(255, 244, 248, 0.84) 0%, rgba(255, 235, 243, 0.58) 40%, rgba(255, 228, 238, 0.28) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(217, 138, 165, 0.16); } .envelope-top-flap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%), var(--floral) center 32% / cover no-repeat; opacity: 0.9; transform: scale(1.04); } .envelope-top-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 247, 250, 0.26) 0%, rgba(255, 226, 237, 0.16) 56%, rgba(255, 215, 229, 0.10) 100%); pointer-events: none; } .front-side { position: absolute; bottom: 0; width: 50%; height: 52%; z-index: 8; background: linear-gradient(145deg, rgba(232, 224, 211, 0.96) 0%, rgba(217, 209, 192, 0.96) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48); transition: transform 2s cubic-bezier(.18, .86, .24, 1), opacity 1.7s ease; } .front-left { left: -5; } .front-right { right: -5; } .front-bottom { left: -15; right: -15; bottom: -5; background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 22%), linear-gradient(135deg, #ebe4d6 0%, #d8d1c0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54); } .letter-card { position: absolute; left: 50%; top: 20%; width: min(650px, 74vw); max-height: min(76vh, 590px); padding: clamp(18px, 2.4vw, 30px) clamp(20px, 2.8vw, 36px); border-radius: 24px; background: radial-gradient(circle at top right, rgba(248, 219, 229, 0.42), transparent 28%), radial-gradient(circle at top left, rgba(255, 255, 255, 0.70), transparent 24%), linear-gradient(135deg, #eef6e8 0%, #dfead4 100%); box-shadow: 0 20px 38px rgba(67, 54, 34, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 0 0 1px rgba(216, 228, 205, 0.95); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(5px, 0.8vw, 9px); transform: translateX(-50%) translateY(52%) scale(0.92); z-index: 1; opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; transition: transform 2.3s cubic-bezier(.18, .86, .24, 1), opacity 1.4s ease, visibility 0s linear 1.4s, box-shadow 2s ease; } .letter-card::before, .letter-card::after { content: ""; position: absolute; width: clamp(78px, 8vw, 118px); height: clamp(78px, 8vw, 118px); border: 1.4px solid rgba(122, 137, 111, 0.14); border-radius: 100% 0 100% 0; opacity: 0.55; pointer-events: none; } .letter-card::before { top: 10px; left: 10px; } .letter-card::after { right: 10px; bottom: 10px; transform: rotate(180deg); } .heart { position: absolute; color: var(--white); font-size: clamp(14px, 1.35vw, 19px); opacity: 0.96; line-height: 1; z-index: 2; text-shadow: 0 2px 6px rgba(89, 106, 80, 0.16), 0 0 12px rgba(255, 255, 255, 0.85); animation: heartSoftPulse 2.8s ease-in-out infinite; } .heart-1 { top: 18px; left: 22px; } .heart-2 { top: 18px; right: 22px; animation-delay: 0.35s; } .heart-3 { bottom: 20px; left: 28px; animation-delay: 0.7s; } .heart-4 { bottom: 20px; right: 28px; animation-delay: 1.05s; } @keyframes heartSoftPulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.24); opacity: 1; } } .letter-main-title { max-width: 94%; margin: 0 0 5px; font-family: var(--font-title); font-size: clamp(30px, 3.45vw, 50px); line-height: 1.08; font-weight: 400; text-align: center; } .letter-main-message { max-width: 80%; margin: 0 auto; font-family: var(--font-title); font-size: clamp(17px, 1.45vw, 24px); line-height: 1.32; font-weight: 400; color: #646a61; text-align: center; } .letter-divider { width: 74px; height: 1px; margin: 8px 0 7px; background: linear-gradient(90deg, transparent, rgba(104, 109, 100, 0.26), transparent); } .closed-text { position: absolute; left: 50%; bottom: 12%; width: 88%; transform: translateX(-50%); z-index: 11; text-align: center; display: flex; justify-content: center; align-items: center; transition: opacity 1s ease, transform 1.1s ease; } .closed-names { display: block; margin: 0; font-family: var(--font-title); font-size: clamp(64px, 7.2vw, 108px); font-weight: 400; line-height: 0.9; color: var(--green-main); text-align: center; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.42), 0 16px 28px rgba(66, 76, 58, 0.14); } .small-flower { position: absolute; top: 11%; width: 42px; height: 42px; z-index: 6; opacity: 0.42; } .small-flower::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(204, 214, 194, 0.46); border-radius: 100% 0 100% 0; transform: rotate(45deg); } .small-flower::after { content: ""; position: absolute; left: 50%; top: 34px; width: 2px; height: 38px; background: rgba(204, 214, 194, 0.46); } .flower-left { left: 22%; } .flower-center { left: 48%; } .flower-right { right: 22%; } .branch { position: absolute; bottom: 14%; width: 16%; height: 38%; z-index: 6; opacity: 0.32; } .branch-left { left: 8%; } .branch-right { right: 8%; transform: scaleX(-1); } .branch span { position: absolute; width: 64px; height: 2px; background: rgba(204, 214, 194, 0.46); transform: rotate(45deg); } .branch span:nth-child(1) { top: 18%; left: 10%; } .branch span:nth-child(2) { top: 42%; left: 24%; } .branch span:nth-child(3) { top: 66%; left: 38%; } .seal { position: absolute; left: 50%; top: 52%; width: clamp(105px, 11vw, 150px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 12; padding: 0; border: none; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; filter: drop-shadow(0 14px 22px rgba(70, 20, 15, 0.32)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)); transition: transform 0.45s ease, opacity 0.8s ease, filter 0.45s ease; animation: sealImagePulse 3.2s ease-in-out infinite; } .seal img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; user-select: none; } .seal::before, .seal::after { content: none !important; display: none !important; } .seal:hover { transform: translate(-50%, -50%) scale(1.055); } @keyframes sealImagePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.045); } } .intro.open .letter-card { z-index: 15; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-22%) scale(1); box-shadow: 0 30px 54px rgba(67, 54, 34, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 0 0 1px rgba(216, 228, 205, 0.95); transition-delay: 0.55s, 0.55s, 0s, 0.55s; } .intro.open .closed-text { opacity: 0; transform: translateX(-50%) translateY(22px); } .intro.open .seal { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.78); } .intro.open .envelope-shadow { transform: scale(1.1); opacity: 0.74; } .open-hint { max-width: 720px; margin: 28px auto 0; color: var(--green-main); font-size: 13px; font-weight: 600; line-height: 1.7; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 26px; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: none; } .scroll-cue span { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-main); } .scroll-cue i { width: 24px; height: 40px; border: 2px solid rgba(95, 115, 88, 0.88); border-radius: 999px; position: relative; animation: greenCuePulse 2.8s ease-in-out infinite; } .scroll-cue i::before { content: ""; position: absolute; left: 50%; top: 8px; width: 5px; height: 10px; border-radius: 999px; background: var(--green-main); transform: translateX(-50%); animation: scrollDotGreen 2.8s ease-in-out infinite; } @keyframes greenCuePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } @keyframes scrollDotGreen { 0% { opacity: 0.25; transform: translate(-50%, 0); } 45% { opacity: 1; } 100% { opacity: 0.12; transform: translate(-50%, 16px); } } .hero-section, .locations, .menu, .confirmation { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 249, 252, 0.98) 0%, var(--pink-bg-2) 26%, var(--pink-bg-3) 64%, var(--pink-bg-4) 100%); } .menu { background: linear-gradient(180deg, var(--pink-bg-4) 0%, var(--pink-bg-3) 38%, var(--pink-bg-2) 76%, var(--pink-bg-1) 100%); } .locations, .menu, .confirmation { content-visibility: auto; contain-intrinsic-size: 820px; } .hero-section .container, .locations .container, .menu .container, .confirmation .container { position: relative; z-index: 4; } .hero-section::before, .locations::before, .menu::before, .confirmation::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.05) 48%, rgba(185, 145, 88, 0.08)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 22px); opacity: 0.86; } .hero-section::after, .locations::after, .menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(110px, 12vw, 180px); z-index: 2; pointer-events: none; } .hero-section::after, .locations::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 243, 248, 0.45) 45%, rgba(253, 235, 243, 0.96) 100%); } .menu::after { background: linear-gradient(180deg, rgba(253, 235, 243, 0) 0%, rgba(255, 249, 252, 0.56) 48%, rgba(255, 255, 255, 0.96) 100%); } .section-bg-floral { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 249, 252, 0.72), rgba(255, 229, 239, 0.78)), var(--floral) center / cover; pointer-events: none; z-index: 0; } .section-heading { max-width: 860px; margin: 0 auto; } .section-heading h2, .confirm-copy h2 { color: var(--green-main); text-wrap: balance; } .section-heading h2, .confirm-copy h2 { margin-bottom: 20px; } .section-heading p, .confirm-copy p, .event-map-content p, .accordion-panel p { color: var(--muted); line-height: 1.86; } .section-kicker { color: var(--pink-dark); } .section-kicker::before, .section-kicker::after { background: linear-gradient(90deg, transparent, var(--pink-main), transparent); } .confirm-copy, .event-map-card, .accordion-item, .rsvp-form, .location-timeline, .small-note, .check-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--glass-bg)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(12px); } .confirm-copy { border-radius: clamp(26px, 3vw, 38px); } .event-map-card, .rsvp-form { border-radius: clamp(28px, 3vw, 36px); transition: transform 0.38s var(--ease-premium), box-shadow 0.38s ease, border-color 0.38s ease, background 0.38s ease; } .event-map-card:hover, .rsvp-form:hover { transform: translateY(-6px); border-color: var(--border-medium); box-shadow: var(--shadow-hover); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)); } .location-timeline { position: relative; width: min(820px, 100%); margin: 46px auto 42px; padding: 18px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; } .timeline-item { text-align: center; padding: 8px 12px; } .timeline-item span { display: block; margin-bottom: 4px; font-family: var(--font-serif); font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; color: var(--pink-dark); } .timeline-item p { margin: 0; font-size: 12px; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.1em; } .timeline-line { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink-main), transparent); } .location-map-grid { gap: 34px; margin-top: 36px; } .event-map-card { position: relative; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 22px; align-items: stretch; padding: clamp(14px, 2vw, 22px); } .event-map-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 12% 12%, rgba(248, 219, 229, 0.32), transparent 35%), radial-gradient(circle at 90% 70%, rgba(95, 115, 88, 0.08), transparent 32%); pointer-events: none; } .event-map-content { position: relative; z-index: 1; padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; } .location-name { margin-bottom: 6px; font-weight: 800; color: var(--ink); } .location-address { margin-bottom: 16px; color: var(--green-dark); font-weight: 700; } .event-map-frame { position: relative; z-index: 1; min-height: 360px; border-radius: clamp(22px, 2.5vw, 28px); overflow: hidden; background: var(--white); box-shadow: 0 18px 38px rgba(55, 45, 29, 0.12); } .event-map-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72); } .event-map-frame iframe { min-height: 360px; border: 0; } .map-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; } .map-btn, .btn-primary, .back-to-top { position: relative; isolation: isolate; overflow: hidden; color: #ffffff; background: linear-gradient(135deg, #f8c7d7 0%, var(--pink-main) 36%, var(--pink-dark) 72%, var(--gold) 118%); background-size: 160% 160%; border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: var(--shadow-button), inset 0 1px 0 rgba(255, 255, 255, 0.34); transition: transform 0.3s var(--ease-premium), box-shadow 0.3s ease, filter 0.3s ease, background-position 0.55s ease; will-change: transform; } .map-btn { min-height: 54px; padding: 14px 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .map-btn::before, .btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #f8c7d7 0%, var(--pink-main) 40%, var(--pink-dark) 78%, var(--gold-dark) 122%); background-size: 180% 180%; transition: background-position 0.55s ease; } .map-btn::after, .btn-primary::after { content: ""; position: absolute; top: -45%; left: -38%; z-index: -1; width: 44%; height: 190%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent); transform: rotate(18deg) translateX(-135%); transition: transform 0.75s ease; } .map-btn:hover, .btn-primary:hover, .back-to-top:hover { transform: translateY(-4px) scale(1.012); filter: saturate(1.08); background-position: 100% 50%; box-shadow: 0 26px 58px rgba(169, 79, 112, 0.38), 0 8px 18px rgba(185, 145, 88, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38); } .map-btn:hover::after, .btn-primary:hover::after { transform: rotate(18deg) translateX(360%); } .map-btn:hover::before, .btn-primary:hover::before { background-position: 100% 50%; } .map-btn:active, .btn-primary:active, .back-to-top:active { transform: translateY(-1px) scale(0.985); } .map-btn:focus-visible, .btn-primary:focus-visible, .back-to-top:focus-visible { outline: 3px solid rgba(169, 79, 112, 0.28); outline-offset: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 28px; border-radius: 999px; font-weight: 800; cursor: pointer; border: 1px solid transparent; } .btn-primary { border-color: rgba(255, 255, 255, 0.42); } @keyframes buttonRipple { to { opacity: 0; transform: translate(-50%, -50%) scale(18); } } .full-width { width: 100%; } .menu-accordion { width: min(940px, 100%); margin: 46px auto 0; display: grid; gap: 14px; } .accordion-item { position: relative; border-radius: 26px; overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .accordion-item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--pink-main), var(--green-main)); opacity: 0; transition: opacity 0.3s ease; } .accordion-item:hover, .accordion-item.is-open { transform: translateY(-2px); border-color: var(--border-medium); box-shadow: var(--shadow-hover); } .accordion-item:hover::before, .accordion-item.is-open::before { opacity: 1; } .accordion-button { width: 100%; min-height: 72px; padding: 20px 24px 20px 28px; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; color: var(--green-dark); } .accordion-button span { font-family: var(--font-serif); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.12; } .accordion-button i { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 25px; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--pink-main), var(--pink-dark)); box-shadow: 0 10px 24px rgba(169, 79, 112, 0.22); transition: transform 0.3s ease; } .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; } .accordion-panel p { margin: 0; padding: 0 26px 26px 30px; color: var(--muted); } .accordion-item.is-open .accordion-button i { transform: rotate(45deg); } .accordion-item.is-open .accordion-panel { max-height: 720px; } .confirm-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(34px, 5vw, 70px); align-items: center; } .confirm-copy { padding: clamp(28px, 4vw, 54px); } .small-note { margin-top: 24px; padding: 18px 20px; border-radius: 20px; color: var(--muted); } .rsvp-form { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); transition: transform 0.3s ease, box-shadow 0.3s ease; } .rsvp-form::before { content: ""; position: absolute; right: -80px; top: -80px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 138, 165, 0.18), transparent 68%); pointer-events: none; } .rsvp-form::after { content: ""; position: absolute; left: -70px; bottom: -80px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(95, 115, 88, 0.08), transparent 68%); pointer-events: none; } .rsvp-form .form-row, .rsvp-form .form-split, .rsvp-form .check-grid, .rsvp-form .btn, .rsvp-form .form-status { position: relative; z-index: 1; } .form-row { margin-bottom: 18px; } .form-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ink); } input, textarea, select { width: 100%; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.88); color: var(--ink); border-radius: 16px; padding: 15px 16px; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--pink-dark) 50%), linear-gradient(135deg, var(--pink-dark) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } input:focus, textarea:focus, select:focus { border-color: rgba(217, 138, 165, 0.92); box-shadow: 0 0 0 4px rgba(217, 138, 165, 0.12), 0 12px 24px rgba(169, 79, 112, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92); transform: translateY(-1px); background: var(--white); } .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .check-card { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 15px 16px; cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .check-card:hover { transform: translateY(-2px); border-color: var(--border-medium); box-shadow: 0 12px 24px rgba(169, 79, 112, 0.08); } .check-card:has(input:checked) { color: var(--pink-ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 229, 239, 0.82)); border-color: var(--border-medium); box-shadow: 0 14px 30px rgba(169, 79, 112, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .check-card input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink-main); } .form-row-header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; } .form-row-header label { margin-bottom: 0; } .form-helper { color: rgba(52, 49, 44, 0.54); font-size: 12px; font-weight: 600; line-height: 1.4; text-align: right; } .guest-menu-list { display: grid; border-top: 1px solid rgba(169, 79, 112, 0.14); border-bottom: 1px solid rgba(169, 79, 112, 0.14); } .guest-menu-item { display: grid; grid-template-columns: minmax(108px, 0.42fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; } .guest-menu-item + .guest-menu-item { border-top: 1px solid rgba(169, 79, 112, 0.1); } .guest-menu-item label { margin: 0; color: rgba(52, 49, 44, 0.74); font-size: 13px; } .guest-menu-item select { min-height: 48px; padding-top: 12px; padding-bottom: 12px; } .form-status { margin-top: 14px; min-height: 24px; font-size: 13px; font-weight: 700; color: var(--pink-dark); } .form-status.is-error { color: #a51f18; } .rsvp-form.is-sending .btn-primary { pointer-events: none; filter: saturate(1.08); animation: buttonSending 1.2s ease-in-out infinite; } @keyframes buttonSending { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.75s ease, transform 0.75s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .back-to-top { position: fixed; right: 18px; bottom: 18px; width: 52px; height: 52px; border: none; border-radius: 50%; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; z-index: 80; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .premium-progress { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 4px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } .premium-progress span { display: block; width: var(--scroll-progress, 0%); height: 100%; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--pink-main), var(--pink-dark), var(--gold)); box-shadow: 0 0 18px rgba(169, 79, 112, 0.36); } .quick-nav { position: fixed; left: 50%; top: 18px; z-index: 95; display: flex; align-items: center; gap: 6px; width: min(560px, calc(100% - 112px)); min-height: 58px; padding: 7px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 249, 252, 0.74)); box-shadow: 0 22px 58px rgba(105, 45, 67, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-18px); transition: opacity 0.38s ease, visibility 0.38s ease, transform 0.38s var(--ease-premium); } .quick-nav a { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; color: var(--pink-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.28s ease, background 0.28s ease, transform 0.28s var(--ease-premium), box-shadow 0.28s ease; } .quick-nav a:hover, .quick-nav a.is-active { background: linear-gradient(135deg, var(--pink-main), var(--pink-dark)); box-shadow: 0 12px 24px rgba(169, 79, 112, 0.22); transform: translateY(-1px); } .quick-nav a:active { transform: translateY(0) scale(0.98); } .quick-nav a:focus-visible { outline: 3px solid rgba(169, 79, 112, 0.24); outline-offset: 3px; } body.invitation-ready .premium-progress, body.show-quick-nav .quick-nav { opacity: 1; visibility: visible; } body.show-quick-nav .quick-nav { transform: translateX(-50%) translateY(0); } @media (max-width: 1100px) { .confirm-grid, .event-map-card { grid-template-columns: 1fr; } .confirm-copy { text-align: center; } .confirm-copy p { margin-left: auto; margin-right: auto; } .envelope-scene { width: 96vw; } .envelope { width: 92vw; } .letter-card { width: min(700px, 78vw); max-height: 78vh; } .intro.open .letter-card { transform: translateX(-50%) translateY(-20%) scale(1); } .letter-main-title { font-size: clamp(30px, 5.4vw, 50px); } .letter-main-message { max-width: 86%; font-size: clamp(17px, 2.7vw, 24px); } .event-map-frame, .event-map-frame iframe { min-height: 340px; } } @media (max-width: 768px) { .floating-hearts-bg span::before { opacity: calc(var(--heart-opacity) * 0.72); } .intro-content { padding: 18px 10px 28px; } .envelope-scene { width: 100%; aspect-ratio: 1.02 / 1.18; } .envelope { width: 96vw; aspect-ratio: 1.02 / 1.18; } .envelope-back { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.05) 100%), var(--floral) center 40% / auto 100% no-repeat; } .letter-card { max-width: none; max-height: 84vh; top: 17%; padding: 16px 14px 18px; transform: translateX(-50%) translateY(54%) scale(0.92); } .intro.open .letter-card { transform: translateX(-50%) translateY(-14%) scale(1); } .letter-card::before, .letter-card::after { width: 78px; height: 78px; } .letter-main-title { max-width: 100%; margin-bottom: 5px; font-size: clamp(28px, 7.6vw, 42px); } .letter-main-message { font-size: clamp(15px, 4.35vw, 20px); line-height: 1.24; } .letter-divider { width: 62px; margin: 7px 0 6px; } .closed-text { width: 90%; bottom: 11%; } .closed-names { font-size: clamp(50px, 14vw, 78px); } .seal { width: 104px; top: 50%; } .small-flower { width: 34px; height: 34px; } .flower-left { left: 20%; } .flower-center { left: 46%; } .flower-right { right: 20%; } .branch { width: 20%; height: 34%; } .branch-left { left: 5%; } .branch-right { right: 5%; } .intro.open .front-bottom { transform: translateY(52px) scale(0.96); } .open-hint { font-size: 11px; line-height: 1.6; letter-spacing: 0.12em; } .scroll-cue { gap: 16px; margin-top: 20px; } .scroll-cue i { width: 22px; height: 36px; } .container { width: min(100%, calc(100% - 28px)); } .section-padding { padding: 74px 0; scroll-margin-top: 22px; } .confirmation.section-padding { padding-bottom: 154px; } .confirm-copy, .event-map-card, .rsvp-form, .location-timeline { border-radius: 24px; } .confirm-copy { padding: 24px 18px; } .section-heading h2, .confirm-copy h2 { font-size: clamp(46px, 14vw, 70px); } .section-heading p, .confirm-copy p { font-size: 14.8px; line-height: 1.76; } .location-timeline { grid-template-columns: 1fr; gap: 12px; } .timeline-line { width: 1px; height: 36px; margin: 0 auto; } .event-map-card { gap: 14px; } .event-map-content { padding: 20px 12px; } .event-map-frame, .event-map-frame iframe { min-height: 300px; } .map-actions { display: grid; grid-template-columns: 1fr; gap: 12px; } .map-btn { width: 100%; min-height: 54px; } .accordion-button { min-height: 66px; padding: 18px 18px 18px 22px; } .accordion-button span { font-size: 22px; } .accordion-panel p { padding: 0 18px 20px 22px; } .form-split, .check-grid { grid-template-columns: 1fr; } .rsvp-form { padding: 24px 18px; } .quick-nav { top: auto; bottom: 12px; width: calc(100% - 20px); min-height: 54px; padding: 6px; transform: translateX(-50%) translateY(18px); } .quick-nav a { min-height: 42px; padding: 8px 7px; font-size: 10.5px; letter-spacing: 0.04em; } body.show-quick-nav .quick-nav { transform: translateX(-50%) translateY(0); } .back-to-top { right: 14px; bottom: 82px; width: 48px; height: 48px; } } @media (max-width: 480px) { .floating-hearts-bg span:nth-child(n+11) { display: none; } .eyebrow { font-size: 10px; letter-spacing: 0.22em; } .eyebrow::before, .eyebrow::after { width: 22px; } .letter-card { width: calc(100vw - 12px); max-height: 86vh; padding: 14px 11px 16px; border-radius: 20px; } .intro.open .letter-card { transform: translateX(-50%) translateY(-12%) scale(1); } .letter-main-title { font-size: clamp(25px, 8.5vw, 36px); line-height: 1.05; } .letter-main-message { max-width: 98%; font-size: clamp(14px, 4.8vw, 18px); line-height: 1.22; } .seal { width: 92px; top: 50%; } .closed-text { bottom: 10%; } .closed-names { font-size: clamp(45px, 15vw, 66px); } .open-hint { font-size: 11px; max-width: 280px; } .section-padding { padding: 66px 0; } .rsvp-form { padding: 22px; } .map-btn, .btn { min-height: 52px; } .quick-nav a { font-size: 10px; padding-inline: 5px; } } @media (max-height: 720px) and (min-width: 769px) { .letter-card { max-height: 82vh; padding: 16px 26px; } .intro.open .letter-card { transform: translateX(-50%) translateY(-18%) scale(0.96); } .letter-main-title { font-size: clamp(28px, 3vw, 42px); } .letter-main-message { font-size: clamp(16px, 1.35vw, 21px); line-height: 1.22; } } :root { --premium-pink-50: #fff8fb; --premium-pink-100: #fff0f6; --premium-pink-200: #ffe2ed; --premium-pink-300: #f8c7da; --premium-pink-500: #d6799b; --premium-pink-700: #9c4265; --premium-green-50: #f7fbf4; --premium-green-100: #eef6e8; --premium-green-500: #6d8262; --premium-green-700: #046307; --premium-white: rgba(255, 255, 255, 0.88); --premium-white-strong: rgba(255, 255, 255, 0.96); --premium-line: rgba(255, 255, 255, 0.76); --premium-blush-shadow: 0 34px 90px rgba(156, 66, 101, 0.16); --premium-glow-shadow: 0 24px 70px rgba(214, 121, 155, 0.22); } html { background: var(--premium-pink-100); } body { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 16%), rgba(255, 255, 255, 0.82), transparent 28rem), linear-gradient(135deg, var(--premium-pink-50) 0%, var(--premium-pink-100) 34%, var(--premium-pink-200) 74%, #f7d4e2 100%); } body::before { background: linear-gradient(115deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 44%, rgba(109, 130, 98, 0.08)), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 20px); } body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.22)), linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.24)); mix-blend-mode: soft-light; } .floating-hearts-bg { z-index: 2; opacity: 0.72; } .page { background: linear-gradient(180deg, var(--premium-pink-50) 0%, var(--premium-pink-100) 18%, var(--premium-pink-200) 58%, #f8d6e3 100%); } .intro { background: radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.86), transparent 28%), radial-gradient(circle at 84% 78%, rgba(214, 121, 155, 0.24), transparent 34%), linear-gradient(145deg, var(--premium-pink-50), var(--premium-pink-100) 44%, var(--premium-pink-200)); } .intro-bg { background: linear-gradient(135deg, rgba(255, 248, 251, 0.88), rgba(255, 226, 237, 0.72)), var(--floral) center / cover no-repeat; opacity: 0.76; transform: scale(1.018); animation: premiumBreath 12s ease-in-out infinite alternate; } .intro-overlay { background: radial-gradient(circle at var(--pointer-x, 52%) var(--pointer-y, 28%), rgba(255, 255, 255, 0.64), transparent 26rem), linear-gradient(180deg, rgba(255, 249, 252, 0.72), rgba(255, 229, 239, 0.48)), linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 46%, rgba(109, 130, 98, 0.12)); } .envelope { filter: drop-shadow(0 34px 54px rgba(156, 66, 101, 0.14)); } .envelope::before { inset: -18px; z-index: -1; border-radius: 34px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.08)), radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.62), transparent 34%), radial-gradient(circle at 50% 96%, rgba(214, 121, 155, 0.22), transparent 42%); opacity: 0.82; filter: blur(2px); } .envelope-back { box-shadow: 0 32px 84px rgba(105, 45, 67, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.66); } .closed-names, .section-heading h2, .confirm-copy h2 { color: var(--premium-green-700); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86), 0 18px 34px rgba(63, 81, 59, 0.12); } .section-kicker, .eyebrow { color: var(--premium-pink-700); } .section-kicker::before, .section-kicker::after, .eyebrow::before, .eyebrow::after { background: linear-gradient(90deg, transparent, rgba(214, 121, 155, 0.82), rgba(109, 130, 98, 0.48), transparent); } .hero-section, .locations, .menu, .confirmation { background: radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.78), transparent 26rem), radial-gradient(circle at 88% 76%, rgba(109, 130, 98, 0.10), transparent 26rem), linear-gradient(180deg, var(--premium-pink-50) 0%, var(--premium-pink-100) 40%, var(--premium-pink-200) 100%); } .menu { background: radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.72), transparent 25rem), radial-gradient(circle at 10% 82%, rgba(109, 130, 98, 0.10), transparent 25rem), linear-gradient(180deg, var(--premium-pink-200) 0%, var(--premium-pink-100) 54%, var(--premium-pink-50) 100%); } .hero-section::before, .locations::before, .menu::before, .confirmation::before { background: linear-gradient(120deg, rgba(255, 255, 255, 0.42), transparent 42%, rgba(109, 130, 98, 0.08)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 28px); opacity: 0.9; } .section-bg-floral { opacity: 0.18; filter: saturate(0.92) contrast(0.96); } .section-padding { padding: clamp(96px, 9vw, 154px) 0; } .confirm-copy, .event-map-card, .accordion-item, .rsvp-form, .location-timeline, .small-note, .check-card { border: 1px solid var(--premium-line); background: linear-gradient(180deg, var(--premium-white-strong), var(--premium-white)), radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.82), transparent 32%); box-shadow: var(--premium-blush-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(20px) saturate(1.08); backdrop-filter: blur(20px) saturate(1.08); } .confirm-copy { position: relative; overflow: hidden; } .confirm-copy::before, .rsvp-form::before, .event-map-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent 38%), radial-gradient(circle at 84% 14%, rgba(214, 121, 155, 0.10), transparent 28%); } .confirm-copy>*, .rsvp-form>*, .event-map-content>* { position: relative; z-index: 1; } .event-map-card, .rsvp-form, .accordion-item, .check-card { transform: translateZ(0); } .event-map-card:hover, .rsvp-form:hover, .accordion-item:hover, .check-card:hover { border-color: rgba(214, 121, 155, 0.32); box-shadow: 0 42px 105px rgba(156, 66, 101, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.98); } .confirm-copy p, .section-heading p, .event-map-content p { color: rgba(52, 49, 44, 0.74); line-height: 1.9; } .location-timeline { max-width: 880px; border-radius: 999px; padding: 14px; } .timeline-item { border-radius: 999px; background: rgba(255, 255, 255, 0.46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .timeline-item span { color: var(--premium-pink-700); } .timeline-item p, .location-address, .accordion-button { color: var(--premium-green-700); } .timeline-line { height: 2px; background: linear-gradient(90deg, transparent, var(--premium-pink-500), var(--premium-green-500), transparent); } .event-map-card { gap: clamp(18px, 3vw, 34px); padding: clamp(14px, 2.4vw, 26px); } .event-map-card::before { background: radial-gradient(circle at 12% 12%, rgba(214, 121, 155, 0.16), transparent 34%), radial-gradient(circle at 88% 78%, rgba(109, 130, 98, 0.12), transparent 36%); } .event-map-frame { border-radius: clamp(18px, 2vw, 24px); box-shadow: 0 26px 60px rgba(105, 45, 67, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.84); } .map-btn, .btn-primary, .back-to-top { background: linear-gradient(135deg, #f9cbdc 0%, var(--premium-pink-500) 36%, var(--premium-pink-700) 76%, var(--premium-green-500) 118%); border-color: rgba(255, 255, 255, 0.58); box-shadow: 0 18px 42px rgba(156, 66, 101, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.46); } .map-btn::before, .btn-primary::before { background: linear-gradient(135deg, #ffd8e5 0%, var(--premium-pink-500) 38%, var(--premium-pink-700) 78%, var(--premium-green-500) 122%); } .map-btn:hover, .btn-primary:hover, .back-to-top:hover { box-shadow: 0 28px 68px rgba(156, 66, 101, 0.36), 0 10px 26px rgba(109, 130, 98, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.54); } .accordion-item { border-radius: 22px; } .accordion-item::before { background: linear-gradient(180deg, var(--premium-pink-500), var(--premium-green-500)); } .accordion-button { min-height: 78px; } .accordion-button i { background: linear-gradient(135deg, var(--premium-pink-500), var(--premium-pink-700)); box-shadow: 0 12px 28px rgba(156, 66, 101, 0.22); } .accordion-panel p { color: rgba(52, 49, 44, 0.68); } .rsvp-form { border-color: rgba(255, 255, 255, 0.88); } .rsvp-form::before { background: radial-gradient(circle, rgba(214, 121, 155, 0.18), transparent 66%); } .rsvp-form::after { background: radial-gradient(circle, rgba(109, 130, 98, 0.10), transparent 66%); } input, textarea, select { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)); border-color: rgba(156, 66, 101, 0.17); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(156, 66, 101, 0.04); } input:hover, textarea:hover, select:hover { border-color: rgba(156, 66, 101, 0.28); } input:focus, textarea:focus, select:focus { border-color: rgba(214, 121, 155, 0.88); box-shadow: 0 0 0 4px rgba(214, 121, 155, 0.14), 0 18px 38px rgba(156, 66, 101, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.94); } .check-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 246, 0.74)); } .check-card:has(input:checked) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 232, 0.78)); border-color: rgba(109, 130, 98, 0.28); } .premium-progress span { background: linear-gradient(90deg, var(--premium-pink-500), var(--premium-pink-700), var(--premium-green-500)); } .quick-nav { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 251, 0.78)); border-color: rgba(255, 255, 255, 0.86); box-shadow: 0 24px 64px rgba(156, 66, 101, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .quick-nav a { color: var(--premium-pink-700); } .quick-nav a:hover, .quick-nav a.is-active { background: linear-gradient(135deg, var(--premium-pink-500), var(--premium-pink-700)); color: #fff; } @media (min-width: 769px) { .quick-nav { left: auto; right: 18px; top: 50%; bottom: auto; width: 104px; min-height: auto; padding: 8px; border-radius: 28px; flex-direction: column; transform: translate(18px, -50%); } .quick-nav a { width: 100%; min-height: 44px; border-radius: 22px; padding: 10px 8px; font-size: 11px; } body.show-quick-nav .quick-nav { transform: translate(0, -50%); } } @media (min-width: 1180px) { .container { width: min(1000px, calc(100% - 64px)); } } @media (min-width: 769px) and (max-width: 1179px) { .quick-nav { left: 50%; right: auto; top: 18px; bottom: auto; width: min(520px, calc(100% - 42px)); flex-direction: row; border-radius: 999px; transform: translateX(-50%) translateY(-18px); } .quick-nav a { width: auto; min-height: 44px; border-radius: 999px; } body.show-quick-nav .quick-nav { transform: translateX(-50%) translateY(0); } } .back-to-top { display: grid; place-items: center; font-size: 18px; } .reveal { transform: translateY(42px) scale(0.985); transition: opacity 0.85s ease, transform 0.85s var(--ease-premium), filter 0.85s ease; filter: blur(4px); } .reveal.is-visible { transform: translateY(0) scale(1); filter: blur(0); } @keyframes premiumBreath { from { transform: scale(1.01); } to { transform: scale(1.045); } } @media (max-width: 1100px) { .confirm-grid { gap: 36px; } .quick-nav { width: min(520px, calc(100% - 42px)); } } @media (max-width: 768px) { .section-padding { padding: 78px 0; } .confirmation.section-padding { padding-bottom: 166px; } .confirm-copy, .event-map-card, .rsvp-form { border-radius: 26px; } .confirm-copy { padding: 28px 20px; } .location-timeline { border-radius: 28px; padding: 12px; } .timeline-item { border-radius: 20px; padding: 14px 12px; } .event-map-card { padding: 16px; } .event-map-content { padding: 22px 14px; } .accordion-item { border-radius: 20px; } .accordion-button { min-height: 68px; } .quick-nav { width: calc(100% - 18px); border-radius: 28px; gap: 4px; } .quick-nav a { border-radius: 22px; } } @media (max-width: 480px) { .section-padding { padding: 70px 0; } .confirmation.section-padding { padding-bottom: 172px; } .confirm-copy { padding: 24px 18px; } .event-map-frame, .event-map-frame iframe { min-height: 290px; } .quick-nav { min-height: 56px; padding: 6px; } } :root { --rose-page: #fff1f7; --rose-page-deep: #f9d3e2; --rose-card: rgba(255, 255, 255, 0.84); --rose-card-strong: rgba(255, 255, 255, 0.96); --rose-border: rgba(198, 88, 125, 0.24); --rose-text: #b24f72; --rose-text-dark: #7f3550; --sage-text: #52684c; } body, .page { background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.78), transparent 34rem), radial-gradient(circle at 88% 36%, rgba(255, 255, 255, 0.42), transparent 28rem), linear-gradient(180deg, #fff8fb 0%, var(--rose-page) 34%, var(--rose-page-deep) 100%); } .hero-section, .gallery-section, .locations, .menu, .confirmation { background: radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.82), transparent 28rem), radial-gradient(circle at 86% 88%, rgba(255, 255, 255, 0.42), transparent 30rem), linear-gradient(180deg, #fff8fb 0%, var(--rose-page) 46%, #f8d6e4 100%); } .gallery-section, .locations, .confirmation { position: relative; overflow: hidden; isolation: isolate; } .gallery-section::before, .gallery-section::after { content: ""; position: absolute; pointer-events: none; z-index: 1; } .gallery-section::before { inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, 0.42), transparent 46%, rgba(255, 255, 255, 0.28)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 26px); } .gallery-section::after { width: min(360px, 45vw); aspect-ratio: 1; right: -120px; top: 12%; border-radius: 50%; background: rgba(255, 255, 255, 0.34); filter: blur(4px); } .gallery-section .container { position: relative; z-index: 4; } .container { width: min(1080px, calc(100% - 44px)); } .mosaic-item { background: linear-gradient(180deg, var(--rose-card-strong), var(--rose-card)); border: 1px solid rgba(255, 255, 255, 0.86); box-shadow: 0 28px 78px rgba(178, 79, 114, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .photo-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; gap: clamp(12px, 2vw, 20px); margin-top: clamp(34px, 5vw, 56px); } .mosaic-item { position: relative; overflow: hidden; margin: 0; border-radius: 28px; } .mosaic-tall { grid-row: span 2; } .mosaic-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); transition: transform 1s var(--ease-premium), filter 1s ease; } .mosaic-item:hover img { transform: scale(1.07); filter: saturate(1.05); } .mosaic-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(127, 53, 80, 0.34)); pointer-events: none; } .mosaic-item figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); } .map-btn, .btn-primary, .back-to-top, .quick-nav a.is-active, .accordion-button i { color: var(--rose-text); background: rgba(255, 255, 255, 0.88); border: 1px solid var(--rose-border); box-shadow: 0 14px 34px rgba(178, 79, 114, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .map-btn::before, .btn-primary::before { background: rgba(255, 255, 255, 0.92); } .map-btn::after, .btn-primary::after { background: linear-gradient(90deg, transparent, rgba(214, 121, 155, 0.24), transparent); } .map-btn:hover, .btn-primary:hover, .back-to-top:hover, .quick-nav a:hover, .quick-nav a.is-active { color: var(--rose-text-dark); border-color: rgba(198, 88, 125, 0.36); box-shadow: 0 18px 44px rgba(178, 79, 114, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.98); } .quick-nav { background: rgba(255, 255, 255, 0.78); } .quick-nav a { color: var(--rose-text); } .premium-progress span { background: linear-gradient(90deg, #f4abc4, var(--rose-text), var(--sage-text)); } @media (max-width: 768px) { .photo-mosaic { grid-template-columns: 1fr; } .photo-mosaic { grid-auto-rows: 240px; } .mosaic-tall { grid-column: auto; grid-row: auto; } .quick-nav a { font-size: 9.5px; letter-spacing: 0.02em; } } @media (max-width: 480px) { .container { width: min(100%, calc(100% - 24px)); } .mosaic-item { border-radius: 24px; } .photo-mosaic { grid-auto-rows: 220px; } } :root { --wedding-white: rgba(255, 255, 255, 0.92); --wedding-white-strong: rgba(255, 255, 255, 0.98); --wedding-rose: #c75d87; --wedding-rose-soft: #f5c6d8; --wedding-rose-line: rgba(199, 93, 135, 0.2); --wedding-green: #41583c; --wedding-ink-soft: rgba(52, 49, 44, 0.72); --wedding-floral: url("assets/Bujori white bg.webp"); --wedding-shadow: 0 26px 70px rgba(157, 75, 106, 0.12); } body, .page { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 251, 0.92)), var(--wedding-floral) center top / min(1180px, 96vw) auto repeat-y, #ffffff; } body::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64)), var(--wedding-floral) right -90px top 14vh / min(720px, 70vw) auto no-repeat, var(--wedding-floral) left -120px bottom 8vh / min(620px, 76vw) auto no-repeat; opacity: 0.2; } body::after { background: linear-gradient(90deg, rgba(255, 238, 245, 0.48), transparent 16%, transparent 84%, rgba(255, 238, 245, 0.42)); opacity: 0.72; } .floating-hearts-bg { opacity: 0.62; mix-blend-mode: multiply; } .floating-hearts-bg span::before { content: "♡"; color: rgba(199, 93, 135, 0.52); text-shadow: 0 0 18px rgba(255, 214, 228, 0.86), 0 12px 28px rgba(157, 75, 106, 0.10); } .floating-hearts-bg span:nth-child(15) { --heart-left: 14%; --heart-size: 30px; --heart-duration: 25s; --heart-delay: -16s; --heart-opacity: 0.34; --heart-blur: 0.2px; --heart-color: rgba(199, 93, 135, 0.46); } .floating-hearts-bg span:nth-child(16) { --heart-left: 42%; --heart-size: 18px; --heart-duration: 17s; --heart-delay: -14s; --heart-opacity: 0.5; --heart-blur: 0px; --heart-color: rgba(199, 93, 135, 0.54); } .floating-hearts-bg span:nth-child(17) { --heart-left: 69%; --heart-size: 36px; --heart-duration: 27s; --heart-delay: -18s; --heart-opacity: 0.3; --heart-blur: 0.35px; --heart-color: rgba(199, 93, 135, 0.42); } .floating-hearts-bg span:nth-child(18) { --heart-left: 95%; --heart-size: 24px; --heart-duration: 20s; --heart-delay: -9s; --heart-opacity: 0.44; --heart-blur: 0px; --heart-color: rgba(199, 93, 135, 0.5); } .hero-section, .gallery-section, .locations, .menu, .confirmation { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 251, 0.9)), var(--wedding-floral) center top / min(1160px, 104vw) auto repeat-y, #ffffff; } .hero-section::before, .locations::before, .menu::before, .confirmation::before, .gallery-section::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 250, 252, 0.74)), linear-gradient(90deg, rgba(255, 234, 243, 0.5), transparent 18%, transparent 82%, rgba(255, 234, 243, 0.46)); opacity: 0.72; } .hero-section::after, .locations::after, .menu::after, .gallery-section::after { content: none; display: none; } .section-bg-floral { background: var(--wedding-floral) right 4vw top 5% / min(620px, 56vw) auto no-repeat; opacity: 0.22; filter: saturate(0.86) contrast(1.02); } .story-section { overflow: hidden; scroll-margin-top: 0; } .full-gallery-section { min-height: 100svh; padding: clamp(42px, 5vw, 70px) 0 clamp(44px, 5vw, 76px); display: grid; align-items: center; scroll-margin-top: 0; } .gallery-shell { position: relative; z-index: 5; width: min(1480px, calc(100% - 34px)); margin-inline: auto; } .gallery-heading { max-width: 820px; margin-bottom: clamp(18px, 2.4vw, 30px); } .gallery-heading .section-kicker { margin-bottom: 10px; } .gallery-heading h2 { margin-bottom: 10px; font-size: clamp(54px, 6.4vw, 84px); } .gallery-heading p { max-width: 760px; margin-inline: auto; line-height: 1.62; } .photo-mosaic-full { width: 100%; height: clamp(520px, calc(100svh - 250px), 720px); min-height: 0; margin-top: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(56px, 1fr)); gap: clamp(10px, 1.25vw, 18px); } .photo-mosaic-full .mosaic-item { min-height: 0; border-radius: clamp(18px, 2vw, 30px); border: 1px solid rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.74); box-shadow: 0 26px 70px rgba(157, 75, 106, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86); } .photo-mosaic-full .mosaic-hero { grid-column: 1 / 6; grid-row: 1 / 5; } .photo-mosaic-full .mosaic-wide { grid-column: 6 / 10; grid-row: 1 / 3; } .photo-mosaic-full .mosaic-tall { grid-column: 10 / 13; grid-row: 1 / 5; } .photo-mosaic-full .mosaic-soft { grid-column: 1 / 6; grid-row: 5 / 8; } .photo-mosaic-full .mosaic-default { grid-column: 6 / 10; grid-row: 3 / 5; } .photo-mosaic-full .mosaic-wide-bottom { grid-column: 6 / 13; grid-row: 5 / 8; } .photo-mosaic-full .mosaic-item img { transform: none; transition: transform 0.7s var(--ease-premium), filter 0.7s ease; } .photo-mosaic-full .mosaic-item:hover img { transform: none; filter: none; } .photo-mosaic-full .mosaic-item::after { background: linear-gradient(180deg, transparent 46%, rgba(65, 88, 60, 0.12) 68%, rgba(127, 53, 80, 0.34)); } .map-btn, .btn-primary, .back-to-top, .quick-nav a, .quick-nav a.is-active, .accordion-button i { color: var(--wedding-rose); background: rgba(255, 255, 255, 0.88); border: 1px solid var(--wedding-rose-line); box-shadow: 0 12px 28px rgba(157, 75, 106, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92); transform: none !important; filter: none !important; transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .map-btn::before, .map-btn::after, .btn-primary::before, .btn-primary::after { content: none !important; display: none !important; } .map-btn:hover, .btn-primary:hover, .back-to-top:hover, .quick-nav a:hover, .quick-nav a.is-active { color: #9f4567; background: rgba(255, 255, 255, 0.98); border-color: rgba(199, 93, 135, 0.36); box-shadow: 0 16px 34px rgba(157, 75, 106, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98); } .map-btn:active, .btn-primary:active, .back-to-top:active, .quick-nav a:active { transform: none !important; } @media (max-width: 860px) { body, .page, .hero-section, .gallery-section, .locations, .menu, .confirmation { background-size: min(900px, 150vw) auto; } .full-gallery-section { min-height: auto; padding: 74px 0 112px; } .gallery-shell { width: min(100%, calc(100% - 24px)); } .photo-mosaic-full { height: auto; min-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 220px; gap: 12px; } .photo-mosaic-full .mosaic-item, .photo-mosaic-full .mosaic-hero, .photo-mosaic-full .mosaic-wide, .photo-mosaic-full .mosaic-tall, .photo-mosaic-full .mosaic-soft, .photo-mosaic-full .mosaic-default, .photo-mosaic-full .mosaic-wide-bottom { grid-column: auto; grid-row: auto; } .photo-mosaic-full .mosaic-hero, .photo-mosaic-full .mosaic-wide-bottom { grid-column: 1 / -1; } .photo-mosaic-full .mosaic-tall { grid-row: span 2; } } @media (max-width: 560px) { .section-padding { padding: 78px 0; } .photo-mosaic-full { height: auto; grid-template-columns: 1fr; grid-auto-rows: 235px; } .photo-mosaic-full .mosaic-tall { min-height: clamp(420px, 120vw, 620px); grid-row: auto; } } :root { --wedding-rose: #c94f7f; --wedding-rose-deep: #a93b66; --wedding-rose-soft: #ffd9e7; --wedding-rose-wash: #fff0f6; --wedding-rose-page: #ffeaf3; --wedding-rose-line: rgba(201, 79, 127, 0.26); --wedding-green: #3f5a3b; --wedding-shadow: 0 28px 78px rgba(169, 59, 102, 0.16); } body, .page { background: radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.9), transparent 30rem), radial-gradient(circle at 88% 20%, rgba(255, 214, 230, 0.72), transparent 28rem), linear-gradient(180deg, #fff6fa 0%, var(--wedding-rose-page) 42%, #ffdce9 100%); } body::before { background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.72), transparent 24rem), radial-gradient(circle at 86% 68%, rgba(255, 186, 211, 0.28), transparent 30rem), linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.28)); opacity: 0.78; mix-blend-mode: normal; } body::after { background: linear-gradient(90deg, rgba(255, 209, 226, 0.48), transparent 14%, transparent 86%, rgba(255, 209, 226, 0.44)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 34px); opacity: 0.56; mix-blend-mode: normal; } .intro, .hero-section, .gallery-section, .locations, .menu, .confirmation { position: relative; z-index: 5; background: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.56), transparent 27rem), radial-gradient(circle at 82% 82%, rgba(255, 192, 215, 0.16), transparent 28rem), linear-gradient(180deg, rgba(255, 247, 251, 0.74) 0%, rgba(255, 234, 243, 0.72) 48%, rgba(255, 220, 233, 0.70) 100%); } .page { z-index: auto; } .menu { background: radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.54), transparent 26rem), linear-gradient(180deg, rgba(255, 228, 239, 0.72) 0%, rgba(255, 241, 247, 0.74) 58%, rgba(255, 231, 241, 0.72) 100%); } .intro-bg { background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.86), transparent 24rem), radial-gradient(circle at 78% 76%, rgba(255, 193, 216, 0.42), transparent 28rem), linear-gradient(135deg, #fff6fa 0%, #ffe8f2 54%, #ffd9e7 100%); opacity: 1; transform: none; animation: none; } .envelope-back { background: radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.62), transparent 28%), radial-gradient(circle at 80% 74%, rgba(255, 196, 218, 0.46), transparent 34%), linear-gradient(135deg, #fff8fb 0%, #ffe7f1 52%, #ffd8e7 100%); box-shadow: 0 32px 84px rgba(169, 59, 102, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(201, 79, 127, 0.16); } .envelope-back::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%), radial-gradient(circle at 78% 24%, rgba(201, 79, 127, 0.10), transparent 30%); } .envelope-top-flap { background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 220, 233, 0.42)), linear-gradient(135deg, #fff3f8, #ffddea); } .front-side { background: linear-gradient(145deg, #fff1f7 0%, #ffd9e8 100%); } .front-bottom { background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 24%), linear-gradient(135deg, #fff4f9 0%, #ffd9e8 100%); } .hero-section::before, .locations::before, .menu::before, .confirmation::before, .gallery-section::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 246, 250, 0.28)), linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.22)); opacity: 0.62; } .section-bg-floral { display: none; } .floating-hearts-bg { z-index: 4; opacity: 1; mix-blend-mode: normal; } .floating-hearts-bg span { filter: none; } .floating-hearts-bg span::before { font-size: calc(var(--heart-size) * 1.42); color: rgba(201, 79, 127, 0.78); opacity: 0.92; text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(201, 79, 127, 0.28), 0 14px 26px rgba(169, 59, 102, 0.18); } .floating-hearts-bg span:nth-child(2), .floating-hearts-bg span:nth-child(4), .floating-hearts-bg span:nth-child(7), .floating-hearts-bg span:nth-child(11), .floating-hearts-bg span:nth-child(17) { --heart-opacity: 0.72; } .letter-card { background: radial-gradient(circle at 88% 10%, rgba(255, 207, 225, 0.62), transparent 28%), radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.92), transparent 30%), linear-gradient(145deg, #fff9fc 0%, #ffe8f2 56%, #ffd9e7 100%); border: 1px solid rgba(201, 79, 127, 0.22); box-shadow: 0 26px 58px rgba(169, 59, 102, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.58); } .letter-card::before, .letter-card::after { border-color: rgba(201, 79, 127, 0.2); opacity: 0.72; } .letter-card .heart { color: rgba(201, 79, 127, 0.72); text-shadow: 0 0 10px rgba(255, 255, 255, 0.82), 0 0 18px rgba(201, 79, 127, 0.22); } .letter-main-title { color: var(--wedding-green); } .letter-main-message { color: rgba(75, 54, 62, 0.72); } .letter-divider { background: linear-gradient(90deg, transparent, rgba(201, 79, 127, 0.36), transparent); } .intro.open .letter-card { box-shadow: 0 34px 70px rgba(169, 59, 102, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.58); } .map-btn:hover, .btn-primary:hover, .back-to-top:hover, .quick-nav a:hover, .quick-nav a.is-active, .accordion-button:hover i, .accordion-item.is-open .accordion-button i { color: #ffffff; background: var(--wedding-rose); border-color: var(--wedding-rose); box-shadow: 0 0 0 0 rgba(201, 79, 127, 0.34), 0 18px 42px rgba(169, 59, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.26); animation: roseButtonPulse 1.35s ease-in-out infinite; } @keyframes roseButtonPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 79, 127, 0.30), 0 18px 42px rgba(169, 59, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.26); } 50% { box-shadow: 0 0 0 12px rgba(201, 79, 127, 0), 0 22px 48px rgba(169, 59, 102, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .floating-hearts-bg span { animation: none !important; opacity: 0.18; } } body::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } .photo-mosaic-full .mosaic-item::before, .photo-mosaic-full .mosaic-item::after, .photo-mosaic-full .mosaic-item figcaption { content: none !important; display: none !important; background: none !important; } .photo-mosaic-full .mosaic-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .family-mini-media { width: 100%; height: clamp(420px, 40vw, 540px) !important; aspect-ratio: auto !important; } .family-mini-media img { width: 100%; height: 100% !important; object-fit: cover !important; object-position: center !important; } .family-mini-card.family-card-compact .family-mini-media img { object-position: center 44% !important; transform: scale(1.12) !important; transform-origin: center 44% !important; } .family-card-godparents .family-feature-media img { object-position: center 40% !important; } @media (max-width: 768px) { .family-mini-media { height: clamp(380px, 110vw, 560px) !important; } } :root { --site-pink-start: #fff9fc; --site-pink-soft: #fff1f7; --site-pink-mid: #ffe5ef; --site-pink-end: #fbd5e4; } html, body { background: linear-gradient(180deg, var(--site-pink-start) 0%, var(--site-pink-soft) 26%, var(--site-pink-mid) 58%, var(--site-pink-end) 100%) !important; } body::before { background: radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.7), transparent 28%), radial-gradient(circle at 88% 18%, rgba(255, 218, 232, 0.55), transparent 30%), linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 230, 240, 0.18)) !important; mix-blend-mode: normal !important; } .page, .intro, .hero-section, .story-section, .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation { background: linear-gradient( 180deg, var(--pink-bg-2) 0%, var(--pink-bg-1) 16%, var(--white) 30%, var(--pink-bg-3) 48%, var(--pink-bg-4) 58%, var(--pink-bg-3) 72%, var(--pink-bg-1) 88%, var(--pink-bg-2) 100% ) !important; background-repeat: no-repeat; background-size: 100% 100%; } .intro-bg { background: linear-gradient(180deg, rgba(255, 249, 252, 0.9) 0%, rgba(255, 235, 244, 0.92) 52%, rgba(251, 213, 228, 0.9) 100%), var(--floral) center / cover no-repeat !important; opacity: 0.6 !important; } .intro-overlay { background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.7), transparent 26%), radial-gradient(circle at 84% 18%, rgba(255, 219, 232, 0.55), transparent 28%), linear-gradient(180deg, rgba(255, 249, 252, 0.64), rgba(255, 229, 239, 0.44)) !important; } .letter-card { width: min(760px, 78vw); max-height: min(82vh, 640px); padding: clamp(122px, 13vw, 176px) clamp(28px, 3.4vw, 52px) clamp(30px, 3.4vw, 46px); gap: clamp(10px, 1.2vw, 16px); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 252, 0.96) 46%, rgba(255, 241, 247, 0.96) 100%) !important; border: 1px solid rgba(217, 138, 165, 0.2); box-shadow: 0 30px 70px rgba(105, 45, 67, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92); } .letter-floral-top { position: absolute; top: 0; left: 0; right: 0; height: clamp(105px, 13vw, 170px); overflow: hidden; border-radius: 26px 26px 0 0; z-index: 1; pointer-events: none; } .letter-floral-top img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; filter: saturate(1.04) brightness(1.03); } .letter-floral-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.16) 52%, rgba(255, 250, 252, 0.96) 100%); } .letter-card>*:not(.letter-floral-top) { position: relative; z-index: 3; } .letter-main-title { max-width: 96%; margin-top: 0; margin-bottom: 2px; color: var(--green-dark); font-size: clamp(38px, 4.8vw, 72px); } .letter-main-message { color: #5f665d; font-size: clamp(20px, 1.9vw, 30px); } .letter-divider { width: 96px; margin: 10px 0 0; } .heart { z-index: 4; color: #ffffff; text-shadow: 0 2px 8px rgba(95, 115, 88, 0.22), 0 0 14px rgba(255, 255, 255, 0.9); } @media (max-width: 1100px) { .letter-card { width: min(700px, 82vw); max-height: 84vh; padding-top: clamp(116px, 17vw, 165px); } .letter-floral-top { height: clamp(108px, 17vw, 160px); } .letter-main-message { max-width: 88%; } } @media (max-width: 768px) { .letter-card { width: calc(100vw - 18px); max-height: 86vh; top: 16%; padding: clamp(98px, 29vw, 130px) 18px 24px; } .letter-floral-top { height: clamp(92px, 28vw, 126px); border-radius: 22px 22px 0 0; } .letter-floral-top img { object-position: center center; } .letter-main-title { max-width: 94%; font-size: clamp(34px, 10vw, 50px); line-height: 1.05; } .letter-main-message { max-width: 94%; font-size: clamp(18px, 5vw, 22px); line-height: 1.38; } .form-row-header { display: grid; gap: 4px; } .form-helper { text-align: left; } .guest-menu-item { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; } } @media (max-width: 390px) { .letter-card { padding-top: 92px; max-height: 88vh; } .letter-floral-top { height: 92px; } .letter-main-title { font-size: 33px; } .letter-main-message { font-size: 17px; line-height: 1.34; } } .envelope-top-flap::before, .front-left::before, .front-right::before { content: none !important; background: none !important; } .envelope-back { position: absolute; inset: 0; border-radius: 28px; z-index: 3; overflow: hidden; background: linear-gradient(180deg, rgba(255, 245, 249, 0.96) 0%, rgba(247, 230, 238, 0.96) 100%); box-shadow: 0 24px 64px rgba(64, 50, 31, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 0 0 1px rgba(241, 217, 226, 0.9); } .envelope::before { content: ""; position: absolute; inset: 0; z-index: 7; border-radius: 28px; pointer-events: none; background: var(--floral) center center / cover no-repeat; opacity: 1; } .envelope-top-flap { position: absolute; inset: 0 0 auto 0; height: 54%; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; z-index: 10; overflow: hidden; background: linear-gradient(180deg, rgba(255, 248, 251, 0.08) 0%, rgba(255, 240, 246, 0.18) 45%, rgba(255, 233, 241, 0.28) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(217, 138, 165, 0.10); backface-visibility: hidden; transition: transform 2.1s cubic-bezier(.18, .86, .24, 1), opacity 1.8s ease, filter 1.8s ease; } .front-left, .front-right { position: absolute; bottom: 0; width: 50%; height: 52%; z-index: 8; overflow: hidden; transition: transform 2s cubic-bezier(.18, .86, .24, 1), opacity 1.7s ease; } .front-left { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); } .front-right { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); } .front-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 9; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: linear-gradient(135deg, rgba(247, 228, 236, 0.96) 0%, rgba(239, 214, 224, 0.96) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52); transition: transform 2s cubic-bezier(.18, .86, .24, 1), opacity 1.7s ease; } .closed-text { z-index: 13; } .seal { z-index: 14; } .intro.open .envelope-top-flap { transform: rotateX(178deg) translateY(-4px); z-index: 4; filter: brightness(1.04); } .intro.open .front-left { transform: translate(-34px, 58px) rotate(-3deg); opacity: 0.42; } .intro.open .front-right { transform: translate(34px, 58px) rotate(3deg); opacity: 0.42; } .intro.open .front-bottom { transform: translateY(84px) scale(0.96); opacity: 0.34; } @media (max-width: 768px) { .envelope::before { background-position: center center; background-size: cover; } .front-left { background: linear-gradient(145deg, rgba(255, 248, 251, 0.64) 0%, rgba(255, 239, 245, 0.48) 100%); } .front-right { background: linear-gradient(145deg, rgba(255, 241, 247, 0.62) 0%, rgba(255, 231, 239, 0.46) 100%); } } .intro:not(.open) .front-left { left: -14px; bottom: -12px; width: calc(50% + 14px); height: 54%; border-bottom-left-radius: 30px; } .intro:not(.open) .front-right { right: -14px; bottom: -12px; width: calc(50% + 14px); height: 54%; border-bottom-right-radius: 30px; } .intro:not(.open) .front-bottom { left: -18px; right: -18px; bottom: -16px; height: 55%; border-bottom-left-radius: 34px; border-bottom-right-radius: 34px; box-shadow: 0 16px 34px rgba(105, 45, 67, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.56); } .intro.open .front-left { left: 0; bottom: 0; width: 50%; height: 52%; } .intro.open .front-right { right: 0; bottom: 0; width: 50%; height: 52%; } .intro.open .front-bottom { left: 0; right: 0; bottom: 0; height: 52%; } .story-redesign-section { position: relative; overflow: hidden; padding-top: clamp(86px, 8vw, 130px); padding-bottom: clamp(88px, 8vw, 140px); } .story-redesign-shell { position: relative; z-index: 5; width: min(1160px, calc(100% - 44px)); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 54px); } .story-redesign-header { max-width: 880px; margin-inline: auto; text-align: center; } .story-redesign-header h2 { margin: 8px 0 18px; font-family: var(--font-title); font-size: clamp(72px, 10vw, 136px); line-height: 0.82; color: var(--green-main); text-shadow: 0 18px 44px rgba(95, 115, 88, 0.13); } .story-redesign-header>p:last-child { max-width: 720px; margin: 0 auto; color: rgba(52, 49, 44, 0.68); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.9; } .story-redesign-date { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0 auto 12px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(201, 79, 127, 0.22); background: rgba(255, 255, 255, 0.72); box-shadow: 0 14px 34px rgba(157, 75, 106, 0.06); color: rgba(52, 49, 44, 0.68); font-family: var(--font-serif); font-size: clamp(16px, 1.7vw, 23px); line-height: 1.25; } .story-redesign-date span { color: var(--pink-dark); font-family: var(--font-body); font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .story-redesign-date em { font-style: italic; } .story-redesign-card { position: relative; display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 58px); align-items: center; padding: clamp(16px, 2vw, 24px); border-radius: clamp(30px, 4vw, 48px); background: radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.96), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 249, 0.78)); border: 1px solid rgba(201, 79, 127, 0.18); box-shadow: 0 34px 90px rgba(169, 79, 112, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05); } .story-redesign-media { position: relative; min-height: clamp(500px, 50vw, 660px); overflow: hidden; border-radius: clamp(24px, 3vw, 38px); background: #f8edf3; box-shadow: 0 22px 60px rgba(80, 40, 54, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.82); } .story-redesign-media::after { content: ""; position: absolute; inset: 14px; border-radius: clamp(18px, 2.5vw, 30px); border: 1px solid rgba(255, 255, 255, 0.72); pointer-events: none; } .story-redesign-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center; filter: none; transform: scale(1.015); } .story-redesign-heart { position: absolute; right: 18px; top: 14px; z-index: 2; font-family: Georgia, serif; font-size: clamp(36px, 4vw, 52px); line-height: 1; color: rgba(201, 79, 127, 0.58); text-shadow: 0 8px 24px rgba(201, 79, 127, 0.16); } .story-redesign-content { position: relative; z-index: 2; padding: clamp(18px, 3vw, 42px) clamp(14px, 3vw, 46px); } .story-redesign-label { display: inline-flex; margin-bottom: 18px; color: var(--pink-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; } .story-redesign-content h3 { max-width: 720px; margin: 0 0 clamp(18px, 2.4vw, 30px); font-family: var(--font-serif); font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; font-weight: 500; color: var(--green-main); } .story-redesign-text { display: grid; gap: 16px; } .story-redesign-text p { max-width: 650px; margin: 0; color: rgba(52, 49, 44, 0.68); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.9; } .story-redesign-poem { width: min(960px, 100%); margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: clamp(28px, 3.6vw, 44px); text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 250, 0.78)); border: 1px solid rgba(201, 79, 127, 0.16); box-shadow: 0 24px 70px rgba(169, 79, 112, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.92); } .story-redesign-poem span { display: block; margin-bottom: 12px; color: var(--pink-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; } .story-redesign-poem p { max-width: 760px; margin: 0 auto; font-family: var(--font-title); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.18; color: var(--green-main); } .family-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 249, 252, 0.98) 0%, rgba(255, 255, 255, 0.96) 42%, rgba(244, 249, 241, 0.9) 100%); } .family-section::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 24rem), radial-gradient(circle at 84% 70%, rgba(95, 115, 88, 0.1), transparent 25rem), linear-gradient(120deg, rgba(255, 255, 255, 0.46), transparent 44%, rgba(169, 79, 112, 0.07)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 34px); } .family-section .section-bg-floral { opacity: 0.13; filter: saturate(0.88) contrast(0.96); } .family-shell { position: relative; z-index: 4; display: grid; gap: clamp(34px, 4.6vw, 64px); width: min(1180px, calc(100% - 44px)); max-width: none; } .family-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; } .family-card { position: relative; overflow: hidden; grid-column: span 6; min-height: 100%; padding: clamp(10px, 1.2vw, 14px); border-radius: clamp(22px, 2.6vw, 34px); border: 1px solid rgba(169, 79, 112, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 251, 0.82)); box-shadow: 0 26px 74px rgba(105, 45, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.96); display: grid; grid-template-columns: minmax(160px, 0.82fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; text-align: left; } .family-card-couple { background: linear-gradient(180deg, rgba(244, 249, 241, 0.95), rgba(255, 249, 252, 0.84)); border-color: rgba(95, 115, 88, 0.2); } .family-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: inherit; pointer-events: none; z-index: 2; } .family-media { position: relative; overflow: hidden; min-height: clamp(280px, 34vw, 440px); border-radius: clamp(16px, 2vw, 24px); background: rgba(255, 240, 246, 0.84); box-shadow: 0 18px 42px rgba(80, 40, 54, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.82); } .family-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(52, 49, 44, 0.18) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 44%); pointer-events: none; } .family-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center; filter: saturate(0.9) contrast(0.98); transform: scale(1.015); } .family-card-body { position: relative; z-index: 3; min-width: 0; padding: clamp(24px, 3vw, 42px) clamp(18px, 2.8vw, 36px); display: flex; flex-direction: column; justify-content: center; } .family-role { display: block; margin-bottom: 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; } .family-card h3 { margin: 0; font-family: var(--font-title); font-size: clamp(40px, 4.8vw, 72px); line-height: 0.94; font-weight: 400; color: var(--green-main); overflow-wrap: anywhere; } .family-card p { max-width: 360px; margin: 18px 0 0; color: rgba(52, 49, 44, 0.68); font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.7; } @media (max-width: 1100px) { .story-redesign-card { grid-template-columns: 1fr; } .family-grid { grid-template-columns: 1fr; } .family-card { grid-column: auto; } .story-redesign-media { min-height: clamp(420px, 62vw, 620px); } .story-redesign-content { text-align: center; } .story-redesign-content h3, .story-redesign-text p { margin-inline: auto; } } @media (max-width: 860px) { .story-redesign-shell { width: min(100%, calc(100% - 28px)); } .story-redesign-header h2 { font-size: clamp(66px, 18vw, 112px); } .story-redesign-date { display: grid; gap: 6px; border-radius: 24px; } } @media (max-width: 560px) { .story-redesign-section { padding-top: 74px; padding-bottom: 86px; } .story-redesign-card { padding: 10px; border-radius: 28px; } .story-redesign-media { min-height: 390px; border-radius: 24px; } .story-redesign-content { padding: 22px 12px 26px; } .story-redesign-content h3 { font-size: clamp(30px, 9vw, 42px); } .story-redesign-text { gap: 13px; } .story-redesign-text p { font-size: 14px; line-height: 1.82; } .story-redesign-poem { padding: 28px 20px; border-radius: 26px; } .story-redesign-poem p { font-size: clamp(30px, 9vw, 42px); } .family-grid { grid-template-columns: 1fr; } .family-card { grid-column: auto; grid-template-columns: 1fr; border-radius: 26px; padding: 10px; } .family-media { min-height: clamp(280px, 78vw, 420px); } .family-card-body { padding: 24px 18px 28px; text-align: center; align-items: center; } .family-card p { margin-inline: auto; } } .floating-hearts-bg { position: fixed !important; inset: 0 !important; z-index: 9999 !important; display: block !important; overflow: hidden !important; pointer-events: none !important; user-select: none !important; } .floating-hearts-bg span { position: absolute !important; bottom: -90px !important; display: block !important; width: auto !important; height: auto !important; opacity: 1 !important; pointer-events: none !important; animation: weddingHeartFloat var(--heart-duration, 20s) linear infinite !important; animation-delay: var(--heart-delay, 0s) !important; will-change: transform, opacity !important; } @supports (content-visibility: auto) { .story-redesign-section, .family-section, .gallery-section, .locations, .menu, .confirmation { content-visibility: auto; contain-intrinsic-size: 900px; } } .floating-hearts-bg span::before { content: "♥" !important; display: block !important; font-family: Georgia, serif !important; font-size: var(--heart-size, 34px) !important; line-height: 1 !important; color: rgba(205, 65, 115, var(--heart-opacity, 0.72)) !important; text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 18px rgba(217, 95, 139, 0.75), 0 0 32px rgba(217, 95, 139, 0.42), 0 10px 26px rgba(169, 79, 112, 0.28) !important; } .floating-hearts-bg span:nth-child(1) { left: 4% !important; --heart-size: 28px; --heart-duration: 16s; --heart-delay: 0s; --heart-opacity: 0.85; --heart-drift: 36px; } .floating-hearts-bg span:nth-child(2) { left: 10% !important; --heart-size: 42px; --heart-duration: 23s; --heart-delay: -7s; --heart-opacity: 0.58; --heart-drift: -42px; } .floating-hearts-bg span:nth-child(3) { left: 17% !important; --heart-size: 24px; --heart-duration: 18s; --heart-delay: -4s; --heart-opacity: 0.8; --heart-drift: 48px; } .floating-hearts-bg span:nth-child(4) { left: 24% !important; --heart-size: 50px; --heart-duration: 28s; --heart-delay: -12s; --heart-opacity: 0.48; --heart-drift: -52px; } .floating-hearts-bg span:nth-child(5) { left: 31% !important; --heart-size: 32px; --heart-duration: 20s; --heart-delay: -5s; --heart-opacity: 0.72; --heart-drift: 38px; } .floating-hearts-bg span:nth-child(6) { left: 39% !important; --heart-size: 23px; --heart-duration: 17s; --heart-delay: -10s; --heart-opacity: 0.82; --heart-drift: -28px; } .floating-hearts-bg span:nth-child(7) { left: 46% !important; --heart-size: 44px; --heart-duration: 26s; --heart-delay: -15s; --heart-opacity: 0.52; --heart-drift: 54px; } .floating-hearts-bg span:nth-child(8) { left: 53% !important; --heart-size: 26px; --heart-duration: 19s; --heart-delay: -6s; --heart-opacity: 0.78; --heart-drift: -36px; } .floating-hearts-bg span:nth-child(9) { left: 60% !important; --heart-size: 36px; --heart-duration: 24s; --heart-delay: -11s; --heart-opacity: 0.62; --heart-drift: 44px; } .floating-hearts-bg span:nth-child(10) { left: 67% !important; --heart-size: 22px; --heart-duration: 17s; --heart-delay: -8s; --heart-opacity: 0.86; --heart-drift: -30px; } .floating-hearts-bg span:nth-child(11) { left: 74% !important; --heart-size: 48px; --heart-duration: 30s; --heart-delay: -16s; --heart-opacity: 0.46; --heart-drift: 56px; } .floating-hearts-bg span:nth-child(12) { left: 81% !important; --heart-size: 29px; --heart-duration: 21s; --heart-delay: -3s; --heart-opacity: 0.74; --heart-drift: -40px; } .floating-hearts-bg span:nth-child(13) { left: 88% !important; --heart-size: 38px; --heart-duration: 25s; --heart-delay: -9s; --heart-opacity: 0.6; --heart-drift: 46px; } .floating-hearts-bg span:nth-child(14) { left: 94% !important; --heart-size: 25px; --heart-duration: 18s; --heart-delay: -13s; --heart-opacity: 0.82; --heart-drift: -34px; } .floating-hearts-bg span:nth-child(15) { left: 14% !important; --heart-size: 34px; --heart-duration: 22s; --heart-delay: -18s; --heart-opacity: 0.68; --heart-drift: 52px; } .floating-hearts-bg span:nth-child(16) { left: 36% !important; --heart-size: 46px; --heart-duration: 29s; --heart-delay: -20s; --heart-opacity: 0.44; --heart-drift: -48px; } .floating-hearts-bg span:nth-child(17) { left: 58% !important; --heart-size: 27px; --heart-duration: 19s; --heart-delay: -14s; --heart-opacity: 0.78; --heart-drift: 36px; } .floating-hearts-bg span:nth-child(18) { left: 76% !important; --heart-size: 40px; --heart-duration: 27s; --heart-delay: -22s; --heart-opacity: 0.54; --heart-drift: -54px; } @keyframes weddingHeartFloat { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; } 8% { opacity: 1; } 35% { transform: translate3d(var(--heart-drift, 40px), -36vh, 0) rotate(14deg) scale(1); opacity: 0.95; } 70% { transform: translate3d(calc(var(--heart-drift, 40px) * -0.7), -76vh, 0) rotate(-16deg) scale(1.16); opacity: 0.78; } 100% { transform: translate3d(var(--heart-drift, 40px), -122vh, 0) rotate(26deg) scale(1.3); opacity: 0; } } @media (max-width: 768px) { .floating-hearts-bg { z-index: 9999 !important; } .floating-hearts-bg span::before { font-size: calc(var(--heart-size, 34px) * 0.78) !important; color: rgba(205, 65, 115, calc(var(--heart-opacity, 0.72) * 0.9)) !important; } } .locations>.container { width: min(90vw, 1480px); max-width: none; } .location-map-grid { width: 100%; display: grid; gap: clamp(28px, 3vw, 46px); margin-top: clamp(38px, 4vw, 58px); } .event-map-card { width: 100%; grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr); gap: clamp(20px, 2.6vw, 36px); padding: clamp(16px, 2vw, 28px); border-radius: clamp(30px, 3vw, 46px); } .event-map-content { padding: clamp(28px, 3.4vw, 54px); } .event-map-frame { min-height: clamp(420px, 38vw, 560px); border-radius: clamp(24px, 2.5vw, 36px); } .event-map-frame iframe { width: 100%; height: 100%; min-height: clamp(420px, 38vw, 560px); } @media (max-width: 1100px) { .event-map-card { grid-template-columns: 1fr; } .event-map-content { text-align: center; } .map-actions { justify-content: center; } } @media (max-width: 768px) { .locations>.container { width: calc(100% - 22px); } .event-map-card { padding: 14px; border-radius: 28px; } .event-map-content { padding: 24px 14px 20px; } .event-map-frame, .event-map-frame iframe { min-height: 360px; } } @media (max-width: 430px) { .event-map-frame, .event-map-frame iframe { min-height: 320px; } } .envelope-scene { width: min(1040px, calc(100vw - 32px)); max-height: min(72svh, 650px); } .envelope { width: min(940px, calc(100vw - 48px)); } .letter-card { top: 50%; width: min(720px, calc(100vw - 48px)); max-height: min(620px, calc(100svh - 138px)); padding: clamp(116px, 12vw, 162px) clamp(24px, 3.2vw, 48px) clamp(26px, 3vw, 42px); gap: clamp(10px, 1.1vw, 15px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; transform: translateX(-50%) translateY(28%) scale(0.94); } .letter-floral-top { height: clamp(104px, 12vw, 156px); } .letter-main-title { max-width: 100%; font-size: clamp(36px, 4.2vw, 62px); } .letter-main-message { max-width: 94%; font-size: clamp(18px, 1.55vw, 24px); } .letter-divider { flex: 0 0 auto; } .floating-hearts-bg span:nth-child(n+13) { display: none !important; } .seal { animation: none !important; will-change: transform, opacity; } @media (max-width: 900px) { .quick-nav { width: min(600px, calc(100% - 32px)); } } @media (max-width: 768px) { .intro-content { padding: 16px 12px 24px; } .envelope-scene { width: min(100%, 430px); max-height: min(70svh, 600px); aspect-ratio: 0.82 / 1; } .envelope { width: min(94vw, 420px); aspect-ratio: 0.82 / 1; } .letter-card { width: min(94vw, 430px); max-height: calc(100svh - 112px); padding: clamp(96px, 25vw, 124px) clamp(18px, 5vw, 24px) 24px; border-radius: 22px; } .letter-floral-top { height: clamp(88px, 24vw, 118px); } .letter-main-title { font-size: clamp(30px, 8.8vw, 42px); line-height: 1.06; } .letter-main-message { font-size: clamp(15.5px, 4.35vw, 18.5px); line-height: 1.42; } .floating-hearts-bg span:nth-child(n+9) { display: none !important; } } @media (max-width: 390px) { .letter-card { width: calc(100vw - 18px); max-height: calc(100svh - 96px); padding: 88px 15px 20px; } .letter-floral-top { height: 84px; } .letter-main-title { font-size: clamp(28px, 8.8vw, 35px); } .letter-main-message { font-size: clamp(14.8px, 4.25vw, 16.5px); line-height: 1.38; } } .section-heading h2, .confirm-copy h2, .story-redesign-header h2, .story-redesign-content h3, .event-map-content h3, .accordion-button span, .family-feature-card h3, .family-mini-card h3 { font-family: var(--font-title) !important; font-weight: 400 !important; letter-spacing: 0 !important; } .letter-card { width: min(690px, calc(100vw - 48px)); max-height: none; padding: clamp(94px, 10vw, 138px) clamp(24px, 3vw, 44px) clamp(22px, 2.6vw, 34px); gap: clamp(7px, 0.8vw, 12px); justify-content: flex-start; } .intro.open .letter-card { transform: translateX(-50%) translateY(-50%) scale(1); } .letter-card .heart { display: none !important; } .letter-floral-top { height: clamp(86px, 10vw, 130px); } .letter-main-title { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.04; } .letter-main-message { max-width: 95%; font-size: clamp(16.5px, 1.34vw, 21px); line-height: 1.36; } .letter-divider { width: 84px; margin-top: 6px; } .family-layout { display: grid; gap: clamp(22px, 3vw, 36px); } .family-feature-card, .family-mini-card { position: relative; overflow: hidden; border: 1px solid rgba(169, 79, 112, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 251, 0.84)); box-shadow: 0 28px 82px rgba(105, 45, 67, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .family-feature-card { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1fr); min-height: clamp(420px, 38vw, 560px); border-radius: clamp(26px, 3vw, 42px); padding: clamp(12px, 1.5vw, 18px); gap: clamp(22px, 3vw, 42px); align-items: stretch; } .family-feature-card::before, .family-mini-card::before { content: ""; position: absolute; inset: 12px; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.64); border-radius: inherit; pointer-events: none; } .family-feature-media, .family-mini-media { position: relative; overflow: hidden; background: rgba(255, 239, 246, 0.86); box-shadow: 0 18px 44px rgba(80, 40, 54, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.82); } .family-feature-media { min-height: clamp(390px, 34vw, 520px); border-radius: clamp(20px, 2.4vw, 32px); } .family-mini-media { aspect-ratio: 4 / 5; border-radius: clamp(18px, 2vw, 26px); } .family-feature-media img, .family-mini-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.9) contrast(0.98) brightness(1.02); transform: scale(1.012); } .family-feature-media::after, .family-mini-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(52, 49, 44, 0.16) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 42%); pointer-events: none; } .family-feature-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 62px) clamp(18px, 4vw, 58px); } .family-feature-copy h3 { margin: 0; color: var(--green-main); font-size: clamp(56px, 7vw, 112px); line-height: 0.86; } .family-feature-copy p { max-width: 500px; margin: clamp(18px, 2.4vw, 28px) 0 0; color: rgba(52, 49, 44, 0.68); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.85; } .family-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); } .family-mini-card { display: grid; gap: clamp(14px, 2vw, 22px); border-radius: clamp(22px, 2.6vw, 34px); padding: clamp(10px, 1.2vw, 14px); } .family-mini-copy { position: relative; z-index: 3; padding: 0 clamp(10px, 1.7vw, 20px) clamp(16px, 2vw, 24px); text-align: center; } .family-role { color: var(--pink-dark); } .family-mini-copy h3 { margin: 0; color: var(--green-main); font-size: clamp(38px, 4.2vw, 62px); line-height: 0.96; overflow-wrap: anywhere; } .family-mini-copy p { max-width: 310px; margin: 14px auto 0; color: rgba(52, 49, 44, 0.68); font-size: 14px; line-height: 1.72; } @media (max-width: 900px) { .family-feature-card, .family-support-grid { grid-template-columns: 1fr; } .family-feature-copy { padding: 28px 22px 34px; text-align: center; align-items: center; } .family-feature-media { min-height: clamp(320px, 68vw, 500px); } } @media (max-width: 768px) { .letter-card { padding: clamp(78px, 20vw, 102px) 18px 18px; } .letter-floral-top { height: clamp(70px, 18vw, 92px); } .letter-main-message { font-size: clamp(13.6px, 3.55vw, 15.5px); line-height: 1.32; } .letter-divider { margin-top: 3px; } } @media (max-width: 390px) { .letter-card { padding: 70px 14px 15px; } .letter-floral-top { height: 66px; } .letter-main-message { font-size: clamp(12.6px, 3.48vw, 14px); line-height: 1.28; } .family-feature-card, .family-mini-card { border-radius: 24px; } } @media (min-width: 901px) { .intro.open .letter-card { transform: translateX(-50%) translateY(-76%) scale(1); } } @media (max-width: 768px) { .family-feature-card { min-height: auto; gap: 14px; } .family-feature-media { min-height: clamp(238px, 62vw, 330px); } .family-feature-copy { padding: 24px 18px 30px; } .family-feature-copy h3 { font-size: clamp(44px, 13vw, 64px); line-height: 0.92; } .family-feature-copy p { font-size: 14px; line-height: 1.68; } } html, body { background: linear-gradient( 180deg, #ffffff 0%, #fffafd 16%, #fff1f7 38%, #ffe5ef 68%, #fbd5e4 100% ) !important; } body::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 249, 252, 0.32) 34%, rgba(255, 229, 239, 0.2) 100% ) !important; opacity: 1 !important; } .page, .intro, .hero-section, .story-section, .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation { background: transparent !important; } .hero-section::before, .locations::before, .menu::before, .confirmation::before, .gallery-section::before, .family-section::before { background: none !important; content: "" !important; } .family-section::before { display: none !important; } body::before, .family-section::before, .family-section::after { display: none !important; } @media (min-width: 901px) { .intro.open .letter-card { transform: translateX(-50%) translateY(-50%) scale(1); } } .letter-main-message { font-size: clamp(17.5px, 1.45vw, 22px); line-height: 1.4; } .open-hint { max-width: 820px; font-size: clamp(15px, 1.1vw, 18px) !important; line-height: 1.75; } .scroll-cue span { font-size: clamp(13px, 1vw, 15px) !important; } .family-feature-card, .family-mini-card { background: rgba(255, 255, 255, 0.72) !important; background-image: none !important; } .family-feature-card::before, .family-mini-card::before, .family-feature-media::after, .family-mini-media::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } .family-feature-media, .family-mini-media { background: rgba(255, 255, 255, 0.58) !important; background-image: none !important; } .family-feature-media img, .family-mini-media img { filter: none !important; } @media (max-width: 768px) { .letter-main-message { font-size: clamp(14px, 3.7vw, 16px); } .open-hint { font-size: 13.5px !important; line-height: 1.65; } .scroll-cue span { font-size: 12.5px !important; } } @media (max-width: 390px) { .letter-main-message { font-size: clamp(13.2px, 3.62vw, 14.5px); } } html, body, .page, .intro, .hero-section, .story-section, .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation { background: var(--site-solid-bg) !important; } body::before, .intro-bg, .intro-overlay, .section-bg-floral, .hero-section::before, .hero-section::after, .locations::before, .locations::after, .menu::before, .menu::after, .confirmation::before, .gallery-section::before, .gallery-section::after, .family-section::before, .family-section::after { display: none !important; background: none !important; background-image: none !important; } .letter-card { width: min(700px, calc(100vw - 52px)); padding: clamp(92px, 9.5vw, 132px) clamp(28px, 3.4vw, 52px) clamp(26px, 3vw, 38px); border-radius: clamp(22px, 2.4vw, 30px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 253, 0.96)) !important; border: 1px solid rgba(169, 79, 112, 0.13); box-shadow: 0 28px 72px rgba(105, 45, 67, 0.16), 0 2px 0 rgba(255, 255, 255, 0.72) inset, 0 0 0 1px rgba(255, 255, 255, 0.54) inset; contain: layout paint; backface-visibility: hidden; transform: translate3d(-50%, 28%, 0) scale(0.94); } .intro.open .letter-card { animation: premiumLetterReveal 1.18s cubic-bezier(.16, .84, .24, 1) 0.42s both; } @keyframes premiumLetterReveal { 0% { transform: translate3d(-50%, -42%, 0) scale(0.96); filter: blur(5px) saturate(0.95); } 58% { opacity: 1; transform: translate3d(-50%, -53%, 0) scale(1.012); filter: blur(0) saturate(1.02); } 100% { filter: blur(0) saturate(1); } } .letter-floral-top { height: clamp(84px, 9.4vw, 126px); } .letter-floral-top::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 250, 253, 0.92) 100%) !important; } .letter-card::before, .letter-card::after { opacity: 0.28; } .letter-main-title { font-size: clamp(34px, 3.7vw, 54px); color: #465840; } .letter-main-message { max-width: 92%; font-size: clamp(17px, 1.38vw, 21px); line-height: 1.42; color: rgba(52, 49, 44, 0.66); } .letter-divider { width: 78px; opacity: 0.72; } .open-hint { max-width: 680px; margin-top: 18px; font-size: clamp(11px, 0.82vw, 13px) !important; letter-spacing: 0.13em; } .scroll-cue { gap: 14px; margin-top: 16px; } .scroll-cue span { font-size: clamp(10.5px, 0.78vw, 12px) !important; letter-spacing: 0.14em; } @media (prefers-reduced-motion: reduce) { .intro.open .letter-card { animation: none !important; } } @media (max-width: 768px) { .letter-card { width: min(94vw, 410px); padding: clamp(72px, 18vw, 96px) 18px 18px; } .letter-floral-top { height: clamp(66px, 17vw, 88px); } .letter-main-title { font-size: clamp(27px, 7.2vw, 34px); } .letter-main-message { max-width: 96%; font-size: clamp(13.8px, 3.65vw, 15.8px); } .open-hint { margin-top: 14px; font-size: 10.5px !important; line-height: 1.52; } .scroll-cue { gap: 12px; margin-top: 14px; } .scroll-cue span { font-size: 10px !important; } } @media (max-width: 390px) { .letter-card { padding: 66px 14px 15px; } .letter-main-title { font-size: clamp(24px, 7.2vw, 28px); } .letter-main-message { font-size: clamp(12.8px, 3.55vw, 14.2px); } } :root { --site-solid-bg: #fff1f7; --section-y: clamp(82px, 8vw, 124px); --section-x: clamp(18px, 3vw, 44px); --content-wide: min(1180px, calc(100% - (var(--section-x) * 2))); --content-regular: min(1040px, calc(100% - (var(--section-x) * 2))); } html, body, .page, .intro, .hero-section, .story-section, .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation { background-color: var(--site-solid-bg) !important; background-image: none !important; } .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation, .section-padding { padding-block: var(--section-y) !important; padding-inline: 0 !important; min-height: auto !important; } .story-redesign-shell, .family-shell, .gallery-shell, .locations > .container, .menu > .container, .confirmation > .container { width: var(--content-wide) !important; max-width: none !important; margin-inline: auto !important; } .section-heading, .story-redesign-header, .confirm-copy { margin-bottom: clamp(26px, 3.6vw, 44px) !important; } .section-heading h2, .confirm-copy h2, .story-redesign-header h2 { margin-bottom: clamp(12px, 1.5vw, 18px) !important; } .section-heading p, .confirm-copy p, .story-redesign-header > p:last-child { max-width: 720px; margin-inline: auto; } .intro-content { padding: clamp(18px, 3vw, 34px) var(--section-x) clamp(22px, 4vw, 42px) !important; } .letter-card { width: min(720px, calc(100vw - 56px)); padding: clamp(96px, 10vw, 136px) clamp(30px, 3.8vw, 58px) clamp(30px, 3.4vw, 44px); border-radius: clamp(24px, 2.6vw, 34px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(255, 251, 253, 0.972)) !important; border: 1px solid rgba(169, 79, 112, 0.16); box-shadow: 0 34px 86px rgba(105, 45, 67, 0.18), 0 10px 26px rgba(255, 255, 255, 0.46) inset, 0 0 0 1px rgba(255, 255, 255, 0.68) inset; gap: clamp(10px, 1vw, 14px); overflow: hidden !important; } .letter-card::before { width: clamp(120px, 12vw, 170px); height: clamp(120px, 12vw, 170px); top: auto; left: auto; right: 18px; bottom: 14px; border-color: rgba(169, 79, 112, 0.16); opacity: 0.38; } .letter-card::after { width: clamp(90px, 9vw, 132px); height: clamp(90px, 9vw, 132px); left: 18px; top: 18px; right: auto; bottom: auto; border-color: rgba(95, 115, 88, 0.13); opacity: 0.3; } .letter-floral-top { height: clamp(88px, 9.6vw, 132px); } .letter-floral-top::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 251, 253, 0.42) 52%, rgba(255, 251, 253, 0.98) 100%) !important; } .letter-main-title { max-width: min(100%, 620px); font-size: clamp(38px, 4vw, 60px); line-height: 1.02; color: #41553d; text-shadow: 0 10px 26px rgba(65, 85, 61, 0.08); } .letter-main-message { max-width: min(94%, 600px); font-size: clamp(17.5px, 1.42vw, 22px); line-height: 1.48; color: rgba(52, 49, 44, 0.74); } .letter-divider { width: 92px; margin-top: 8px; background: linear-gradient(90deg, transparent, rgba(169, 79, 112, 0.34), transparent); } .intro.open .letter-card { transform: translate3d(-50%, -50%, 0) scale(1); animation: premiumLetterReveal 1s cubic-bezier(.16, .84, .24, 1) 0.32s both; } @keyframes premiumLetterReveal { 0% { opacity: 0; transform: translate3d(-50%, -38%, 0) scale(0.965); filter: blur(5px); } 62% { opacity: 1; transform: translate3d(-50%, -52%, 0) scale(1.01); filter: blur(0); } 100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); } } .open-hint { max-width: 620px; margin-top: clamp(14px, 2vw, 20px) !important; font-size: clamp(10.5px, 0.78vw, 12.5px) !important; line-height: 1.55; letter-spacing: 0.12em; } .scroll-cue { margin-top: clamp(12px, 1.8vw, 18px) !important; } .scroll-cue span { font-size: clamp(10px, 0.74vw, 11.5px) !important; } @media (max-width: 768px) { :root { --section-y: clamp(64px, 15vw, 86px); --section-x: 16px; } .letter-card { width: min(94vw, 420px); padding: clamp(74px, 18vw, 98px) clamp(17px, 5vw, 24px) 20px; border-radius: 24px; } .letter-floral-top { height: clamp(66px, 17vw, 90px); } .letter-main-title { font-size: clamp(28px, 7.6vw, 38px); line-height: 1.04; } .letter-main-message { max-width: 98%; font-size: clamp(14px, 3.8vw, 16.2px); line-height: 1.34; } .open-hint { max-width: 340px; font-size: 10px !important; line-height: 1.5; } .scroll-cue span { font-size: 9.8px !important; } } @media (max-width: 390px) { .letter-card { width: calc(100vw - 20px); padding: 66px 14px 16px; } .letter-floral-top { height: 62px; } .letter-main-title { font-size: clamp(25px, 7.2vw, 30px); } .letter-main-message { font-size: clamp(12.9px, 3.58vw, 14.3px); line-height: 1.3; } } .letter-card { isolation: isolate; will-change: transform, opacity, filter; } .letter-floral-top { background: #fffbfd !important; overflow: hidden !important; } .letter-floral-top::after { bottom: -2px !important; height: 58% !important; background: linear-gradient(180deg, rgba(255, 251, 253, 0) 0%, #fffbfd 82%, #fffbfd 100%) !important; transform: translateZ(0); } .check-card { position: relative; min-height: 58px; color: #41553d !important; background: rgba(255, 255, 255, 0.84) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 24px rgba(105, 45, 67, 0.06) !important; } .check-card:hover, .check-card:focus-within { background: rgba(255, 255, 255, 0.96) !important; border-color: rgba(109, 130, 98, 0.34) !important; box-shadow: 0 16px 36px rgba(105, 45, 67, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; } .check-card:has(input:checked) { color: #40583c !important; background: rgba(246, 251, 242, 0.94) !important; border-color: rgba(109, 130, 98, 0.42) !important; } .check-card span { position: relative; z-index: 1; font-weight: 700; line-height: 1.25; } .check-card input { position: relative; z-index: 1; flex: 0 0 auto; } .intro.open .letter-card { z-index: 30 !important; } .intro.open .letter-card { position: fixed !important; top: 50% !important; z-index: 1000 !important; width: min(720px, calc(100vw - 48px)) !important; max-height: calc(100svh - 72px) !important; padding: clamp(112px, 10vw, 142px) clamp(28px, 4vw, 58px) clamp(30px, 4vw, 46px) !important; border-radius: clamp(24px, 2.4vw, 32px) !important; overflow: hidden !important; pointer-events: none !important; border: 1px solid rgba(169, 79, 112, 0.14) !important; box-shadow: 0 32px 86px rgba(105, 45, 67, 0.20), 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 0 0 1px rgba(255, 255, 255, 0.52) inset !important; transform: translate3d(-50%, -50%, 0) scale(1) !important; animation: letterRevealClean 0.9s cubic-bezier(.16, .84, .24, 1) 0.16s both !important; } .intro.open .letter-floral-top { height: clamp(92px, 9vw, 126px) !important; background: linear-gradient(180deg, rgba(255, 244, 249, 0.12), rgba(255, 244, 249, 0.02)), var(--floral) center 63% / cover no-repeat !important; transform: translateZ(0); } .intro.open .letter-floral-top::before, .intro.open .letter-floral-top::after { background: none !important; } .intro.open .letter-card::before, .intro.open .letter-card::after { opacity: 0.22 !important; z-index: 0 !important; } .intro.open .letter-card > *:not(.letter-floral-top) { position: relative !important; z-index: 2 !important; } .intro.open .letter-main-title { max-width: min(100%, 640px) !important; margin: 0 auto !important; color: var(--premium-green-700) !important; font-size: clamp(42px, 4.15vw, 58px) !important; line-height: 1.03 !important; text-shadow: none !important; } .intro.open .letter-main-message { max-width: min(100%, 620px) !important; margin: clamp(16px, 1.8vw, 22px) auto 0 !important; color: rgba(52, 49, 44, 0.74) !important; font-size: clamp(18px, 1.42vw, 21px) !important; line-height: 1.55 !important; } .intro.open .letter-divider { width: 84px !important; height: 1px !important; margin-top: clamp(16px, 2vw, 22px) !important; background: rgba(169, 79, 112, 0.24) !important; } .intro.open .letter-divider::before, .intro.open .letter-divider::after, .intro.open .letter-card .heart { content: none !important; display: none !important; } @keyframes letterRevealClean { 0% { opacity: 0; filter: blur(8px); box-shadow: 0 14px 46px rgba(105, 45, 67, 0.12), 0 1px 0 rgba(255, 255, 255, 0.88) inset; } 100% { opacity: 1; filter: blur(0); } } .check-card, .check-card:hover, .check-card:focus-within, .check-card.is-checked, .check-card:has(input:checked) { transform: none !important; animation: none !important; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease !important; } .check-card { display: flex !important; align-items: center !important; min-height: 58px !important; gap: 12px !important; color: #43523f !important; background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(169, 79, 112, 0.18) !important; box-shadow: 0 8px 20px rgba(105, 45, 67, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; -webkit-tap-highlight-color: transparent; } .check-card::before, .check-card::after { content: none !important; display: none !important; } .check-card:hover, .check-card:focus-within { color: #3f553c !important; background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(109, 130, 98, 0.36) !important; box-shadow: 0 12px 26px rgba(105, 45, 67, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; } .check-card.is-checked, .check-card:has(input:checked) { color: #40583c !important; background: rgba(246, 251, 242, 0.96) !important; border-color: rgba(109, 130, 98, 0.44) !important; } .check-card span { color: inherit !important; font-weight: 700 !important; line-height: 1.22 !important; } .check-card input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; display: grid !important; place-items: center !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; margin: 0 !important; border-radius: 7px !important; border: 1px solid rgba(109, 130, 98, 0.38) !important; background: #ffffff !important; box-shadow: inset 0 1px 2px rgba(65, 85, 61, 0.08) !important; cursor: pointer !important; } .check-card input[type="checkbox"]::after { width: 10px; height: 6px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; opacity: 0; transform: rotate(-45deg) translate(1px, -1px); } .check-card input[type="checkbox"]:checked { border-color: #6d8262 !important; background: #6d8262 !important; } .check-card input[type="checkbox"]:checked::after { opacity: 1; } .seal { overflow: visible !important; animation: sealPulseFinal 2.15s ease-in-out infinite !important; } .seal::before, .seal::after { content: "" !important; display: block !important; position: absolute !important; inset: -10px !important; border-radius: 50% !important; border: 1px solid rgba(205, 65, 115, 0.32) !important; background: rgba(255, 219, 232, 0.12) !important; opacity: 0; pointer-events: none !important; animation: sealRingPulseFinal 2.15s ease-out infinite !important; } .seal::after { animation-delay: 0.72s !important; } .seal img { position: relative !important; z-index: 1 !important; animation: sealImageGlowFinal 2.15s ease-in-out infinite !important; } .seal:hover { transform: translate(-50%, -50%) scale(1.06) !important; } .intro.open .seal, .intro.open .seal::before, .intro.open .seal::after, .intro.open .seal img { animation: none !important; } @keyframes sealPulseFinal { 0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 14px 22px rgba(70, 20, 15, 0.30)) drop-shadow(0 0 0 rgba(205, 65, 115, 0)); } 50% { transform: translate(-50%, -50%) scale(1.07); filter: drop-shadow(0 18px 28px rgba(70, 20, 15, 0.34)) drop-shadow(0 0 22px rgba(205, 65, 115, 0.28)); } } @keyframes sealRingPulseFinal { 0% { opacity: 0.58; transform: scale(0.82); } 72%, 100% { opacity: 0; transform: scale(1.32); } } @keyframes sealImageGlowFinal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @media (max-width: 768px) { .intro.open .letter-card { width: calc(100vw - 24px) !important; max-height: calc(100svh - 44px) !important; padding: 90px 18px 24px !important; } .intro.open .letter-floral-top { height: 74px !important; background-position: center 66% !important; } .intro.open .letter-main-title { font-size: clamp(31px, 8.1vw, 38px) !important; line-height: 1.03 !important; } .intro.open .letter-main-message { margin-top: 13px !important; font-size: clamp(14px, 3.8vw, 16px) !important; } } @media (max-width: 390px) { .intro.open .letter-card { width: calc(100vw - 18px) !important; padding: 78px 14px 20px !important; } .intro.open .letter-floral-top { height: 64px !important; } .intro.open .letter-main-title { font-size: clamp(27px, 7.7vw, 31px) !important; } .intro.open .letter-main-message { font-size: clamp(12.6px, 3.55vw, 14.1px) !important; line-height: 1.35 !important; } } .intro .letter-card { position: absolute !important; left: 50% !important; top: 20% !important; width: min(720px, 78vw) !important; max-height: min(82vh, 640px) !important; padding: clamp(112px, 11.5vw, 152px) clamp(28px, 3.4vw, 52px) clamp(30px, 3.4vw, 46px) !important; pointer-events: none !important; } .intro.open .letter-card { position: absolute !important; left: 50% !important; top: 20% !important; z-index: 15 !important; width: min(720px, 78vw) !important; max-height: min(82vh, 640px) !important; transform: translateX(-50%) translateY(-22%) scale(1) !important; animation: letterOpenClassic 0.9s cubic-bezier(.18, .86, .24, 1) 0.22s both !important; } .intro.open .letter-floral-top { height: clamp(100px, 11.5vw, 148px) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 250, 252, 0.78) 92%), var(--floral) center 58% / cover no-repeat !important; } .intro.open .letter-floral-top img { display: none !important; } .intro.open .letter-floral-top::before, .intro.open .letter-floral-top::after { content: none !important; display: none !important; } .intro.open .letter-main-title { font-size: clamp(38px, 4vw, 58px) !important; line-height: 1.04 !important; } .intro.open .letter-main-message { font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.48 !important; } @keyframes letterOpenClassic { 0% { opacity: 0; transform: translateX(-50%) translateY(12%) scale(0.96); filter: blur(5px); } 100% { opacity: 1; transform: translateX(-50%) translateY(-22%) scale(1); filter: blur(0); } } .check-card { user-select: none !important; cursor: pointer !important; } .check-card, .check-card:hover, .check-card:focus-within, .check-card.is-checked, .check-card:has(input:checked) { transform: translateZ(0) !important; backface-visibility: hidden !important; } .check-card input[type="checkbox"] { transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important; } .check-card:hover input[type="checkbox"], .check-card:focus-within input[type="checkbox"] { box-shadow: 0 0 0 4px rgba(109, 130, 98, 0.12), inset 0 1px 2px rgba(65, 85, 61, 0.08) !important; } @media (max-width: 768px) { .intro .letter-card, .intro.open .letter-card { width: min(92vw, 560px) !important; padding: clamp(82px, 18vw, 112px) clamp(16px, 4.6vw, 24px) 22px !important; transform: translateX(-50%) translateY(-18%) scale(1) !important; } .intro.open .letter-floral-top { height: clamp(72px, 17vw, 96px) !important; } .intro.open .letter-main-title { font-size: clamp(28px, 7.4vw, 38px) !important; } .intro.open .letter-main-message { font-size: clamp(13.8px, 3.65vw, 15.8px) !important; line-height: 1.36 !important; } @keyframes letterOpenClassic { 0% { opacity: 0; transform: translateX(-50%) translateY(16%) scale(0.96); filter: blur(5px); } 100% { opacity: 1; transform: translateX(-50%) translateY(-18%) scale(1); filter: blur(0); } } } @media (max-width: 390px) { .intro .letter-card, .intro.open .letter-card { width: calc(100vw - 22px) !important; padding: 72px 14px 18px !important; } .intro.open .letter-floral-top { height: 62px !important; } } .intro.open .letter-card { background: rgba(255, 252, 254, 0.985) !important; } .intro.open .letter-floral-top { background: var(--floral) center 58% / cover no-repeat !important; } .intro.open .letter-floral-top::after { bottom: -34px !important; height: 74px !important; background: linear-gradient( 180deg, rgba(255, 252, 254, 0) 0%, rgba(255, 252, 254, 0.72) 46%, rgba(255, 252, 254, 0.985) 100% ) !important; filter: blur(8px) !important; transform: translateZ(0) !important; } .intro.open .letter-main-title { position: relative !important; } .check-card input[type="checkbox"] { position: relative !important; display: block !important; line-height: 1 !important; } .check-card input[type="checkbox"]::after { content: "" !important; position: absolute !important; left: 50% !important; top: 48% !important; width: 10px !important; height: 6px !important; border-left: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; opacity: 0 !important; transform: translate(-50%, -50%) rotate(-45deg) !important; transform-origin: center !important; } .check-card input[type="checkbox"]:checked::after { opacity: 1 !important; } .intro.open .letter-card { padding-top: clamp(156px, 13vw, 184px) !important; } .intro.open .letter-floral-top { height: clamp(128px, 11vw, 156px) !important; background: var(--floral) center 54% / cover no-repeat !important; box-shadow: 0 18px 22px -10px rgba(255, 252, 254, 0.95), 0 34px 36px -16px rgba(255, 252, 254, 0.98) !important; } .intro.open .letter-floral-top *, .intro.open .letter-floral-top::before, .intro.open .letter-floral-top::after { content: none !important; display: none !important; opacity: 0 !important; background: none !important; filter: none !important; } .intro.open .letter-card::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: clamp(104px, 9.2vw, 132px) !important; height: 76px !important; z-index: 1 !important; pointer-events: none !important; border: 0 !important; border-radius: 0 !important; opacity: 1 !important; background: linear-gradient( 180deg, rgba(255, 252, 254, 0) 0%, rgba(255, 252, 254, 0.72) 54%, #fffcfe 100% ) !important; filter: blur(7px) !important; transform: none !important; } .intro.open .letter-main-title { z-index: 3 !important; margin-top: 0 !important; } @media (max-width: 768px) { .intro.open .letter-card { padding-top: clamp(106px, 24vw, 130px) !important; } .intro.open .letter-floral-top { height: clamp(84px, 19vw, 104px) !important; } .intro.open .letter-card::before { top: clamp(62px, 15vw, 78px) !important; height: 58px !important; } } @media (max-width: 390px) { .intro.open .letter-card { padding-top: 94px !important; } .intro.open .letter-floral-top { height: 76px !important; } .intro.open .letter-card::before { top: 54px !important; height: 52px !important; } } .intro.open .letter-floral-top { overflow: visible !important; box-shadow: none !important; } .intro.open .letter-floral-top::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -42px !important; height: 92px !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient( 180deg, rgba(255, 252, 254, 0) 0%, rgba(255, 252, 254, 0.18) 34%, rgba(255, 252, 254, 0.62) 68%, #fffcfe 100% ) !important; filter: none !important; transform: none !important; z-index: 2 !important; } .intro.open .letter-card::before { content: none !important; display: none !important; } .intro.open .letter-main-title { margin-top: clamp(4px, 0.8vw, 10px) !important; } @media (max-width: 768px) { .intro.open .letter-floral-top::after { bottom: -34px !important; height: 72px !important; } } .intro.open .letter-card { background: #fffcfe !important; padding-top: clamp(150px, 13vw, 178px) !important; } .intro.open .letter-floral-top { position: absolute !important; inset: 0 0 auto 0 !important; height: clamp(150px, 13vw, 182px) !important; overflow: hidden !important; border-radius: inherit !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; background: var(--floral) center 52% / cover no-repeat !important; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.74) 66%, rgba(0, 0, 0, 0.28) 82%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.74) 66%, rgba(0, 0, 0, 0.28) 82%, transparent 100%) !important; } .ia-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .privacy-consent { width: 100%; align-items: flex-start; } .privacy-consent span { line-height: 1.55; } .form-status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .ia-standard-page { min-height: 100vh; } .ia-standard-page h1 { font-family: var(--font-serif); font-size: clamp(42px, 7vw, 76px); color: var(--pink-dark); } .ia-standard-page .entry-content { max-width: 820px; font-size: 17px; line-height: 1.8; } .intro.open .letter-floral-top::before, .intro.open .letter-floral-top::after, .intro.open .letter-floral-top img { content: none !important; display: none !important; } .intro.open .letter-main-title { margin-top: clamp(6px, 0.8vw, 12px) !important; } @media (max-width: 768px) { .intro.open .letter-card { padding-top: clamp(110px, 26vw, 134px) !important; } .intro.open .letter-floral-top { height: clamp(108px, 25vw, 132px) !important; } } @media (max-width: 390px) { .intro.open .letter-card { padding-top: 104px !important; } .intro.open .letter-floral-top { height: 104px !important; } } .intro.open .letter-main-message { font-size: clamp(18.5px, 1.77vw, 26px) !important; line-height: 1.52 !important; } @media (max-width: 768px) { .intro.open .letter-main-message { font-size: clamp(14.8px, 4vw, 16.8px) !important; line-height: 1.42 !important; } } @media (max-width: 390px) { .intro.open .letter-main-message { font-size: clamp(13.4px, 3.75vw, 14.8px) !important; line-height: 1.38 !important; } } .letter-top-heart { position: absolute !important; left: 50% !important; top: clamp(16px, 2vw, 24px) !important; z-index: 4 !important; display: block !important; color: rgba(205, 65, 115, 0.72) !important; font-family: Georgia, serif !important; font-size: clamp(26px, 2.8vw, 38px) !important; line-height: 1 !important; text-shadow: 0 0 16px rgba(255, 206, 222, 0.9), 0 8px 20px rgba(169, 79, 112, 0.18) !important; transform: translateX(-50%) !important; pointer-events: none !important; } .intro.open .letter-floral-top .letter-top-heart { display: block !important; opacity: 1 !important; } .language-switcher { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 10020; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: rgba(255, 252, 254, 0.88); box-shadow: 0 10px 30px rgba(113, 42, 69, 0.16); color: var(--pink-dark); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; backdrop-filter: blur(12px); } .language-switcher a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: 999px; color: inherit; text-decoration: none; } .language-switcher a[aria-current="page"] { background: var(--pink-dark); color: #fff; } .language-switcher a:focus-visible, .seal:focus-visible, .rsvp-form :is(input, textarea, select, button):focus-visible, .map-btn:focus-visible, .accordion-button:focus-visible, .back-to-top:focus-visible { outline: 3px solid #7d2449 !important; outline-offset: 3px !important; } .seal, .btn, .map-btn, .accordion-button, .back-to-top { touch-action: manipulation; } .ia-security-check { padding: 16px; border: 1px solid rgba(170, 70, 108, 0.22); border-radius: 16px; background: rgba(255, 247, 251, 0.7); } .ia-security-check input[type="number"] { max-width: 150px; } .ia-security-check small { display: block; margin-top: 8px; color: #704f5d; line-height: 1.5; } .rsvp-form.is-sending { opacity: 0.78; pointer-events: none; } .form-status { min-height: 24px; } @media (max-width: 768px) { .language-switcher { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); } .rsvp-form input, .rsvp-form textarea, .rsvp-form select, .rsvp-form button, .map-btn, .accordion-button { min-height: 44px; } .confirm-grid, .location-map-grid, .family-support-grid { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .intro.open .letter-card, .intro.open .envelope-top-flap, .intro.open .seal, .intro.opened .scroll-cue { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .story-redesign-media img { filter: none !important; } .family-mini-card.family-seed-couple .family-mini-media img { object-position: 50% 46% !important; transform: scale(1.025) !important; transform-origin: 50% 46% !important; } .family-mini-card.family-seed-parents_iulian .family-mini-media img { object-position: 58% 44% !important; transform: scale(1.16) !important; transform-origin: 58% 42% !important; } .family-mini-card.family-seed-parents_adina .family-mini-media img { object-position: 50% 44% !important; transform: translateY(6%) scale(1.34) !important; transform-origin: 50% 42% !important; } .intro.open .letter-main-message { font-family: var(--font-body) !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: 0 !important; } .event-map-card.has-location-slider { grid-template-areas: "content map" "slider slider"; } .event-map-card.has-location-slider .event-map-content { grid-area: content; } .event-map-card.has-location-slider .event-map-frame { grid-area: map; } .event-map-card.has-location-slider:not(.has-map) { grid-template-areas: "content content" "slider slider"; } .location-photo-slider { grid-area: slider; position: relative; z-index: 2; width: 100%; margin-top: clamp(2px, 0.8vw, 10px); overflow: hidden; border-radius: clamp(22px, 2.5vw, 34px); background: rgba(255, 239, 246, 0.82); box-shadow: 0 20px 60px rgba(105, 45, 67, 0.14); } .location-slider-viewport, .location-slider-track, .location-slide { width: 100%; } .location-slider-viewport { position: relative; aspect-ratio: 16 / 7; min-height: 300px; overflow: hidden; } .location-slider-track { position: absolute; inset: 0; } .location-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.75s ease, visibility 0.75s ease; } .location-slide.is-active { opacity: 1; visibility: visible; } .location-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none !important; filter: none !important; } .location-slider-arrow { position: absolute; top: 50%; z-index: 4; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.88); border-radius: 50%; color: var(--pink-dark); background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 28px rgba(105, 45, 67, 0.16); font-family: Georgia, serif; font-size: 36px; line-height: 1; transform: translateY(-50%); } .location-slider-prev { left: 18px; } .location-slider-next { right: 18px; } .location-slider-dots { position: absolute; left: 50%; bottom: 16px; z-index: 4; display: flex; gap: 9px; transform: translateX(-50%); } .location-slider-dot { width: 11px; height: 11px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.94); border-radius: 50%; background: rgba(169, 79, 112, 0.45); box-shadow: 0 3px 10px rgba(70, 35, 48, 0.18); transition: transform 0.25s ease, background-color 0.25s ease; } .location-slider-dot.is-active { background: var(--pink-dark); transform: scale(1.28); } .rsvp-heart-list { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; } .rsvp-heart-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--muted); font-size: inherit; line-height: 1.86; } .rsvp-heart-bullet { display: inline-grid; place-items: center; color: var(--pink-dark); font-family: Georgia, serif; font-size: 20px; line-height: 1.4; transform-origin: center; animation: rsvpHeartPulse 1.6s ease-in-out infinite; text-shadow: 0 0 14px rgba(217, 138, 165, 0.5); } .rsvp-heart-list li:nth-child(2) .rsvp-heart-bullet { animation-delay: 0.35s; } @keyframes rsvpHeartPulse { 0%, 100% { transform: scale(0.88); opacity: 0.72; } 50% { transform: scale(1.24); opacity: 1; } } @media (max-width: 1100px) { .event-map-card.has-location-slider { grid-template-areas: "content" "map" "slider"; } .event-map-card.has-location-slider:not(.has-map) { grid-template-areas: "content" "slider"; } } @media (max-width: 768px) { .location-slider-viewport { aspect-ratio: 4 / 3; min-height: 260px; } .location-slider-arrow { width: 42px; height: 42px; font-size: 31px; } .location-slider-prev { left: 10px; } .location-slider-next { right: 10px; } .rsvp-heart-list li { grid-template-columns: 22px minmax(0, 1fr); gap: 9px; } } @media (max-width: 430px) { .location-slider-viewport { aspect-ratio: 1 / 1; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .location-slide { transition-duration: 0.01ms; } .rsvp-heart-bullet { animation: none; } } .page :is(h1, h2, h3), .intro :is(.letter-main-title, .closed-names) { font-family: var(--font-title) !important; font-weight: 400 !important; text-wrap: balance; } .section-heading h2, .confirm-copy h2, .story-redesign-header h2 { font-size: clamp(48px, 5.8vw, 78px) !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-shadow: 0 10px 30px rgba(4, 99, 7, 0.08); } .story-redesign-content h3, .event-map-content h3, .family-feature-copy h3, .family-mini-copy h3 { font-size: clamp(36px, 4.2vw, 56px) !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .page p, .page li, .page .accordion-panel { overflow-wrap: anywhere; } .section-heading p { max-width: 760px; margin-inline: auto; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.8; } .section-kicker, .eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: 0.24em; } .intro.open .letter-main-title { max-width: min(92%, 760px); margin-bottom: clamp(8px, 1vw, 14px) !important; font-size: clamp(34px, 4.2vw, 56px) !important; line-height: 1.05 !important; color: var(--green-main); text-shadow: 0 8px 24px rgba(4, 99, 7, 0.08); } .intro.open .letter-main-message { max-width: min(78%, 720px) !important; margin-inline: auto !important; font-family: var(--font-serif) !important; font-size: clamp(17px, 1.3vw, 19.5px) !important; line-height: 1.58 !important; font-weight: 500 !important; letter-spacing: 0.005em !important; color: #53594f !important; text-wrap: pretty; } .intro.open .letter-divider { width: 92px; margin-block: 10px; background: linear-gradient(90deg, transparent, rgba(169, 79, 112, 0.42), transparent); } .section-padding { padding-block: clamp(78px, 7vw, 118px); } .event-map-card, .rsvp-form, .accordion-item, .confirm-copy, .family-feature-card, .family-mini-card { border-color: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 22px 64px rgba(105, 45, 67, 0.11) !important; } .event-map-content > div p, .accordion-panel p, .confirm-copy p, .rsvp-heart-list li { font-size: clamp(15px, 1.08vw, 16.5px); line-height: 1.82; } .map-btn, .btn, .accordion-button, .location-slider-arrow, .language-switcher a { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .map-btn, .btn-primary { min-height: 48px; } .location-photo-slider { border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 18px 52px rgba(105, 45, 67, 0.13); } .rsvp-heart-list li { padding: 14px 16px; border: 1px solid rgba(169, 79, 112, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.48); } .rsvp-heart-bullet { margin-top: 1px; } @media (hover: hover) and (pointer: fine) { .event-map-card:hover, .rsvp-form:hover { transform: translateY(-3px); } .map-btn:hover, .btn-primary:hover, .location-slider-arrow:hover { transform: translateY(-2px); } .location-slider-arrow:hover { transform: translateY(-50%) scale(1.04); } } @media (max-width: 768px) { .container { width: min(100% - 28px, 1140px); } .section-padding { padding-block: clamp(64px, 17vw, 88px); scroll-margin-top: 82px; } .section-heading h2, .confirm-copy h2, .story-redesign-header h2 { font-size: clamp(43px, 13vw, 62px) !important; line-height: 1.05 !important; } .story-redesign-content h3, .event-map-content h3, .family-feature-copy h3, .family-mini-copy h3 { font-size: clamp(35px, 11vw, 48px) !important; } .section-heading p { font-size: 15.5px; line-height: 1.72; } .intro.open .letter-main-title { max-width: 92%; font-size: clamp(32px, 10vw, 44px) !important; line-height: 1.04 !important; } .intro.open .letter-main-message { max-width: 88% !important; font-size: clamp(15.5px, 4.15vw, 17px) !important; line-height: 1.5 !important; font-weight: 500 !important; } .event-map-card, .rsvp-form, .confirm-copy { border-radius: 24px !important; } .rsvp-heart-list { gap: 12px; } .rsvp-heart-list li { padding: 12px; font-size: 15px; line-height: 1.68; } .map-btn, .btn, .accordion-button, .location-slider-arrow { min-height: 46px; } } @media (max-width: 390px) { .container { width: calc(100% - 22px); } .intro.open .letter-main-title { font-size: clamp(29px, 9.5vw, 37px) !important; } .intro.open .letter-main-message { max-width: 91% !important; font-size: clamp(14.7px, 4vw, 15.8px) !important; line-height: 1.48 !important; } .section-kicker, .eyebrow { font-size: 10px; letter-spacing: 0.2em; } } @media (prefers-reduced-motion: reduce) { .map-btn, .btn, .accordion-button, .location-slider-arrow, .language-switcher a { transition-duration: 0.01ms !important; } } .photo-mosaic-full .mosaic-item img, .photo-mosaic-full .mosaic-item:hover img { filter: none !important; transform: none !important; image-rendering: auto; } .photo-mosaic-full .gallery-seed-gallery_1 img { object-position: 50% 52%; } .photo-mosaic-full .gallery-seed-gallery_2 img { object-position: 55% 58%; } .photo-mosaic-full .gallery-seed-gallery_3 img { object-position: 52% 62%; } .photo-mosaic-full .gallery-seed-gallery_4 img { object-position: 50% 54%; } .photo-mosaic-full .gallery-seed-gallery_5 img { object-position: 50% 56%; } .photo-mosaic-full .gallery-seed-gallery_6 img { object-position: 50% 55%; } :root { --site-solid-bg: #fff1f7; --section-y: clamp(76px, 7vw, 110px); } html, body, .page, .intro, .hero-section, .story-section, .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation { background: var(--site-solid-bg) !important; background-color: var(--site-solid-bg) !important; background-image: none !important; } body::before, body::after, .intro-bg, .intro-overlay, .section-bg-floral, .hero-section::before, .hero-section::after, .story-section::before, .story-section::after, .family-section::before, .family-section::after, .gallery-section::before, .gallery-section::after, .locations::before, .locations::after, .menu::before, .menu::after, .confirmation::before, .confirmation::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } .story-redesign-section, .family-section, .gallery-section, .full-gallery-section, .locations, .menu, .confirmation, .section-padding { padding-block: var(--section-y) !important; } .section-heading, .story-redesign-header, .confirm-copy, .gallery-heading { margin-bottom: clamp(28px, 3.4vw, 44px) !important; } .intro.open .open-hint { margin-top: clamp(18px, 2vw, 24px) !important; } .intro.opened .scroll-cue { margin-top: clamp(12px, 1.4vw, 18px) !important; } .floating-hearts-bg { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 20 !important; overflow: hidden !important; pointer-events: none !important; user-select: none !important; contain: strict; isolation: isolate; opacity: 1 !important; mix-blend-mode: normal !important; transform: translateZ(0); } .floating-hearts-bg span { position: absolute !important; left: var(--heart-left) !important; bottom: -64px !important; width: var(--heart-size) !important; height: var(--heart-size) !important; opacity: 0 !important; filter: none !important; animation: iaHeartDrift var(--heart-duration) linear infinite !important; animation-delay: var(--heart-delay) !important; will-change: transform, opacity; backface-visibility: hidden; } .floating-hearts-bg span::before { content: "♡" !important; display: block !important; font-family: Georgia, serif !important; font-size: var(--heart-size) !important; line-height: 1 !important; color: rgba(196, 73, 119, var(--heart-opacity)) !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.82), 0 5px 18px rgba(196, 73, 119, 0.2) !important; } .floating-hearts-bg span:nth-child(1) { --heart-left: 5%; --heart-size: 22px; --heart-duration: 24s; --heart-delay: -4s; --heart-opacity: 0.46; --heart-drift: 20px; } .floating-hearts-bg span:nth-child(2) { --heart-left: 14%; --heart-size: 31px; --heart-duration: 31s; --heart-delay: -19s; --heart-opacity: 0.30; --heart-drift: -24px; } .floating-hearts-bg span:nth-child(3) { --heart-left: 24%; --heart-size: 18px; --heart-duration: 27s; --heart-delay: -11s; --heart-opacity: 0.42; --heart-drift: 26px; } .floating-hearts-bg span:nth-child(4) { --heart-left: 34%; --heart-size: 27px; --heart-duration: 34s; --heart-delay: -26s; --heart-opacity: 0.28; --heart-drift: -18px; } .floating-hearts-bg span:nth-child(5) { --heart-left: 44%; --heart-size: 20px; --heart-duration: 29s; --heart-delay: -7s; --heart-opacity: 0.40; --heart-drift: 24px; } .floating-hearts-bg span:nth-child(6) { --heart-left: 54%; --heart-size: 34px; --heart-duration: 36s; --heart-delay: -22s; --heart-opacity: 0.26; --heart-drift: -28px; } .floating-hearts-bg span:nth-child(7) { --heart-left: 64%; --heart-size: 19px; --heart-duration: 26s; --heart-delay: -16s; --heart-opacity: 0.44; --heart-drift: 19px; } .floating-hearts-bg span:nth-child(8) { --heart-left: 73%; --heart-size: 25px; --heart-duration: 33s; --heart-delay: -9s; --heart-opacity: 0.32; --heart-drift: -22px; } .floating-hearts-bg span:nth-child(9) { --heart-left: 82%; --heart-size: 17px; --heart-duration: 28s; --heart-delay: -24s; --heart-opacity: 0.43; --heart-drift: 23px; } .floating-hearts-bg span:nth-child(10) { --heart-left: 90%; --heart-size: 29px; --heart-duration: 35s; --heart-delay: -13s; --heart-opacity: 0.28; --heart-drift: -20px; } .floating-hearts-bg span:nth-child(11) { --heart-left: 39%; --heart-size: 16px; --heart-duration: 25s; --heart-delay: -21s; --heart-opacity: 0.38; --heart-drift: 16px; } .floating-hearts-bg span:nth-child(12) { --heart-left: 69%; --heart-size: 21px; --heart-duration: 30s; --heart-delay: -2s; --heart-opacity: 0.36; --heart-drift: -17px; } @keyframes iaHeartDrift { 0% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(0.86); opacity: 0; } 12% { opacity: 0.92; } 42% { transform: translate3d(var(--heart-drift), -44dvh, 0) rotate(5deg) scale(1); opacity: 0.78; } 76% { transform: translate3d(calc(var(--heart-drift) * -0.55), -82dvh, 0) rotate(-5deg) scale(1.04); opacity: 0.46; } 100% { transform: translate3d(calc(var(--heart-drift) * 0.35), -116dvh, 0) rotate(4deg) scale(1.08); opacity: 0; } } @media (max-width: 560px) { :root { --section-y: clamp(62px, 15vw, 78px); } .gallery-shell { width: calc(100% - 28px) !important; } .photo-mosaic-full { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; align-items: start; gap: 14px !important; height: auto !important; min-height: 0 !important; } .photo-mosaic-full .mosaic-item, .photo-mosaic-full .mosaic-hero, .photo-mosaic-full .mosaic-wide, .photo-mosaic-full .mosaic-soft, .photo-mosaic-full .mosaic-default, .photo-mosaic-full .mosaic-wide-bottom { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; min-height: 0 !important; height: auto !important; aspect-ratio: 3 / 2; } .photo-mosaic-full .mosaic-tall { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; min-height: 0 !important; height: auto !important; aspect-ratio: 3 / 4; } .photo-mosaic-full .mosaic-item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; } .intro.open .open-hint { margin-top: 18px !important; } .floating-hearts-bg span:nth-child(n+8) { display: none !important; } } @media (prefers-reduced-motion: reduce) { .floating-hearts-bg span { animation: none !important; display: none !important; } } @media (max-width: 900px) { .family-mini-card.family-seed-parents_iulian .family-mini-media img { object-position: 58% 44% !important; } .family-mini-card.family-seed-parents_adina .family-mini-media img { object-position: 50% 44% !important; } } .floating-hearts-bg span { opacity: 1 !important; } .floating-hearts-bg span::before { animation: iaHeartGlow 4.8s ease-in-out infinite; } .floating-hearts-bg span:nth-child(2n)::before { animation-delay: -2.1s; } .floating-hearts-bg span:nth-child(3n)::before { animation-delay: -3.4s; } @keyframes iaHeartGlow { 0%, 100% { opacity: 0.58; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.07); } } @media (max-width: 560px) { .open-hint, .intro.open .open-hint { margin-top: 42px !important; } .floating-hearts-bg span:nth-child(n+9) { display: none !important; } .floating-hearts-bg span:nth-child(8) { display: block !important; } .floating-hearts-bg span::before { font-size: calc(var(--heart-size) * 1.18) !important; color: rgba(190, 55, 105, 0.82) !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.94), 0 0 18px rgba(190, 55, 105, 0.42), 0 7px 18px rgba(125, 38, 72, 0.2) !important; } .photo-mosaic-full .mosaic-tall img { object-position: 50% 24% !important; transform: scale(1.75) !important; transform-origin: 50% 24% !important; } } @media (prefers-reduced-motion: reduce) { .floating-hearts-bg span::before { animation: none !important; } } .floating-hearts-bg span::before { font-size: calc(var(--heart-size) * 1.34) !important; animation: iaHeartPulse 3.6s cubic-bezier(0.37, 0, 0.24, 1) infinite !important; transform-origin: 50% 55%; } .floating-hearts-bg span:nth-child(2n)::before { animation-duration: 2.8s !important; animation-delay: -1.35s !important; } .floating-hearts-bg span:nth-child(3n)::before { animation-duration: 4.4s !important; animation-delay: -2.7s !important; } .floating-hearts-bg span:nth-child(5n)::before { animation-duration: 3.15s !important; animation-delay: -0.8s !important; } @keyframes iaHeartPulse { 0%, 100% { opacity: 0.68; transform: scale(0.82); } 38% { opacity: 1; transform: scale(1.22); } 55% { opacity: 0.86; transform: scale(1.04); } 72% { opacity: 1; transform: scale(1.16); } } @media (max-width: 560px) { .floating-hearts-bg span:nth-child(1) { --heart-size: 29px; } .floating-hearts-bg span:nth-child(2) { --heart-size: 52px; } .floating-hearts-bg span:nth-child(3) { --heart-size: 24px; } .floating-hearts-bg span:nth-child(4) { --heart-size: 43px; } .floating-hearts-bg span:nth-child(5) { --heart-size: 28px; } .floating-hearts-bg span:nth-child(6) { --heart-size: 58px; } .floating-hearts-bg span:nth-child(7) { --heart-size: 33px; } .floating-hearts-bg span:nth-child(8) { --heart-size: 47px; } .floating-hearts-bg span::before { font-size: var(--heart-size) !important; text-shadow: 0 0 9px rgba(255, 255, 255, 0.96), 0 0 22px rgba(190, 55, 105, 0.48), 0 8px 20px rgba(125, 38, 72, 0.24) !important; } } @media (prefers-reduced-motion: reduce) { .floating-hearts-bg span::before { animation: none !important; transform: none !important; } } .floating-hearts-bg span { animation-name: iaHeartFromBottom !important; } .floating-hearts-bg span:nth-child(1) { left: 3% !important; --heart-left: 3%; --heart-sway-one: 48px; --heart-sway-two: -14px; --heart-sway-end: 32px; } .floating-hearts-bg span:nth-child(2) { left: 84% !important; --heart-left: 84%; --heart-sway-one: -54px; --heart-sway-two: 12px; --heart-sway-end: -38px; } .floating-hearts-bg span:nth-child(3) { left: 93% !important; --heart-left: 93%; --heart-sway-one: -36px; --heart-sway-two: 24px; --heart-sway-end: -18px; } .floating-hearts-bg span:nth-child(4) { left: 70% !important; --heart-left: 70%; --heart-sway-one: 44px; --heart-sway-two: -30px; --heart-sway-end: 22px; } .floating-hearts-bg span:nth-child(5) { left: 19% !important; --heart-left: 19%; --heart-sway-one: 58px; --heart-sway-two: 8px; --heart-sway-end: 40px; } .floating-hearts-bg span:nth-child(6) { left: 51% !important; --heart-left: 51%; --heart-sway-one: -62px; --heart-sway-two: -12px; --heart-sway-end: -44px; } .floating-hearts-bg span:nth-child(7) { left: 35% !important; --heart-left: 35%; --heart-sway-one: -38px; --heart-sway-two: 36px; --heart-sway-end: 14px; } .floating-hearts-bg span:nth-child(8) { left: 7% !important; --heart-left: 7%; --heart-sway-one: 46px; --heart-sway-two: -24px; --heart-sway-end: 30px; } .floating-hearts-bg span:nth-child(9) { left: 76% !important; --heart-left: 76%; --heart-sway-one: -48px; --heart-sway-two: 30px; --heart-sway-end: -26px; } .floating-hearts-bg span:nth-child(10) { left: 91% !important; --heart-left: 91%; --heart-sway-one: -34px; --heart-sway-two: 16px; --heart-sway-end: -22px; } .floating-hearts-bg span:nth-child(11) { left: 43% !important; --heart-left: 43%; --heart-sway-one: 52px; --heart-sway-two: -32px; --heart-sway-end: 28px; } .floating-hearts-bg span:nth-child(12) { left: 63% !important; --heart-left: 63%; --heart-sway-one: -58px; --heart-sway-two: 22px; --heart-sway-end: -36px; } @keyframes iaHeartFromBottom { 0% { transform: translate3d(0, 0, 0) rotate(-7deg) scale(0.84); opacity: 0; } 10% { opacity: 0.96; } 34% { transform: translate3d(var(--heart-sway-one), -36dvh, 0) rotate(7deg) scale(0.98); opacity: 0.9; } 67% { transform: translate3d(var(--heart-sway-two), -75dvh, 0) rotate(-6deg) scale(1.04); opacity: 0.68; } 100% { transform: translate3d(var(--heart-sway-end), -116dvh, 0) rotate(6deg) scale(1.1); opacity: 0; } } @keyframes iaHeartPulse { 0%, 100% { opacity: 0.62; transform: scale(0.74); } 38% { opacity: 1; transform: scale(1.32); } 55% { opacity: 0.82; transform: scale(1.02); } 72% { opacity: 1; transform: scale(1.22); } } @media (max-width: 560px) { .floating-hearts-bg span:nth-child(1) { left: 3% !important; --heart-left: 3%; } .floating-hearts-bg span:nth-child(2) { left: 82% !important; --heart-left: 82%; } .floating-hearts-bg span:nth-child(3) { left: 91% !important; --heart-left: 91%; } .floating-hearts-bg span:nth-child(4) { left: 68% !important; --heart-left: 68%; } .floating-hearts-bg span:nth-child(5) { left: 18% !important; --heart-left: 18%; } .floating-hearts-bg span:nth-child(6) { left: 48% !important; --heart-left: 48%; } .floating-hearts-bg span:nth-child(7) { left: 34% !important; --heart-left: 34%; } .floating-hearts-bg span:nth-child(8) { left: 6% !important; --heart-left: 6%; } .photo-mosaic-full .mosaic-item, .photo-mosaic-full .mosaic-hero, .photo-mosaic-full .mosaic-wide, .photo-mosaic-full .mosaic-tall, .photo-mosaic-full .mosaic-soft, .photo-mosaic-full .mosaic-default, .photo-mosaic-full .mosaic-wide-bottom { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 2 !important; } .photo-mosaic-full .mosaic-item img, .photo-mosaic-full .mosaic-tall img { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; transform-origin: center !important; } .photo-mosaic-full .mosaic-tall img { object-position: 50% 31% !important; } } :root { --premium-surface: #fff9fc; --premium-border: rgba(255, 255, 255, 0.92); --premium-edge: rgba(177, 76, 112, 0.12); --premium-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 -1px 0 rgba(151, 54, 91, 0.07) inset, 0 12px 26px rgba(118, 48, 76, 0.09), 0 30px 64px rgba(118, 48, 76, 0.075); --premium-shadow-active: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 -1px 0 rgba(151, 54, 91, 0.09) inset, 0 18px 34px rgba(118, 48, 76, 0.13), 0 42px 78px rgba(118, 48, 76, 0.1); --premium-radius: clamp(24px, 2.8vw, 38px); } html { scroll-padding-top: 92px; text-rendering: optimizeLegibility; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { isolation: isolate; } main > section { scroll-margin-top: 92px; } .story-redesign-card, .family-feature-card, .family-mini-card, .photo-mosaic-full .mosaic-item, .event-map-card, .accordion-item, .rsvp-form { border: 1px solid var(--premium-border) !important; box-shadow: var(--premium-shadow) !important; background-color: var(--premium-surface) !important; background-image: none !important; transform-origin: 50% 50%; transform-style: preserve-3d; backface-visibility: hidden; contain: layout paint; } .story-redesign-card, .family-feature-card, .event-map-card, .rsvp-form { border-radius: var(--premium-radius) !important; } .family-mini-card, .accordion-item, .photo-mosaic-full .mosaic-item { border-radius: clamp(20px, 2.2vw, 30px) !important; } .ia-depth-card { --ia-depth-rx: 0deg; --ia-depth-ry: 0deg; --ia-depth-lift: 0px; transform: perspective(1180px) rotateX(var(--ia-depth-rx)) rotateY(var(--ia-depth-ry)) translate3d(0, var(--ia-depth-lift), 0); transition: transform 240ms cubic-bezier(0.2, 0.78, 0.24, 1), box-shadow 240ms ease, border-color 240ms ease; } .reveal.ia-depth-card:not(.is-visible) { opacity: 0; transform: perspective(1180px) translate3d(0, 28px, 0) rotateX(1.4deg); } .reveal.ia-depth-card.is-visible { opacity: 1; transform: perspective(1180px) rotateX(var(--ia-depth-rx)) rotateY(var(--ia-depth-ry)) translate3d(0, var(--ia-depth-lift), 0); } @media (hover: hover) and (pointer: fine) and (min-width: 861px) { .ia-depth-card.is-depth-active { --ia-depth-lift: -7px; border-color: rgba(255, 255, 255, 1) !important; box-shadow: var(--premium-shadow-active) !important; will-change: transform; } .photo-mosaic-full .mosaic-item.ia-depth-card.is-depth-active { --ia-depth-lift: -5px; } } .ia-depth-card > :is( .story-redesign-media, .story-redesign-content, .family-feature-media, .family-feature-copy, .family-mini-media, .family-mini-copy, .event-map-content, .event-map-frame, .location-photo-slider, .accordion-button, .accordion-panel ) { transform: translateZ(14px); backface-visibility: hidden; } .rsvp-form.ia-depth-card > * { transform: translateZ(10px); } .story-redesign-media, .family-feature-media, .family-mini-media, .location-slider-viewport, .photo-mosaic-full .mosaic-item { overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92) inset, 0 0 0 5px rgba(255, 255, 255, 0.42), 0 16px 32px rgba(103, 43, 68, 0.1) !important; } .story-redesign-media img, .family-feature-media img, .family-mini-media img, .photo-mosaic-full .mosaic-item img, .location-slide img { image-rendering: auto; backface-visibility: hidden; } .envelope-scene { perspective: 1400px; perspective-origin: 50% 42%; } .envelope { transform-style: preserve-3d; filter: drop-shadow(0 22px 30px rgba(114, 50, 77, 0.13)); transition: filter 320ms ease, transform 320ms cubic-bezier(0.2, 0.78, 0.24, 1); } .envelope:active { transform: translateY(2px) scale(0.997); } .seal { filter: drop-shadow(0 10px 12px rgba(118, 48, 76, 0.22)); } .letter-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 0 0 1px rgba(179, 75, 112, 0.08), 0 18px 48px rgba(97, 40, 63, 0.13) !important; } .section-heading > p, .story-redesign-header > p, .story-redesign-text, .family-feature-copy > div, .family-mini-copy > div, .event-map-content, .accordion-panel, .confirm-copy, .rsvp-form { line-height: 1.72; } .section-heading h2, .story-redesign-header h2, .confirm-copy h2 { text-wrap: balance; } .story-redesign-content h3, .family-feature-copy h3, .family-mini-copy h3 { text-wrap: balance; } .map-btn, .btn, .accordion-button, .location-slider-arrow, .language-switcher a, .quick-nav a, .back-to-top { min-height: 48px; } .rsvp-form :is(input:not([type="checkbox"]), textarea, select) { min-height: 50px; font-size: 16px; border-color: rgba(176, 76, 111, 0.24); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset; } .rsvp-form :is(input:not([type="checkbox"]), textarea, select):focus { border-color: rgba(190, 67, 112, 0.72); box-shadow: 0 0 0 4px rgba(204, 72, 120, 0.12), 0 1px 0 rgba(255, 255, 255, 0.96) inset; } .check-card { min-height: 52px; } .quick-nav { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 14px 32px rgba(91, 38, 59, 0.16), 0 30px 60px rgba(91, 38, 59, 0.09) !important; backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); } .quick-nav a { display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 860px) { :root { --premium-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 -1px 0 rgba(151, 54, 91, 0.06) inset, 0 10px 22px rgba(118, 48, 76, 0.085), 0 22px 44px rgba(118, 48, 76, 0.06); } html, main > section { scroll-padding-top: 74px; scroll-margin-top: 74px; } .ia-depth-card, .reveal.ia-depth-card.is-visible { --ia-depth-rx: 0deg !important; --ia-depth-ry: 0deg !important; --ia-depth-lift: 0px !important; transform: perspective(1000px) translateZ(0); } .ia-depth-card:not(.rsvp-form):not(.accordion-item):active { transform: perspective(1000px) translate3d(0, 1px, 0) scale(0.997); } .ia-depth-card > *, .rsvp-form.ia-depth-card > * { transform: none; } } @media (max-width: 560px) { :root { --section-y: clamp(58px, 14vw, 72px); --premium-radius: 24px; } .container, .gallery-shell, .story-redesign-shell { width: min(calc(100% - 28px), 1180px) !important; } .section-heading, .story-redesign-header, .confirm-copy, .gallery-heading { margin-bottom: 28px !important; } .section-heading > p, .story-redesign-header > p, .story-redesign-text, .family-feature-copy > div, .family-mini-copy > div, .event-map-content, .accordion-panel, .confirm-copy, .rsvp-form { font-size: max(15px, 3.9vw); line-height: 1.7; } .section-heading h2, .story-redesign-header h2, .confirm-copy h2 { font-size: clamp(42px, 13vw, 58px) !important; line-height: 0.98 !important; } .story-redesign-content h3, .family-feature-copy h3, .family-mini-copy h3 { font-size: clamp(36px, 11.5vw, 50px) !important; line-height: 1.02 !important; } .story-redesign-card, .family-feature-card, .family-mini-card, .event-map-card, .rsvp-form, .accordion-item, .photo-mosaic-full .mosaic-item { border-radius: 24px !important; } .story-redesign-media, .family-feature-media, .family-mini-media, .location-slider-viewport, .photo-mosaic-full .mosaic-item { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92) inset, 0 0 0 3px rgba(255, 255, 255, 0.36), 0 12px 24px rgba(103, 43, 68, 0.09) !important; } .quick-nav { left: 12px !important; right: 12px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; justify-content: flex-start !important; gap: 6px !important; padding: 7px !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .quick-nav::-webkit-scrollbar { display: none; } .quick-nav a { flex: 0 0 auto !important; min-width: 76px; min-height: 48px !important; padding: 10px 12px !important; font-size: 10.5px !important; letter-spacing: 0.035em !important; scroll-snap-align: center; } .language-switcher { min-height: 52px; } .language-switcher a { min-width: 48px; min-height: 48px; } .back-to-top { width: 52px; height: 52px; right: 14px; bottom: calc(max(78px, env(safe-area-inset-bottom) + 68px)); } .rsvp-form { padding: 22px 16px !important; } .rsvp-form :is(input:not([type="checkbox"]), textarea, select) { width: 100%; min-height: 52px; } .check-card, .accordion-button, .map-btn, .btn { min-height: 52px; } .photo-mosaic-full { gap: 16px !important; } } @media (max-width: 340px) { .quick-nav a { min-width: 72px; } .section-heading h2, .story-redesign-header h2, .confirm-copy h2 { font-size: clamp(38px, 12vw, 46px) !important; } } @media (prefers-reduced-motion: reduce) { .ia-depth-card, .reveal.ia-depth-card, .reveal.ia-depth-card.is-visible, .envelope, .envelope:active { transform: none !important; transition-duration: 0.01ms !important; } }
:root{--atelier-ink:#304434;--atelier-body:#55484d;--atelier-rose:#a54567;--atelier-edge:#d4a28f;--atelier-paper:#fff7f4} #intro.ia-atelier{box-sizing:border-box!important} #intro.ia-atelier .intro-content{min-height:0!important} main.page>section{content-visibility:visible;contain-intrinsic-size:none} #intro.ia-atelier{position:relative;display:grid!important;align-items:center;min-height:100svh!important;height:auto!important;padding:88px 28px 64px!important;overflow:clip!important;isolation:isolate;perspective:none!important} #intro.ia-atelier .intro-content{display:block!important;position:relative!important;inset:auto!important;width:min(100%,660px)!important;max-width:660px!important;height:auto!important;margin:0 auto!important;padding:0!important;transform:none!important;text-align:center} #intro.ia-atelier .eyebrow{margin:0 0 18px!important;font:500 11px/1.5 Montserrat,Arial,sans-serif!important;letter-spacing:.22em!important;color:var(--atelier-rose)!important} .stationery-scene{--pocket-height:330px;position:relative;width:min(100%,620px);margin:0 auto;perspective:1500px;perspective-origin:50% 35%} .stationery-envelope{position:relative;padding:34px 0 88px;transform-style:preserve-3d;transform:rotateX(calc(3deg + var(--envelope-rx,0deg))) rotateY(calc(-3deg + var(--envelope-ry,0deg))) rotateZ(-1.5deg);transition:transform .7s cubic-bezier(.2,.75,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent} .ia-atelier:not(.open) .stationery-envelope{height:var(--pocket-height);padding:0;margin-top:32px} .ia-atelier:not(.open) .stationery-letter{position:absolute;left:0;right:0;bottom:88px} .stationery-shadow{position:absolute;left:6%;right:6%;bottom:-8px;height:25px;border-radius:50%;box-shadow:0 22px 34px 9px #8b4d5938;transform:translateZ(-8px);pointer-events:none} .stationery-back{position:absolute;inset:auto 0 0;height:var(--pocket-height);border:1px solid var(--atelier-edge);border-radius:8px;background:var(--floral) center 46%/cover,#e5bfc5;box-shadow:inset 0 0 0 8px #fff7f49e,0 3px 0 #d8a898,0 6px 0 #eecdc3,0 24px 44px #673d4a1f;transform:translateZ(-2px)} .stationery-flap{position:absolute;left:0;right:0;bottom:calc(var(--pocket-height) * .41);height:calc(var(--pocket-height) * .59);transform-origin:50% 0;transform:translateZ(8px) rotateX(0deg);transform-style:preserve-3d;transition:transform .65s cubic-bezier(.25,.65,.25,1);z-index:5;pointer-events:none;filter:drop-shadow(0 3px 1px #83574735)} .stationery-flap::before,.stationery-flap span{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(165deg,#fff7ee 4%,#f5d9d6 70%,#e7b8af);backface-visibility:hidden} .stationery-flap::before{inset:-2px;background:#d5a691} .stationery-flap span::after{content:'';position:absolute;inset:5px 7px 7px;clip-path:inherit;background:linear-gradient(#fff7f424,#fff7f424),var(--floral) center/cover;opacity:.23} .stationery-letter{position:relative;width:88%;margin:0 auto;padding:105px 40px 40px;border:1px solid #e6bfb0;border-radius:5px;background:var(--atelier-paper);box-shadow:0 2px 0 #fff,0 4px 0 #dfb9af,0 18px 34px #71434f24;transform:translate3d(0,105px,1px) scale(.88);opacity:0;visibility:hidden;transition:transform .85s cubic-bezier(.18,.7,.2,1) .25s,opacity .25s ease .28s,visibility 0s .28s;outline-offset:8px;color:var(--atelier-body);cursor:auto;z-index:2} .stationery-letter::before{content:'';position:absolute;inset:10px;border:1px solid #ddbcb06e;border-radius:2px;pointer-events:none} .stationery-floral{position:absolute;top:1px;left:1px;right:1px;height:115px;overflow:hidden;mask-image:linear-gradient(#000 25%,transparent);pointer-events:none} .stationery-floral img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%} .stationery-letter-names{margin:0;font:400 clamp(46px,5.2vw,70px)/1.15 'Great Vibes',cursive;color:var(--atelier-ink);text-wrap:balance} .stationery-rule{display:flex;align-items:center;gap:14px;width:140px;margin:20px auto;color:var(--atelier-rose)} .stationery-rule::before,.stationery-rule::after{content:'';height:1px;flex:1;background:#c79784} .stationery-rule span{font:20px/1 Georgia,serif} .stationery-letter-title{margin:0 0 12px;font:500 25px/1.3 'Cormorant Garamond',Georgia,serif;color:var(--atelier-ink);text-wrap:balance} .stationery-letter-message{margin:0;font:400 15px/1.85 Montserrat,Arial,sans-serif;color:var(--atelier-body);text-wrap:pretty} .stationery-fold{position:absolute;inset:auto 0 0;height:var(--pocket-height);background:linear-gradient(140deg,#fff4ee,#f5d9d5 72%,#eac2bc);box-shadow:inset 0 -2px 0 #be8b7970;transform:translateZ(12px);transform-origin:50% 100%;transition:transform .85s cubic-bezier(.2,.75,.2,1) .15s;pointer-events:none;z-index:3} .stationery-fold-left{clip-path:polygon(0 0,58% 60%,0 100%);background:linear-gradient(115deg,#fff1ec,#ebc7c1)} .stationery-fold-right{clip-path:polygon(100% 0,42% 60%,100% 100%);background:linear-gradient(245deg,#fff2eb,#e5b9b4)} .stationery-fold-bottom{clip-path:polygon(0 100%,50% 40%,100% 100%);background:linear-gradient(165deg,#fff8f2 2%,#f4d9d3 78%,#e5bbb2)} .stationery-fold-bottom::after{content:'';position:absolute;inset:0;border-bottom:2px solid #bf9684;border-radius:0 0 5px 5px} .stationery-address{position:absolute;left:4%;right:4%;bottom:34px;z-index:4;transform:translateZ(18px);transition:opacity .2s ease;pointer-events:none} .stationery-address span{font:400 clamp(40px,5.8vw,68px)/1.2 'Great Vibes',cursive;color:var(--atelier-ink);text-shadow:0 1px 0 #fff} .stationery-seal{position:absolute;left:50%;bottom:calc(var(--pocket-height) * .36);display:grid;place-items:center;width:116px;height:116px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:6;transform:translate3d(-50%,0,30px) rotate(-9deg);transition:transform .65s ease,bottom .85s cubic-bezier(.2,.75,.2,1),filter .2s ease;filter:drop-shadow(0 9px 7px #793a4966);-webkit-tap-highlight-color:transparent} .stationery-seal::before{content:'';position:absolute;inset:10%;border:1px solid #ffe8db80;border-radius:50%;box-shadow:0 0 0 6px #eec4bd22} .stationery-seal img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none} .stationery-seal:hover{filter:drop-shadow(0 12px 9px #793a4977);transform:translate3d(-50%,-5px,36px) rotate(-4deg)} .stationery-seal:focus-visible{outline:3px solid var(--atelier-rose);outline-offset:8px} .ia-atelier.open .stationery-envelope{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);cursor:auto} .ia-atelier.open .stationery-flap{transform:translateZ(-4px) rotateX(180deg);z-index:1} .ia-atelier.open .stationery-letter{opacity:1;visibility:visible;transform:translate3d(0,0,24px) scale(1)} .ia-atelier.opened .stationery-envelope{transform:none;transform-style:flat} .ia-atelier.opened .stationery-letter{transform:none;transition:none} .ia-atelier.open .stationery-fold{transform:translateZ(30px) scaleY(.32)} .ia-atelier.open .stationery-address{opacity:0} .ia-atelier.open .stationery-seal{bottom:-18px;transform:translate3d(-50%,0,42px) rotate(-6deg) scale(.76)} #intro.ia-atelier .open-hint{max-width:440px;margin:44px auto 0!important;padding:0!important;font:500 13px/1.8 Montserrat,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--atelier-body)!important;opacity:1!important} #intro.ia-atelier .scroll-cue{margin:18px auto 0!important;gap:12px!important} #intro.ia-atelier .scroll-cue span{font:500 11px/1.6 Montserrat,Arial,sans-serif!important;letter-spacing:.14em!important;color:var(--atelier-ink)!important} #intro.ia-atelier .scroll-cue i{width:9px!important;height:9px!important;border:solid var(--atelier-rose)!important;border-width:0 1px 1px 0!important;border-radius:0!important;transform:rotate(45deg)!important;animation:atelier-arrow 1.8s ease-in-out infinite!important} #intro.ia-atelier .scroll-cue i::before,#intro.ia-atelier .scroll-cue i::after{display:none!important} @keyframes atelier-arrow{0%,100%{translate:0 -2px}50%{translate:0 5px}} .reveal,.reveal.is-visible,.reveal.ia-depth-card,.reveal.ia-depth-card.is-visible{filter:none!important;transition-delay:0s!important;transition-duration:.35s!important} .reveal:not(.is-visible){transform:translateY(10px)} .story-redesign-header>p,.story-redesign-text,.family-feature-copy>div,.family-mini-card>div,.section-heading>p,.event-map-copy p,.accordion-panel,.confirm-copy{color:var(--atelier-body)!important} .story-redesign-header h2,.story-redesign-content h3,.family-section h2,.family-section h3,.gallery-heading h2,.locations h2,.menu h2,.confirmation h2{color:var(--atelier-ink)!important} .story-redesign-date{box-shadow:none!important;background:transparent!important;border:0!important} .ia-depth-card{contain:layout!important} .ia-depth-card.is-depth-active{transition-duration:.15s!important} .quick-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff9fcf5!important;box-shadow:0 8px 28px #6d394627,inset 0 1px 0 #fff!important} .quick-nav a{border-radius:14px!important;box-shadow:none!important;background:transparent!important} .quick-nav a.is-active{color:#fff!important;background:var(--atelier-rose)!important;box-shadow:0 3px 8px #9b355132!important} .language-switcher{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 5px 18px #76455116!important} .floating-hearts-bg span::before{content:'♥'!important;color:#c98696!important;background:radial-gradient(ellipse at 32% 22%,#fff1e8 1%,#e8afb9 25%,#b6677c 64%,#824659 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none!important;filter:drop-shadow(2px 4px 2px #8a46532e)} .floating-hearts-bg{opacity:.58!important} @media(min-width:1100px){.story-redesign-card{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important}.story-redesign-content{padding:clamp(30px,4vw,60px)!important}} @media(max-width:860px){ #intro.ia-atelier{padding:84px 22px 48px!important;min-height:100svh!important} .stationery-scene{--pocket-height:260px;max-width:490px} .stationery-envelope{transform:rotateX(0deg) rotateY(0deg) rotateZ(-1.5deg)} .stationery-letter{padding:94px 28px 32px} .stationery-letter-title{font-size:23px}.stationery-letter-message{font-size:14px;line-height:1.8} .stationery-seal{width:98px;height:98px} .ia-depth-card,.ia-depth-card>*{will-change:auto!important} .quick-nav{top:auto!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;flex-direction:row!important;gap:3px!important;padding:7px!important;border-radius:22px!important;overflow-x:auto!important;overflow-y:hidden!important} .quick-nav,body.show-quick-nav .quick-nav{transform:none!important} .quick-nav a{flex:0 0 auto!important;min-width:54px!important;min-height:48px!important;padding:9px 10px!important;font-size:11px!important;letter-spacing:.01em!important;white-space:nowrap} .back-to-top{bottom:100px!important} } @media(max-width:560px){ #intro.ia-atelier{padding:88px 20px 48px!important} #intro.ia-atelier .eyebrow{font-size:10px!important;margin-bottom:0!important;letter-spacing:.15em!important} .stationery-scene{--pocket-height:228px}.stationery-envelope{padding:28px 0 80px} .stationery-letter{width:91%;padding:76px 22px 30px}.stationery-floral{height:86px} .stationery-letter-names{font-size:clamp(38px,11.6vw,56px)}.stationery-rule{margin:15px auto} .stationery-letter-title{font-size:22px;line-height:1.32}.stationery-letter-message{font-size:14px;line-height:1.8} .stationery-address{bottom:26px}.stationery-address span{font-size:clamp(35px,10.8vw,52px)} .stationery-seal{width:92px;height:92px} #intro.ia-atelier .open-hint{margin-top:38px!important;font-size:12px!important;max-width:320px} .ia-atelier.open .stationery-seal{bottom:-16px}.floating-hearts-bg{opacity:.46!important} .quick-nav a{min-width:48px!important;padding-inline:7px!important;font-size:11px!important} .language-switcher{top:14px!important;right:14px!important;transform:scale(.9);transform-origin:top right} } @media(prefers-reduced-motion:reduce){ .stationery-envelope,.stationery-flap,.stationery-letter,.stationery-fold,.stationery-seal,.stationery-address{transition:none!important} .stationery-envelope{transform:none!important}#intro.ia-atelier .scroll-cue i{animation:none!important} .reveal{opacity:1!important;transform:none!important} } .photo-mosaic-full .mosaic-item{transform-style:flat!important;backface-visibility:visible!important;contain:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .photo-mosaic-full .mosaic-item img{backface-visibility:visible!important}
.stationery-letter :is(.stationery-letter-names,.stationery-letter-title,.stationery-letter-message){max-width:100%;overflow-wrap:break-word;word-break:normal} .ia-atelier.opened .stationery-letter{backface-visibility:visible;filter:none} .stationery-letter:focus-visible{outline:2px solid var(--atelier-rose);outline-offset:7px} @media(max-width:860px){ .stationery-letter-message{font-size:clamp(14px,3.8vw,15px);line-height:1.8} .ia-atelier:not(.open) .stationery-envelope{transform:none} .stationery-address{transform:translateZ(32px)} } @media(max-width:560px){ #intro.ia-atelier .open-hint{font-size:13px!important;line-height:1.8!important} } @media(max-width:360px){ .stationery-letter{width:94%;padding-inline:18px} .stationery-letter-title{font-size:21px} } @media(prefers-reduced-motion:reduce){ .stationery-letter{scroll-behavior:auto} } .stationery-scene{perspective:1700px} .stationery-flap{filter:none;transition:none} .stationery-flap span::after{opacity:.82;background:linear-gradient(155deg,#fff8f20a,#fff5ee38),var(--floral) center 55%/cover} .stationery-flap::after{content:"";position:absolute;inset:1px;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#fff7f42b,#fff7f42b),var(--floral) center 54%/cover;transform:rotateX(180deg);backface-visibility:hidden;border-top:2px solid #dfb79e} .stationery-back{background:linear-gradient(135deg,#fff8f21a,#e5bcb529),var(--floral) center 52%/cover;box-shadow:inset 0 0 0 7px #fff7efb8,inset 0 0 0 8px #c79c8070,0 3px 0 #c79b88,0 6px 0 #ebc9b8,0 24px 44px #673d4a26} .stationery-fold-left::before,.stationery-fold-right::before{content:"";position:absolute;inset:0;background:var(--floral) center/cover;opacity:.58;pointer-events:none} .stationery-fold-left::before{mask-image:linear-gradient(100deg,#000,transparent 58%);-webkit-mask-image:linear-gradient(100deg,#000,transparent 58%)} .stationery-fold-right::before{mask-image:linear-gradient(260deg,#000,transparent 58%);-webkit-mask-image:linear-gradient(260deg,#000,transparent 58%)} .stationery-fold-bottom{background:linear-gradient(160deg,#fffaf3,#f9e9df 62%,#ecd0c3);box-shadow:inset 0 -3px 0 #c59b8380} .stationery-letter{padding-top:132px;background:linear-gradient(130deg,#fffaf6,#fff7f3);box-shadow:0 2px 0 #fffefa,0 4px 0 #d6b19e,0 7px 0 #f5e4d8,0 19px 32px #71434f2b} .stationery-floral{height:148px;mask-image:linear-gradient(#000 42%,#0009 70%,transparent);-webkit-mask-image:linear-gradient(#000 42%,#0009 70%,transparent)} .stationery-floral img{object-position:center 55%} .ia-atelier:not(.open) .stationery-address{transform:translateZ(34px);opacity:1;visibility:visible} .stationery-address span{text-shadow:0 1px 0 #fff9ed;overflow-wrap:break-word} .ia-atelier.opening .stationery-envelope{animation:ia-envelope-settle 1500ms cubic-bezier(.2,.65,.25,1) both;transition:none} .ia-atelier.opening .stationery-seal{animation:ia-wax-release 1500ms cubic-bezier(.2,.65,.25,1) both;transition:none} .ia-atelier.opening .stationery-flap{animation:ia-flap-unfold 760ms 140ms cubic-bezier(.35,.02,.24,1) both} .ia-atelier.opening .stationery-letter{animation:ia-letter-unfold 1500ms cubic-bezier(.2,.7,.22,1) both;transition:none;visibility:visible} .ia-atelier.opening .stationery-floral img{animation:ia-floral-reveal 740ms 580ms ease-out both} .ia-atelier.opening .stationery-fold{transition:transform 950ms cubic-bezier(.23,.72,.2,1) 400ms} .ia-atelier.opened :is(.stationery-envelope,.stationery-letter,.stationery-floral img){animation:none;transform:none} .ia-atelier.opened .stationery-letter{transition:none;filter:none} @keyframes ia-envelope-settle{ 0%,12%{transform:rotateX(7deg) rotateY(-3deg) rotateZ(-1deg)} 55%{transform:rotateX(-3deg) rotateY(1deg) rotateZ(.3deg)} 100%{transform:none} } @keyframes ia-flap-unfold{ 0%{transform:translateZ(8px) rotateX(0deg);z-index:5} 49%{z-index:5} 50%{z-index:1} 82%{transform:translateZ(-4px) rotateX(188deg);z-index:1} 100%{transform:translateZ(-4px) rotateX(180deg);z-index:1} } @keyframes ia-letter-unfold{ 0%,30%{opacity:0;transform:translate3d(0,160px,-4px) rotateX(16deg) scale(.91)} 44%{opacity:1;transform:translate3d(0,110px,28px) rotateX(8deg) scale(.94)} 80%{opacity:1;transform:translate3d(0,-10px,44px) rotateX(-2deg) scale(1.008)} 100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1)} } @keyframes ia-wax-release{ 0%{bottom:calc(var(--pocket-height) * .36);transform:translate3d(-50%,0,30px) rotate(-9deg)} 12%{bottom:calc(var(--pocket-height) * .36);transform:translate3d(-50%,-10px,72px) rotate(-17deg) scale(1.06)} 55%{bottom:-18px;transform:translate3d(-50%,-4px,64px) rotate(7deg) scale(.8)} 100%{bottom:-18px;transform:translate3d(-50%,0,42px) rotate(-6deg) scale(.76)} } @keyframes ia-floral-reveal{from{opacity:.5;transform:translateY(8px) scale(1.045)}to{opacity:1;transform:none}} @media(max-width:860px){.stationery-letter{padding-top:118px}.stationery-floral{height:132px}} @media(max-width:560px){ .stationery-letter{padding-top:102px} .stationery-floral{height:116px} .stationery-address{bottom:23px} .stationery-address span{font-size:clamp(32px,10.1vw,48px)} } @media(prefers-reduced-motion:reduce){ .ia-atelier :is(.stationery-envelope,.stationery-seal,.stationery-flap,.stationery-letter,.stationery-floral img,.stationery-fold){animation:none!important;transition:none!important} }
:root { --section-paper: #fffaf7; --section-champagne: #cba58c; --section-ink: #304434; --section-copy: #55484d; } main.page { --section-space: 64px; --section-heading-gap: 36px; padding-block-end: 0 !important; } main.page > :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare, #contact) { margin-block: 0 !important; padding-block: var(--section-space) !important; min-height: auto !important; scroll-margin-block-start: 0 !important; } main.page > :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare, #contact) > :is(.container, .story-redesign-shell, .family-shell, .gallery-shell) { margin-block: 0 !important; } :is(#poveste, #familie, #galerie, #locatii, #meniu) :is(.section-heading, .story-redesign-header) { margin-block: 0 !important; } :is(#poveste, #familie, #galerie, #locatii, #meniu) :is(.section-heading, .story-redesign-header) > :last-child { margin-block-end: 0 !important; } #poveste > .story-redesign-shell, #familie > .family-shell { row-gap: var(--section-heading-gap) !important; } #poveste .story-redesign-shell > :is(.story-redesign-card, .story-redesign-poem), #familie .family-shell > .family-layout { margin-block: 0 !important; } #galerie .photo-mosaic-full, #meniu .menu-accordion { margin-block: var(--section-heading-gap) 0 !important; } #locatii .location-timeline { margin-block: var(--section-heading-gap) !important; } #locatii .location-map-grid { margin-block: 0 !important; } :is(#confirmare, #contact) .confirm-copy { margin-block: 0 !important; } .page > :is(#poveste, #familie, #locatii, #meniu) { background: #fff1f7 !important; } #poveste .story-redesign-header { position: relative; padding-top: 52px; } #poveste .story-redesign-header::before, #poveste .story-redesign-header::after { content: ""; position: absolute; top: 3px; width: 24px; height: 33px; border: 3px solid #c8a17d; border-radius: 50%; background: transparent; box-shadow: inset 1px 1px 0 #fff7df, 1px 2px 0 #946d54, 2px 6px 8px #8c655826; pointer-events: none; } #poveste .story-redesign-header::before { left: calc(50% - 21px); transform: rotate(-28deg); z-index: 2; } #poveste .story-redesign-header::after { left: calc(50% - 3px); border-color: #bd8790; box-shadow: inset 1px 1px 0 #ffede4, 1px 2px 0 #895862, 2px 6px 8px #8c655826; transform: rotate(28deg); } #poveste .story-redesign-card { border-color: #cda996 !important; background: var(--section-paper) !important; box-shadow: inset 0 0 0 5px #fffdf9, inset 0 0 0 6px #ecd8ca, 0 4px 0 #e1beb0, 0 7px 0 #f5dfd5, 0 20px 34px #7545521c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #poveste .story-redesign-content { box-shadow: -1px 0 0 #dfc5b7, inset 5px 0 0 #f7ece5; } #poveste .story-redesign-label { color: #95516a !important; font-weight: 600; } #poveste .story-redesign-text p { color: var(--section-copy) !important; } #poveste .story-redesign-poem { border-color: #d7b79e !important; border-inline-start: 3px solid #c39b7c !important; border-radius: 12px !important; background: #fff9f1 !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #ead2bf, 0 11px 22px #74534712 !important; } #familie .family-feature-card { border-color: #c7a18f !important; background: #fffaf6 !important; box-shadow: inset 0 0 0 4px #fffdf9, inset 0 0 0 5px #e7d0bd, 0 5px 0 #d9b5a4, 0 8px 0 #f4ded0, 0 23px 36px #67453121 !important; } #familie .family-mini-card { border-color: #d7b9a9 !important; background: #fffdfa !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e3c8b9, 0 12px 22px #79515c17 !important; } #familie :is(.family-feature-card, .family-mini-card) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #familie .family-role { color: #96556b !important; font-weight: 600; letter-spacing: .14em; } #familie :is(.family-feature-copy, .family-mini-copy) p { color: var(--section-copy) !important; } #locatii .location-timeline { border-color: transparent !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #locatii .timeline-item > span { display: inline-grid; place-items: center; min-height: 58px; padding: 8px 20px; margin-bottom: 14px; border: 1px solid #c9a183; border-radius: 999px; background: #fff8ef; color: #785743; box-shadow: inset 0 0 0 3px #fffcf5, inset 0 0 0 4px #ecdbc7, 0 3px 0 #d7b596, 0 9px 15px #805c431c; } #locatii .timeline-item p { color: #46533f !important; } #locatii .event-map-card { border-color: #d4b5a3 !important; background: #fffbf8 !important; box-shadow: inset 4px 0 0 #cda988, inset 0 1px 0 #fff, 0 4px 0 #e4c8b7, 0 18px 30px #75494f1c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #locatii .featured-map-card { box-shadow: inset 4px 0 0 #bc8796, inset 0 1px 0 #fff, 0 4px 0 #e0bdc4, 0 18px 30px #75494f1c !important; } #locatii .event-map-content :is(.location-name, .location-address) { color: #45513f !important; } #locatii .event-map-content > div p { color: var(--section-copy) !important; } #locatii .map-btn { border: 1px solid #a65b72 !important; background: #a14c67 !important; color: #fff !important; box-shadow: inset 0 1px 0 #ddb0be, 0 3px 0 #793b50, 0 7px 12px #87475e1f !important; transform: none !important; filter: none !important; } #locatii .map-btn-waze { border-color: #caa68c !important; background: #fff8f0 !important; color: #614c40 !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d0ac91, 0 7px 12px #87475e14 !important; } #meniu .accordion-item { border-color: #ddbdad !important; background: #fffbf8 !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e8d0c0, 0 9px 18px #78505b10 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #meniu .accordion-item::before { background: #c8a17e !important; opacity: .65; } #meniu .accordion-item.is-open { border-color: #b78978 !important; background: #fff8f2 !important; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #d8b59f, 0 13px 24px #79515b1a !important; } #meniu .accordion-item.is-open::before { background: #a55d72 !important; opacity: 1; } #meniu .accordion-button { color: var(--section-ink) !important; } #meniu .accordion-button i { position: relative; border: 1px solid #bc7b8f; background: #a4546d !important; box-shadow: inset 0 1px 0 #e8bac8, 0 3px 0 #773c50, 0 6px 10px #79415020 !important; color: #fff !important; font-size: 0 !important; transform: none !important; } #meniu .accordion-button i::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 25px/1 Arial, sans-serif; } #meniu .accordion-button[aria-expanded="true"] i::before { content: "−"; } #meniu .accordion-button[aria-expanded="true"] i { background: #50604b !important; border-color: #738467; box-shadow: inset 0 1px 0 #a5b19a, 0 3px 0 #35432f, 0 6px 10px #3f513522 !important; } #meniu .accordion-panel :is(p, li) { color: var(--section-copy) !important; } :is(#poveste, #familie, #locatii, #meniu) :is(.section-heading h2, .story-redesign-header h2) { color: var(--section-ink) !important; text-shadow: 0 1px 0 #fffaf7 !important; } :is(#familie, #locatii, #meniu) .section-heading > p { color: var(--section-copy) !important; } #locatii .map-btn:focus-visible, #meniu .accordion-button:focus-visible { outline: 3px solid #8a5168 !important; outline-offset: 4px; } @media (hover: hover) and (pointer: fine) and (min-width: 861px) { #poveste .story-redesign-card:hover, #familie :is(.family-feature-card, .family-mini-card):hover, #locatii .event-map-card:hover { border-color: #b99478 !important; } #locatii .map-btn:hover { transform: translateY(-1px) !important; } #locatii .map-btn:active { transform: translateY(2px) !important; } #meniu .accordion-item:not(.is-open):hover { border-color: #bc9780 !important; background: #fff8f2 !important; } } @media (max-width: 860px), (pointer: coarse) { #poveste .story-redesign-card, #familie :is(.family-feature-card, .family-mini-card), #locatii .event-map-card, #meniu .accordion-item { transform: none !important; } #poveste .story-redesign-content { box-shadow: inset 0 1px 0 #dfc5b7; } } @media (max-width: 560px) { #poveste .story-redesign-header { padding-top: 40px; } #poveste .story-redesign-header::before, #poveste .story-redesign-header::after { width: 18px; height: 25px; border-width: 2px; } #poveste .story-redesign-header::before { left: calc(50% - 16px); } #locatii .timeline-item > span { min-height: 50px; padding: 6px 14px; } } @media (max-width: 860px) { main.page { --section-space: 48px; --section-heading-gap: 28px; padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 560px) { main.page { --section-space: 36px; --section-heading-gap: 24px; } } @media (prefers-reduced-motion: reduce) { #locatii .map-btn, #locatii .map-btn:hover, #locatii .map-btn:active, #meniu .accordion-item { transform: none !important; transition: none !important; } #meniu .accordion-button i, #meniu .accordion-panel { transition: none !important; } }
:root{--atelier-ink:#234332;--atelier-body:#54464a;--atelier-paper:#faf0e9;--atelier-edge:#d1ae8c} #intro.ia-atelier{align-items:start;padding-top:116px!important;isolation:auto!important;z-index:auto!important} #intro.ia-atelier .intro-content{max-width:620px!important;z-index:21!important} #intro.ia-atelier .eyebrow{margin-bottom:28px!important} #intro.ia-atelier :is(.eyebrow,.open-hint,.scroll-cue){position:relative;background:#fff1f7} #intro.ia-atelier .eyebrow{display:inline-flex;padding-inline:12px} .stationery-scene{--pocket-height:370px;--seal-size:124px;--seal-drop:calc(var(--pocket-height) * .52 - var(--seal-size) / 2 + 18px);max-width:560px;perspective:1800px} .stationery-envelope{padding:20px 0 58px;transform-style:flat} .stationery-shell-back,.stationery-shell-front{position:absolute;inset:0;transform-style:flat;pointer-events:none} .stationery-shell-back{z-index:1} .stationery-shell-front{z-index:3} .stationery-shell-front .stationery-seal{pointer-events:auto} .ia-atelier.opened .stationery-shell-back,.ia-atelier.opened .stationery-shell-front{transform:none;transform-style:flat} .ia-atelier.opened .stationery-flap{visibility:hidden} .ia-atelier:not(.open) .stationery-envelope{margin-top:0;transform:rotateX(3deg) rotateY(-2deg) rotateZ(-1deg)} .stationery-back{border-radius:5px;background:var(--letter-peonies) center top/100% auto no-repeat,var(--letter-paper) center/560px auto,#f8e7df;box-shadow:inset 0 0 0 8px #f6e8daa8,inset 0 0 0 9px #bb947579,0 2px 0 #d0ad91,0 5px 0 #f2d9c7,0 24px 42px #754c4a21} .stationery-flap span{background:linear-gradient(160deg,#fffaf248,#e4bcae48),var(--letter-paper) center/560px auto,#f6e3db} .stationery-flap::before{background:#c9a788} .stationery-flap span::after{opacity:1;background:var(--letter-peonies) center top/100% auto no-repeat;mask-image:linear-gradient(#000,transparent 94%);-webkit-mask-image:linear-gradient(#000,transparent 94%)} .stationery-flap::after{background:var(--letter-peonies) center top/100% auto no-repeat,var(--letter-paper) center/560px auto,#f5e5db;border-color:#c9a788} .stationery-fold-left::before,.stationery-fold-right::before{display:none} .stationery-fold-left{background:linear-gradient(115deg,#fff9ef36,#dcb5a652),var(--letter-paper) center/560px auto,#efdad1} .stationery-fold-right{background:linear-gradient(245deg,#fff8ee44,#dcb2a85c),var(--letter-paper) center/560px auto,#f3ddd2} .stationery-fold-bottom{background:linear-gradient(170deg,#fff9f444,#e6bda42c),var(--letter-paper) center/560px auto,#f4e3d8} .stationery-fold-bottom::after{border-color:#c3a081} .stationery-flap{bottom:calc(var(--pocket-height) * .52);height:calc(var(--pocket-height) * .48)} .stationery-fold{clip-path:none;background:none;box-shadow:none} .stationery-fold-left{--fold-shape:polygon(0 0,50% 48%,0 100%);--fold-shade:linear-gradient(110deg,#fffbef20,#b7816370)} .stationery-fold-right{--fold-shape:polygon(100% 0,50% 48%,100% 100%);--fold-shade:linear-gradient(250deg,#fffaee20,#bb856763)} .stationery-fold-bottom{--fold-shape:polygon(0 100%,50% 48%,100% 100%);--fold-shade:linear-gradient(175deg,#fff9ee44,#ce9e7833)} .stationery-fold::before,.stationery-fold::after{display:block;content:'';position:absolute;clip-path:var(--fold-shape);mask-image:none;-webkit-mask-image:none;opacity:1;border:0;border-radius:0;pointer-events:none} .stationery-fold::before{inset:0;background:#c7a482} .stationery-fold::after{inset:1.5px 1px 3px;background:var(--fold-shade),var(--letter-paper) center/560px auto,#f5e4d8} .stationery-address{bottom:30px} .stationery-address span{font-size:clamp(42px,5vw,65px);text-shadow:0 1px 0 #fff9e9;line-height:1.3} .stationery-seal{width:var(--seal-size);height:var(--seal-size);bottom:calc(var(--pocket-height) * .52 - var(--seal-size) / 2);filter:drop-shadow(0 7px 5px #703e3b55)} .stationery-seal::before{display:none} .stationery-seal img{object-fit:contain} .stationery-letter{width:92%;padding:164px 42px 82px;border-radius:4px;border-color:#cba887;background:var(--letter-paper) center/560px auto,#fbf1e9;box-shadow:0 2px 0 #fff9f0,0 4px 0 #d3b194,0 6px 0 #f3e2d4,0 16px 28px #71534b29} .stationery-letter::before{inset:11px;border-color:#c5a47980;border-radius:1px} .stationery-floral{top:3px;left:10px;right:10px;height:176px;mask-image:linear-gradient(#000 54%,#000b 73%,transparent 100%);-webkit-mask-image:linear-gradient(#000 54%,#000b 73%,transparent 100%)} .stationery-floral img{width:100%;height:100%;object-fit:contain;object-position:center top} .stationery-letter-names{font-size:60px;line-height:1.25;text-shadow:0 1px 0 #fff7e9;text-wrap:balance} .stationery-letter-names>span{display:inline} .stationery-letter-names .stationery-ampersand{font:inherit;margin:0 .12em;color:inherit} .stationery-rule{width:130px;margin:18px auto 20px;gap:12px} .stationery-rule span{font-size:17px;color:#a97467} .stationery-letter-title{font:500 27px/1.3 'Cormorant Garamond',Georgia,serif;margin:0 auto 18px;max-width:320px;color:#324332} .stationery-letter .stationery-letter-title{max-width:min(100%,320px)} .stationery-letter-message{font:500 19px/1.65 'Cormorant Garamond',Georgia,serif;color:#4b403e;white-space:pre-line} #intro.ia-atelier .open-hint{margin-top:44px!important;max-width:400px;font-weight:400!important;color:#6b5459!important} .ia-atelier.open .stationery-seal{bottom:-18px} .ia-atelier.open .stationery-back{background:var(--letter-paper) center/560px auto,#f5e4d8} .ia-atelier.open .stationery-flap::after{background:var(--letter-paper) center/560px auto,#f5e4d8} .ia-atelier.open .stationery-fold{transform:translateZ(30px) scaleY(.42)} .ia-atelier.opening .stationery-envelope,.ia-atelier.opening .stationery-seal,.ia-atelier.opening .stationery-letter{animation-duration:1200ms} .ia-atelier.opening .stationery-flap{animation-duration:620ms;animation-delay:100ms} .ia-atelier.opening .stationery-floral img{animation:none} .ia-atelier.opening .stationery-fold{transition:transform 850ms cubic-bezier(.23,.72,.2,1) 250ms} @keyframes ia-letter-unfold{ 0%,24%{opacity:1;clip-path:inset(0 0 100%);transform:translate3d(0,90px,-4px) rotateX(7deg) scale(.98)} 45%{opacity:1;clip-path:inset(0 0 35%);transform:translate3d(0,54px,20px) rotateX(3deg) scale(.99)} 100%{opacity:1;clip-path:inset(0);transform:none} } .floating-hearts-bg{opacity:1!important} .floating-hearts-bg span{width:var(--size)!important;height:var(--size)!important} .floating-hearts-bg span::before,.floating-hearts-bg span::after{display:none!important;content:none!important} .floating-hearts-bg span img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 4px 3px #8d4f5930);animation:ia-rendered-heartbeat 3.8s ease-in-out infinite;animation-delay:var(--delay,0s);transform-origin:center} .floating-hearts-bg span:nth-child(3n) img{animation-duration:4.6s;rotate:17deg} .floating-hearts-bg span:nth-child(3n + 1) img{rotate:-16deg} .floating-hearts-bg span:nth-child(1){--size:42px}.floating-hearts-bg span:nth-child(2){--size:72px} .floating-hearts-bg span:nth-child(3){--size:36px}.floating-hearts-bg span:nth-child(4){--size:61px} .floating-hearts-bg span:nth-child(5){--size:46px}.floating-hearts-bg span:nth-child(6){--size:80px} .floating-hearts-bg span:nth-child(7){--size:40px}.floating-hearts-bg span:nth-child(8){--size:63px} .floating-hearts-bg span:nth-child(9){--size:31px}.floating-hearts-bg span:nth-child(10){--size:52px} .floating-hearts-bg span:nth-child(11){--size:29px}.floating-hearts-bg span:nth-child(12){--size:45px} @keyframes ia-rendered-heartbeat{0%,100%{transform:scale(.87)}32%{transform:scale(1.16)}49%{transform:scale(.97)}68%{transform:scale(1.09)}} @keyframes ia-envelope-settle{0%{transform:rotateX(3deg) rotateY(-2deg) rotateZ(-1deg)}45%{transform:rotateX(-2deg) rotateY(.5deg)}100%{transform:none}} @keyframes ia-wax-release{ 0%{transform:translate3d(-50%,calc(-1 * var(--seal-drop)),30px) rotate(-9deg)} 12%{transform:translate3d(-50%,calc(-1 * var(--seal-drop) - 10px),72px) rotate(-17deg) scale(1.06)} 55%{transform:translate3d(-50%,-4px,64px) rotate(7deg) scale(.8)} 100%{transform:translate3d(-50%,0,42px) rotate(-6deg) scale(.76)} } @media(max-width:860px){ #intro.ia-atelier{padding-top:112px!important} .stationery-scene{--pocket-height:310px;--seal-size:118px;max-width:470px} .stationery-letter{padding:145px 34px 76px} .stationery-floral{height:152px} .stationery-letter-names{font-size:53px} .stationery-address span{font-size:56px} } @media(max-width:560px){ #intro.ia-atelier{padding:120px 20px 44px!important} #intro.ia-atelier .eyebrow{margin-bottom:24px!important} .stationery-scene{--pocket-height:clamp(205px,68vw,330px);--seal-size:96px} .ia-atelier:not(.open) .stationery-envelope{transform:none} .stationery-envelope{padding:14px 0 46px} .stationery-address{bottom:20px} .stationery-address span{font-size:clamp(35px,10.5vw,57px)} .stationery-letter{width:94%;padding:126px 24px 76px} .stationery-floral{left:5px;right:5px;height:132px} .stationery-letter-names{font-size:clamp(36px,11.2vw,50px);line-height:1.3} .stationery-rule{margin:18px auto 16px} .stationery-letter-title{font-size:23px;line-height:1.3} .stationery-letter-message{font-size:18px;line-height:1.6} #intro.ia-atelier .open-hint{margin-top:36px!important;font-size:12px!important;max-width:310px} .floating-hearts-bg span:nth-child(1){--size:37px}.floating-hearts-bg span:nth-child(2){--size:63px} .floating-hearts-bg span:nth-child(3){--size:30px}.floating-hearts-bg span:nth-child(4){--size:52px} .floating-hearts-bg span:nth-child(5){--size:36px}.floating-hearts-bg span:nth-child(6){--size:68px} .floating-hearts-bg span:nth-child(7){--size:42px}.floating-hearts-bg span:nth-child(8){--size:54px} @keyframes ia-envelope-settle{0%{transform:none}45%{transform:rotateX(-2deg)}100%{transform:none}} } @media(max-width:360px){.stationery-letter{width:94%;padding-inline:22px}.stationery-letter-title{font-size:21px}.stationery-letter-message{font-size:17px}} @media(max-height:620px) and (orientation:landscape){#intro.ia-atelier{padding-top:84px!important}.stationery-scene{max-width:420px;--pocket-height:270px}} @media(prefers-reduced-motion:reduce){.floating-hearts-bg span img{animation:none!important}.ia-atelier :is(.stationery-envelope,.stationery-flap,.stationery-seal,.stationery-letter,.stationery-floral img){animation:none!important;transition:none!important}}
:root { --finish-paper: var(--pink-bg-1, #fff9fc); --finish-blush: var(--pink-bg-2, #fff1f7); --finish-edge: #e7b6cb; --finish-rose: var(--pink-dark, #a94f70); --finish-deep: var(--pink-deep, #8f3f5f); --finish-copy: #57474f; --finish-shadow: 0 2px 0 #e7b6cb, 0 5px 0 #f8dce8, 0 16px 30px #8f3f5f16; --finish-inset: inset 0 0 0 4px #fffafd, inset 0 0 0 5px #f0ccdc; --atelier-paper: #fff9fc; --atelier-edge: #e7b6cb; --section-paper: #fff9fc; --section-copy: #57474f; } .floating-hearts-bg span img { filter: hue-rotate(326deg) saturate(.92) drop-shadow(1px 4px 3px #8f3f5f25); } .stationery-seal img { filter: hue-rotate(326deg) saturate(.92); } .stationery-seal { filter: drop-shadow(0 6px 5px #8f3f5f38); } #intro.ia-atelier :is(.eyebrow,.open-hint,.scroll-cue) { background: transparent; } .stationery-back { background: var(--letter-peonies) center top/100% auto no-repeat, linear-gradient(#fff1f7d9,#fff1f7d9), var(--letter-paper) center/560px auto, #fff1f7; box-shadow: inset 0 0 0 7px #fff9fc9c, inset 0 0 0 8px #e7b6cb9c, 0 2px 0 #d991b2, 0 5px 0 #fbd5e4, 0 24px 42px #8f3f5f1c; } .stationery-flap span { background: linear-gradient(160deg,#fff9fce8,#fbd5e4c9), var(--letter-paper) center/560px auto, #ffe5ef; } .stationery-flap::before { background: #d99db7; } .stationery-flap::after { background: var(--letter-peonies) center top/100% auto no-repeat, linear-gradient(#fff1f7de,#fff1f7de), var(--letter-paper) center/560px auto, #fff1f7; border-color: #d99db7; } .stationery-fold-left { --fold-shade: linear-gradient(110deg,#fff9fce8,#f0bbd1e8); } .stationery-fold-right { --fold-shade: linear-gradient(250deg,#fff9fce8,#efb8cee0); } .stationery-fold-bottom { --fold-shade: linear-gradient(175deg,#fff9fcf0,#fbd5e4e0); } .stationery-fold::before { background: #d99db7; } .stationery-fold::after { background: var(--fold-shade), var(--letter-paper) center/560px auto, #ffe5ef; } .stationery-letter { border-color: #deb0c4; background: linear-gradient(#fff9fce3,#fff9fce3), var(--letter-paper) center/560px auto, #fff9fc; box-shadow: 0 2px 0 #fffafd, 0 4px 0 #dfaac1, 0 6px 0 #f9e0eb, 0 16px 28px #8f3f5f20; } .stationery-letter::before { border-color: #d99db780; } .stationery-rule span { color: var(--finish-rose); } .stationery-rule::before,.stationery-rule::after { background: #d99db7; } .ia-atelier.open .stationery-back,.ia-atelier.open .stationery-flap::after { background: linear-gradient(#fff1f7e6,#fff1f7e6), var(--letter-paper) center/560px auto, #fff1f7; } .page :is(.section-heading > p,.story-redesign-header > p,.story-redesign-text p, .family-feature-copy p,.family-mini-copy p,.event-map-content p,.accordion-panel p, .rsvp-heart-list) { color: var(--finish-copy) !important; } .page :is(.section-kicker,.story-redesign-label,.family-role) { color: var(--finish-rose) !important; } .page :is(.section-kicker,.story-redesign-label,.family-role)::before, .page :is(.section-kicker,.story-redesign-label,.family-role)::after { border-color: var(--finish-edge); } #poveste .story-redesign-card { border-color: var(--finish-edge) !important; background: var(--finish-paper) !important; box-shadow: var(--finish-inset), 2px 3px 0 #e7b6cb, 5px 6px 0 #fff9fc, 6px 7px 0 #ecc3d5, 0 20px 32px #8f3f5f18 !important; } #poveste .story-redesign-content { box-shadow: -1px 0 0 #ebc5d6, inset 5px 0 0 #fbe5ef; } #poveste .story-redesign-media { box-shadow: 0 2px 0 #e7b6cb, 0 8px 18px #8f3f5f14 !important; } #poveste .story-redesign-poem { background: var(--finish-paper) !important; border-color: #edc9d9 !important; border-inline-start-color: var(--pink-main) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ecc3d5, 0 10px 20px #8f3f5f0f !important; } #poveste .story-redesign-header::before,#poveste .story-redesign-header::after { border-color: #d98aa5; box-shadow: inset 1px 1px 0 #fff9fc, 1px 2px 0 #a94f70, 2px 6px 8px #8f3f5f20; } #familie .family-feature-card { background: var(--finish-paper) !important; border-color: var(--finish-edge) !important; box-shadow: var(--finish-inset), var(--finish-shadow) !important; } #familie .family-mini-card { background: var(--finish-paper) !important; border-color: var(--finish-edge) !important; box-shadow: inset 0 0 0 3px #fffafd, inset 0 0 0 4px #f4d4e2, var(--finish-shadow) !important; } #familie :is(.family-feature-media,.family-mini-media) { box-shadow: 0 2px 0 #e7b6cb, 0 6px 12px #8f3f5f12 !important; } #galerie .photo-mosaic-full .mosaic-item { border-color: #e5b0c7 !important; background: var(--finish-blush) !important; box-shadow: 0 2px 0 #e2abc3, 0 5px 0 #fbdde9, 0 12px 20px #8f3f5f15 !important; } #locatii .timeline-item > span { border-color: #dfa8c1; color: var(--finish-deep); background: linear-gradient(150deg,#fff9fc,#fbd5e4); box-shadow: inset 0 0 0 3px #fff9fc, inset 0 0 0 4px #efc0d4, 0 3px 0 #d995b3, 0 9px 15px #8f3f5f18; } #locatii .timeline-line { background: #e5b0c7 !important; } #locatii .event-map-card,#locatii .featured-map-card { background: var(--finish-paper) !important; border-color: var(--finish-edge) !important; box-shadow: var(--finish-inset), var(--finish-shadow) !important; } #locatii .event-map-frame,.location-slider-viewport { border-color: #edc4d7 !important; box-shadow: inset 0 2px 5px #8f3f5f14; } #locatii .map-btn,.rsvp-form .btn-primary { border: 1px solid #a94f70 !important; color: #fff !important; background: linear-gradient(170deg,#b25779,var(--finish-rose) 55%,#984263) !important; box-shadow: inset 0 1px 0 #ecc2d2, inset 0 -1px 0 #963e60, 0 3px 0 #813752, 0 8px 14px #8f3f5f20 !important; text-shadow: 0 1px 1px #75324938; filter: none !important; } #locatii .map-btn-waze { color: var(--finish-deep) !important; background: linear-gradient(165deg,#fff9fc,#fce5ef) !important; border-color: #dea7bf !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dba0ba, 0 8px 14px #8f3f5f12 !important; text-shadow: none; } #meniu .accordion-item { border-color: #ecc5d7 !important; background: var(--finish-paper) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ecc0d4, 0 8px 16px #8f3f5f0b !important; } #meniu .accordion-item::before { background: #d98aa5 !important; } #meniu .accordion-item.is-open { border-color: #d995b3 !important; background: #fff7fb !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e4adc5, 0 12px 22px #8f3f5f12 !important; } #meniu .accordion-button i,#meniu .accordion-button[aria-expanded="true"] i { border-color: #d38ba9; background: linear-gradient(160deg,#c57293,#a94f70) !important; box-shadow: inset 0 1px 0 #ffe5ef, 0 2px 0 #8f3f5f, 0 5px 9px #8f3f5f20 !important; } #meniu .accordion-button[aria-expanded="true"] i { background: #a94f70 !important; } #confirmare .rsvp-form { border-color: var(--finish-edge) !important; background: var(--finish-paper) !important; box-shadow: var(--finish-inset), var(--finish-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .rsvp-form :is(input:not([type="checkbox"]):not([type="hidden"]),select,textarea) { background-color: #fffafd !important; border-color: #bd7896 !important; color: #493b43; box-shadow: inset 0 2px 4px #8f3f5f09, 0 1px 0 #fff !important; } .rsvp-form :is(input,select,textarea):focus-visible { outline: 2px solid var(--finish-rose) !important; outline-offset: 3px; } .rsvp-form .check-card { border-color: #e7b6cb !important; background: #fff7fb !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #f2ccdd !important; } .rsvp-form .check-card:has(input:checked) { background: #fce5ef !important; border-color: #d89bb6 !important; } .rsvp-form input[type="checkbox"] { accent-color: var(--finish-rose); border-color: #bd7896 !important; } .rsvp-form .check-card input[type="checkbox"]:checked { background: var(--finish-rose) !important; border-color: var(--finish-rose) !important; } .rsvp-form .ia-security-check { background: #fff1f7 !important; border-color: #ebc1d4 !important; } .rsvp-form .btn-primary::before,.rsvp-form .btn-primary::after { background: none !important; } .rsvp-heart-bullet { color: var(--finish-rose); text-shadow: 0 1px 0 #fbd5e4, 0 2px 0 #84324f, 0 4px 6px #8f3f5f25; } .premium-progress span { background: linear-gradient(90deg,#f5bdd3,#a94f70) !important; } .language-switcher { background: #fff9fc !important; border-color: #ecc1d4 !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e7b6cb, 0 8px 20px #8f3f5f12 !important; } .language-switcher a[aria-current="page"] { background: linear-gradient(165deg,#b25779,#a94f70); box-shadow: inset 0 1px 0 #e9bbce, 0 2px 0 #813752; } .quick-nav { background: #fff9fcfa !important; border-color: #ecc1d4 !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e7b6cb, 0 8px 22px #8f3f5f18 !important; } .quick-nav a.is-active { background: linear-gradient(165deg,#b25779,#a94f70) !important; box-shadow: inset 0 1px 0 #e9bbce, 0 2px 0 #813752, 0 5px 8px #8f3f5f20 !important; } .back-to-top { border-color: #e7b6cb !important; color: var(--finish-rose) !important; background: #fff9fc !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e7b6cb, 0 6px 16px #8f3f5f18 !important; } @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { #familie :is(.family-feature-card,.family-mini-card),#locatii .event-map-card, #galerie .mosaic-item { transition: translate 240ms ease, border-color 240ms ease; } #familie :is(.family-feature-card,.family-mini-card):hover,#locatii .event-map-card:hover, #galerie .mosaic-item:hover { translate: 0 -3px; border-color: #d995b3 !important; } #poveste .story-redesign-card:hover { border-color: #d995b3 !important; } #meniu .accordion-item:not(.is-open):hover { background: #fff1f7 !important; border-color: #d995b3 !important; } } @media (max-width:860px) { #poveste .story-redesign-content { box-shadow: inset 0 1px 0 #ebc5d6; } } @media (prefers-reduced-motion:reduce) { #familie :is(.family-feature-card,.family-mini-card),#locatii .event-map-card, #galerie .mosaic-item { translate: none !important; transition: none !important; } }
:root{--reference-green:#193f2d;--reference-copy:#514049;--reference-rose:#ac4f73;--reference-edge:#edb5cc;--reference-paper:#fff8fc;--section-ink:#193f2d;--section-copy:#514049} html,body{background:#fff1f7!important} main.page.reference-complete{--section-space:24px;--section-heading-gap:24px} .reference-complete :is(.container,.story-redesign-shell,.gallery-shell){width:min(1320px,calc(100% - 64px))!important;max-width:1320px!important;margin-inline:auto!important} .reference-complete :is(.section-heading h2,.story-redesign-header h2,.confirm-copy h2){font-family:'Great Vibes',cursive!important;font-weight:400!important;font-size:clamp(54px,6.5vw,96px)!important;line-height:1.12!important;color:var(--reference-green)!important;text-shadow:none!important} .reference-complete :is(h3,.family-feature-copy h3,.family-mini-copy h3){color:var(--reference-green)!important;text-shadow:none!important} .reference-complete :is(.section-heading>p,.story-redesign-header>p,.story-redesign-text p,.family-feature-copy p,.family-mini-copy p,.accordion-panel p,.rsvp-heart-list){color:var(--reference-copy)!important;font-size:16px;line-height:1.7} .reference-complete :is(.section-kicker,.story-redesign-label,.family-role){font:500 16px/1.5 'Montserrat',sans-serif!important;letter-spacing:.2em!important;color:var(--reference-rose)!important} .reference-complete :is(.section-heading,.story-redesign-header){padding-top:0!important} .reference-complete .section-heading>p{max-width:1050px!important;margin:14px auto 0!important;font-size:18px!important;line-height:1.6!important} .reference-ornament{display:flex!important;align-items:center;justify-content:center;gap:14px;width:220px;max-width:85%;margin:14px auto 18px;position:relative;pointer-events:none} .reference-ornament::before,.reference-ornament::after{content:'';height:1px;background:#d884a5;flex:1} .reference-ornament img{display:block!important;width:30px!important;height:30px!important;object-fit:contain!important;filter:hue-rotate(326deg) saturate(.86) brightness(1.13);animation:ia-rendered-heartbeat 4.2s ease-in-out infinite;flex:none} .reference-small-divider{width:110px;margin:7px auto 12px;gap:10px}.reference-small-divider img{width:20px!important;height:20px!important} .reference-source-divider{display:block;max-width:100%;margin:8px auto 12px;pointer-events:none} .reference-source-divider img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain} .reference-family-divider{width:276px;margin:0 auto!important} .reference-gallery-divider{width:216px;margin:0 auto 4px!important} #familie .section-heading h2{line-height:1.02!important} #familie .section-heading>p{margin-top:5px!important} .floating-hearts-bg{mask-image:linear-gradient(90deg,#000 0%,#000 5%,#0003 17%,#0001 32%,#0001 68%,#0003 83%,#000 95%,#000);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 5%,#0003 17%,#0001 32%,#0001 68%,#0003 83%,#000 95%,#000)} .floating-hearts-bg span img,.stationery-seal img{filter:hue-rotate(326deg) saturate(.86) brightness(1.13) drop-shadow(1px 3px 2px #8f3f5f24)} #intro.ia-reference-letter{padding-top:100px!important;padding-bottom:56px!important} #intro.ia-reference-letter .intro-content{max-width:780px!important} #intro.ia-reference-letter .eyebrow{margin-bottom:34px!important;font-size:14px!important;font-weight:500!important;letter-spacing:.2em;color:var(--reference-rose)!important} .ia-reference-letter .stationery-scene{max-width:650px;--pocket-height:535px;--seal-size:170px;--reference-seal-rise:.39;--reference-paper-width:591.5px} .ia-reference-letter .stationery-envelope{padding:28px 0 50px} .ia-reference-letter:not(.open) .stationery-envelope{transform:none!important} .ia-reference-letter .stationery-shell-back{perspective:1400px;perspective-origin:50% 0} .reference-envelope-closed,.reference-envelope-open{position:absolute;display:block;pointer-events:none;object-fit:fill;inset:auto 0 0;width:100%;height:var(--pocket-height);z-index:1} .reference-envelope-base{clip-path:polygon(0 0,50% 68.5%,100% 0,100% 100%,0 100%);transition:opacity 300ms ease 700ms,transform 950ms cubic-bezier(.2,.75,.2,1)} .reference-envelope-flap{clip-path:polygon(0 0,100% 0,51% 68.5%,49% 68.5%);transform-origin:50% 0;backface-visibility:visible;transform:rotateX(0deg);transition:opacity 300ms ease 650ms,transform 960ms cubic-bezier(.2,.75,.2,1)} .reference-envelope-open{inset:0;width:100%;height:100%;opacity:1;z-index:0;box-sizing:border-box;border-style:solid;border-color:transparent;border-width:calc(var(--reference-paper-width)*.2193) calc(var(--reference-paper-width)*.07) calc(var(--reference-paper-width)*.2709);border-image-slice:17% 7% 21% fill;border-image-repeat:stretch;filter:drop-shadow(0 12px 14px #8f3f5f20)} .ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) :is(.stationery-back,.stationery-fold,.stationery-flap,.stationery-shadow){background:none!important;box-shadow:none!important;opacity:0!important} .ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) .stationery-fold::before,.ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) .stationery-fold::after{display:none!important} .ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) :is(.stationery-flap,.stationery-back)::before,.ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) :is(.stationery-flap,.stationery-back)::after{display:none!important;background:none!important} .ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) .stationery-flap span,.ia-reference-letter .stationery-envelope:has(.reference-envelope-closed) .stationery-flap span::after{display:none!important;background:none!important} .ia-reference-letter .stationery-seal{bottom:calc(var(--pocket-height)*var(--reference-seal-rise) - var(--seal-size)/2);width:var(--seal-size);height:var(--seal-size)} .ia-reference-letter .stationery-address{bottom:calc(var(--pocket-height)*.07)} .ia-reference-letter .stationery-address span{font-size:clamp(46px,5.5vw,76px);color:var(--reference-green)} .ia-reference-letter .stationery-letter{width:91%;padding:215px 45px 105px;border-radius:52px 52px 20px 20px;background:#fff8fc!important;border-color:#edb5cc!important;box-shadow:inset 0 0 0 5px #fff,0 3px 0 #e3a0bd,0 16px 24px #8f3f5f16!important} .ia-reference-letter .stationery-letter:has(.reference-envelope-open){background:transparent!important;border:0!important;box-shadow:none!important} .ia-reference-letter .stationery-letter:has(.reference-envelope-open)::before{display:none!important} .ia-reference-letter .stationery-letter>:is(.stationery-letter-names,.stationery-letter-title,.stationery-letter-message,.stationery-rule,.reference-letter-heart){position:relative;z-index:1} .ia-reference-letter .stationery-letter::before{border-radius:40px 40px 14px 14px;border-color:#efcada} .ia-reference-letter .stationery-floral{height:165px;top:68px;left:7%;right:7%;z-index:1;border-radius:20px 20px 0 0;mask-image:linear-gradient(#000 48%,#0009 72%,transparent);-webkit-mask-image:linear-gradient(#000 48%,#0009 72%,transparent)} .ia-reference-letter .stationery-floral img{object-fit:cover;object-position:center top} .ia-reference-letter .stationery-floral .reference-printed-peonies{position:relative;left:-25%;width:150%;height:auto;max-width:none;object-fit:initial;object-position:center top}.ia-reference-letter .stationery-floral:has(.reference-printed-peonies){mask-image:linear-gradient(#000 30%,transparent 75%);-webkit-mask-image:linear-gradient(#000 30%,transparent 75%)} .ia-reference-letter .stationery-letter-names{font-size:clamp(44px,5.3vw,76px);color:var(--reference-green);line-height:1.2} .ia-reference-letter .stationery-letter-title{font:500 20px/1.55 'Montserrat',sans-serif;max-width:420px!important;color:var(--reference-green);margin-bottom:12px} .ia-reference-letter .reference-letter-heart{width:32px;height:32px;margin:0 auto 16px} .ia-reference-letter .reference-letter-heart img{width:32px!important;height:32px!important} .ia-reference-letter .reference-letter-heart::before,.ia-reference-letter .reference-letter-heart::after{display:none} .ia-reference-letter .stationery-letter-message{font:400 17px/1.75 'Montserrat',sans-serif;color:var(--reference-copy)} .ia-reference-letter .stationery-rule{margin:18px auto 24px;width:180px} .ia-reference-letter.open .reference-envelope-base{opacity:0;transform:translateY(5%)} .ia-reference-letter.open .reference-envelope-flap{opacity:0;transform:rotateX(-160deg)} .ia-reference-letter.opening .reference-envelope-flap{animation:ia-reference-flap-open 1030ms 70ms cubic-bezier(.2,.75,.2,1) both} .ia-reference-letter.open .stationery-seal{bottom:-5px;transform:translateX(-50%) scale(.76);opacity:0;pointer-events:none} .ia-reference-letter.opening .stationery-seal{animation:ia-reference-wax-release 1200ms cubic-bezier(.2,.7,.22,1) both} .ia-reference-letter.open .stationery-address{opacity:0} @keyframes ia-reference-flap-open{0%{opacity:1;transform:rotateX(0deg)}62%{opacity:.95;transform:rotateX(-155deg)}100%{opacity:0;transform:rotateX(-160deg)}} @keyframes ia-reference-wax-release{0%{opacity:1;transform:translate3d(-50%,calc(-1*(var(--pocket-height)*var(--reference-seal-rise) - var(--seal-size)/2 + 5px)),0) rotate(-9deg)}15%{opacity:1;transform:translate3d(-50%,calc(-1*(var(--pocket-height)*var(--reference-seal-rise) - var(--seal-size)/2 + 13px)),25px) rotate(-15deg) scale(1.04)}60%{opacity:.75;transform:translate3d(-50%,-8px,25px) rotate(5deg) scale(.82)}100%{opacity:0;transform:translate3d(-50%,0,0) rotate(-6deg) scale(.76)}} #intro.ia-reference-letter .open-hint{max-width:640px;font-size:14px!important;line-height:1.65!important;margin-top:40px!important;color:var(--reference-copy)!important} #poveste .story-redesign-header::before,#poveste .story-redesign-header::after{display:none!important} #poveste .story-redesign-header h2{font-size:clamp(64px,8.1vw,116px)!important;margin:5px 0 0!important} #poveste .story-redesign-header>.section-kicker{margin:0!important} #poveste .story-redesign-date{display:flex;flex-direction:column;gap:6px;margin:6px 0 0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important} #poveste .story-redesign-date>span{font:500 20px/1.5 'Montserrat',sans-serif;color:var(--reference-rose);letter-spacing:.2em} #poveste .story-redesign-date>em{font:italic 500 25px/1.45 'Cormorant Garamond',serif;color:var(--reference-green)} #poveste .reference-story-divider{width:min(640px,100%);margin:4px auto 12px} #poveste :is(.story-redesign-shell,.story-redesign-header,.story-redesign-card,.story-redesign-content,.story-redesign-text,.story-redesign-poem){min-width:0;max-width:100%;box-sizing:border-box} #poveste .story-redesign-shell{grid-template-columns:minmax(0,1fr)} #poveste .story-redesign-header{width:min(880px,100%)} #poveste :is(.story-redesign-header h2,.story-redesign-content h3){width:100%;min-width:0;overflow-wrap:break-word} #poveste .story-redesign-header>p:last-child{max-width:800px!important;margin:0 auto!important} #poveste .story-redesign-shell{width:min(1380px,calc(100% - 104px))!important;max-width:1380px!important} #poveste .story-redesign-card{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;padding:0!important;border-radius:25px!important;overflow:visible!important;border:0!important;background:none!important;box-shadow:none!important;position:relative;isolation:isolate;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} #poveste .story-redesign-media{margin:30px 30px 34px 26px;min-height:490px!important;aspect-ratio:auto!important;border:3px solid #f2c2d8;border-radius:20px!important;padding:3px;background:#fff;box-shadow:0 3px 0 #d890ad,0 6px 12px #8f3f5f24!important;align-self:stretch;overflow:hidden;z-index:2} #poveste .story-redesign-media>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover!important;border-radius:16px} #poveste .story-redesign-media::after{display:none!important} #poveste .story-redesign-content{padding:38px 62px 44px 44px!important;border:0!important;border-radius:24px!important;text-align:center;box-shadow:none!important;background:#fff8fc;position:relative} #poveste .story-redesign-content h3{font-family:'Allura','Great Vibes',cursive!important;font-size:52px!important;line-height:1.1!important;margin:0 auto 22px!important;max-width:475px;font-weight:400!important;text-wrap:balance} #poveste .story-redesign-text{text-align:left}#poveste .story-redesign-text p{font-size:16px!important;line-height:1.55!important;margin:0 0 16px!important;color:#493c43!important} #poveste .story-redesign-text p:last-child{margin-bottom:0!important} .reference-album-binding{position:absolute;top:8%;left:calc(50% - 32px);height:84%;width:64px;display:flex;flex-direction:column;justify-content:space-between;z-index:8;pointer-events:none} .reference-album-binding img{display:block;width:64px;height:auto;object-fit:contain} .reference-photo-heart{position:absolute;right:12px;top:12px;width:34px!important;margin:0!important;z-index:3}.reference-photo-heart::before,.reference-photo-heart::after{display:none} #poveste .story-redesign-poem{padding:22px 28px!important;border-radius:14px!important;max-width:1040px;margin-inline:auto!important} #familie .family-feature-card{grid-template-columns:1.08fr 1fr!important;padding:12px!important;gap:24px!important;border-radius:25px!important;min-height:0!important;width:calc(100% - 108px);max-width:1212px;margin-inline:auto!important;position:relative} #familie .family-feature-media{height:274px!important;min-height:0!important;border-radius:18px!important;border:2px solid #efbed3} #familie .family-feature-copy{padding:22px!important;text-align:center!important} #familie .family-feature-copy h3{font:400 clamp(32px,3.1vw,46px)/1.2 'Great Vibes',cursive!important;margin:5px 0 10px!important;max-width:100%;overflow-wrap:break-word} #familie .family-feature-copy p{font-size:14px!important;line-height:1.5!important;margin:12px auto 0!important} #familie .family-shell>.family-layout{gap:24px!important} #familie .family-feature-media img{object-position:50% 32%!important} #familie .family-support-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;margin-top:0!important} #familie .family-mini-card{padding:12px 12px 22px!important;border-radius:24px!important;overflow:visible!important;gap:0!important;position:relative} #familie .family-mini-media{height:auto!important;min-height:0!important;aspect-ratio:1.4!important;border:2px solid #ebbbd0;border-radius:18px!important} #familie .family-mini-media img{object-fit:cover!important;object-position:50% 38%!important;transform:none!important;width:100%;height:100%} #familie .family-seed-parents_iulian .family-mini-media img{object-position:50% 38%!important;transform:scale(1.9)!important;transform-origin:56% 42%!important} #familie .family-seed-parents_adina .family-mini-media img{object-position:50% 38%!important;transform:scale(2.25)!important;transform-origin:43% 26%!important} #familie .family-mini-copy{padding:16px 10px 0!important;text-align:center!important} #familie .family-mini-copy h3{font:400 clamp(34px,3.4vw,50px)/1.2 'Great Vibes',cursive!important;margin:0 0 12px!important} #familie .family-mini-copy p{font-size:14px!important;line-height:1.55!important;margin:0 auto!important;max-width:300px} #familie .reference-small-divider{margin:3px auto 7px;height:20px} #familie .reference-family-heading{margin:0 auto 6px;width:255px;height:26px} #familie .section-heading>.section-kicker{margin-bottom:6px!important} #familie .section-heading h2{margin:0!important} #galerie .gallery-shell{width:min(1440px,calc(100% - 96px))!important;max-width:1440px!important} #galerie .gallery-heading .section-kicker{font-size:28px!important;line-height:1.25!important;letter-spacing:.04em!important;margin:0!important} #galerie .gallery-heading h2{font-size:100px!important;line-height:1.05!important;margin:4px 0 0!important} #galerie .photo-mosaic-full{margin-top:14px!important} #galerie .gallery-heading .reference-ornament{margin:0 auto 8px;height:30px} #galerie .photo-mosaic-full{display:grid!important;grid-template-columns:minmax(0,.66fr) minmax(0,.25fr) minmax(0,1fr) minmax(0,.98fr)!important;grid-template-rows:clamp(250px,22.1vw,340px) clamp(260px,23vw,354px)!important;grid-auto-rows:300px;gap:30px!important;height:auto!important} #galerie .photo-mosaic-full .mosaic-item{grid-area:auto!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;border:2px solid #efbbd1!important;border-radius:16px!important;box-shadow:0 3px 0 #df9eba,0 10px 18px #8f3f5f19!important;transform:none!important;translate:none!important} #galerie .photo-mosaic-full .mosaic-item:first-child{grid-column:1 / span 2!important;grid-row:1!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(2){grid-column:3!important;grid-row:1!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(3){grid-column:4!important;grid-row:1!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(4){grid-column:2 / span 2!important;grid-row:2!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(5){grid-column:1!important;grid-row:2!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(6){grid-column:4!important;grid-row:2!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(n+7){grid-column:span 2!important} #galerie .photo-mosaic-full .mosaic-item img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 38%!important;filter:none!important;transform:none!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(5) img{object-position:50% 39%!important} #meniu .reference-menu-grid{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:30px;align-items:start;width:min(1380px,calc(100% - 80px))!important;max-width:1380px!important} #meniu .reference-menu-grid:not(:has(.reference-menu-illustration)){grid-template-columns:1fr} .reference-menu-illustration{position:relative;margin:0 0 0 -14%;align-self:start;width:120%;max-width:none} .reference-menu-illustration>img{display:block;width:100%;height:auto;mask-image:linear-gradient(#000 93%,transparent);-webkit-mask-image:linear-gradient(#000 93%,transparent)} .reference-menu-illustration figcaption{position:absolute;left:29%;bottom:9%;width:50%;white-space:pre-line;font:400 clamp(23px,2.4vw,34px)/1.3 'Great Vibes',cursive;color:#a96380;transform:rotate(-12deg);text-align:center} #meniu .section-heading{text-align:center!important;margin-bottom:0!important} #meniu .section-heading .section-kicker{display:block;font:600 23px/1.3 'Cormorant Garamond',serif!important;letter-spacing:.06em!important;color:var(--reference-green)!important;margin-bottom:0!important} #meniu .section-heading h2{font-family:'Great Vibes',cursive!important;font-size:clamp(36px,4.2vw,62px)!important;margin-top:4px!important;line-height:1.12!important;max-width:100%!important} #meniu .section-heading>p{font-size:18px!important;line-height:1.5!important;margin:12px 0 0!important} #meniu .section-heading .reference-ornament{margin:12px auto 12px} #meniu .menu-accordion{margin-top:28px!important;display:flex;flex-direction:column;gap:10px!important} #meniu .accordion-item{border-radius:12px!important;border:1px solid #efbad1!important;box-shadow:0 2px 0 #e7abc6,0 5px 9px #8f3f5f0f!important;overflow:hidden} #meniu .accordion-item::before{display:none!important} #meniu .accordion-button{padding:10px 18px!important;min-height:62px;font:600 19px/1.4 'Montserrat',sans-serif!important;color:#573b4b!important;gap:16px} #meniu .accordion-button>span{font:inherit!important;color:inherit!important;line-height:inherit!important} #meniu .accordion-item.is-open .accordion-button{background:#f8dce9!important} #meniu .accordion-button i{width:40px!important;height:40px!important;flex:0 0 40px!important} #meniu .accordion-button i{background:linear-gradient(145deg,#fce0ec,#db88ab 48%,#aa4c72)!important;box-shadow:inset 1px 2px 2px #fff9,inset -1px -2px 2px #873b6055,0 3px 6px #9b426333!important} #meniu .accordion-button[aria-expanded=true] i{background:linear-gradient(145deg,#fce0ec,#db88ab 48%,#aa4c72)!important;box-shadow:inset 1px 2px 2px #fff9,inset -1px -2px 2px #873b6055,0 3px 6px #9b426333!important} #meniu .accordion-panel{padding-inline:18px!important} #meniu .accordion-panel p{font-size:16px!important;line-height:1.5!important;margin:0!important} #meniu .accordion-item.is-open .accordion-panel{padding-top:14px!important;padding-bottom:16px!important} #confirmare .confirm-grid{grid-template-columns:minmax(0,.475fr) minmax(0,.525fr)!important;gap:46px!important;align-items:start;width:min(1380px,calc(100% - 80px))!important;max-width:1380px!important} #confirmare .confirm-copy{background:transparent!important;box-shadow:none!important;border:0!important;padding:12px 0 0!important;text-align:center} #confirmare .confirm-copy::before,#confirmare .confirm-copy::after{display:none!important} #confirmare .confirm-copy h2{font-family:'Allura','Great Vibes',cursive!important;font-size:clamp(48px,5.1vw,76px)!important;line-height:1.06!important;margin:10px 0!important;max-width:100%!important} #confirmare .rsvp-heart-list{margin:26px 0 0!important;display:flex;flex-direction:column;gap:24px} #confirmare .rsvp-heart-list li{border:0!important;box-shadow:none!important;background:none!important;padding:0!important;display:flex!important;gap:18px!important;text-align:left!important;font-size:17px!important;line-height:1.7!important} #confirmare .rsvp-heart-bullet{width:32px!important;min-width:32px!important;max-width:32px;margin:4px 0 0!important;padding:0!important;animation:none!important} #confirmare .rsvp-heart-bullet::before,#confirmare .rsvp-heart-bullet::after{display:none!important} .reference-rsvp-illustration{position:relative;width:116%;margin:14px 0 0 -12%;overflow:visible} .reference-rsvp-illustration>img{display:block;width:100%;height:auto} .reference-rsvp-illustration figcaption{position:absolute;top:40%;left:28%;width:40%;white-space:pre-line;font:400 clamp(26px,2.9vw,40px)/1.3 'Great Vibes',cursive;color:#bd6d91;transform:rotate(-17deg);text-align:center} #confirmare .rsvp-form{display:grid!important;border-radius:22px!important;padding:40px 44px!important;gap:12px!important;border:0!important;background:#fff5fa!important;box-shadow:none!important} #confirmare .rsvp-form .form-row{display:grid;grid-template-columns:minmax(0,1fr);margin:0!important;gap:5px!important} #confirmare .rsvp-form label{font-size:17px!important;line-height:1.35!important;font-weight:500!important;color:#45343e!important;margin:0!important} #confirmare .rsvp-form :is(input:not([type=checkbox]):not([type=hidden]),select,textarea){font-size:15px!important;min-height:48px!important;padding:11px 14px!important;border-radius:9px!important;border-color:#bd7896!important} #confirmare .rsvp-form textarea{min-height:86px!important;height:86px;line-height:1.5!important} #confirmare .check-grid{gap:18px!important;grid-template-columns:1fr 1fr!important} #confirmare .check-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:44px!important;gap:12px!important} #confirmare .check-card input[type=checkbox]{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-height:28px!important;flex:none;padding:0!important;border-radius:5px!important} #confirmare .privacy-consent{align-items:flex-start!important} #confirmare .rsvp-form .ia-security-check{grid-template-columns:minmax(0,1fr) minmax(100px,1fr);align-items:center;padding:0!important;border:0!important;background:none!important;column-gap:16px!important} #confirmare .ia-security-check input[type=number]{width:100%!important;max-width:none!important} #confirmare .ia-security-check small{grid-column:1/-1;margin:0!important;font-size:12px!important;line-height:1.5!important} #confirmare .rsvp-form .guest-menu-row{padding:0!important;margin:0!important;border:0!important} #confirmare .rsvp-form .check-grid{margin:0!important} #confirmare .rsvp-form .form-status:empty{display:none} #confirmare .rsvp-form .btn-primary{font-size:18px!important;line-height:1.5!important;min-height:60px!important;padding:13px 20px!important;border-radius:32px!important;letter-spacing:0!important;margin:0!important} #confirmare .rsvp-form .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px} #confirmare .rsvp-form .btn-primary::before{content:''!important;display:block!important;position:static;inset:auto;z-index:auto;width:26px;height:26px;flex:0 0 26px;background:currentColor!important;opacity:1;transform:none;mask:var(--reference-icon-whatsapp) center/contain no-repeat;-webkit-mask:var(--reference-icon-whatsapp) center/contain no-repeat} #familie :is(.family-feature-card,.family-mini-card){border:0!important;background:#fff8fc!important;box-shadow:none!important;isolation:isolate} #familie :is(.family-feature-card,.family-mini-card)::before{display:none!important} #familie :is(.family-feature-card,.family-mini-card)::after{content:''!important;display:block!important;position:absolute;inset:-8px;z-index:4;pointer-events:none;border:64px solid transparent;border-image-source:var(--reference-frame);border-image-slice:64;border-image-repeat:stretch;border-radius:0!important;background:none!important;box-shadow:none!important;opacity:1!important;transform:none!important;filter:none!important} .reference-album-leaf{position:absolute;inset:0 50% 0 0;background:#fff8fc;border-radius:24px;z-index:0;pointer-events:none} .reference-album-leaf::after,#poveste .story-redesign-content::after,.reference-rsvp-form-shell::after{content:'';position:absolute;inset:-8px;pointer-events:none;border:64px solid transparent;border-image-source:var(--reference-album-page-left);border-image-slice:64;border-image-repeat:stretch;z-index:4;background:none!important;box-shadow:none!important;transform:none!important} #poveste .story-redesign-content::after{inset:-8px -18px -12px -8px;border-image-source:var(--reference-album-page)} #poveste .story-redesign-content::before{display:none!important} .reference-mounted-heart{position:absolute!important;right:12px;bottom:14px;width:58px!important;height:58px!important;max-width:none;margin:0!important;z-index:7;pointer-events:none} .reference-mounted-heart img{width:100%!important;height:100%!important;animation:ia-rendered-heartbeat 5.8s ease-in-out infinite;transform-origin:center} .reference-mounted-heart::before,.reference-mounted-heart::after,.reference-date-heart::before,.reference-date-heart::after{display:none!important} #familie .family-feature-card>.reference-mounted-heart{right:18px;bottom:18px} .reference-rsvp-form-shell{position:relative;min-width:0;isolation:isolate} .reference-rsvp-form-shell::after{inset:-8px;z-index:4} .reference-form-heart-one{top:-30px;bottom:auto;right:0;width:66px!important;height:66px!important;rotate:9deg} .reference-form-heart-two{top:32px;bottom:auto;right:-28px;width:51px!important;height:51px!important;rotate:18deg} #poveste .story-redesign-date>span{display:flex;align-items:center;justify-content:center;gap:20px} #poveste .reference-date-heart{display:inline-flex!important;width:28px!important;height:28px!important;margin:0!important;flex:none} #poveste .reference-date-heart img{width:28px!important;height:28px!important} @media(min-width:861px){ #poveste .story-redesign-content h3{max-width:475px} #poveste .story-redesign-content h3>.reference-title-lead,#poveste .story-redesign-content h3>.reference-title-rest{display:block} .quick-nav,body.show-quick-nav .quick-nav{top:auto!important;bottom:18px!important;left:50%!important;right:auto!important;width:max-content!important;max-width:calc(100% - 32px)!important;flex-direction:row!important;transform:translateX(-50%)!important;border-radius:26px!important;gap:5px!important;padding:7px!important} .quick-nav a{width:auto!important;min-width:88px!important;min-height:44px!important;padding:10px 14px!important;white-space:nowrap;font-size:11px!important} #poveste .story-redesign-header>.section-kicker{font-size:11px!important;line-height:1.4!important} #poveste .story-redesign-header{margin-bottom:0!important} .language-switcher{box-shadow:none!important;background:#fff7fbde!important;border:1px solid #f0ccdd!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} } @media(max-width:1100px){ .reference-complete :is(.container,.story-redesign-shell,.gallery-shell){width:calc(100% - 48px)!important} #meniu .reference-menu-grid{gap:24px;grid-template-columns:.38fr .62fr} #poveste .story-redesign-content{padding:32px 28px!important} #confirmare .confirm-grid{gap:28px!important} #confirmare .rsvp-form{padding:26px!important} #galerie .photo-mosaic-full{grid-template-rows:repeat(2,250px)!important;grid-auto-rows:250px;gap:18px!important} } @media(max-width:860px){ main.page.reference-complete{--section-space:40px;--section-heading-gap:24px} .reference-complete :is(.container,.story-redesign-shell,.gallery-shell){width:calc(100% - 40px)!important} #poveste .story-redesign-card{grid-template-columns:minmax(0,1fr)!important} #poveste .story-redesign-media{height:420px!important;min-height:0!important;margin:18px!important} #poveste .story-redesign-content{padding:30px!important} .reference-album-binding{display:none} #familie .family-feature-card{grid-template-columns:1fr 1fr!important;gap:12px!important} #familie .family-feature-card{width:100%} #familie .family-feature-media{height:290px!important} #familie .family-support-grid{gap:16px!important} #familie .family-mini-card{padding:8px 8px 18px!important} #familie .family-mini-copy{padding-inline:4px!important} #familie .family-role{font-size:11px!important} #familie .family-mini-copy h3{font-size:32px!important} #meniu .reference-menu-grid{grid-template-columns:.36fr .64fr;gap:18px} #meniu .accordion-button{font-size:14px!important;padding:14px!important} #meniu .accordion-panel{padding-inline:14px!important} #confirmare .confirm-grid{grid-template-columns:1fr!important;max-width:650px!important;gap:28px!important} #confirmare .confirm-copy{max-width:590px;margin:auto!important} .reference-rsvp-illustration{width:100%;max-width:510px;margin:12px auto 0} .reference-rsvp-illustration figcaption{font-size:30px} .ia-reference-letter .stationery-scene{max-width:580px;--pocket-height:477px;--reference-paper-width:527.8px} #poveste .story-redesign-shell,#galerie .gallery-shell,#meniu .reference-menu-grid,#confirmare .confirm-grid{width:calc(100% - 48px)!important} .reference-album-leaf{right:0;bottom:auto;height:460px} #poveste .story-redesign-content::after{inset:-8px} #galerie .gallery-heading .section-kicker{font-size:22px!important} #galerie .gallery-heading h2{font-size:80px!important} #galerie .photo-mosaic-full{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:300px!important;gap:20px!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(n){grid-column:auto!important;grid-row:auto!important} } @media(max-width:600px){ main.page.reference-complete{--section-space:38px;--section-heading-gap:24px} .reference-complete :is(.container,.story-redesign-shell,.gallery-shell){width:calc(100% - 32px)!important} .reference-complete :is(.section-heading h2,.story-redesign-header h2,.confirm-copy h2){font-size:48px!important;line-height:1.25!important} .reference-complete .section-heading>p{font-size:14px!important;line-height:1.7!important} .reference-complete :is(.section-kicker,.story-redesign-label){font-size:11px!important;letter-spacing:.16em!important} #intro.ia-reference-letter{padding:108px 16px 36px!important} #intro.ia-reference-letter .eyebrow{font-size:11px!important;margin-bottom:26px!important} .ia-reference-letter .stationery-scene{--pocket-height:calc((100vw - 32px)*.823);--seal-size:clamp(84px,25vw,130px);--reference-paper-width:calc((100vw - 32px)*.94);width:100%} .ia-reference-letter .stationery-address{bottom:calc(var(--pocket-height)*.06)} .ia-reference-letter .stationery-address span{font-size:clamp(35px,10.4vw,59px)} .ia-reference-letter .stationery-letter{padding:172px 26px 84px;border-radius:30px 30px 16px 16px;width:94%} .ia-reference-letter .stationery-floral{height:138px;top:46px;left:7%;right:7%} .ia-reference-letter .stationery-letter-names{font-size:clamp(36px,10.8vw,57px)} .ia-reference-letter .stationery-letter-title{font-size:16px;line-height:1.55;margin-bottom:10px} .ia-reference-letter .reference-letter-heart{width:24px;height:24px;margin-bottom:12px} .ia-reference-letter .reference-letter-heart img{width:24px!important;height:24px!important} .ia-reference-letter .stationery-letter-message{font-size:14px;line-height:1.8} .ia-reference-letter .stationery-rule{margin:16px auto 18px} #intro.ia-reference-letter .open-hint{font-size:12px!important;margin-top:32px!important} #poveste .story-redesign-header h2{font-size:58px!important} #poveste .story-redesign-date>span{font-size:15px} #poveste .story-redesign-date>em{font-size:21px} #poveste .story-redesign-header>p:last-child{font-size:14px!important} #poveste .story-redesign-media{height:340px!important;margin:12px!important} #poveste .story-redesign-content{padding:24px 20px!important} #poveste .story-redesign-content h3{font-size:35px!important} #poveste .story-redesign-text p{font-size:14px!important;line-height:1.75!important} #poveste .story-redesign-poem{padding:20px!important} #familie .family-feature-card{grid-template-columns:1fr!important} #familie .family-feature-media{height:250px!important} #familie .family-feature-copy{padding:14px!important} #familie .family-feature-copy h3{font-size:43px!important} #familie .family-support-grid{grid-template-columns:1fr!important;gap:22px!important} #familie .family-mini-card{padding:12px 12px 22px!important} #familie .family-mini-media{aspect-ratio:1.35!important} #familie .family-role{font-size:12px!important} #familie .family-mini-copy h3{font-size:46px!important} #galerie .photo-mosaic-full{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-rows:clamp(245px,80vw,390px)!important;gap:22px!important} #galerie .photo-mosaic-full .mosaic-item:nth-child(n){grid-column:auto!important;grid-row:auto!important;height:100%!important;min-height:0!important;aspect-ratio:auto!important} #meniu .reference-menu-grid{grid-template-columns:1fr!important;gap:12px} .reference-menu-illustration{width:75%;max-width:300px;margin:0 auto;max-height:390px;overflow:hidden} .reference-menu-illustration>img{width:100%;height:390px;object-fit:contain} .reference-menu-illustration figcaption{font-size:27px;bottom:7%} #meniu .section-heading{text-align:center!important} #meniu .section-heading h2{font-size:42px!important} #meniu .accordion-button{font-size:15px!important;min-height:66px} #meniu .accordion-panel p{font-size:14px!important} #confirmare .confirm-copy h2{font-size:49px!important} #confirmare .rsvp-heart-list li{font-size:15px!important;line-height:1.7!important;gap:12px!important} #confirmare .rsvp-form{padding:23px 18px!important;gap:20px!important} #confirmare .check-grid{grid-template-columns:1fr!important;gap:12px!important} #confirmare .rsvp-form :is(input:not([type=checkbox]):not([type=hidden]),select,textarea){font-size:16px!important} #confirmare .rsvp-form .btn-primary{font-size:15px!important} #poveste .story-redesign-shell,#galerie .gallery-shell,#meniu .reference-menu-grid,#confirmare .confirm-grid{width:calc(100% - 40px)!important} #poveste .story-redesign-content h3{font-size:40px!important;line-height:1.1!important} #poveste .story-redesign-media{margin:12px!important;min-height:0!important} .reference-album-leaf{height:370px} .reference-album-leaf::after,#poveste .story-redesign-content::after,.reference-rsvp-form-shell::after,#familie :is(.family-feature-card,.family-mini-card)::after{border-width:48px;inset:-6px} #familie .family-feature-card{width:100%} #familie .family-mini-copy{padding-inline:8px!important} .reference-mounted-heart{width:44px!important;height:44px!important;right:8px;bottom:10px} .reference-form-heart-one{top:-24px;right:6px} .reference-form-heart-two{top:21px;right:-12px;width:36px!important;height:36px!important} #galerie .gallery-heading .section-kicker{font-size:18px!important} #galerie .gallery-heading h2{font-size:64px!important} #galerie .photo-mosaic-full{grid-template-columns:1fr!important;grid-auto-rows:clamp(245px,80vw,390px)!important} #meniu .section-heading .section-kicker{font-size:18px!important} #meniu .section-heading h2{font-size:44px!important} .reference-menu-illustration{width:92%;max-width:350px;max-height:none;overflow:visible} .reference-menu-illustration>img{height:auto;object-fit:initial} .reference-menu-illustration figcaption{bottom:9%} #confirmare .rsvp-form{padding:28px 18px!important;gap:16px!important} #confirmare .rsvp-form label{font-size:15px!important} #confirmare .rsvp-form .ia-security-check{grid-template-columns:minmax(0,1fr) 92px;column-gap:8px!important} #confirmare .rsvp-form .form-row-header{flex-wrap:wrap;gap:4px} .floating-hearts-bg{mask-image:linear-gradient(90deg,#000 0%,#0006 10%,#0001 25%,#0001 75%,#0006 90%,#000);-webkit-mask-image:linear-gradient(90deg,#000 0%,#0006 10%,#0001 25%,#0001 75%,#0006 90%,#000)} } @media(prefers-reduced-motion:reduce){.reference-ornament img,.reference-mounted-heart img{animation:none!important}.reference-envelope-closed,.reference-envelope-open,.ia-reference-letter .stationery-seal{transition:none!important;animation:none!important}}
#locatii.locations-editorial .section-heading {max-width:950px!important} #locatii.locations-editorial .section-heading .section-kicker {margin-bottom:6px!important} #locatii.locations-editorial .section-heading h2 {line-height:1.08!important;margin-bottom:0!important} #locatii.locations-editorial .section-heading > p {font-size:15px!important;line-height:1.55!important;margin:6px auto 0!important} #locatii.locations-editorial .location-heading-divider {width:306px;margin:2px auto 4px} #locatii.locations-editorial .location-heading-divider img {width:100%!important;height:auto!important} #locatii.locations-editorial .location-map-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch; } #locatii.locations-editorial .event-map-card { display:flex;flex-direction:column;gap:0;min-width:0;padding:14px; border:0!important;border-radius:24px;background:#fff8fc!important; box-shadow:none!important;position:relative;isolation:isolate; } #locatii.locations-editorial .event-map-card::before {display:none} #locatii.locations-editorial .event-map-card::after {content:'';display:block;position:absolute;inset:-8px;z-index:4;pointer-events:none;border:64px solid transparent;border-image-source:var(--reference-album-page-left);border-image-slice:64;border-image-repeat:stretch;background:none!important;box-shadow:none!important;transform:none!important} #locatii.locations-editorial .location-timeline {display:flex;flex-direction:row;justify-content:center;align-items:center;width:calc(50% + 132px);max-width:820px;margin:14px auto 10px!important;gap:0;padding:0;border:0!important} #locatii.locations-editorial .timeline-item { width:140px;min-height:140px;max-width:140px;flex:0 0 140px;display:flex;flex-direction:column; justify-content:center;align-items:center;padding:11px;border:1px solid #e7b6cb;border-radius:50%; background:var(--pink-bg-4,#fbd5e4);box-shadow:inset 0 0 0 4px #fce3ed,0 4px 0 #ecc5d6,0 8px 17px #8f3f5f22; } #locatii.locations-editorial .timeline-item > span {min-width:0;min-height:0;padding:0;margin:0;font-size:29px;background:none!important;border:0!important;box-shadow:none!important} #locatii.locations-editorial .timeline-item p {margin:6px auto 0;max-width:115px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:.02em} #locatii.locations-editorial .timeline-line {flex:1;width:auto;height:1px;min-width:24px;margin:0;background:#e7b6cb} #locatii.locations-editorial .location-photo-slider, #locatii.locations-editorial .location-editorial-cover { flex:none;margin:0;grid-area:auto;border-radius:13px;overflow:hidden; box-shadow:0 0 0 1px #edc7d8;background:var(--pink-bg-2,#fff1f7); } #locatii.locations-editorial .location-slider-viewport { aspect-ratio:auto;height:clamp(220px,18.5vw,275px);min-height:0;width:100%;border-radius:13px;box-shadow:none!important; } #locatii.locations-editorial .location-slide img, #locatii.locations-editorial .location-editorial-cover img { display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:none!important;transform:none!important; } #locatii.locations-editorial .location-slide.is-portrait img {object-fit:contain} #locatii.locations-editorial .location-editorial-cover {aspect-ratio:auto;height:clamp(220px,18.5vw,275px)} #locatii.locations-editorial .location-slider-arrow {width:44px;height:44px;font-size:32px;background:#fffafdec;border-color:#e7b6cb} #locatii.locations-editorial .location-slider-prev {left:10px} #locatii.locations-editorial .location-slider-next {right:10px} #locatii.locations-editorial .location-slider-dots {gap:0;bottom:6px;max-width:calc(100% - 110px);overflow-x:auto} #locatii.locations-editorial .location-slider-dot { flex:none;width:28px;height:28px;padding:8px;border:8px solid transparent; border-radius:50%;background:#ffffffdc;background-clip:content-box;box-shadow:none; } #locatii.locations-editorial .location-slider-dot.is-active {background-color:var(--pink-dark,#a94f70);transform:none} #locatii.locations-editorial .event-map-content { display:flex;flex-direction:column;align-items:center;flex:1;grid-area:auto; text-align:center;justify-content:flex-start;padding:13px 8px;transform:none; } #locatii.locations-editorial .event-map-content h3 {font-size:clamp(36px,3.6vw,54px)!important;line-height:1.08!important;margin:0 0 7px} #locatii.locations-editorial .event-map-content .location-name {font-size:16px;line-height:1.55;font-weight:600;margin:0 0 6px;color:#493b43} #locatii.locations-editorial .event-map-content .location-address {font-size:13px;line-height:1.65;margin:0;color:#65545d} #locatii.locations-editorial .location-editorial-description {margin:9px 0 13px;max-width:none;width:100%} #locatii.locations-editorial .location-editorial-description p {font-size:14px;line-height:1.65;margin:0 0 10px} #locatii.locations-editorial .location-editorial-description p:last-child {margin-bottom:0} #locatii.locations-editorial .map-actions {display:flex;width:100%;gap:12px;margin-top:auto;flex-wrap:wrap} #locatii.locations-editorial .map-btn {flex:1;min-height:46px;min-width:120px;padding:12px 16px;border-radius:9px;font-size:13px;letter-spacing:.05em;white-space:normal;text-align:center} #locatii.locations-editorial .map-btn-waze{background:#ae5179!important;color:#fff!important;border:1px solid #a3486b!important;box-shadow:inset 0 1px 0 #fff8,0 3px 0 #823b59,0 7px 12px #8f3f5f24!important} #locatii.locations-editorial .map-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500} #locatii.locations-editorial .map-btn::before{content:''!important;display:block!important;position:static;inset:auto;z-index:auto;width:20px;height:20px;flex:0 0 20px;background:currentColor!important;opacity:1;transform:none;mask:var(--reference-icon-location) center/contain no-repeat;-webkit-mask:var(--reference-icon-location) center/contain no-repeat} #locatii.locations-editorial .map-btn-waze::before{mask-image:var(--reference-icon-waze);-webkit-mask-image:var(--reference-icon-waze)} #locatii.locations-editorial .event-map-frame { flex:none;grid-area:auto;min-height:0;height:190px;border:1px solid #edc7d8;border-radius:13px; background:var(--pink-bg-2,#fff1f7);box-shadow:none; } #locatii.locations-editorial .event-map-frame iframe {display:block;width:100%;height:100%;min-height:0;border:0} #locatii.locations-editorial .event-map-frame.location-map-cover {height:clamp(220px,18.5vw,275px);aspect-ratio:auto} #locatii.locations-editorial .has-map-cover .location-map-cover {flex:none;height:clamp(220px,18.5vw,275px);min-height:0} #locatii.locations-editorial .has-map-cover .event-map-content {flex:1;justify-content:flex-start} #locatii.locations-editorial .has-map-cover{align-self:start} #locatii.locations-editorial .has-map-cover .map-actions {margin-top:12px;padding-top:0} #locatii.locations-editorial :is(.location-slider-arrow,.location-slider-dot,.map-btn):focus-visible {outline:3px solid var(--pink-deep,#8f3f5f);outline-offset:3px} @media(max-width:900px){ #locatii.locations-editorial .location-map-grid {grid-template-columns:minmax(0,1fr);gap:28px;max-width:680px;margin-inline:auto} #locatii.locations-editorial .location-timeline {width:min(500px,100%);max-width:620px} #locatii.locations-editorial .event-map-content {padding:22px 12px} #locatii.locations-editorial .event-map-frame {height:200px} #locatii.locations-editorial :is(.location-slider-viewport,.location-editorial-cover,.event-map-frame.location-map-cover) {height:auto;aspect-ratio:16/9} #locatii.locations-editorial .has-map-cover .location-map-cover {flex:none;min-height:0} #locatii.locations-editorial .has-map-cover .map-actions {padding-top:0;margin-top:4px} } @media(max-width:480px){ #locatii.locations-editorial .event-map-card {padding:10px;border-radius:21px} #locatii.locations-editorial .location-timeline {gap:0;margin-block:18px 14px!important} #locatii.locations-editorial .timeline-item {width:116px;min-height:116px;max-width:116px;flex-basis:116px;padding:10px} #locatii.locations-editorial .timeline-item > span {min-width:0;font-size:26px} #locatii.locations-editorial .timeline-item p {font-size:10px} #locatii.locations-editorial .timeline-line {min-width:12px} #locatii.locations-editorial .event-map-content {padding:18px 6px} #locatii.locations-editorial .event-map-content h3 {font-size:36px} #locatii.locations-editorial .event-map-content .location-name {font-size:15px} #locatii.locations-editorial .map-actions {gap:10px} #locatii.locations-editorial .map-btn {font-size:12px;letter-spacing:.02em;min-width:100px;padding:12px 8px} #locatii.locations-editorial .location-slider-arrow {width:44px;height:44px} }
:root{--finish-rose:#ac4f73;--finish-edge:#e8bbcf;--finish-ink:#193f2d;--finish-shadow:0 2px 3px #8f3f5f12,0 15px 32px -18px #71384f55} #intro.ia-reference-letter .intro-content{max-width:820px!important} .ia-reference-letter .stationery-scene{width:680px;max-width:100%;--pocket-height:559.64px;--reference-paper-width:666.4px} .ia-reference-letter .stationery-letter{width:98%;padding:350px 50px 112px} .ia-reference-letter.has-refined-peonies .stationery-floral{top:78px;left:5%;right:5%;height:248px;overflow:hidden;border-radius:24px 24px 0 0;mask-image:none;-webkit-mask-image:none} .ia-reference-letter.has-refined-peonies .stationery-floral .refined-peonies{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center top;opacity:1;filter:none} .ia-reference-letter .stationery-letter-title{text-wrap:balance} .ia-reference-letter .stationery-letter-message{max-width:490px;margin-inline:auto;text-wrap:pretty} .language-switcher{border:0!important;border-radius:0!important;background:#fff1f7f0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:2px!important;gap:2px!important;min-height:48px;top:max(12px,env(safe-area-inset-top))!important;right:max(12px,env(safe-area-inset-right))!important} .language-switcher a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px!important;min-height:44px!important;width:auto!important;height:auto!important;padding:10px 8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#786370!important;font:600 12px/1.3 'Montserrat',sans-serif!important;letter-spacing:.07em;transform:none!important} .language-switcher a::before{display:none!important} .language-switcher a::after{content:'';position:absolute;inset:auto 8px 5px;height:2px;background:var(--finish-rose);opacity:0;transform:scaleX(.5);transition:opacity .2s,transform .2s} .language-switcher a[aria-current=page],.language-switcher a.active,.language-switcher a.is-active{color:var(--finish-rose)!important} .language-switcher a[aria-current=page]::after,.language-switcher a.active::after,.language-switcher a.is-active::after{opacity:1;transform:scaleX(1)} .language-switcher span{font-size:12px!important;color:#ac8799!important} .language-switcher a:focus-visible{outline:2px solid var(--finish-rose)!important;outline-offset:-1px} .quick-nav,body.show-quick-nav .quick-nav{border:1px solid #e8bbcfb3!important;border-radius:8px!important;background:#fff8fcf5!important;box-shadow:0 8px 28px #71384f1c!important;padding:4px 8px!important;gap:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .quick-nav a{position:relative;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:#74616c!important;min-height:44px!important;font-weight:500!important} .quick-nav a::before{display:none!important} .quick-nav a::after{content:'';position:absolute;inset:auto 12px 4px;height:2px;background:var(--finish-rose);opacity:0} .quick-nav a.active,.quick-nav a.is-active,.quick-nav a[aria-current=true],.quick-nav a[aria-current=page]{background:transparent!important;color:var(--finish-rose)!important;font-weight:600!important} .quick-nav a.active::after,.quick-nav a.is-active::after,.quick-nav a[aria-current=true]::after{opacity:1} .quick-nav a:focus-visible{outline:2px solid var(--finish-rose);outline-offset:-2px} .reference-ornament.is-simple-heart img{width:22px!important;height:22px!important;filter:none!important;animation:ia-soft-heart 6s ease-in-out infinite!important;transform-origin:center} .ia-reference-letter .reference-letter-heart.is-simple-heart{width:22px;height:22px} .ia-reference-letter .reference-letter-heart.is-simple-heart img{width:22px!important;height:22px!important} .reference-mounted-heart.is-simple-heart{width:24px!important;height:24px!important;right:20px;bottom:20px} .reference-mounted-heart.is-simple-heart img{width:24px!important;height:24px!important} .reference-form-heart-one.is-simple-heart{top:12px;right:18px;rotate:0deg} .reference-form-heart-two.is-simple-heart{display:none!important} #confirmare .rsvp-heart-bullet.is-simple-heart{width:22px!important;min-width:22px!important;max-width:22px!important} #confirmare .rsvp-heart-bullet.is-simple-heart img{width:20px!important;height:20px!important} @keyframes ia-soft-heart{0%,40%,100%{transform:scale(1)}50%{transform:scale(1.055)}60%{transform:scale(1)}} #poveste .story-redesign-card{perspective:1800px;filter:drop-shadow(0 12px 14px #71384f18)} #poveste .story-redesign-content{background-color:#fff8fc!important;background-image:linear-gradient(90deg,#81425712,transparent 24px),var(--refinement-paper-grain)!important;background-size:100% 100%,600px auto!important;box-shadow:inset 1px 0 #fff,3px 5px 10px #71384f0e!important} .reference-album-leaf{background-color:#fff8fc;background-image:var(--refinement-paper-grain);background-size:600px auto;box-shadow:inset -10px 0 16px -16px #71384f88} #poveste .story-redesign-media{box-shadow:0 1px 0 #fff,0 3px 8px #71384f24!important;border-width:2px;border-color:#eac7d7;padding:2px} .reference-album-binding{filter:drop-shadow(0 2px 1px #71384f30)} #poveste .story-redesign-poem{background-color:#fff8fc!important;border:1px solid #edd1de!important;box-shadow:var(--finish-shadow)!important} #familie .family-feature-card{width:min(1280px,100%)!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;gap:24px!important;padding:14px!important;margin-top:12px!important} #familie .family-feature-media{height:360px!important;margin:0!important;transform:translateY(-7px);border-radius:16px!important;box-shadow:0 5px 12px #71384f24!important} #familie .family-feature-media img{object-position:center 20%!important} #familie .family-feature-copy{padding:24px 18px!important} #familie .family-feature-copy h3{font-size:clamp(36px,3.25vw,48px)!important;line-height:1.2!important} #familie :is(.family-feature-card,.family-mini-card){box-shadow:var(--finish-shadow)!important;background-image:var(--refinement-paper-grain)!important;background-size:700px auto!important} #familie .family-mini-card{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s} #galerie .mosaic-item{box-shadow:0 1px 0 #fff,0 5px 14px #71384f20!important;outline:1px solid #e9bed1;outline-offset:2px} #locatii.locations-editorial .location-map-grid{gap:32px;margin-top:30px} #locatii.locations-editorial .event-map-card{box-shadow:var(--finish-shadow)!important;background-image:var(--refinement-paper-grain)!important;background-size:700px auto!important} #locatii .location-schedule{display:flex;align-items:center;justify-content:flex-start;gap:18px;width:100%;padding:6px 0 17px;margin:0 0 18px;border-bottom:1px solid var(--finish-edge);text-align:left} #locatii .location-schedule time{font:500 32px/1 'Cormorant Garamond',serif;color:var(--finish-rose);font-variant-numeric:tabular-nums;flex:none} #locatii .location-schedule span{font:500 12px/1.6 'Montserrat',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#68505e;max-width:220px} #locatii .location-placeholder-caption{font:400 11px/1.6 'Montserrat',sans-serif;color:#786370;text-align:center;margin:8px 8px 0} #locatii.locations-editorial .location-editorial-cover.location-placeholder{height:clamp(220px,18.5vw,275px)!important;aspect-ratio:auto!important} #locatii.locations-editorial .location-placeholder img{object-position:center top} #locatii.locations-editorial .event-map-content{padding:22px 12px;align-items:stretch;text-align:left} #locatii.locations-editorial .map-actions{gap:16px;border-top:1px solid #edcfdd;padding-top:12px;margin-top:auto} #locatii.locations-editorial .map-btn{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--finish-rose)!important;min-height:48px;padding:10px 4px!important;letter-spacing:.025em;font-weight:600;position:relative;flex:0 1 auto} #locatii.locations-editorial .map-btn::after{content:''!important;position:absolute;inset:auto 14px 6px;height:1px;background:#cf8aa8;transform:none!important;opacity:.6!important} #locatii.locations-editorial .map-btn:hover{color:#793650!important} #locatii.locations-editorial .location-slider-arrow{border-radius:6px!important;border:1px solid #e7b6cb!important;box-shadow:0 2px 7px #71384f22!important} #meniu .reference-menu-grid{align-items:start} .reference-menu-illustration{margin-top:-12px} .reference-menu-illustration figcaption{bottom:13.5%;font-size:clamp(23px,2.3vw,33px);width:48%;left:20%;line-height:1.25} #meniu .accordion-item{border-radius:7px!important;box-shadow:0 2px 5px #71384f12!important;border-color:#e4b0c8!important;background:#fff8fc!important} #meniu .accordion-button{font-size:16px!important;min-height:62px;padding:14px 20px!important;background:#fff8fc!important;transition:background .25s,color .25s} #meniu .accordion-item.is-open .accordion-button{background:#fcf0f6!important;color:#953e60!important;border-bottom:1px solid #edcfdd} #meniu .accordion-button i,#meniu .accordion-button[aria-expanded=true] i{font-size:0!important;width:22px!important;height:22px!important;flex:0 0 22px!important;background:none!important;box-shadow:none!important;position:relative;transform:none!important;border:0!important} #meniu .accordion-button i::before{content:''!important;position:absolute;inset:3px;background:var(--finish-rose)!important;mask:var(--refinement-chevron) center/contain no-repeat;-webkit-mask:var(--refinement-chevron) center/contain no-repeat;transform:none!important;transition:transform .25s} #meniu .accordion-button[aria-expanded=true] i::before{transform:rotate(180deg)!important} #meniu .accordion-button i::after{display:none!important} #meniu .accordion-panel{padding-inline:20px!important} #confirmare .rsvp-form .btn-primary{border-radius:7px!important;background:linear-gradient(180deg,#b55c81,#a0496c)!important;color:#fff!important;border:1px solid #984060!important;box-shadow:inset 0 1px #ffffff38,0 3px 7px #71384f22!important;min-height:56px!important;transform:none!important;transition:background .25s,box-shadow .25s} #confirmare .rsvp-form .btn-primary:hover{background:#954160!important;box-shadow:inset 0 1px #ffffff38,0 4px 10px #71384f2b!important} #confirmare .rsvp-form .btn-primary:disabled{opacity:.6;cursor:wait} #confirmare .rsvp-form :is(input:not([type=checkbox]),select,textarea){border-radius:6px!important;background:#fffdfef2!important} .reference-rsvp-form-shell{box-shadow:var(--finish-shadow);border-radius:22px} .back-to-top{width:44px!important;height:44px!important;min-width:44px;border-radius:6px!important;box-shadow:0 3px 10px #71384f20!important;background:#fff8fcf5!important;font-size:0!important} .back-to-top::before{content:'';position:absolute;inset:13px;background:var(--finish-rose);mask:var(--refinement-arrow) center/contain no-repeat;-webkit-mask:var(--refinement-arrow) center/contain no-repeat} #confirmare{padding-bottom:0!important;background:#fff1f7!important;overflow:clip} #confirmare .confirm-grid{row-gap:20px!important} .invitation-closing{grid-column:1/-1;text-align:center;position:relative;padding:24px 16px max(112px,calc(80px + env(safe-area-inset-bottom)));background:#fff1f7} .invitation-closing p{font:400 clamp(29px,3.4vw,46px)/1.3 'Allura','Great Vibes',cursive;color:var(--finish-ink);max-width:760px;margin:12px auto 0;text-wrap:balance} .reference-rsvp-illustration{margin-top:0;overflow:visible;border-radius:0!important} .reference-rsvp-illustration>img{border-radius:0!important;mask-image:linear-gradient(#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(#000 88%,transparent 100%)} @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ #familie .family-mini-card:hover{transform:translateY(-3px);box-shadow:0 3px 5px #71384f10,0 20px 35px -18px #71384f55!important} } @media(max-width:1000px){ #intro.ia-reference-letter{padding-inline:20px!important} .ia-reference-letter .stationery-scene{width:min(740px,calc(100vw - 40px));max-width:740px;--pocket-height:calc(min(740px,100vw - 40px)*.823);--reference-paper-width:calc(min(740px,100vw - 40px)*.98)} .ia-reference-letter .stationery-letter{padding:350px 48px 112px} .ia-reference-letter .stationery-letter-names{font-size:clamp(54px,8vw,72px)} .ia-reference-letter.has-refined-peonies .stationery-floral{height:248px} #familie .family-feature-card{grid-template-columns:1fr 1fr!important;gap:16px!important} #familie .family-feature-media{height:330px!important} #familie .family-feature-copy{padding:18px 8px!important} #meniu .accordion-button{font-size:15px!important} } @media(max-width:860px){ #poveste .story-redesign-card{--book-photo-height:clamp(300px,72vw,440px)} #poveste .story-redesign-media{height:var(--book-photo-height)!important;margin:12px!important} .reference-album-leaf{height:calc(var(--book-photo-height) + 24px)} .reference-album-binding{display:flex;flex-direction:row;justify-content:space-between;left:calc(50% - 70px);top:calc(var(--book-photo-height) + 12px);width:140px;height:24px} .reference-album-binding img{width:44px;height:auto;object-fit:contain;transform:rotate(90deg)} #poveste .story-redesign-content{padding-top:34px!important;background-image:linear-gradient(#81425710,transparent 22px),var(--refinement-paper-grain)!important} #confirmare .confirm-copy{display:contents} #confirmare .confirm-copy>.section-kicker{order:0;text-align:center} #confirmare .confirm-copy>h2{order:1;text-align:center;max-width:620px!important;margin:0 auto!important} #confirmare .confirm-copy>.reference-ornament{order:2;margin:0 auto!important} #confirmare .confirm-copy>.rsvp-heart-list{order:3;margin:10px 0 20px!important} #confirmare .reference-rsvp-form-shell{order:4} #confirmare .reference-rsvp-illustration{order:5;width:calc(100% + 24px);max-width:620px;margin:0 -12px -38px;justify-self:center} #confirmare .invitation-closing{order:6} #confirmare .reference-rsvp-illustration figcaption{font-size:clamp(28px,5vw,38px)} } @media(max-width:900px){#locatii.locations-editorial .location-editorial-cover.location-placeholder{height:auto!important;aspect-ratio:3/2!important}} @media(max-width:600px){ #intro.ia-reference-letter{padding:100px 8px 36px!important} .ia-reference-letter .stationery-scene{width:100%;max-width:none;--pocket-height:calc((100vw - 16px)*.823);--reference-paper-width:calc((100vw - 16px)*.98)} .ia-reference-letter .stationery-letter{width:98%;padding:clamp(190px,55vw,290px) 26px 86px} .ia-reference-letter.has-refined-peonies .stationery-floral{top:42px;left:5%;right:5%;height:clamp(150px,47vw,258px);border-radius:18px 18px 0 0} .ia-reference-letter.has-refined-peonies .stationery-floral .refined-peonies{object-fit:contain} .ia-reference-letter .stationery-letter-names{font-size:clamp(39px,11.5vw,65px)} .ia-reference-letter .stationery-letter-message{font-size:14px;line-height:1.8} #intro.ia-reference-letter .open-hint{max-width:calc(100% - 28px);margin-inline:auto!important} #poveste .story-redesign-shell,#galerie .gallery-shell,#meniu .reference-menu-grid,#confirmare .confirm-grid{width:calc(100% - 28px)!important} .reference-complete :is(.container,.gallery-shell){width:calc(100% - 28px)!important} #poveste .story-redesign-card{--book-photo-height:clamp(280px,82vw,380px)} #poveste .story-redesign-content{padding:34px 22px 26px!important} #poveste .story-redesign-content h3{font-size:38px!important;line-height:1.15!important} #familie .family-feature-card{grid-template-columns:1fr!important;padding:12px!important;gap:4px!important} #familie .family-feature-media{height:clamp(290px,94vw,380px)!important;transform:translateY(-5px)} #familie .family-feature-copy{padding:12px 10px 18px!important} #familie .family-feature-copy h3{font-size:40px!important} #locatii.locations-editorial .event-map-card{padding:10px} #locatii .location-schedule{gap:14px;padding-bottom:14px} #locatii .location-schedule time{font-size:32px} #locatii .location-schedule span{font-size:11px} #meniu .accordion-button{padding:14px 16px!important;font-size:15px!important;min-height:60px} #meniu .accordion-panel{padding-inline:16px!important} .reference-menu-illustration{margin-top:-16px;max-width:330px;width:88%} .reference-menu-illustration figcaption{bottom:13%;font-size:26px} #confirmare .rsvp-form :is(input:not([type=checkbox]),select,textarea){font-size:16px!important} #confirmare .confirm-copy h2{font-size:47px!important} #confirmare .rsvp-form .btn-primary{font-size:14px!important;padding:12px!important} .invitation-closing{padding-top:18px} .invitation-closing p{font-size:32px} .quick-nav,body.show-quick-nav .quick-nav{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));width:calc(100% - 24px)!important;max-width:480px!important;padding:4px!important;overflow:visible!important} .quick-nav a{min-width:0!important;font-size:clamp(9px,2.5vw,10px)!important;letter-spacing:0!important;padding:10px 3px!important;justify-content:center} } @media(prefers-reduced-motion:reduce){.reference-ornament.is-simple-heart img{animation:none!important}#familie .family-mini-card,#meniu .accordion-button,#meniu .accordion-button i::before,.language-switcher a::after{transition:none!important}}
:root{--paper-178:#fffafc;--paper-edge-178:#e9dde1;--paper-shadow-178:0 3px 4px #57344412,0 18px 28px -15px #57344442} #intro.ia-reference-letter .stationery-envelope{perspective:1700px} #intro.ia-reference-letter .intro-content{width:100%!important} #intro.ia-reference-letter .stationery-letter{padding:280px 44px 108px;border:1px solid #e8d7df!important;border-radius:5px!important;background-color:var(--paper-178)!important;background-image:var(--refinement-paper-grain)!important;background-size:640px auto!important;box-shadow:inset 0 0 0 1px #ffffffc9,0 2px 0 #d5b8c4,0 4px 0 #fff8fc,0 16px 32px -12px #71384f55!important} #intro.ia-reference-letter .stationery-letter::before{display:block!important;content:'';position:absolute;inset:9px;border:1px solid #e6d4dc80;border-radius:2px;pointer-events:none} #intro .stationery-letter .reference-envelope-open{display:none} #intro.ia-reference-letter.has-refined-peonies .stationery-floral{top:0;left:0;right:0;height:260px;border-radius:4px 4px 0 0} #intro.ia-reference-letter.has-refined-peonies .stationery-floral .refined-peonies{object-fit:cover;object-position:center top} #intro.ia-reference-letter .stationery-letter-message{font-size:16px;line-height:1.8;color:#594b53} #intro.ia-reference-letter .stationery-rule{margin:20px auto} #intro.ia-reference-letter .stationery-address span{text-shadow:0 1px #fff9} #intro.ia-reference-letter .reference-envelope-base{filter:drop-shadow(0 5px 5px #71384f26);transition:clip-path 750ms cubic-bezier(.24,.7,.24,1) 320ms,opacity 300ms} #intro.ia-reference-letter.open .reference-envelope-base{opacity:1;transform:none;clip-path:polygon(0 76%,10% 100%,90% 100%,100% 76%,100% 100%,0 100%)} #intro.ia-reference-letter.opening .stationery-envelope{animation:none!important} #intro.ia-reference-letter.opening .stationery-letter{animation:ia-paper-rise-178 1450ms cubic-bezier(.22,.67,.24,1) both!important} #intro.ia-reference-letter.opening .reference-envelope-flap{animation:ia-flap-hinge-178 1000ms 130ms cubic-bezier(.32,.1,.18,1) both!important} #intro.ia-reference-letter.opening .stationery-seal{animation:ia-wax-lift-178 750ms ease-in-out both!important;transition:none!important} #intro.ia-reference-letter.opening .stationery-floral img{animation:none!important} #intro.ia-reference-letter.opened .stationery-letter{animation:none!important;transform:none!important} @keyframes ia-paper-rise-178{0%,22%{opacity:0;transform:translate3d(0,110px,0) rotateX(4deg)}40%{opacity:1;transform:translate3d(0,64px,0) rotateX(2deg)}82%{opacity:1;transform:translate3d(0,-3px,0)}100%{opacity:1;transform:none}} @keyframes ia-flap-hinge-178{0%{opacity:1;transform:rotateX(0deg)}65%{opacity:1;transform:rotateX(-170deg)}85%{opacity:.5;transform:rotateX(-176deg)}100%{opacity:0;transform:rotateX(-174deg)}} @keyframes ia-wax-lift-178{0%{opacity:1;transform:translate3d(-50%,calc(-1*(var(--pocket-height)*var(--reference-seal-rise) - var(--seal-size)/2 + 5px)),0) rotate(-9deg)}30%{opacity:1;transform:translate3d(-50%,calc(-1*(var(--pocket-height)*var(--reference-seal-rise) - var(--seal-size)/2 + 19px)),28px) rotate(-15deg)}100%{opacity:0;transform:translate3d(-45%,calc(-1*(var(--pocket-height)*var(--reference-seal-rise) - var(--seal-size)/2 + 26px)),35px) rotate(-23deg)}} #poveste .wedding-countdown{width:min(580px,100%);margin:10px auto 26px;color:var(--finish-rose)} #poveste .countdown-units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0} #poveste .countdown-units>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:2px 12px;min-width:0;position:relative} #poveste .countdown-units>div+div::before{content:'';position:absolute;left:0;top:15%;height:65%;width:1px;background:#c88ba77a} #poveste .countdown-units dd{order:0;margin:0;font:500 clamp(36px,4vw,56px)/1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum';color:var(--finish-rose)} #poveste .countdown-units dt{order:1;font:500 11px/1.5 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--finish-ink);max-width:100%;overflow-wrap:anywhere} #poveste .countdown-complete{font:italic 500 24px/1.4 'Cormorant Garamond',serif;margin:14px 0 0} #poveste .countdown-complete[hidden]{display:none} #poveste .story-bound-book{isolation:isolate;padding:28px 34px 40px!important;border-radius:0!important;filter:none!important;transform-style:flat!important;gap:0!important;box-shadow:0 20px 24px -19px #71384f66!important;background:transparent!important;contain:layout!important} #poveste .story-bound-book::before{content:''!important;display:block!important;position:absolute;inset:0;z-index:-1;background:var(--stationery-book-art) center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;opacity:1!important;box-shadow:none!important;transform:none!important;pointer-events:none} #poveste .story-bound-book::after{display:none!important} #poveste .story-bound-book{perspective:none!important} #poveste .story-bound-book .story-redesign-content{transform:none!important;backface-visibility:visible!important} #poveste .story-book-photo{position:relative;min-width:0;display:flex;padding:18px 36px 18px 22px;align-items:stretch} #poveste .story-bound-book .story-redesign-media{position:relative;margin:0!important;min-height:430px!important;height:auto!important;width:100%;aspect-ratio:auto!important;border:7px solid #fffaf8!important;border-radius:1px!important;padding:0!important;overflow:hidden;background:#fffaf8;box-shadow:0 1px 3px #57443944!important;transform:rotate(-.55deg)} #poveste .story-bound-book .story-redesign-media img{border-radius:0!important;filter:none!important;object-position:center!important} #poveste .story-bound-book .story-redesign-content{padding:20px 30px 20px 40px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;align-self:center;min-width:0} #poveste .story-bound-book .story-redesign-content::before,#poveste .story-bound-book .story-redesign-content::after{display:none!important} #poveste .story-bound-book .story-redesign-label{font:500 12px/1.5 'Montserrat',sans-serif;letter-spacing:.2em;color:var(--finish-rose)} #poveste .story-bound-book .story-redesign-content h3{font-size:48px!important;line-height:1.16!important;max-width:490px;margin-bottom:22px!important} #poveste .story-bound-book .story-redesign-text p{font:400 21px/1.46 'Cormorant Garamond',Georgia,serif!important;color:#493f42!important;margin-bottom:16px!important} #poveste .story-bound-book .reference-small-divider{margin:10px auto 16px} #familie :is(.family-feature-card,.family-mini-card){border:1px solid #e9dfe4!important;border-radius:3px!important;background-color:var(--paper-178)!important;background-image:var(--refinement-paper-grain)!important;box-shadow:inset 0 0 0 1px #fff,0 2px 0 #e2d6dd,var(--paper-shadow-178)!important;overflow:visible!important;transform-style:flat!important} #familie :is(.family-feature-card,.family-mini-card)::after{inset:9px!important;border:1px solid #e9e0e4!important;border-image:none!important;box-shadow:0 1px #fff,inset 0 1px #fff!important;z-index:0!important} #familie .family-feature-card{padding:24px!important;gap:28px!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important} #familie .family-feature-media{height:360px!important;border:8px solid #fff!important;border-radius:1px!important;outline:1px solid #e8dfe3;transform:translateY(-4px);box-shadow:0 2px 4px #71384f26!important;z-index:1} #familie .family-feature-media img{border-radius:0!important} #familie .family-mini-card{padding:22px 20px 26px!important;min-width:0} #familie .family-mini-media{border:7px solid #fff!important;border-radius:1px!important;outline:1px solid #e8dfe3;margin:0!important;z-index:1;box-shadow:0 2px 4px #71384f20!important} #familie .family-mini-media img{border-radius:0!important} #familie :is(.family-feature-copy,.family-mini-copy){position:relative;z-index:1} #familie .family-mini-copy{padding:20px 10px 8px!important} #familie .family-role{font-size:12px!important;letter-spacing:.15em!important} #familie .reference-small-divider{margin:14px auto 12px!important;width:110px!important} #familie .family-mini-copy h3{font-size:clamp(35px,3.3vw,48px)!important;line-height:1.2!important} #familie .family-mini-copy>div{font-size:14px;line-height:1.75} #locatii.locations-editorial .map-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:16px} #locatii.locations-editorial :is(.map-btn,.map-btn:hover,.map-btn:active,.map-btn:focus){min-width:132px;flex:1 1 132px;min-height:48px!important;border:1px solid #ddbdcd!important;border-radius:4px!important;background:#fffafc!important;color:#963c60!important;padding:12px 16px!important;box-shadow:inset 0 1px #fff!important;transition:none!important;animation:none!important;transform:none!important;translate:none!important;scale:none!important;rotate:none!important;font:600 13px/1.4 'Montserrat',sans-serif;letter-spacing:0} #locatii.locations-editorial .map-btn::after{display:none!important} #locatii.locations-editorial .map-btn::before{transition:none!important;animation:none!important;transform:none!important} #locatii.locations-editorial .event-map-card:has(.map-btn:hover){transform:none!important;translate:none!important;transition:none!important} #locatii.locations-editorial .map-btn:focus-visible{outline:2px solid #963c60!important;outline-offset:3px!important} #meniu .reference-menu-illustration figcaption{left:29%!important;width:50%!important;text-align:center!important;transform:rotate(-12deg)!important;transform-origin:center} #confirmare .confirm-copy{overflow:visible!important} #confirmare .contact-letter-complete{container-type:inline-size;width:calc(100% + min(3vw,44px))!important;max-width:none!important;margin:12px 0 0 calc(-1 * min(3vw,44px))!important;position:relative;overflow:visible!important;align-self:start;border-radius:0!important} #confirmare .contact-letter-complete>img{display:block;width:100%;height:auto!important;max-width:100%;object-fit:contain!important;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);border-radius:0!important} #confirmare .contact-letter-complete figcaption{top:49%!important;left:33.3%!important;bottom:auto!important;width:40%!important;max-height:none;white-space:normal;color:#193f2d!important;font:400 clamp(17px,4.8cqw,36px)/1.2 'Allura','Great Vibes',cursive!important;transform:translateY(-50%) rotate(-14deg)!important;transform-origin:center;text-align:center;text-wrap:balance;overflow-wrap:anywhere;margin:0} #confirmare .contact-letter-complete.has-long-note figcaption{position:relative;top:auto!important;left:auto!important;transform:none!important;width:88%!important;margin:-8% auto 0;padding:22px 18px;background:var(--paper-178);background-image:var(--refinement-paper-grain);font-size:clamp(24px,5cqw,36px)!important;border:1px solid #e8d7df;box-shadow:var(--paper-shadow-178);border-radius:3px} @media(max-width:1100px){ #poveste .story-bound-book{padding:24px 24px 30px!important} #poveste .story-book-photo{padding:14px 24px 14px 12px} #poveste .story-bound-book .story-redesign-content{padding:18px 16px 18px 26px!important} #poveste .story-bound-book .story-redesign-content h3{font-size:42px!important} #poveste .story-bound-book .story-redesign-text p{font-size:20px!important} #familie .family-feature-card{padding:22px!important;gap:20px!important} #familie .family-mini-card{padding:18px 16px 24px!important} #familie .family-mini-copy{padding-inline:4px!important} } @media(max-width:860px){ #poveste .story-bound-book{display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:0!important;gap:14px!important;box-shadow:none!important} #poveste .story-bound-book::before{display:none!important} #poveste .story-bound-book .story-book-photo,#poveste .story-bound-book .story-redesign-content{background:var(--stationery-book-art) right center/200% 100% no-repeat!important;padding:28px 32px 38px!important;box-shadow:0 15px 20px -18px #71384f88!important} #poveste .story-bound-book .story-redesign-media{min-height:0!important;height:clamp(320px,75vw,540px)!important;margin:0!important} #poveste .story-bound-book .story-redesign-content h3{font-size:44px!important;max-width:530px} #poveste .story-bound-book .story-redesign-text{max-width:540px;margin:auto} #poveste .story-bound-book .story-redesign-text p{font-size:21px!important;line-height:1.5!important} #familie .family-mini-card{padding:24px!important} #confirmare .contact-letter-complete{order:5;width:calc(100% + 20px)!important;max-width:660px!important;margin:0 -10px!important;justify-self:center} } @media(max-width:600px){ #intro.ia-reference-letter .stationery-letter{padding:clamp(166px,47vw,258px) 24px 85px!important;width:96%!important} #intro.ia-reference-letter.has-refined-peonies .stationery-floral{height:clamp(165px,47vw,258px)!important} #intro.ia-reference-letter.has-refined-peonies .stationery-floral .refined-peonies{object-fit:contain} #intro.ia-reference-letter .stationery-letter-message{font-size:14px!important;line-height:1.8} #intro.ia-reference-letter .stationery-letter-names{font-size:clamp(40px,11.5vw,64px)!important} #intro.ia-reference-letter .stationery-letter-title{font-size:16px!important} #intro.ia-reference-letter .stationery-rule{margin:16px auto!important} #poveste .wedding-countdown{margin:18px auto 24px} #poveste .countdown-units>div{padding:0 6px;gap:6px} #poveste .countdown-units dd{font-size:clamp(34px,10vw,46px)} #poveste .countdown-units dt{font-size:10px;letter-spacing:.07em} #poveste .story-bound-book .story-book-photo,#poveste .story-bound-book .story-redesign-content{padding:24px 24px 32px!important} #poveste .story-bound-book .story-redesign-media{height:clamp(300px,85vw,410px)!important;border-width:5px!important} #poveste .story-bound-book .story-redesign-content h3{font-size:38px!important;line-height:1.17!important} #poveste .story-bound-book .story-redesign-text p{font-size:20px!important;line-height:1.5!important} #poveste .story-bound-book .story-redesign-label{font-size:11px;letter-spacing:.14em} #familie .family-feature-card{grid-template-columns:minmax(0,1fr)!important;padding:20px!important;gap:6px!important} #familie .family-feature-media{height:clamp(285px,85vw,370px)!important;border-width:6px!important} #familie .family-feature-copy{padding:14px 6px 20px!important} #familie .family-mini-card{padding:20px!important} #familie .family-mini-copy h3{font-size:43px!important} #confirmare .contact-letter-complete figcaption{font-size:clamp(16px,4.8cqw,27px)!important;line-height:1.2!important;width:41%!important;left:33%!important} #confirmare .contact-letter-complete.has-long-note figcaption{font-size:26px!important;width:88%!important;left:auto!important} } @media(prefers-reduced-motion:reduce){ #intro.ia-reference-letter :is(.stationery-envelope,.stationery-letter,.stationery-seal,.reference-envelope-base,.reference-envelope-flap){animation:none!important;transition:none!important} }
:root { --reading-emerald: #28634f; --reading-copy: #365f53; --reference-green: var(--reading-emerald); --reference-copy: var(--reading-copy); --finish-ink: var(--reading-emerald); --finish-copy: var(--reading-copy); --section-ink: var(--reading-emerald); --section-copy: var(--reading-copy); --atelier-ink: var(--reading-emerald); --atelier-body: var(--reading-copy); } #intro.ia-reference-letter .stationery-letter-message, #poveste .story-bound-book .story-redesign-text p, #poveste .story-redesign-poem p, #locatii.locations-editorial .event-map-content :is(p, .location-name, .location-address), #locatii .location-schedule span, #confirmare .rsvp-form :is(label, .form-helper, small, input, select, textarea), #meniu .accordion-button { color: var(--reading-copy) !important; } #meniu .reference-menu-illustration figcaption { color: var(--reading-emerald); } #poveste .story-bound-book { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: center !important; transform: none !important; padding: 36px 34px 52px !important; } #poveste .story-bound-book .story-book-photo { padding: 20px 34px 20px 18px; } #poveste .story-bound-book .story-redesign-media { height: clamp(420px, 43vw, 580px) !important; min-height: 0 !important; } #poveste .story-bound-book .story-redesign-content { padding: 24px 28px 30px 38px !important; text-align: left; } #poveste .story-bound-book .story-redesign-label { display: block; margin: 0 0 10px; font-size: 11px !important; letter-spacing: .15em !important; } #poveste .story-bound-book .reference-small-divider { margin: 8px 0 18px !important; } #poveste .story-bound-book .story-redesign-content h3 { font-size: clamp(32px, 3vw, 42px) !important; line-height: 1.25 !important; max-width: 24ch; margin: 0 0 24px !important; text-align: left; text-wrap: pretty; overflow-wrap: break-word; } #poveste .story-bound-book .story-redesign-content h3 > span { display: inline !important; } #poveste .story-bound-book .story-redesign-text { display: block; max-width: 48ch; margin: 0; } #poveste .story-bound-book .story-redesign-text p { font: 400 14px/1.85 'Montserrat', sans-serif !important; margin: 0 0 18px !important; text-align: left; text-wrap: pretty; overflow-wrap: break-word; } #poveste .story-bound-book .story-redesign-text p:last-child { margin-bottom: 0 !important; } #locatii.locations-editorial .event-map-card { padding: 14px !important; border: 1px solid #e7bdcf !important; border-radius: 28px !important; box-shadow: 0 4px 0 #f4dce7, 0 16px 32px -20px #98466755 !important; overflow: hidden; transform: none !important; } #locatii.locations-editorial .event-map-card::after { display: none !important; } #locatii.locations-editorial :is(.location-slider-viewport, .location-editorial-cover, .location-editorial-cover.location-placeholder, .event-map-frame.location-map-cover) { height: clamp(340px, 30vw, 420px) !important; min-height: 0 !important; aspect-ratio: auto !important; border-radius: 18px !important; } #locatii.locations-editorial .location-photo-slider { border-radius: 18px !important; } #locatii.locations-editorial .location-placeholder img { object-position: center; } #locatii.locations-editorial .event-map-content { padding: 24px 14px !important; } #locatii .location-schedule { gap: 14px; margin-bottom: 20px; align-items: center; } #locatii .location-schedule time { padding: 12px 16px; border-radius: 16px; background: #fbe3ee; font-size: 30px; } #locatii.locations-editorial .location-editorial-description { margin: 14px 0 22px; } #locatii.locations-editorial .location-editorial-description p { line-height: 1.8; } #locatii.locations-editorial .event-map-frame { height: 270px !important; border-radius: 18px !important; overflow: hidden; } #locatii.locations-editorial .map-actions { gap: 10px; padding-top: 18px; } #locatii.locations-editorial :is(.map-btn, .map-btn:hover, .map-btn:active, .map-btn:focus) { min-height: 52px !important; border-radius: 999px !important; background: #fff6fa !important; border: 1px solid #d99bb7 !important; color: #963c60 !important; padding: 13px 18px !important; font-size: 13px; text-transform: none; transition: background .2s, color .2s, box-shadow .2s !important; } #locatii.locations-editorial .map-btn:hover, #locatii.locations-editorial .map-btn:focus-visible { background: #f8d8e7 !important; color: #81304f !important; box-shadow: 0 4px 12px #ac4f731c !important; } #locatii.locations-editorial .location-slider-arrow { width: 48px; height: 48px; border-radius: 50% !important; color: #963c60; } #locatii.locations-editorial .location-slider-arrow:hover { background: #f8d8e7; } #locatii.locations-editorial .location-slider-dot { width: 44px; height: 44px; border-width: 16px; padding: 0; } #locatii.locations-editorial .location-slider-dots { bottom: 4px; max-width: calc(100% - 24px); } #meniu .accordion-item { border-radius: 20px !important; overflow: hidden; } #meniu .accordion-button { gap: 14px; } #meniu .accordion-button:hover, #meniu .accordion-item.is-open .accordion-button { background: #fbe3ee !important; color: #963c60 !important; } #meniu .accordion-button i, #meniu .accordion-button[aria-expanded=true] i { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 50% !important; background: #f8d8e7 !important; } #meniu .accordion-button i::before, #meniu .accordion-button i::after { content: '' !important; display: block !important; position: absolute; left: 9px; top: 15px; right: auto; bottom: auto; width: 14px; height: 2px; border-radius: 2px; background: #963c60 !important; mask: none !important; -webkit-mask: none !important; transform: none !important; } #meniu .accordion-button i::after { transform: rotate(90deg) !important; transition: opacity .2s; } #meniu .accordion-button[aria-expanded=true] i::before { transform: none !important; } #meniu .accordion-button[aria-expanded=true] i::after { opacity: 0; } #meniu .reference-menu-illustration figcaption { left: 50% !important; width: 70% !important; bottom: 9% !important; transform: translateX(-50%) !important; text-align: center !important; text-wrap: balance; } #confirmare { padding-bottom: max(110px, calc(85px + env(safe-area-inset-bottom))) !important; } #confirmare .contact-thanks { max-width: 24ch; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid #e6b9ce; font: 400 clamp(32px, 3.1vw, 44px)/1.35 'Allura', 'Great Vibes', cursive; color: var(--reading-emerald); text-align: left; text-wrap: pretty; } .quick-nav, body.show-quick-nav .quick-nav { display: flex !important; border-radius: 999px !important; gap: 5px !important; padding: 7px !important; background: #fff8fcf5 !important; } .quick-nav a { border-radius: 999px !important; color: #963c60 !important; min-height: 44px !important; transition: background .2s, color .2s, box-shadow .2s !important; } .quick-nav a::before, .quick-nav a::after { display: none !important; } .quick-nav a:hover, .quick-nav a.is-active, .quick-nav a[aria-current=location] { color: #fff !important; background: linear-gradient(135deg, #ba6187, #a4476d) !important; box-shadow: 0 3px 10px #ac4f7329 !important; } @media (prefers-reduced-motion: no-preference) { .quick-nav a.is-active::after { content: ''; display: block !important; position: absolute; inset: 0; height: auto; border: 1px solid #f8c4dc; border-radius: inherit; background: transparent; opacity: 1; pointer-events: none; animation: rose-nav-pulse 3s ease-in-out infinite; } } @keyframes rose-nav-pulse { 0%, 100% { box-shadow: inset 0 0 0 0 #ffe4f180; opacity: .4; } 60% { box-shadow: inset 0 0 0 4px #ffe4f140; opacity: 1; } } @media (max-width: 1050px) { #poveste .story-bound-book { grid-template-columns: minmax(0, 1fr) !important; width: min(680px, 100%); margin-inline: auto; padding: 0 !important; gap: 30px !important; box-shadow: none !important; } #poveste .story-bound-book::before { display: none !important; } #poveste .story-bound-book :is(.story-book-photo, .story-redesign-content) { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #poveste .story-bound-book .story-redesign-content { width: 100%; padding: 34px 34px 42px !important; isolation: isolate; } #poveste .story-bound-book .story-redesign-content::before { content: ''; display: block !important; position: absolute; inset: 0; z-index: -1; background: none !important; border: 30px solid transparent !important; border-image: var(--mobile-story-page) 100 80 100 100 fill / 30px 24px 30px 30px / 0 stretch !important; } #poveste .story-bound-book .story-book-photo { padding: 0 10px !important; } #poveste .story-bound-book .story-redesign-media { height: auto !important; aspect-ratio: 4/3 !important; transform: none !important; border-width: 9px 9px 24px !important; box-shadow: 0 2px 4px #71384f18, 0 12px 22px -12px #71384f55 !important; } #poveste .story-bound-book .story-redesign-media img { object-position: center 35% !important; } #poveste .story-bound-book .story-redesign-text { max-width: none; } #poveste .story-bound-book .story-redesign-content h3 { font-size: 38px !important; max-width: 28ch; } #poveste .story-bound-book .story-redesign-text p { font-size: 15px !important; } } @media (max-width: 860px) { #confirmare .contact-thanks { order: 3; max-width: 30ch; margin: 0 0 18px; justify-self: start; } } @media (max-width: 600px) { #poveste .story-bound-book { padding: 0 !important; } #poveste .story-bound-book .story-redesign-content { padding: 30px 28px 38px !important; } #poveste .story-bound-book .story-book-photo { padding: 0 8px !important; } #poveste .story-bound-book .story-redesign-media { aspect-ratio: 4/5 !important; } #poveste .story-bound-book .story-redesign-content h3 { font-size: 33px !important; line-height: 1.3 !important; margin-bottom: 22px !important; } #poveste .story-bound-book .story-redesign-label { font-size: 10px !important; } #poveste .story-bound-book .story-redesign-text p { font-size: 14px !important; line-height: 1.85 !important; } #locatii.locations-editorial .event-map-card { padding: 10px !important; border-radius: 24px !important; } #locatii.locations-editorial :is(.location-slider-viewport, .location-editorial-cover, .location-editorial-cover.location-placeholder, .event-map-frame.location-map-cover) { height: clamp(290px, 82vw, 420px) !important; } #locatii.locations-editorial .event-map-content { padding: 22px 10px !important; } #locatii.locations-editorial .event-map-frame { height: 250px !important; } #locatii.locations-editorial :is(.map-btn, .map-btn:hover, .map-btn:active, .map-btn:focus) { min-width: 110px; padding: 12px 10px !important; font-size: 12px; } #meniu .reference-menu-illustration figcaption { font-size: 27px; } .quick-nav, body.show-quick-nav .quick-nav { left: 50% !important; right: auto !important; width: calc(100% - 16px) !important; max-width: 480px !important; gap: 3px !important; padding: 6px !important; overflow: visible !important; transform: translateX(-50%) !important; } .quick-nav a { flex: 1 1 0 !important; min-width: 0 !important; padding: 10px 2px !important; font-size: clamp(9px, 2.45vw, 11px) !important; } } @media (max-width: 360px) { .quick-nav, body.show-quick-nav .quick-nav { width: calc(100% - 12px) !important; padding: 4px !important; gap: 1px !important; } .quick-nav a { padding-inline: 0 !important; min-width: 44px !important; font-size: 9px !important; } } #intro.ia-reference-letter .reference-envelope-base { clip-path: polygon(0 0, 50% 68.5%, 100% 0, 100% 100%, 0 100%); transition: opacity 420ms ease 430ms !important; } #intro.ia-reference-letter.open .reference-envelope-base { clip-path: polygon(0 0, 50% 68.5%, 100% 0, 100% 100%, 0 100%) !important; opacity: 0 !important; transform: none !important; } #intro.ia-reference-letter.opened :is(.stationery-shell-front, .stationery-shell-back) { visibility: hidden; pointer-events: none; } #intro.ia-reference-letter .stationery-envelope { padding-bottom: 14px; } #intro.ia-reference-letter .stationery-letter { padding-bottom: 48px !important; } #intro.ia-reference-letter .open-hint { margin-top: 24px !important; } #intro.ia-reference-letter .scroll-cue[aria-hidden=true] { visibility: hidden; opacity: 0; } @media (max-width: 600px) { #intro.ia-reference-letter .stationery-envelope { padding-top: 12px; padding-bottom: 10px; } #intro.ia-reference-letter .stationery-letter { padding-bottom: 38px !important; } #intro.ia-reference-letter .stationery-letter-names { margin-bottom: 12px; } } @media (prefers-reduced-motion: reduce) { #intro.ia-reference-letter .reference-envelope-base { transition: none !important; } .quick-nav a, .quick-nav a::after, #meniu .accordion-button i::after { animation: none !important; transition: none !important; } } #intro.has-natural-peonies { --peonies-rise: clamp(76px, 14vw, 125px); } #intro.has-natural-peonies .stationery-scene { container-type: inline-size; } #intro.has-natural-peonies.open .stationery-envelope { padding-top: calc(var(--peonies-rise) + 12px) !important; } #intro.ia-reference-letter.has-natural-peonies .stationery-letter { overflow: visible !important; padding-top: calc(66cqw - var(--peonies-rise) + 12px) !important; } #intro.ia-reference-letter.has-natural-peonies .stationery-floral { top: calc(-1 * var(--peonies-rise)) !important; left: -15% !important; right: auto !important; width: 130% !important; height: auto !important; aspect-ratio: 2 / 1; overflow: visible !important; border-radius: 0 !important; background: none !important; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 68%, #000a 82%, transparent 100%), linear-gradient(90deg, transparent 2%, #0009 15%, #000 28%, #000 72%, #0009 85%, transparent 98%) !important; mask-image: linear-gradient(transparent, #000 12%, #000 68%, #000a 82%, transparent 100%), linear-gradient(90deg, transparent 2%, #0009 15%, #000 28%, #000 72%, #0009 85%, transparent 98%) !important; -webkit-mask-composite: source-in; mask-composite: intersect; z-index: 3; pointer-events: none; filter: none !important; mix-blend-mode: multiply; } #intro.ia-reference-letter.has-natural-peonies .stationery-floral .natural-peonies { display: block; width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; filter: none !important; opacity: 1; } #intro.ia-reference-letter.has-natural-peonies.opening .stationery-floral { animation: natural-peonies-lift 1450ms cubic-bezier(.22,.67,.24,1) both; } @keyframes natural-peonies-lift { 0%, 24% { opacity: 0; transform: translateY(30px) scale(.94); } 65% { opacity: 1; transform: translateY(5px) scale(.99); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #intro.ia-reference-letter.has-natural-peonies .stationery-floral { animation: none !important; } } #intro.ia-reference-letter .stationery-letter { isolation: isolate; background: none !important; border: 0 !important; box-shadow: none !important; } #intro.ia-reference-letter .stationery-letter::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: #fff0f5; background-image: radial-gradient(ellipse 36% 65px at 50% 65px, #76556917, transparent 100%), linear-gradient(115deg, #fff5f8c9, #fff0f5b3 48%, #fff5f8cc), var(--letter-velvet) !important; background-size: 100% 100%, 100% 100%, 460px 460px !important; background-repeat: no-repeat, no-repeat, repeat !important; border: 1px solid #d9b4c0 !important; border-radius: 7px !important; box-shadow: inset 0 1px 2px 1px #fff9fc, inset 0 0 12px #c68ea330, 0 2px 0 #cdaab8, 0 4px 0 #fff7fa, 0 9px 12px -9px #56344980, 0 24px 38px -18px #71384f66 !important; -webkit-mask-image: linear-gradient(transparent, #000 100px); mask-image: linear-gradient(transparent, #000 100px); } #intro.ia-reference-letter .stationery-letter::before { inset: 9px; border: 1px dashed #44213f; border-top-color: transparent; border-radius: 3px; box-shadow: 0 1px 1px #fff8fac9, inset 0 1px 1px #fff8fac9; -webkit-mask-image: linear-gradient(transparent, #000 120px); mask-image: linear-gradient(transparent, #000 120px); } #intro.has-velvet-envelope .intro-content { mix-blend-mode: multiply; } #intro.has-velvet-envelope .stationery-scene { container-type: inline-size; mix-blend-mode: multiply; --pocket-height: 100cqw; --reference-seal-rise: .30; --seal-size: clamp(56px, 18cqw, 112px); } #intro.has-velvet-envelope .reference-envelope-closed { mix-blend-mode: multiply; filter: none !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } #intro.has-velvet-envelope .reference-envelope-flap { clip-path: polygon(0 0, 100% 0, 100% 57%, 72% 57%, 50% 78.5%, 28% 57%, 0 57%) !important; transform-origin: 50% 36%; } #intro.has-velvet-envelope .reference-envelope-base, #intro.has-velvet-envelope.open .reference-envelope-base { clip-path: polygon(0 57%, 28% 57%, 50% 78.5%, 72% 57%, 100% 57%, 100% 100%, 0 100%) !important; } #intro.has-velvet-envelope .stationery-address { bottom: calc(var(--pocket-height) * .07); } #intro.has-velvet-envelope .stationery-address span { font-size: clamp(32px, 9cqw, 61px) !important; line-height: 1.1; } #intro.has-velvet-envelope:not(.open) .intro-content { mix-blend-mode: normal; } #intro.has-velvet-envelope.open .intro-content { mix-blend-mode: normal; background: #fff1f7 !important; } #intro.has-velvet-envelope.open .stationery-scene { background: #fff1f7; mix-blend-mode: normal; } #intro.has-velvet-envelope.open .stationery-envelope { background: #fff1f7; mix-blend-mode: normal; } #intro.ia-reference-letter.has-velvet-envelope .stationery-letter { width: 86% !important; max-width: none !important; margin-inline: auto; mix-blend-mode: multiply; } #intro.ia-reference-letter.has-velvet-envelope.has-natural-peonies .stationery-letter { padding-top: calc(59cqw - var(--peonies-rise) + 12px) !important; } #intro.has-velvet-envelope :is(.eyebrow, .open-hint, .scroll-cue) { transition: opacity 380ms ease !important; } @media (max-width: 600px) { #intro.ia-reference-letter.has-velvet-envelope .stationery-letter { padding-inline: 18px !important; } } #intro.has-velvet-envelope:not(.open) .stationery-scene { background: #fff1f7; mix-blend-mode: normal; animation: velvet-float-179 7s ease-in-out infinite; transform-origin: 50% 65%; mask-image: linear-gradient(#000, #000), radial-gradient(ellipse, #000 58%, #000c 73%, transparent 97%); mask-size: 88% 61%, 100% 64%; mask-position: 50% 90%, 50% 0; mask-repeat: no-repeat; } #intro.has-velvet-envelope:not(.open) .stationery-envelope { mix-blend-mode: multiply; transform: perspective(1500px) translate3d(var(--envelope-tx, 0px), var(--envelope-ty, 0px), 0) rotateX(var(--envelope-rx, 0deg)) rotateY(var(--envelope-ry, 0deg)) !important; transition: transform 350ms cubic-bezier(.2,.7,.2,1); cursor: grab; touch-action: none; user-select: none; } #intro.has-velvet-envelope:is(.is-motion-paused, .is-envelope-dragging, :focus-within) .stationery-scene { animation-play-state: paused; } #intro.has-velvet-envelope.is-envelope-dragging .stationery-envelope { cursor: grabbing; transition-duration: 70ms; } #intro.has-velvet-envelope:not(.open) .stationery-seal { transition: transform 180ms ease, filter 180ms ease; transform: translate3d(-50%, 0, 30px) rotate(-9deg); cursor: pointer; touch-action: manipulation; } #intro.has-velvet-envelope:not(.open) .stationery-seal:hover { transform: translate3d(-50%, -3px, 38px) rotate(-5deg) scale(1.05); } #intro.has-velvet-envelope:not(.open) .stationery-seal:active { transform: translate3d(-50%, 2px, 24px) rotate(-9deg) scale(.94); } #intro.has-velvet-envelope.open .stationery-seal { bottom: calc(var(--pocket-height) * var(--reference-seal-rise) - var(--seal-size) / 2) !important; pointer-events: none; } #intro.has-velvet-envelope.opening .stationery-seal { animation: velvet-wax-release-179 480ms ease-in-out both !important; } #intro.has-velvet-envelope.opening .reference-envelope-flap { animation: ia-flap-hinge-178 720ms 160ms cubic-bezier(.32,.1,.18,1) both !important; } #intro.has-velvet-envelope.opening .stationery-letter { animation: ia-paper-rise-178 1250ms cubic-bezier(.22,.67,.24,1) both !important; } #intro.has-velvet-envelope.opening .stationery-floral { animation-duration: 1250ms; } #intro.has-velvet-envelope .reference-envelope-base { transition: opacity 350ms ease 350ms !important; } @keyframes velvet-float-179 { 0%, 100% { transform: perspective(1600px) translateY(0) rotateX(1.5deg) rotateY(-1.6deg) rotateZ(-.4deg); } 50% { transform: perspective(1600px) translateY(-9px) rotateX(-1.5deg) rotateY(1.6deg) rotateZ(.4deg); } } @keyframes velvet-wax-release-179 { 0% { opacity: 1; transform: translate3d(-50%, 0, 30px) rotate(-9deg) scale(1); } 15% { opacity: 1; transform: translate3d(-50%, 2px, 24px) rotate(-10deg) scale(.94); } 45% { opacity: 1; transform: translate3d(-50%, -14px, 60px) rotate(-17deg) scale(1.08); } 100% { opacity: 0; transform: translate3d(-42%, -44px, 90px) rotate(-25deg) scale(1.12); } } @keyframes ia-paper-rise-178 { 0%, 26% { opacity: 0; transform: translateY(58px); } 60% { opacity: 1; transform: translateY(16px); } 90% { opacity: 1; transform: translate3d(0, -1px, 0); } 100% { opacity: 1; transform: none; } } #intro.opening.has-extraction .eyebrow { opacity: 0; } #intro.opening.has-extraction :is(.open-hint, .scroll-cue) { opacity: 0 !important; } #intro.opening.has-extraction .stationery-envelope { overflow: visible !important; background: #fff1f7; mix-blend-mode: normal !important; } #intro.opening.has-extraction :is(.stationery-shell-front, .stationery-shell-back) { mix-blend-mode: multiply; } #intro.opening.has-extraction .stationery-shell-front { z-index: 5; mix-blend-mode: normal; } #intro.opening.has-extraction .stationery-shell-front::before { content: ''; position: absolute; inset: auto 0 0; height: var(--pocket-height); background: #fff1f7; clip-path: polygon(7% 57%, 28% 57%, 50% 78.5%, 72% 57%, 93% 57%, 93% 95%, 7% 95%); } #intro.opening.has-extraction .stationery-shell-back { z-index: 1; } #intro.opening.has-extraction .reference-envelope-base { opacity: 1 !important; transition: none !important; clip-path: polygon(7% 57%, 28% 57%, 50% 78.5%, 72% 57%, 93% 57%, 93% 95%, 7% 95%) !important; } #intro.opening.has-extraction .stationery-address { opacity: 1; } #intro.opening.has-extraction .stationery-seal { animation: velvet-wax-release-179 430ms ease-in-out both !important; } #intro.opening.has-extraction .reference-envelope-flap { animation: physical-flap-open-179 850ms 180ms cubic-bezier(.32,.05,.25,1) both !important; backface-visibility: hidden; } #intro.opening.has-extraction .stationery-shell-back::before { content: ''; position: absolute; inset: auto 0 0; height: var(--pocket-height); background: linear-gradient(#fff0f5d9, #efd0dda6), var(--letter-velvet) center/460px; clip-path: polygon(7% 36%, 50% 0, 93% 36%, 93% 95%, 7% 95%); animation: physical-lining-show-179 2200ms linear both; } #intro.opening.has-extraction .stationery-letter { z-index: 3; mix-blend-mode: multiply; animation: none !important; transition: none !important; will-change: transform, clip-path; } #intro.opening.has-extraction .stationery-floral { animation: none !important; } @keyframes physical-flap-open-179 { 0% { opacity: 1; transform: rotateX(0deg); } 70% { opacity: 1; transform: rotateX(-155deg); } 100% { opacity: 0; transform: rotateX(-178deg); } } @keyframes physical-lining-show-179 { 0%, 14% { opacity: 0; } 29%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #intro.has-velvet-envelope .stationery-scene, #intro.has-velvet-envelope :is(.stationery-envelope, .stationery-seal, .stationery-letter, .reference-envelope-flap, .reference-envelope-base, .stationery-floral, .eyebrow, .open-hint, .scroll-cue) { animation: none !important; transition: none !important; } }
:root { --type-display: 'Great Vibes', cursive; --type-body: 'Montserrat', sans-serif; --type-heading: clamp(44px, 5vw, 64px); --type-card: 34px; --type-copy: 16px; --copy-leading: 1.75; --section-rhythm: clamp(36px, 4.4vw, 64px); --print-white: #fffdfd; --print-shadow: 0 2px 3px #663d4f14, 0 16px 28px -20px #663d4f66; --nav-clearance: calc(48px + env(safe-area-inset-bottom)); --toolbar-clearance: 92px; --control-font: 14px; --control-weight: 600; --control-height: 52px; --control-compact-font: 11px; --control-compact-height: 44px; --control-rose: #9b4568; --control-focus: #74334e; } main.page.reference-complete { --section-space: var(--section-rhythm); --section-heading-gap: 36px; } main.page.reference-complete > :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) { padding-block: var(--section-rhythm) !important; } :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) :is(.section-heading, .story-redesign-header) { margin: 0 auto 36px !important; } .reference-complete :is(#poveste, #familie, #galerie, #locatii, #meniu) :is(.section-heading, .story-redesign-header) h2, #confirmare .confirm-copy h2 { font: 400 var(--type-heading)/1.2 var(--type-display) !important; color: var(--reading-emerald) !important; letter-spacing: 0 !important; margin: 12px 0 18px !important; text-wrap: balance; } .reference-complete :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) .section-kicker, #poveste .story-bound-book .story-redesign-label, #familie .family-role { font: 500 12px/1.5 var(--type-body) !important; letter-spacing: .14em !important; color: #a44f73 !important; margin: 0 0 12px !important; } #poveste .story-bound-book .story-redesign-content h3, #familie :is(.family-feature-copy, .family-mini-copy) h3, #locatii .event-map-content h3, #poveste .poem-copy h3 { font: 400 var(--type-card)/1.25 var(--type-display) !important; letter-spacing: 0 !important; color: var(--reading-emerald) !important; margin: 0 0 16px !important; text-wrap: balance; } :is(#poveste, #familie, #galerie, #locatii, #meniu) :is(.section-heading, .story-redesign-header) > p:not(.story-redesign-date), #poveste .story-bound-book .story-redesign-text p, #poveste .story-redesign-poem p, #familie :is(.family-feature-copy, .family-mini-copy) p, #locatii .event-map-content :is(p, .location-name, .location-address), #meniu .accordion-panel p, #confirmare .rsvp-heart-list li { font: 400 var(--type-copy)/var(--copy-leading) var(--type-body) !important; letter-spacing: 0 !important; color: var(--reading-copy) !important; } :is(#poveste, #familie, #galerie, #locatii, #meniu) :is(.section-heading, .story-redesign-header) > p:not(.story-redesign-date) { max-width: 68ch !important; margin: 16px auto 0 !important; } #poveste .story-bound-book .story-redesign-text p { margin: 0 0 20px !important; } #poveste .story-bound-book .story-redesign-text p:last-child { margin-bottom: 0 !important; } #meniu .accordion-button { font: 500 var(--type-copy)/1.5 var(--type-body) !important; padding: 18px 20px !important; } #meniu .accordion-panel { padding-inline: 20px !important; } #meniu .accordion-item.is-open .accordion-panel { padding-top: 4px !important; padding-bottom: 24px !important; } #meniu .accordion-panel p + p { margin-top: 16px !important; } #confirmare .rsvp-form :is(label, .form-helper, small, .check-card span) { font: 500 14px/1.5 var(--type-body) !important; } #confirmare .rsvp-form :is(input:not([type=checkbox]):not([type=hidden]), select, textarea) { font: 400 max(16px, var(--type-copy))/1.5 var(--type-body) !important; } #confirmare .rsvp-form .btn-primary { font: 600 14px/1.5 var(--type-body) !important; border-radius: 999px !important; } #intro.ia-reference-letter :is(.stationery-letter-names, .stationery-address span) { font-family: var(--type-display) !important; } #intro.ia-reference-letter :is(.stationery-letter-message, .stationery-letter-title) { font: 400 var(--type-copy)/var(--copy-leading) var(--type-body) !important; } #intro.ia-reference-letter .stationery-letter-title { font-weight: 500 !important; } #poveste .countdown-units dd { font-family: var(--type-body) !important; font-size: clamp(28px, 3.5vw, 44px); } #poveste .story-redesign-date em { font: italic 400 var(--type-copy)/var(--copy-leading) var(--type-body) !important; } #locatii .location-schedule time { font-family: var(--type-body) !important; } #confirmare .contact-thanks { font: 400 clamp(34px, 3vw, 44px)/1.3 var(--type-display) !important; letter-spacing: 0; max-width: 25ch; width: 100%; margin: 32px 0 0; padding-top: 12px; border: 0; text-wrap: balance; text-align: left; } #confirmare .confirm-copy { display: block !important; position: relative; width: 100%; max-width: none !important; padding: 12px 32px 12px 0 !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; text-align: left; } #confirmare .confirm-copy h2 { text-align: left; text-wrap: pretty; } #confirmare .confirm-copy > .reference-small-divider { margin: 20px 0 !important; } #confirmare .rsvp-heart-list { gap: 22px !important; margin: 24px 0 0 !important; } #confirmare .rsvp-heart-list li { gap: 14px !important; align-items: flex-start; } #confirmare .rsvp-heart-bullet { width: 20px !important; min-width: 20px !important; max-width: 20px !important; margin-top: 5px !important; } #confirmare .rsvp-heart-list li > span:last-child { flex: 1; min-width: 0; } :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) .section-heart-divider { position: relative; display: flex !important; align-items: center; justify-content: center; width: 180px !important; height: 24px !important; max-width: 100%; gap: 12px !important; margin: 20px auto 24px !important; padding: 0 !important; border: 0 !important; background: none !important; transform: none !important; pointer-events: none; } :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) .section-heart-divider img { display: block; flex: 0 0 22px; width: 22px !important; height: 22px !important; object-fit: contain; animation: none !important; transform: none !important; filter: none !important; } :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) .section-heart-divider::before, :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) .section-heart-divider::after { content: '' !important; position: static !important; display: block !important; flex: 1; width: auto !important; height: 1px !important; margin: 0 !important; border: 0 !important; background: linear-gradient(90deg, transparent, #d893b2) !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) .section-heart-divider::after { background: linear-gradient(90deg, #d893b2, transparent) !important; } #confirmare .confirm-copy > .section-heart-divider { margin-left: 0 !important; } #poveste .story-redesign-poem.poem-dedication { position: relative; display: block; width: min(1240px, 100%) !important; max-width: 1240px !important; min-height: 540px; margin: 84px auto 0 !important; padding: 72px clamp(130px, 18vw, 240px) 80px !important; border: 0 !important; border-radius: 0 !important; background: #fff1f7 !important; box-shadow: none !important; overflow: visible !important; isolation: isolate; scroll-margin-top: calc(var(--toolbar-clearance) + 24px); } #poveste .poem-dedication::before, #poveste .poem-dedication::after { display: none !important; } #poveste .poem-dedication .poem-copy { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; min-width: 0; text-align: center; } #poveste .poem-dedication .poem-copy h3 { font: 400 var(--type-heading)/1.2 var(--type-display) !important; margin: 0 !important; color: var(--reading-emerald) !important; text-wrap: balance; } #poveste .poem-dedication .section-heart-divider { margin: 20px auto 32px !important; } #poveste .poem-words { position: relative; margin: 0; padding: 0; border: 0; background: none; } #poveste .poem-dedication .poem-words p { max-width: 56ch; margin: 0 auto 20px !important; font: 400 18px/1.8 var(--type-body) !important; text-align: center; text-wrap: pretty; } #poveste .poem-dedication .poem-words .poem-vow { max-width: 30ch; margin: 28px auto 0 !important; font: 400 44px/1.32 var(--type-display) !important; color: #9b4568 !important; text-wrap: balance; } #poveste .poem-dedication .poem-quote-mark { display: block; position: absolute; top: -64px; left: -38px; z-index: -1; margin: 0; font: 400 180px/1 Georgia, serif; letter-spacing: 0; color: #edc1d252; pointer-events: none; } #poveste .poem-botanical { position: absolute; width: clamp(185px, 20vw, 280px); pointer-events: none; background: #fff1f7; mask-image: radial-gradient(ellipse, #000 38%, #000c 58%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse, #000 38%, #000c 58%, transparent 74%); } #poveste .poem-botanical img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } #poveste .poem-botanical-left { left: 0; bottom: -30px; transform: rotate(-10deg); } #poveste .poem-botanical-right { right: 0; top: -48px; width: clamp(170px, 18vw, 260px); transform: scaleX(-1) rotate(-8deg); } @media (max-width: 860px) { #poveste .story-redesign-poem.poem-dedication { display: flex; flex-direction: column; min-height: 0; margin-top: 56px !important; padding: 20px 16px 0 !important; } #poveste .poem-dedication .poem-copy { order: 0; width: 100%; } #poveste .poem-dedication .poem-words p { font-size: var(--type-copy) !important; } #poveste .poem-dedication .poem-words .poem-vow { font-size: 38px !important; max-width: 28ch; } #poveste .poem-botanical-left { position: relative; order: 1; left: auto; bottom: auto; width: 180px; margin: 14px auto -20px; transform: rotate(-12deg); } #poveste .poem-botanical-right { display: none; } #poveste .poem-dedication .poem-quote-mark { top: -38px; left: -8px; font-size: 130px; } } #familie .family-shell > .family-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; align-items: stretch; } #familie .family-support-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px !important; align-items: start; } #familie :is(.family-feature-card, .family-mini-card) { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; translate: none !important; transition: opacity .6s ease !important; overflow: visible !important; } #familie :is(.family-feature-card, .family-mini-card):hover { background: transparent !important; box-shadow: none !important; transform: none !important; translate: none !important; } #familie .family-feature-card { --family-print-angle: -2deg; --family-print-offset: 0px; display: grid !important; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important; gap: clamp(32px, 5vw, 64px) !important; align-items: center; padding: 12px !important; } #familie .family-mini-card:nth-child(3n + 1) { --family-print-angle: -1.6deg; --family-print-offset: 9px; } #familie .family-mini-card:nth-child(3n + 2) { --family-print-angle: 1.8deg; --family-print-offset: -4px; } #familie .family-mini-card:nth-child(3n) { --family-print-angle: -1deg; --family-print-offset: 7px; } #familie :is(.family-feature-card, .family-mini-card, .family-feature-media, .family-mini-media)::before, #familie :is(.family-feature-card, .family-mini-card, .family-feature-media, .family-mini-media)::after { display: none !important; } #familie :is(.family-feature-media, .family-mini-media) { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 4/3 !important; flex: none; margin: 0 !important; padding: 0 !important; border: 10px solid var(--print-white) !important; border-bottom-width: 24px !important; outline: none !important; border-radius: 2px !important; box-shadow: var(--print-shadow) !important; transform: translateY(var(--family-print-offset, 0px)) rotate(var(--family-print-angle, 0deg)) !important; translate: none !important; transition: none !important; overflow: hidden !important; } #familie .family-feature-media { max-width: 540px; justify-self: center; } #familie :is(.family-feature-copy, .family-mini-copy) { padding: 32px 12px 0 !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; flex: 1; } #familie :is(.family-feature-copy, .family-mini-copy) p { margin: 0 !important; max-width: 36ch; } #familie .family-feature-copy { padding: 24px 12px !important; } #familie .family-feature-copy p { max-width: 44ch; } #familie .reference-small-divider { width: 76px; margin: 0 auto 14px !important; } #familie .family-role { margin-bottom: 10px !important; } #familie .family-feature-media img { width: 100%; height: 100%; object-fit: cover; } #poveste .story-bound-book .story-redesign-media, #galerie .photo-mosaic-full .mosaic-item { border: 10px solid var(--print-white) !important; border-bottom-width: 24px !important; border-radius: 2px !important; box-shadow: var(--print-shadow) !important; } #galerie .photo-mosaic-full .mosaic-item::after { display: none !important; } #galerie .photo-mosaic-full .mosaic-item img { border-radius: 0 !important; } #galerie .photo-mosaic-full { padding: 10px 8px 14px; gap: 36px !important; overflow: visible !important; } #galerie .photo-mosaic-full :is(.mosaic-item, .mosaic-item:hover) { transform: translateY(var(--gallery-print-offset, 0px)) rotate(var(--gallery-print-angle, 0deg)) !important; translate: none !important; transition: none !important; outline: none !important; border-color: var(--print-white) !important; box-shadow: var(--print-shadow) !important; } #galerie .photo-mosaic-full .mosaic-item:nth-child(6n + 1) { --gallery-print-angle: -1.6deg; --gallery-print-offset: 7px; } #galerie .photo-mosaic-full .mosaic-item:nth-child(6n + 2) { --gallery-print-angle: 1.8deg; --gallery-print-offset: -4px; } #galerie .photo-mosaic-full .mosaic-item:nth-child(6n + 3) { --gallery-print-angle: -1deg; --gallery-print-offset: 5px; } #galerie .photo-mosaic-full .mosaic-item:nth-child(6n + 4) { --gallery-print-angle: 1.3deg; --gallery-print-offset: 3px; } #galerie .photo-mosaic-full .mosaic-item:nth-child(6n + 5) { --gallery-print-angle: -2deg; --gallery-print-offset: -3px; } #galerie .photo-mosaic-full .mosaic-item:nth-child(6n) { --gallery-print-angle: 1.6deg; --gallery-print-offset: 6px; } #locatii.locations-editorial { --venue-surface: #ffffff; --venue-blush: #fff0f6; --venue-edge: #e6b9cd; --venue-accent: #9b4568; --venue-accent-ink: #74334e; --venue-button: #ffffff; } #locatii.locations-editorial :is(.event-map-card, .event-map-card:hover) { background: linear-gradient(150deg, var(--venue-surface), var(--venue-blush)) !important; border: 1px solid var(--venue-edge) !important; box-shadow: inset 0 1px 0 #ffffffd9, 0 14px 28px -20px #85466166 !important; translate: none !important; transform: none !important; } #locatii.locations-editorial .location-photo-slider { background: var(--print-white) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; } #locatii.locations-editorial :is(.location-slider-viewport, .location-editorial-cover) { border: 8px solid var(--print-white) !important; border-bottom-width: 18px !important; border-radius: 14px !important; box-shadow: none !important; background: var(--print-white) !important; } #locatii.locations-editorial .location-editorial-cover.location-placeholder { border-radius: 14px !important; } #locatii.locations-editorial .location-schedule { padding: 12px; border: 1px solid #edccdc; border-radius: 18px; background: #fff0f6; } #locatii.locations-editorial .location-schedule time { background: #fff; color: var(--venue-accent-ink); border: 1px solid var(--venue-edge); border-radius: 12px; font-size: 26px; padding: 11px 13px; box-shadow: none; } #locatii.locations-editorial .event-map-content .location-name { font-weight: 600 !important; } #locatii.locations-editorial .location-placeholder-caption { color: var(--venue-accent-ink) !important; } #locatii.locations-editorial :is(.map-btn, .map-btn:hover, .map-btn:active, .map-btn:focus) { background: var(--venue-button) !important; border: 1px solid var(--venue-accent) !important; color: var(--venue-accent) !important; box-shadow: none !important; position: relative; overflow: visible !important; transform: none !important; translate: none !important; transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; } #locatii.locations-editorial :is(.map-btn:hover, .map-btn:focus-visible) { background: var(--venue-accent) !important; color: #fff !important; border-color: #fff !important; } #locatii.locations-editorial .map-btn::after { content: '' !important; display: block !important; position: absolute; inset: -1px !important; width: auto !important; height: auto !important; border: 1px solid var(--venue-accent); border-radius: inherit; background: transparent !important; box-shadow: 0 0 0 0 #9b456800; opacity: 0 !important; transform: none !important; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { #locatii.locations-editorial .map-btn:focus-visible::after { opacity: 1 !important; animation: venue-border-outward 2.6s cubic-bezier(.2, .6, .35, 1) infinite !important; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { #locatii.locations-editorial .map-btn:hover::after { opacity: 1 !important; animation: venue-border-outward 2.6s cubic-bezier(.2, .6, .35, 1) infinite !important; } } @keyframes venue-border-outward { 0% { box-shadow: 0 0 0 0 #9b45684d; border-color: #9b456880; } 80%, 100% { box-shadow: 0 0 0 12px #9b456800; border-color: #9b456800; } } @media (prefers-reduced-motion: reduce) { #locatii.locations-editorial .map-btn { transition: none !important; } #locatii.locations-editorial .map-btn::after { animation: none !important; } } #locatii.locations-editorial .event-map-frame { background: var(--print-white) !important; border: 8px solid var(--print-white) !important; box-shadow: 0 0 0 1px #e3b6ca70 !important; } #locatii.locations-editorial .location-slider-arrow { background: #fff9fcf2 !important; color: var(--venue-accent-ink) !important; border-color: var(--venue-edge) !important; } #locatii.locations-editorial .location-slider-arrow:hover { background: var(--venue-button) !important; } #locatii.locations-editorial .location-slider-dot.is-active { background-color: var(--venue-accent) !important; } #locatii.locations-editorial :is(.map-btn, .location-slider-arrow, .location-slider-dot):focus-visible { outline: 2px solid var(--venue-accent-ink) !important; outline-offset: 3px !important; } #meniu .reference-menu-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px 48px; align-items: center; } #meniu .reference-menu-content { display: contents; } #meniu .reference-menu-content > .section-heading { grid-column: 1 / -1; grid-row: 1; max-width: 900px; } #meniu .menu-accordion { grid-column: 1; grid-row: 2; min-width: 0; align-self: center; margin: 0 !important; } #meniu .reference-menu-illustration { grid-column: 2; grid-row: 2; width: 100%; max-width: 500px; margin: 0 auto; overflow: visible; max-height: none; align-self: center; } #meniu .reference-menu-illustration:has(.menu-table-only) { background: #fff1f7; } #meniu .reference-menu-illustration .menu-table-only { aspect-ratio: 2 / 3; width: 100%; height: auto !important; mix-blend-mode: multiply; mask-image: none !important; -webkit-mask-image: none !important; } html { scroll-padding-top: calc(var(--toolbar-clearance) + 16px); scroll-padding-bottom: 32px; } body:has(.invitation-toolbar) { padding-top: 0; } body:has(#intro:not(.opened)) { overflow-anchor: none; } #intro.ia-reference-letter { min-height: 100svh !important; padding-top: calc(var(--toolbar-clearance) + 8px) !important; padding-bottom: max(28px, env(safe-area-inset-bottom)) !important; align-items: start; overflow-anchor: none; } #confirmare { padding-bottom: var(--nav-clearance) !important; } #rsvpForm :is(input, select, textarea, button) { scroll-margin-block: 20px; } .invitation-toolbar { opacity: 0; visibility: hidden; pointer-events: none; translate: 0 -8px; transition: opacity .45s ease, translate .45s ease, visibility .45s; position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10030; display: flex; align-items: center; gap: 12px; width: min(720px, calc(100% - 24px)); max-width: calc(100% - 24px); padding: 8px; border: 1px solid #e6bfd0; border-radius: 999px; background: #fffafdf7; box-shadow: 0 8px 24px -16px #71384f70; } body.show-quick-nav .invitation-toolbar { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; } .invitation-toolbar .quick-nav, body.show-quick-nav .invitation-toolbar .quick-nav { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 1; min-width: 0; position: static !important; inset: auto !important; transform: none !important; translate: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: auto !important; max-width: none !important; min-height: 0 !important; padding: 0 !important; gap: 4px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; flex-direction: row !important; overflow: visible !important; isolation: isolate; } .invitation-toolbar .quick-nav a { display: flex !important; align-items: center; justify-content: center; min-width: 0 !important; width: 100% !important; padding: 10px 4px !important; font-size: 11px !important; white-space: nowrap; } .invitation-toolbar .language-switcher { position: static !important; inset: auto !important; transform: none !important; flex: none; min-height: 44px; padding: 3px !important; gap: 2px; background: #fceaf2 !important; border: 1px solid #ebc6d7 !important; border-radius: 999px !important; box-shadow: none !important; letter-spacing: .03em; } .invitation-toolbar .language-switcher > span { display: none; } .invitation-toolbar .language-switcher a { min-width: 40px !important; min-height: 36px !important; font: 600 11px/1 var(--type-body); color: #8e3d60; border: 0 !important; border-radius: 999px !important; transition: background-color .25s ease, color .25s ease; } .invitation-toolbar .language-switcher a::before, .invitation-toolbar .language-switcher a::after { content: none !important; display: none !important; } .invitation-toolbar .language-switcher a[aria-current=page] { background: #9b4568 !important; color: #fff !important; box-shadow: none !important; } .invitation-toolbar .language-switcher a:not([aria-current=page]):hover { background: #f2cbdc !important; } .invitation-toolbar :is(.quick-nav a, .language-switcher a):focus-visible { outline: 2px solid #74334e !important; outline-offset: 2px !important; } .quick-nav a { font-family: var(--type-body) !important; font-weight: 500 !important; letter-spacing: .025em !important; overflow: visible !important; isolation: isolate; } @media (prefers-reduced-motion: no-preference) { .quick-nav a.is-active::after { inset: -1px !important; width: auto !important; height: auto !important; border: 1px solid #c36a91 !important; box-shadow: none; background: transparent !important; transform: none; z-index: -1; animation: rose-nav-outward 2.8s ease-out infinite !important; } } @keyframes rose-nav-outward { 0% { transform: scale(1); opacity: .65; box-shadow: 0 0 0 0 #cc78984d; } 70%, 100% { transform: scale(1.22, 1.38); opacity: 0; box-shadow: 0 0 0 5px #cc789800; } } @media (max-width: 760px) { #familie .family-shell > .family-layout { gap: 40px !important; } #familie .family-support-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; } #familie .family-feature-card { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; } #familie .family-feature-copy { padding: 32px 14px 0 !important; } } @media (max-width: 860px) { #meniu .reference-menu-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; } #meniu .menu-accordion { grid-column: 1; grid-row: 3; } #meniu .reference-menu-illustration { grid-column: 1; grid-row: 2; width: min(300px, 80%); } } @media (max-width: 680px) { :root { --toolbar-clearance: 90px; } .invitation-toolbar { --control-compact-height: 32px; --control-compact-font: 10px; top: calc(6px + env(safe-area-inset-top)); width: min(440px, calc(100% - 20px)); max-width: calc(100% - 20px); flex-wrap: nowrap; gap: 6px; padding: 4px; border-radius: 21px; } .invitation-toolbar .quick-nav, body.show-quick-nav .invitation-toolbar .quick-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto !important; gap: 2px 4px !important; } .invitation-toolbar .quick-nav a { padding: 6px 2px !important; } .invitation-toolbar .language-switcher { flex-direction: column; min-height: 0; gap: 2px !important; padding: 1px !important; } .invitation-toolbar .language-switcher a { min-width: 30px !important; padding: 4px !important; } } @media (max-width: 600px) { :root { --type-heading: 44px; --type-card: 32px; --type-copy: 15px; --section-rhythm: 36px; } main.page.reference-complete { --section-heading-gap: 28px; } :is(#poveste, #familie, #galerie, #locatii, #meniu, #confirmare) :is(.section-heading, .story-redesign-header) { margin-bottom: 28px !important; } #poveste .story-redesign-poem.poem-dedication { padding-inline: 6px !important; } #poveste .poem-dedication .poem-words .poem-vow { font-size: 34px !important; } #familie :is(.family-feature-copy, .family-mini-copy) { padding: 32px 14px 0 !important; } #meniu .accordion-button { padding: 16px !important; } #meniu .accordion-panel { padding-inline: 16px !important; } #confirmare .rsvp-heart-list li { gap: 12px !important; } #confirmare .confirm-copy { padding: 0 !important; } .quick-nav a { font-size: clamp(9px, 2.4vw, 11px) !important; letter-spacing: 0 !important; } } .reference-complete :is(#locatii.locations-editorial, #confirmare) :is(.map-btn, .btn-primary) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px !important; min-height: var(--control-height) !important; padding: 14px 18px !important; font: var(--control-weight) var(--control-font)/1.5 var(--type-body) !important; letter-spacing: 0 !important; text-transform: none !important; border: 1px solid var(--control-rose) !important; border-radius: 999px !important; background: #fff !important; color: var(--control-rose) !important; box-shadow: none !important; transform: none !important; translate: none !important; animation: none !important; overflow: visible !important; transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; } .reference-complete :is(#locatii.locations-editorial, #confirmare) :is(.map-btn, .btn-primary):is(:hover, :focus-visible) { background: var(--control-rose) !important; color: #fff !important; border-color: #fff !important; } .reference-complete :is(#locatii.locations-editorial, #confirmare) :is(.map-btn, .btn-primary)::before { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; transform: none !important; animation: none !important; } .reference-complete :is(#locatii.locations-editorial, #confirmare) :is(.map-btn, .btn-primary)::after { content: '' !important; display: block !important; position: absolute !important; inset: -1px !important; width: auto !important; height: auto !important; border: 1px solid var(--control-rose); border-radius: inherit; background: none !important; box-shadow: none; opacity: 0 !important; transform: none !important; animation: none !important; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .reference-complete :is(#locatii.locations-editorial, #confirmare) :is(.map-btn, .btn-primary):focus-visible::after { opacity: 1 !important; animation: venue-border-outward 2.6s cubic-bezier(.2, .6, .35, 1) infinite !important; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .reference-complete :is(#locatii.locations-editorial, #confirmare) :is(.map-btn, .btn-primary):hover::after { opacity: 1 !important; animation: venue-border-outward 2.6s cubic-bezier(.2, .6, .35, 1) infinite !important; } } #meniu .accordion-item, #meniu .accordion-item.is-open { border: 1px solid #d9a8bf !important; border-radius: 24px !important; box-shadow: none !important; background: #fff !important; } #meniu .accordion-button { min-height: var(--control-height) !important; font: var(--control-weight) var(--control-font)/1.5 var(--type-body) !important; padding: 14px 18px !important; border-radius: 24px !important; background: #fff !important; color: var(--control-rose) !important; transform: none !important; transition: background-color .35s ease, color .35s ease !important; } #meniu .accordion-item.is-open .accordion-button { background: #fff0f6 !important; color: var(--control-rose) !important; } #meniu .accordion-item .accordion-button:is(:hover, :focus-visible) { background: var(--control-rose) !important; color: #fff !important; } #meniu .accordion-button i, #meniu .accordion-button[aria-expanded=true] i { color: inherit !important; width: 24px !important; height: 24px !important; min-width: 24px !important; flex: 0 0 24px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #meniu .accordion-button i::before, #meniu .accordion-button i::after { display: block !important; content: '' !important; position: absolute; left: 5px; top: 11px; width: 14px; height: 2px; background: currentColor !important; border-radius: 2px; } #meniu .accordion-button i::after { transform: rotate(90deg) !important; } #meniu .accordion-button[aria-expanded=true] i::after { opacity: 0; } .invitation-toolbar :is(.quick-nav, .language-switcher) a, .invitation-toolbar .quick-nav a.is-active { font: var(--control-weight) var(--control-compact-font)/1.4 var(--type-body) !important; min-height: var(--control-compact-height) !important; letter-spacing: 0 !important; } #locatii.locations-editorial .location-slider-arrow, #backToTop { width: var(--control-compact-height) !important; height: var(--control-compact-height) !important; min-height: var(--control-compact-height) !important; padding: 0 !important; border: 1px solid var(--control-rose) !important; border-radius: 999px !important; background: #fff !important; color: var(--control-rose) !important; font: 500 24px/1 var(--type-body) !important; box-shadow: none !important; transform: none !important; transition: background-color .35s ease, color .35s ease !important; } #locatii.locations-editorial .location-slider-arrow:is(:hover, :focus-visible), #backToTop:is(:hover, :focus-visible) { background: var(--control-rose) !important; color: #fff !important; } #backToTop { display: grid; place-items: center; } #backToTop::before, #backToTop::after { content: none !important; display: none !important; } #backToTop svg { display: block; width: 22px; height: 22px; } #backToTop:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 3px; } .reference-complete :is(.map-btn, .btn-primary, .accordion-button, .location-slider-arrow, .back-to-top):focus-visible { outline: 2px solid var(--control-focus) !important; outline-offset: 3px !important; } @media (prefers-reduced-motion: reduce) { .reference-complete :is(.map-btn, .btn-primary, .accordion-button, .location-slider-arrow, .back-to-top) { transition: none !important; } } main.page.reference-complete :is(.story-redesign-shell, .family-shell, .reference-menu-grid) { row-gap: var(--section-heading-gap) !important; } main.page.reference-complete :is(.section-heading, .story-redesign-header) { margin-bottom: var(--section-heading-gap) !important; } main.page.reference-complete :is(.story-redesign-shell, .family-shell, .reference-menu-content) > :is(.section-heading, .story-redesign-header) { margin-bottom: 0 !important; } main.page.reference-complete #galerie .photo-mosaic-full { margin-top: 0 !important; } html.locked, html.locked body.locked { overflow: hidden !important; overscroll-behavior: none; } html.locked body.locked { position: fixed !important; inset: 0; width: 100%; height: 100svh; touch-action: none; } #intro.ia-reference-letter .eyebrow { margin-bottom: 16px !important; } #intro.ia-reference-letter .stationery-scene { width: 100%; max-width: min(620px, calc(100svh - 200px)); --letter-crest-height: clamp(150px, 25svh, 280px); } #intro.ia-reference-letter.has-velvet-envelope.has-natural-peonies .stationery-letter { padding-top: calc(var(--letter-crest-height) - var(--peonies-rise) + 16px) !important; padding-bottom: 28px !important; } #intro.ia-reference-letter.has-natural-peonies .stationery-floral { height: var(--letter-crest-height) !important; aspect-ratio: auto; } #intro.ia-reference-letter.has-natural-peonies .stationery-floral .natural-peonies { height: 100% !important; } #intro.ia-reference-letter .stationery-letter-names { font-size: clamp(40px, 10cqw, 64px) !important; line-height: 1.15 !important; } #intro.ia-reference-letter .stationery-rule { margin-block: 12px !important; } #intro.ia-reference-letter .reference-letter-heart { margin-bottom: 10px !important; } #intro.ia-reference-letter :is(.stationery-letter-title, .stationery-letter-message) { line-height: 1.6 !important; } #intro.ia-reference-letter.open .open-hint { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #intro.ia-reference-letter .scroll-cue { margin-top: 16px !important; } #intro.ia-reference-letter:not(.open) .scroll-cue { display: none; } #confirmare .contact-heart-keepsake { position: relative; width: min(300px, 82%); aspect-ratio: 1.45; margin: 36px auto 12px; isolation: isolate; pointer-events: none; } #confirmare .contact-heart-keepsake::before { content: ''; position: absolute; width: 78%; height: 15%; left: 11%; bottom: 0; background: radial-gradient(ellipse, #9b456824, transparent 70%); filter: blur(5px); transform: rotate(-5deg); } #confirmare .contact-heart-keepsake img { position: absolute; width: 61%; height: auto; object-fit: contain; filter: hue-rotate(326deg) saturate(.86) brightness(1.13) drop-shadow(3px 10px 7px #8f3f5f20); } #confirmare .contact-heart-back { left: 7%; top: 3%; transform: rotate(-18deg); } #confirmare .contact-heart-front { right: 3%; top: 19%; transform: rotate(15deg); } #confirmare .confirm-form-column { min-width: 0; } #confirmare .confirm-form-column > .contact-thanks { width: 100%; max-width: none; margin: 28px auto 0; padding: 0 12px; text-align: center; font-size: clamp(30px, 2.7vw, 38px) !important; line-height: 1.35 !important; text-wrap: balance; } @media (max-width: 800px) { #intro.ia-reference-letter .stationery-scene { max-width: min(560px, max(160px, calc(100svh - 200px))); --letter-crest-height: clamp(135px, 52cqw, 250px); } } @media (max-height: 500px) { #intro.ia-reference-letter .eyebrow { margin-bottom: 8px !important; } #intro.ia-reference-letter .open-hint { margin-top: 12px !important; font-size: 12px !important; line-height: 1.5 !important; } #intro.ia-reference-letter .stationery-address span { font-size: clamp(24px, 10cqw, 36px) !important; } } @media (max-width: 600px) { #intro.ia-reference-letter .eyebrow { margin-bottom: 10px !important; } #intro.ia-reference-letter .stationery-letter-names { font-size: clamp(36px, 12cqw, 48px) !important; } #intro.ia-reference-letter.has-velvet-envelope .stationery-letter { padding-inline: 16px !important; } #confirmare .contact-heart-keepsake { width: min(210px, 70%); margin-block: 26px 4px; } } @media (prefers-reduced-motion: reduce) { .invitation-toolbar { transition: none; } } @media (max-width: 680px) { #intro.ia-reference-letter { --peonies-rise: 54px; align-items: center; padding-top: calc(var(--toolbar-clearance) + env(safe-area-inset-top)) !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; padding-left: max(8px, env(safe-area-inset-left)) !important; padding-right: max(8px, env(safe-area-inset-right)) !important; } #intro.ia-reference-letter .eyebrow { font-size: 9px !important; line-height: 1.4 !important; margin-bottom: 8px !important; } #intro.ia-reference-letter .stationery-scene { --letter-crest-height: clamp(100px, 18svh, 150px); } #intro.ia-reference-letter.has-natural-peonies.open .stationery-envelope { padding-top: calc(var(--peonies-rise) + 4px) !important; padding-bottom: 6px !important; } #intro.ia-reference-letter.has-velvet-envelope.has-natural-peonies .stationery-letter { padding-top: calc(var(--letter-crest-height) - var(--peonies-rise) + 6px) !important; padding-bottom: 18px !important; padding-inline: 15px !important; } #intro.ia-reference-letter .stationery-letter-names { font-size: clamp(32px, 10cqw, 40px) !important; line-height: 1.12 !important; margin-bottom: 6px !important; } #intro.ia-reference-letter .stationery-rule { margin-block: 6px !important; height: 18px !important; } #intro.ia-reference-letter .stationery-rule img { width: 18px !important; height: 18px !important; } #intro.ia-reference-letter .stationery-letter-title { font-size: 13px !important; line-height: 1.45 !important; margin-bottom: 6px !important; } #intro.ia-reference-letter .reference-letter-heart { width: 16px !important; height: 16px !important; margin-bottom: 6px !important; } #intro.ia-reference-letter .reference-letter-heart img { width: 16px !important; height: 16px !important; } #intro.ia-reference-letter .stationery-letter-message { font-size: 13px !important; line-height: 1.5 !important; } #intro.ia-reference-letter .scroll-cue { margin-top: 8px !important; gap: 3px; font-size: 10px !important; } #intro.ia-reference-letter .scroll-cue span { font-size: 10px !important; } #intro.ia-reference-letter .open-hint { margin-top: 12px !important; font-size: 12px !important; line-height: 1.5 !important; } } @media (max-width: 680px) and (max-height: 640px) { #intro.ia-reference-letter .eyebrow { display: none; } #intro.ia-reference-letter .stationery-scene { --letter-crest-height: 90px; } #intro.ia-reference-letter .reference-letter-heart { display: none !important; } #intro.ia-reference-letter .scroll-cue { min-height: 0; height: auto; margin-top: 6px !important; } #intro.ia-reference-letter .scroll-cue i { display: none; } } @media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) { :root { --toolbar-clearance: 64px; } .invitation-toolbar { --control-compact-height: 32px; --control-compact-font: 10px; top: calc(6px + env(safe-area-inset-top)); left: calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); width: min(680px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 4px; gap: 8px; } .invitation-toolbar .quick-nav, body.show-quick-nav .invitation-toolbar .quick-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } .invitation-toolbar .quick-nav a { padding: 5px 2px !important; } .invitation-toolbar .language-switcher { flex-direction: row; min-height: 0; padding: 1px !important; gap: 2px !important; } .invitation-toolbar .language-switcher a { min-width: 30px !important; padding: 4px !important; } #intro.ia-reference-letter { align-items: center; padding: calc(var(--toolbar-clearance) + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important; } #intro.ia-reference-letter .eyebrow { display: none; } #intro.ia-reference-letter:not(.open) .stationery-scene { max-width: min(300px, calc(100svh - 140px)); } #intro.ia-reference-letter:not(.open) .stationery-envelope { margin-top: 0; } #intro.ia-reference-letter.open .stationery-scene { max-width: min(720px, 100%); } #intro.ia-reference-letter.has-natural-peonies.open .stationery-envelope { padding: 0 !important; } #intro.ia-reference-letter.has-velvet-envelope.has-natural-peonies.open .stationery-letter { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 22px; padding: 18px 20px !important; } #intro.ia-reference-letter.open .stationery-letter-names { grid-column: 1; grid-row: 1 / 4; align-self: end; padding-top: 112px; margin: 0 !important; font-size: 34px !important; line-height: 1.1 !important; } #intro.ia-reference-letter.open .stationery-letter-title { grid-column: 2; grid-row: 1; font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important; } #intro.ia-reference-letter.open .stationery-rule { grid-column: 2; grid-row: 2; width: 130px; height: 18px !important; margin-block: 7px !important; } #intro.ia-reference-letter.open .stationery-rule img { width: 18px !important; height: 18px !important; } #intro.ia-reference-letter.open .stationery-letter-message { grid-column: 2; grid-row: 3; font-size: 13px !important; line-height: 1.45 !important; } #intro.ia-reference-letter.open .reference-letter-heart { display: none !important; } #intro.ia-reference-letter.has-natural-peonies.open .stationery-floral { top: 12px !important; left: 0 !important; width: 43% !important; height: 112px !important; } #intro.ia-reference-letter.open .stationery-letter::before { -webkit-mask-image: none; mask-image: none; border-top-color: #44213f; } #intro.ia-reference-letter.open .stationery-letter::after { -webkit-mask-image: none; mask-image: none; } #intro.ia-reference-letter .scroll-cue { min-height: 0; height: auto; margin-top: 8px !important; } #intro.ia-reference-letter .scroll-cue i { display: none; } #intro.ia-reference-letter .open-hint { margin-top: 8px !important; font-size: 12px !important; line-height: 1.4 !important; } } @media (orientation: landscape) and (max-height: 360px) and (min-width: 560px) { #intro.ia-reference-letter.has-velvet-envelope.has-natural-peonies.open .stationery-letter { grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); } #intro.ia-reference-letter.open .stationery-letter-names { display: flex; flex-direction: column; align-items: center; font-size: 30px !important; padding-top: 96px; } #intro.ia-reference-letter.open .stationery-letter-names > span { white-space: nowrap; } #intro.ia-reference-letter.open .stationery-letter-names > .stationery-ampersand { font-size: 20px; line-height: 1; } #intro.ia-reference-letter.has-natural-peonies.open .stationery-floral { width: 32% !important; height: 96px !important; } #intro.ia-reference-letter .scroll-cue { display: none; } } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #intro.ia-reference-letter.opened .intro-content { z-index: 19 !important; } body:has(#intro.opened:not(.is-motion-paused)) .floating-hearts-bg { -webkit-mask-image: linear-gradient(90deg, #000, #000b 15%, #0009 35%, #0009 65%, #000b 85%, #000); mask-image: linear-gradient(90deg, #000, #000b 15%, #0009 35%, #0009 65%, #000b 85%, #000); }