/* ═══════════════════════════════════════════════════════════════ GYFTALALA INVYTES — landing page styles aesthetic: ink + gilded gold + cream + blood-rose typography: Fraunces (display) / DM Sans (body) / Caveat (script) ═══════════════════════════════════════════════════════════════ */ :root { /* LIGHT-MODE palette — cream paper + gilded gold + blood rose. Variable names kept from the previous dark theme so the rest of the stylesheet still resolves; their *meaning* flipped: --ink now = dark text (was dark bg) --cream now = paper surface (was light text) The two dark theme-card variants (.t-ink, .t-emerald) keep explicit overrides further down so they retain moody contrast. */ --ink: #1F1A14; --ink-soft: #3A322A; --ink-2: #564B3E; --cream: #FBF6EC; --cream-soft: #F4ECDD; --paper: #FFFFFF; --gold: #C8A557; --gold-soft: #D8B970; --gold-deep: #A48434; --rose: #B8344E; --rose-soft: #D04864; --sage: #6F8B6E; --plum: #5B3A4A; --line: rgba(31, 26, 20, 0.10); --line-strong: rgba(31, 26, 20, 0.20); --shadow-deep: 0 30px 80px -28px rgba(60, 40, 18, 0.30), 0 10px 28px -12px rgba(60, 40, 18, 0.18); --shadow-card: 0 18px 50px -22px rgba(60, 40, 18, 0.22); --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --font-body: "DM Sans", -apple-system, "Helvetica Neue", sans-serif; --font-script: "Caveat", cursive; --easing: cubic-bezier(.2, .8, .2, 1); } .invytes-page * { box-sizing: border-box; } .invytes-page, .invytes-page body { margin: 0; padding: 0; } /* Lift the page background to / so the cream tone covers the strip behind the fixed inset header and the area around the footer. */ html, body { background: var(--cream); } .invytes-page { background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } .invytes-page a { color: inherit; text-decoration: none; } .invytes-page button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } .invytes-page svg { display: block; } /* ═══ ATMOSPHERE ═══ */ .atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; color: var(--gold); } .grain { position: absolute; inset: -2px; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: multiply; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.28; animation: orb-drift 22s var(--easing) infinite alternate; } .orb-1 { top: -10%; left: -10%; width: 540px; height: 540px; background: radial-gradient(circle, rgba(200,165,87,0.45), transparent 70%); } .orb-2 { top: 30%; right: -15%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(184,52,78,0.32), transparent 70%); animation-delay: -8s; } .orb-3 { bottom: -20%; left: 25%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(111,139,110,0.28), transparent 70%); animation-delay: -14s; } @keyframes orb-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px, -40px) scale(1.08); } } .floral { position: absolute; width: 240px; height: 240px; opacity: 0.18; } .floral-tl { top: 80px; left: -40px; } .floral-br { bottom: 80px; right: -40px; transform: rotate(180deg); } /* ═══ TYPOGRAPHY HELPERS ═══ */ .invytes-page .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .invytes-page .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(200,165,87,0.18); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(200,165,87,0.18); } 50% { box-shadow: 0 0 0 10px rgba(200,165,87,0.04); } } .invytes-page .italic { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--gold); } .invytes-page .section-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.018em; margin: 0 0 18px; color: var(--ink); } /* ═══ BUTTONS ═══ */ .invytes-page .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; position: relative; transition: transform .35s var(--easing), background .3s, color .3s, box-shadow .3s; will-change: transform; } .invytes-page .btn svg { width: 22px; height: 14px; } .invytes-page .btn-gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep)); color: var(--ink); box-shadow: 0 12px 38px -10px rgba(200,165,87,0.5), inset 0 1px 0 rgba(255,255,255,0.45); } .invytes-page .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -10px rgba(200,165,87,0.65), inset 0 1px 0 rgba(255,255,255,0.5); } .invytes-page .btn-ghost { color: var(--ink); border: 1px solid var(--line-strong); background: rgba(31,26,20,0.04); } .invytes-page .btn-ghost:hover { background: rgba(31,26,20,0.08); border-color: var(--gold); color: var(--gold); } .invytes-page .btn-block { display: flex; justify-content: center; width: 100%; } .invytes-page .btn-lg { padding: 20px 34px; font-size: 16px; } /* ═══ HERO ═══ */ .hero { position: relative; z-index: 2; padding: clamp(40px, 8vw, 110px) clamp(20px, 5vw, 80px) 60px; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; width: 100%; max-width: 1340px; margin: 0 auto; } .hero-left .display { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8.5vw, 124px); line-height: 0.96; letter-spacing: -0.025em; margin: 8px 0 26px; color: var(--ink); } .hero-left .display .italic { font-style: italic; color: var(--gold); font-weight: 400; } .hero-left .display .dot-glow { color: var(--rose); text-shadow: 0 0 24px rgba(184,52,78,0.7); } .hero-left .lede { font-family: var(--font-body); font-size: clamp(15px, 1.45vw, 18px); line-height: 1.55; max-width: 520px; color: rgba(31,26,20,0.74); margin: 0 0 36px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; } .hero-trust { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(31,26,20,0.7); } .hero-trust .stars { display: flex; gap: 2px; color: var(--gold); } .hero-trust .stars svg { width: 16px; height: 16px; } .hero-trust strong { color: var(--ink); font-weight: 600; } /* ENVELOPE STAGE */ .hero-right { display: flex; justify-content: center; } .envelope-stage { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.05; perspective: 1800px; } .envelope { position: absolute; inset: 0; margin: auto; width: 90%; height: 75%; top: 12%; transform-style: preserve-3d; animation: env-float 9s ease-in-out infinite; } @keyframes env-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } } .env-back, .env-front { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(135deg, #1b232b 0%, #0e1419 100%); box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(200,165,87,0.18); } .env-back::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(200,165,87,0.28); border-radius: 4px; } .env-front { background: linear-gradient(160deg, #232c36 0%, #131a21 60%, #0a0f14 100%); clip-path: polygon(0 35%, 100% 35%, 100% 100%, 0 100%); z-index: 4; box-shadow: 0 -10px 30px -20px rgba(0,0,0,0.6) inset, var(--shadow-deep); } .env-front::before { content: ""; position: absolute; left: 50%; top: 35%; width: 75%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: translateX(-50%); opacity: 0.4; } /* Flap */ .env-back::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60%; background: linear-gradient(180deg, #1f2932 0%, #0e1419 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; animation: flap-open 4s var(--easing) 0.4s forwards; z-index: 5; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } @keyframes flap-open { 0% { transform: rotateX(0deg); } 60% { transform: rotateX(-160deg); } 100% { transform: rotateX(-178deg); } } .env-seal { position: absolute; top: 30%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, var(--rose-soft), var(--rose) 60%, #7a1b32); border-radius: 50%; color: var(--gold); z-index: 6; box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 3px 8px rgba(255,255,255,0.2); animation: seal-crack 4s var(--easing) 0.2s forwards; } @keyframes seal-crack { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 35% { transform: translate(-50%, -50%) scale(1.15) rotate(8deg); } 50% { transform: translate(-50%, -50%) scale(0.9) rotate(-6deg); opacity: 1; } 100% { transform: translate(-50%, -10%) scale(0.7) rotate(20deg); opacity: 0; } } .env-card { position: absolute; left: 8%; right: 8%; top: 12%; bottom: 8%; background: radial-gradient(circle at 50% 20%, rgba(200,165,87,0.08), transparent 60%), linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); border-radius: 4px; padding: 36px 28px 24px; text-align: center; color: var(--ink); z-index: 3; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(200,165,87,0.35); animation: card-rise 4s var(--easing) 1.2s forwards; transform: translateY(20%); opacity: 0; } @keyframes card-rise { 0% { transform: translateY(20%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-32%); opacity: 1; } } .card-monogram { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 28px; color: var(--gold-deep); letter-spacing: 0.04em; margin-bottom: 6px; } .card-flourish-top { display: flex; justify-content: center; margin: 4px 0; color: var(--gold-deep); } .card-flourish-top svg { width: 110px; height: 12px; } .card-flourish-top.flip { transform: scaleY(-1); } .card-overline { font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(31,26,20,0.55); margin: 14px 0 10px; } .card-names { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.05; color: var(--ink); } .card-names .amp { font-style: italic; color: var(--rose); margin: 0 8px; font-size: 0.7em; vertical-align: 0.18em; } .card-meta { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 18px 0 10px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(31,26,20,0.72); } .card-meta .sep { width: 4px; height: 4px; background: var(--gold-deep); border-radius: 50%; } .card-meta b { font-weight: 600; color: var(--ink); } .card-rsvp { margin-top: 16px; font-family: var(--font-script); font-size: 18px; color: var(--rose); font-weight: 600; } .env-shadow { position: absolute; left: 6%; right: 6%; bottom: -6%; height: 36px; background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%); filter: blur(12px); z-index: 0; animation: shadow-pulse 9s ease-in-out infinite; } @keyframes shadow-pulse { 0%, 100% { opacity: 0.7; transform: scaleX(1); } 50% { opacity: 0.5; transform: scaleX(0.88); } } .floating-confetti span { position: absolute; width: 8px; height: 12px; background: var(--gold); opacity: 0; animation: confetti-fall 6s var(--easing) infinite; border-radius: 1px; } .floating-confetti span:nth-child(1) { left: 10%; top: 15%; background: var(--gold); animation-delay: 1.6s; } .floating-confetti span:nth-child(2) { left: 28%; top: 8%; background: var(--rose); animation-delay: 1.9s; transform: rotate(35deg); } .floating-confetti span:nth-child(3) { left: 52%; top: 12%; background: var(--sage); animation-delay: 2.2s; } .floating-confetti span:nth-child(4) { left: 70%; top: 9%; background: var(--gold-soft);animation-delay: 1.8s; } .floating-confetti span:nth-child(5) { left: 85%; top: 16%; background: var(--rose-soft);animation-delay: 2.4s; } .floating-confetti span:nth-child(6) { left: 18%; top: 25%; background: var(--gold); animation-delay: 2.7s; } .floating-confetti span:nth-child(7) { left: 62%; top: 22%; background: var(--rose); animation-delay: 3.0s; } .floating-confetti span:nth-child(8) { left: 78%; top: 28%; background: var(--gold-soft);animation-delay: 3.4s; } @keyframes confetti-fall { 0% { opacity: 0; transform: translateY(-20px) rotate(0deg); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(80vh) rotate(540deg); } } /* MARQUEE */ .marquee { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; overflow: hidden; position: relative; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: inline-flex; gap: 36px; white-space: nowrap; animation: marquee-roll 38s linear infinite; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; color: rgba(31,26,20,0.5); letter-spacing: 0.08em; } .marquee-track span:nth-child(even) { color: var(--gold); } @keyframes marquee-roll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ═══ FEATURES + PHONE ═══ */ .features { position: relative; z-index: 2; padding: clamp(60px, 10vw, 140px) clamp(20px, 5vw, 80px); background: linear-gradient(180deg, transparent 0%, var(--cream-soft) 30%, var(--cream-soft) 70%, transparent 100%); } .features-head { max-width: 760px; margin: 0 auto 60px; text-align: center; } .features-head p { color: rgba(31,26,20,0.65); font-size: 16px; margin: 0; } .features-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 90px); max-width: 1240px; margin: 0 auto; align-items: start; } .feature-list { list-style: none; margin: 0; padding: 0; counter-reset: feat; } /* Mobile-only swap card; hidden on desktop where the full list shows. */ .feature-active { display: none; } .feature-list li { display: flex; gap: 22px; padding: 20px 0; border-top: 1px solid var(--line); cursor: pointer; transition: padding-left .35s var(--easing), opacity .3s; opacity: 0.55; } .feature-list li:last-child { border-bottom: 1px solid var(--line); } .feature-list li:hover { opacity: 0.85; } .feature-list li.active { opacity: 1; padding-left: 18px; } .feature-list li .fnum { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--gold); font-size: 18px; min-width: 36px; padding-top: 4px; position: relative; } .feature-list li.active .fnum::before { content: ""; position: absolute; left: -18px; top: 12px; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(200,165,87,0.2); } .feature-list h4 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); margin: 0 0 4px; color: var(--ink); } .feature-list p { margin: 0; color: rgba(31,26,20,0.62); font-size: 14.5px; line-height: 1.5; } /* PHONE */ .phone-stage { position: sticky; top: 80px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .phone { position: relative; width: 290px; height: 600px; background: linear-gradient(160deg, #1a2129 0%, #0a0e12 100%); border-radius: 44px; padding: 14px; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7), 0 0 0 1.5px rgba(200,165,87,0.25), inset 0 0 0 2px rgba(255,255,255,0.04); } .phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; background: #000; border-radius: 14px; z-index: 5; } .phone-screen { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #0e1419, #1a2129); border-radius: 32px; overflow: hidden; } .phone-bar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 2px; z-index: 5; } .phone-caption { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(31,26,20,0.65); } .caption-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } /* SCENES */ .scene { position: absolute; inset: 0; padding: 50px 22px 24px; display: flex; flex-direction: column; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity .55s var(--easing), transform .55s var(--easing); pointer-events: none; } .scene.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .scene .s-title { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 18px; } /* Scene: HERO */ .scene-hero { background: radial-gradient(circle at 50% 30%, #2a1a22, var(--ink-soft) 70%); align-items: center; justify-content: center; } .s-hero-back { position: absolute; inset: 0; background: radial-gradient(circle at 20% 25%, rgba(200,165,87,0.18), transparent 50%), radial-gradient(circle at 80% 75%, rgba(184,52,78,0.2), transparent 50%); } .scene-hero.active .s-hero-monogram { animation: fade-in .8s var(--easing) 0.1s both; } .scene-hero.active .s-hero-overline { animation: fade-in .8s var(--easing) 0.35s both; } .scene-hero.active .s-hero-names { animation: fade-in 1s var(--easing) 0.6s both; } .scene-hero.active .s-hero-date { animation: fade-in .8s var(--easing) 1s both; } .s-hero-monogram { position: relative; font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--gold); letter-spacing: 0.06em; } .s-hero-overline { position: relative; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(31,26,20,0.6); margin: 14px 0 18px; } .s-hero-names { position: relative; font-family: var(--font-display); font-size: 30px; line-height: 1.05; text-align: center; color: var(--ink); } .s-hero-names i { font-style: italic; color: var(--rose-soft); display: block; font-size: 22px; margin: 4px 0; } .s-hero-date { position: relative; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--gold); margin-top: 22px; letter-spacing: 0.2em; } @keyframes fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .s-hero-petal { position: absolute; width: 24px; height: 28px; background: radial-gradient(ellipse at 50% 30%, var(--rose-soft), var(--rose)); border-radius: 100% 0 100% 0; opacity: 0; animation: petal-drift 6s linear infinite; } .s-hero-petal.p1 { top: 10%; left: 12%; animation-delay: 0.5s; } .s-hero-petal.p2 { top: 18%; right: 14%; animation-delay: 1.8s; transform: rotate(45deg); } .s-hero-petal.p3 { bottom: 18%; left: 18%; animation-delay: 3.2s; } .s-hero-petal.p4 { bottom: 10%; right: 10%; animation-delay: 4.5s; transform: rotate(-30deg); } @keyframes petal-drift { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 20% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(160px) rotate(360deg); } } /* Scene: GALLERY */ .scene-gallery { background: linear-gradient(180deg, #131a21, #0a0e12); } .s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .tile { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, var(--cream-soft), var(--cream)); position: relative; overflow: hidden; opacity: 0; transform: translateY(14px) scale(0.95); } .tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(200,165,87,0.4), transparent 60%); mix-blend-mode: overlay; } .scene-gallery.active .tile { animation: tile-pop .6s var(--easing) forwards; } .scene-gallery.active .t1 { animation-delay: 0.1s; background: linear-gradient(135deg, #d4a86a, #c8a557); } .scene-gallery.active .t2 { animation-delay: 0.18s; background: linear-gradient(135deg, #b8344e, #7a2438); } .scene-gallery.active .t3 { animation-delay: 0.26s; background: linear-gradient(135deg, #f0e2c3, #d6c5a0); } .scene-gallery.active .t4 { animation-delay: 0.34s; background: linear-gradient(135deg, #6f8b6e, #455c45); } .scene-gallery.active .t5 { animation-delay: 0.42s; background: linear-gradient(135deg, #5b3a4a, #361f29); } .scene-gallery.active .t6 { animation-delay: 0.5s; background: linear-gradient(135deg, #d8b970, #a48434); } @keyframes tile-pop { to { opacity: 1; transform: translateY(0) scale(1); } } /* Scene: VIDEO */ .scene-video { background: #0a0e12; } .video-frame { position: relative; flex: 1; border-radius: 14px; overflow: hidden; background: #000; } .video-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(200,165,87,0.4), transparent 50%), radial-gradient(circle at 70% 70%, rgba(184,52,78,0.4), transparent 50%), linear-gradient(135deg, #2a1a22 0%, #1a2129 100%); animation: video-pan 8s ease-in-out infinite alternate; } @keyframes video-pan { 0% { transform: scale(1.05) translate(-2%, -2%); filter: hue-rotate(0deg); } 100% { transform: scale(1.15) translate(2%, 2%); filter: hue-rotate(20deg); } } .play-btn { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); background: rgba(31,26,20,0.92); color: var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(31,26,20,0.15), 0 0 0 20px rgba(31,26,20,0.07); animation: play-pulse 2.4s ease-in-out infinite; } .play-btn svg { width: 24px; height: 24px; } @keyframes play-pulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(31,26,20,0.15), 0 0 0 20px rgba(31,26,20,0.07); } 50% { box-shadow: 0 0 0 14px rgba(31,26,20,0.22), 0 0 0 28px rgba(31,26,20,0.12); } } .video-progress { position: absolute; bottom: 14px; left: 14px; right: 14px; height: 3px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; } .video-progress i { display: block; height: 100%; width: 0; background: var(--gold); } .scene-video.active .video-progress i { animation: prog 4s linear infinite; } @keyframes prog { from { width: 0; } to { width: 100%; } } /* Scene: MAP */ .scene-map { background: #0e1419; } .map-frame { position: relative; flex: 1; border-radius: 14px; background: linear-gradient(180deg, #1a2129, #0e1419); overflow: hidden; } .map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(200,165,87,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(200,165,87,0.12) 1px, transparent 1px); background-size: 30px 30px; } .map-route { position: absolute; inset: 0; width: 100%; height: 100%; } .scene-map.active .map-route path { stroke-dashoffset: 200; animation: route 3s ease-out infinite; } @keyframes route { to { stroke-dashoffset: 0; } } .map-pin { position: absolute; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); font-family: var(--font-display); font-weight: 500; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); } .map-pin span, .map-pin { line-height: 1; } .map-pin.start { bottom: 18px; left: 14px; background: var(--cream); } .map-pin.end { top: 18px; right: 18px; background: var(--gold); color: var(--ink); } .map-pin::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: rgba(31,26,20,0.18); border-radius: 50%; } /* Scene: SCHEDULE */ .scene-schedule { background: linear-gradient(180deg, #131a21, #0a0e12); } .schedule { list-style: none; padding: 0; margin: 0; } .schedule li { display: flex; align-items: baseline; gap: 16px; padding: 14px 6px; border-bottom: 1px dashed rgba(200,165,87,0.18); opacity: 0; transform: translateX(-12px); } .scene-schedule.active .schedule li { animation: slide-in .6s var(--easing) forwards; } .scene-schedule.active .schedule li:nth-child(1) { animation-delay: 0.15s; } .scene-schedule.active .schedule li:nth-child(2) { animation-delay: 0.3s; } .scene-schedule.active .schedule li:nth-child(3) { animation-delay: 0.45s; } .scene-schedule.active .schedule li:nth-child(4) { animation-delay: 0.6s; } @keyframes slide-in { to { opacity: 1; transform: translateX(0); } } .schedule .t { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--gold); min-width: 56px; } .schedule .e { font-family: var(--font-display); font-size: 18px; color: var(--ink); } /* Scene: RSVP */ .scene-rsvp { background: radial-gradient(circle at 50% 0%, #2a1a22, var(--ink) 70%); justify-content: center; } .rsvp-card { background: rgba(31,26,20,0.05); border: 1px solid var(--line-strong); border-radius: 14px; padding: 22px 18px; text-align: center; backdrop-filter: blur(8px); } .rsvp-card p { font-family: var(--font-display); font-style: italic; font-size: 18px; margin: 0 0 14px; color: var(--ink); } .rsvp-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .rsvp-btns .r { padding: 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--line-strong); background: rgba(31,26,20,0.04); color: var(--ink); transition: transform .3s, background .3s; } .rsvp-btns .r.yes { background: var(--gold); color: var(--ink); border-color: transparent; } .rsvp-btns .r:hover { transform: translateY(-1px); } .rsvp-meta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(31,26,20,0.55); } /* Scene: SOCIAL */ .scene-social { background: #0a0e12; } .social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .soc { background: rgba(31,26,20,0.06); border: 1px solid var(--line); padding: 14px 10px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(31,26,20,0.78); opacity: 0; transform: scale(0.92); } .scene-social.active .soc { animation: pop-soc .5s var(--easing) forwards; } .scene-social.active .soc:nth-child(1) { animation-delay: 0.1s; } .scene-social.active .soc:nth-child(2) { animation-delay: 0.2s; } .scene-social.active .soc:nth-child(3) { animation-delay: 0.3s; } .scene-social.active .soc:nth-child(4) { animation-delay: 0.4s; } @keyframes pop-soc { to { opacity: 1; transform: scale(1); } } .soc i { font-size: 22px; color: var(--gold); } .soc.ig i { color: #e1306c; } .soc.wa i { color: #25d366; } .soc.sp i { color: #1db954; } .soc.yt i { color: #ff0000; } /* Scene: MUSIC */ .scene-music { background: linear-gradient(180deg, #1a2129, #0a0e12); align-items: center; justify-content: center; gap: 18px; } .record { position: relative; width: 140px; height: 140px; margin: 0 auto; } .record-disc { width: 100%; height: 100%; border-radius: 50%; background: repeating-radial-gradient(circle at center, #1a1a1a 0, #2a2a2a 2px, #1a1a1a 4px), radial-gradient(circle, #c8a557 0%, #1a1a1a 25%, #0a0a0a 100%); background-blend-mode: overlay; box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05); animation: spin 6s linear infinite; } .record-disc::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: var(--rose); border-radius: 50%; border: 2px solid var(--gold); } @keyframes spin { to { transform: rotate(360deg); } } .record-arm { position: absolute; top: -8px; right: -20px; width: 8px; height: 80px; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 4px; transform-origin: top right; transform: rotate(35deg); } .track { text-align: center; margin-top: 8px; } .track b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--ink); font-weight: 500; } .track span { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(31,26,20,0.55); margin: 4px 0 12px; } .bars { display: flex; justify-content: center; gap: 4px; align-items: flex-end; height: 24px; } .bars i { width: 3px; background: var(--gold); border-radius: 2px; animation: bars 1.2s ease-in-out infinite; } .bars i:nth-child(1) { height: 60%; animation-delay: -0.1s; } .bars i:nth-child(2) { height: 90%; animation-delay: -0.3s; } .bars i:nth-child(3) { height: 40%; animation-delay: -0.5s; } .bars i:nth-child(4) { height: 80%; animation-delay: -0.2s; } .bars i:nth-child(5) { height: 50%; animation-delay: -0.6s; } .bars i:nth-child(6) { height: 70%; animation-delay: -0.4s; } .bars i:nth-child(7) { height: 30%; animation-delay: -0.8s; } @keyframes bars { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } } /* ═══ THEMES ═══ */ .themes { position: relative; z-index: 2; padding: clamp(60px, 10vw, 140px) clamp(20px, 5vw, 80px); } .themes-head { max-width: 760px; margin: 0 auto 60px; text-align: center; } .themes-head p { color: rgba(31,26,20,0.65); margin: 0; } .themes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; max-width: 1240px; margin: 0 auto; } .theme { cursor: pointer; transition: transform .5s var(--easing); } .theme:hover { transform: translateY(-8px); } .theme-card { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; padding: 28px 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-card); transition: box-shadow .4s; } .theme:hover .theme-card { box-shadow: 0 28px 80px -20px rgba(0,0,0,0.6); } .theme-pattern { position: absolute; inset: 0; opacity: 0.18; pointer-events: none; } .theme-mono { position: relative; font-family: var(--font-display); font-style: italic; font-size: 38px; font-weight: 500; align-self: flex-end; } .theme-name { position: relative; font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.1; } .theme-tag { position: relative; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 8px; opacity: 0.7; } .theme-foot { margin-top: 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(31,26,20,0.5); } /* theme variants */ .t-rose .theme-card { background: linear-gradient(160deg, #f4ecdd 0%, #e8c9c1 70%, #b8344e 130%); color: var(--ink); } .t-rose .theme-pattern { background: radial-gradient(circle at 80% 20%, rgba(184,52,78,0.45), transparent 40%), radial-gradient(circle at 20% 80%, rgba(200,165,87,0.5), transparent 40%); } .t-rose .theme-mono { color: var(--rose); } .t-ink .theme-card { background: linear-gradient(160deg, #1a2129 0%, #0a0e12 100%); color: var(--cream); } .t-ink .theme-pattern { background: radial-gradient(circle at 30% 30%, rgba(200,165,87,0.55), transparent 40%), radial-gradient(circle at 80% 80%, rgba(91,58,74,0.65), transparent 40%); } .t-ink .theme-mono { color: var(--gold); } .t-pastel .theme-card { background: linear-gradient(160deg, #f4d6d6 0%, #c8d6e8 60%, #e2c8e8 100%); color: var(--ink); } .t-pastel .theme-pattern { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5), transparent 50%); } .t-pastel .theme-mono { color: #8a3a5a; } .t-citrus .theme-card { background: linear-gradient(160deg, #fce16a 0%, #f08a3a 70%, #c4423a 110%); color: var(--ink); } .t-citrus .theme-pattern { background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.4), transparent 40%); } .t-citrus .theme-mono { color: var(--ink); } .t-emerald .theme-card { background: linear-gradient(160deg, #2f5d4f 0%, #1a3a30 100%); color: var(--cream); } .t-emerald .theme-pattern { background: radial-gradient(circle at 70% 30%, rgba(200,165,87,0.55), transparent 40%), radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18), transparent 40%); } .t-emerald .theme-mono { color: var(--gold-soft); } .t-mono .theme-card { background: linear-gradient(160deg, #ebe1cd 0%, #c5b9a3 100%); color: var(--ink); } .t-mono .theme-pattern { background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(31,26,20,0.18) 14px 15px); } .t-mono .theme-mono { color: var(--ink); } /* ═══ HOW IT WORKS ═══ */ .howto { position: relative; z-index: 2; padding: clamp(60px, 10vw, 140px) clamp(20px, 5vw, 80px); background: linear-gradient(180deg, transparent, var(--cream-soft) 40%, var(--cream-soft) 60%, transparent); } .howto-head { text-align: center; max-width: 720px; margin: 0 auto 70px; } .howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; max-width: 1240px; margin: 0 auto; } .step { background: rgba(31,26,20,0.03); border: 1px solid var(--line); border-radius: 18px; padding: 36px 28px; position: relative; transition: border-color .4s, transform .4s var(--easing), background .4s; } .step:hover { border-color: var(--gold); background: rgba(200,165,87,0.05); transform: translateY(-4px); } .step-art { width: 56px; height: 56px; color: var(--gold); margin-bottom: 28px; } .step-art svg { width: 100%; height: 100%; } .step-n { position: absolute; top: 28px; right: 28px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: rgba(200,165,87,0.5); } .step h3 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; margin: 0 0 12px; color: var(--ink); } .step p { margin: 0; color: rgba(31,26,20,0.62); font-size: 15px; line-height: 1.55; } /* ═══ PRICING ═══ */ .pricing { position: relative; z-index: 2; padding: clamp(60px, 10vw, 140px) clamp(20px, 5vw, 80px); } .pricing-head { text-align: center; max-width: 720px; margin: 0 auto 70px; } .pricing-head p { color: rgba(31,26,20,0.65); margin: 0; } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; align-items: stretch; } .plans.plans-single { grid-template-columns: 1fr; max-width: 520px; } .plans.plans-single .plan.featured { transform: none; } .plan { position: relative; background: linear-gradient(180deg, rgba(31,26,20,0.04), rgba(31,26,20,0.01)); border: 1px solid var(--line); border-radius: 22px; padding: 36px 30px; display: flex; flex-direction: column; gap: 18px; transition: transform .4s var(--easing), border-color .4s, box-shadow .4s; } .plan:hover { transform: translateY(-6px); border-color: var(--line-strong); } .plan.featured { background: linear-gradient(180deg, rgba(200,165,87,0.12), rgba(200,165,87,0.03)); border-color: var(--gold); box-shadow: 0 30px 80px -20px rgba(200,165,87,0.25); transform: translateY(-12px); } .plan .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 20px -4px rgba(200,165,87,0.5); } .plan-name { font-family: var(--font-display); font-style: italic; font-size: 30px; color: var(--gold); font-weight: 500; } .plan-tag { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(31,26,20,0.55); margin-top: 4px; } .plan-price { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 5vw, 64px); line-height: 1; color: var(--ink); } .plan-price .cur { font-family: var(--font-body); font-size: 0.5em; vertical-align: 0.5em; margin-right: 4px; color: var(--gold); font-weight: 600; } .plan-mrp { font-size: 13px; color: rgba(31,26,20,0.55); } .plan-mrp s { color: rgba(31,26,20,0.4); margin-right: 6px; } .plan-mrp code { background: rgba(200,165,87,0.18); color: var(--gold); padding: 1px 6px; border-radius: 4px; font-size: 11px; } .plan ul { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(31,26,20,0.78); flex: 1; } .plan ul li { position: relative; padding-left: 22px; } .plan ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border: 1.5px solid var(--gold); border-radius: 50%; } .plan ul li::after { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; } .plan code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; } /* ═══ REVIEWS ═══ */ .reviews { position: relative; z-index: 2; padding: clamp(60px, 10vw, 140px) 0; } .reviews-head { text-align: center; max-width: 720px; margin: 0 auto 60px; padding: 0 20px; } .review-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .review-track { display: flex; gap: 24px; width: max-content; animation: review-roll 60s linear infinite; padding: 14px 0; } .review-track:hover { animation-play-state: paused; } @keyframes review-roll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .rv { flex: 0 0 360px; background: linear-gradient(180deg, rgba(31,26,20,0.05), rgba(31,26,20,0.01)); border: 1px solid var(--line); border-radius: 18px; padding: 28px; margin: 0; display: flex; flex-direction: column; gap: 16px; min-height: 220px; } .rv blockquote { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.4; color: var(--ink); font-weight: 400; position: relative; } .rv blockquote::before { content: "“"; font-family: var(--font-display); font-size: 60px; line-height: 0.6; color: var(--gold); display: block; margin-bottom: 4px; } .rv figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: auto; } .rv-name { font-family: var(--font-display); font-style: italic; color: var(--gold); } .rv-meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(31,26,20,0.5); } /* ═══ FAQ ═══ */ .faq { position: relative; z-index: 2; padding: clamp(60px, 10vw, 140px) clamp(20px, 5vw, 80px); background: linear-gradient(180deg, transparent, var(--cream-soft) 40%, var(--cream-soft) 60%, transparent); } .faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 100px); max-width: 1240px; margin: 0 auto; align-items: start; } /* Full-width FAQ variant: header on top, list spans the whole row. */ .faq-grid.faq-grid-fullwidth { grid-template-columns: 1fr; gap: 32px; max-width: 980px; } .faq-head { text-align: center; } .faq-head .kicker { justify-content: center; display: inline-flex; } .faq-wa { margin-top: 36px; background: rgba(31,26,20,0.04); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; } .faq-wa .label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .faq-wa .num { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--ink); } .faq-wa .note { font-size: 13px; color: rgba(31,26,20,0.55); margin-top: 4px; } .faq-list { display: flex; flex-direction: column; gap: 4px; } .faq-row { background: rgba(31,26,20,0.03); border: 1px solid var(--line); border-radius: 14px; padding: 0 24px; transition: background .3s, border-color .3s; } .faq-row[open] { background: rgba(200,165,87,0.06); border-color: var(--line-strong); } .faq-row summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; cursor: pointer; gap: 20px; } .faq-row summary::-webkit-details-marker { display: none; } .faq-row .q { font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); color: var(--ink); } .faq-row .toggle { font-family: var(--font-display); font-size: 24px; color: var(--gold); transition: transform .3s; flex-shrink: 0; } .faq-row[open] .toggle { transform: rotate(45deg); } .faq-row .a { font-size: 15px; line-height: 1.6; color: rgba(31,26,20,0.72); padding: 0 0 22px; max-width: 700px; } .faq-row code { font-family: "JetBrains Mono", monospace; background: rgba(200,165,87,0.15); color: var(--gold); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; } /* ═══ FINAL CTA ═══ */ .final-cta { position: relative; z-index: 2; padding: clamp(70px, 10vw, 160px) clamp(20px, 5vw, 80px) 140px; text-align: center; overflow: hidden; } .final-inner { max-width: 720px; margin: 0 auto; position: relative; } .final-kicker { font-family: var(--font-script); font-size: 28px; color: var(--rose-soft); margin-bottom: 8px; } .final-h { font-family: var(--font-display); font-size: clamp(48px, 7vw, 92px); line-height: 1.04; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 22px; color: var(--ink); } .final-h .italic { color: var(--gold); } .final-cta p { font-size: 17px; color: rgba(31,26,20,0.7); margin: 0 0 36px; } .final-trust { margin-top: 22px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(31,26,20,0.5); } .final-trust code { font-family: "JetBrains Mono", monospace; background: rgba(200,165,87,0.18); color: var(--gold); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.04em; } /* ═══ STICKY MOBILE CTA ═══ */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; display: none; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(31,26,20,0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 50; } .sc-price strong { font-family: var(--font-display); font-size: 22px; color: var(--ink); display: block; } .sc-price span { font-size: 11px; letter-spacing: 0.06em; color: rgba(31,26,20,0.6); display: flex; gap: 6px; } .sc-price s { color: rgba(31,26,20,0.4); } .sc-price b { color: var(--gold); } .sticky-cta .btn.compact { padding: 12px 18px; font-size: 13px; } /* ═══ REVEAL ANIMATIONS ═══ */ [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--easing), transform .9s var(--easing); } [data-reveal].in { opacity: 1; transform: translateY(0); } /* ═══ MEDIA QUERIES ═══ */ @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; } .hero-right { order: -1; margin-bottom: 12px; } .envelope-stage { max-width: 380px; aspect-ratio: 1 / 1.05; margin: 0 auto; } /* Mobile: phone on top (sticky), feature list scrolls below. As list items scroll into view the phone updates to that scene. */ .features-grid { grid-template-columns: 1fr; gap: 18px; } .phone-stage { order: 1; position: sticky; top: 70px; margin: 0 auto; align-self: start; } .feature-list { order: 2; } .faq-grid { grid-template-columns: 1fr; gap: 32px; } .plan.featured { transform: none; } } /* ───── Mobile (tablet + phone) ───── */ @media (max-width: 720px) { .hero { padding: 56px 18px 28px; min-height: auto; } .hero-left .display { font-size: clamp(42px, 12vw, 64px); margin: 6px 0 18px; } .hero-left .lede { font-size: 15.5px; line-height: 1.55; margin: 0 0 26px; max-width: 100%; } .cta-row { gap: 10px; margin-bottom: 28px; } .cta-row .btn { flex: 1 1 auto; min-width: 0; justify-content: center; } .invytes-page .btn { padding: 15px 22px; font-size: 14px; min-height: 48px; } .invytes-page .btn-lg { padding: 18px 28px; font-size: 15px; } .hero-trust { flex-wrap: wrap; gap: 8px 12px; font-size: 13px; } .envelope-stage { max-width: 320px; } .marquee { padding: 14px 0; } .marquee-track { font-size: 14px; gap: 18px; } /* features / phone — phone sticky on top; ONE caption swaps under it as the user scrolls. The full feature list is collapsed into invisible scroll-anchor blocks so each one centring fires the IO that updates the caption + phone scene. */ .features { padding: 60px 18px; } .features-head { margin-bottom: 32px; } .invytes-page .section-h { font-size: clamp(32px, 8.5vw, 48px); } .features-grid { grid-template-columns: 1fr; gap: 0; } .phone-stage { order: 1; position: sticky; top: 70px; margin: 0 auto; z-index: 2; } .feature-list { order: 2; padding: 0; margin: 0; pointer-events: none; list-style: none; } .feature-list li, .feature-list li:last-child, .feature-list li.active { height: 70vh; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; display: block; } .feature-list li *, .feature-list li::before, .feature-list li::after { display: none !important; } .phone { width: 200px; height: 412px; border-radius: 28px; } .phone-notch { width: 52px; height: 12px; top: 10px; } /* The one swap-card under the phone */ .feature-active { display: block; margin: 12px auto 0; max-width: 320px; text-align: center; transition: opacity .25s ease; } .feature-active .fa-num { display: block; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--gold); margin-bottom: 4px; } .feature-active .fa-title { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink); margin: 0 0 6px; } .feature-active .fa-desc { margin: 0; color: rgba(31,26,20,0.66); font-size: 14px; line-height: 1.45; } /* themes */ .themes { padding: 70px 18px; } .themes-head { margin-bottom: 40px; } .themes-grid { grid-template-columns: 1fr; gap: 18px; max-width: 380px; } .theme-card { aspect-ratio: 4 / 5; padding: 24px 20px; } /* how it works */ .howto { padding: 70px 18px; } .howto-grid { grid-template-columns: 1fr; gap: 28px; } /* pricing */ .pricing { padding: 70px 18px; } .plans { grid-template-columns: 1fr; gap: 18px; max-width: 420px; } .plan { padding: 28px 24px; gap: 14px; } .plan.featured { margin-top: 8px; } .plan-name { font-size: 26px; } .plan-price { font-size: 48px; } .plan ul { font-size: 14px; padding-top: 14px; gap: 8px; } /* reviews */ .reviews { padding: 70px 0; } .reviews-head { margin: 0 auto 40px; } .review-track { animation-duration: 90s; } .rv { flex-basis: 280px; padding: 22px; } .rv blockquote { font-size: 16px; } /* faq */ .faq { padding: 70px 18px; } .faq-row summary { padding: 16px 14px; min-height: 56px; font-size: 15px; } .faq-row .a { padding: 0 14px 18px; font-size: 14.5px; } .faq-wa { padding: 20px; } .faq-wa .num { font-size: 18px; } /* final cta */ .final-cta { padding: 80px 18px 110px; } .final-h { font-size: clamp(36px, 9vw, 56px); } /* sticky bar */ .sticky-cta { display: flex; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } .sc-price strong { font-size: 19px; } .sc-price span { font-size: 10.5px; } .sticky-cta .btn.compact { padding: 12px 16px; font-size: 13px; min-height: 44px; flex-shrink: 0; } .invytes-page body { padding-bottom: 76px; } } /* ───── Small phones ───── */ @media (max-width: 420px) { .hero { padding: 48px 16px 24px; } .hero-left .display { font-size: clamp(38px, 11vw, 52px); letter-spacing: -0.02em; } .hero-left .lede { font-size: 14.5px; } .cta-row { flex-direction: column; } .cta-row .btn { width: 100%; } .envelope-stage { max-width: 280px; } .features, .themes, .howto, .pricing, .faq { padding-left: 14px; padding-right: 14px; } .invytes-page .section-h { font-size: clamp(28px, 9vw, 38px); } .phone { width: 256px; height: 528px; } .theme-card { aspect-ratio: 4 / 5; padding: 22px 18px; } .plan { padding: 24px 20px; } .plan-name { font-size: 24px; } .plan-price { font-size: 42px; } .sticky-cta { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); } .sc-price strong { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .marquee-track, .review-track { animation: none; } .orb { animation: none; } [data-reveal] { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════ BUY MODAL ═══════════════════════════════════════════════ */ .iv-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; animation: iv-modal-fade .25s var(--easing); } .iv-modal[hidden] { display: none; } .iv-modal-backdrop { position: absolute; inset: 0; background: rgba(8,12,16,0.78); backdrop-filter: blur(8px); } .iv-modal-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; background: linear-gradient(180deg, #18202a 0%, #0e1419 100%); border: 1px solid var(--line-strong); border-radius: 22px; padding: 34px 28px 28px; color: var(--ink); box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,165,87,0.2); animation: iv-modal-rise .35s var(--easing); } @keyframes iv-modal-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes iv-modal-rise { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } .iv-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: rgba(31,26,20,0.6); border-radius: 999px; transition: background .2s, color .2s; } .iv-modal-close:hover { background: rgba(31,26,20,0.08); color: var(--ink); } .iv-modal-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .iv-modal-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .iv-modal-title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 34px); font-weight: 500; line-height: 1.1; margin: 0 0 8px; color: var(--ink); } .iv-modal-title .italic { font-style: italic; color: var(--gold); } .iv-modal-sub { font-size: 14px; color: rgba(31,26,20,0.65); margin: 0 0 22px; } .iv-modal-sub strong { color: var(--ink); font-weight: 600; } .iv-form { display: flex; flex-direction: column; gap: 14px; } .iv-field { display: flex; flex-direction: column; gap: 6px; } .iv-field > span { font-size: 12.5px; letter-spacing: 0.06em; color: rgba(31,26,20,0.65); text-transform: uppercase; font-weight: 500; } .iv-field input, .iv-field select { width: 100%; padding: 13px 14px; font: inherit; font-size: 15px; background: rgba(31,26,20,0.04); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); transition: border-color .2s, background .2s; min-height: 48px; } .iv-field input:focus, .iv-field select:focus { outline: none; border-color: var(--gold); background: rgba(200,165,87,0.06); } .iv-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 38px; } .iv-form-err { font-size: 13px; color: var(--rose-soft); background: rgba(184,52,78,0.12); border: 1px solid rgba(184,52,78,0.3); padding: 10px 12px; border-radius: 8px; } #iv-submit { margin-top: 6px; min-height: 50px; } .iv-form-trust { text-align: center; font-size: 12px; color: rgba(31,26,20,0.5); margin-top: 8px; } @media (max-width: 480px) { .iv-modal-card { padding: 28px 20px 22px; border-radius: 18px; } .iv-modal-title { font-size: 26px; } } /* ─── Shared reviews widget tokens — consumed by reviews.css under body.landing-fraunces-page. Mapped to the invytes (gold + rose on cream) palette. ─── */ :root { --sb-ink: #1F1A14; --sb-muted: #6A5D4D; --sb-line: rgba(31, 26, 20, 0.10); --sb-card: rgba(255, 252, 244, 0.92); --sb-shadow: 0 8px 22px rgba(40, 28, 14, 0.10); --sb-accent: #C8A557; --sb-accent-deep: #A48434; --sb-secondary: #B8344E; }