From 25d52d67093b7759fb59e8d794fad3e4b57c8543 Mon Sep 17 00:00:00 2001 From: MVA Global Fret Date: Tue, 5 May 2026 01:17:30 +0200 Subject: [PATCH] Drop the cloud-styled CTA into the intro under a parachute MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the gold pill with a fluffy cloud-shaped button — pill base plus five absolutely-positioned puffs (three on top, two on the bottom) all in white-to-pale-blue gradient with subtle inner shadow to read as 3D. Cradle the button in a 170px LottieFiles parachute (Elmer Vergara's "Falling Parcel", licensed under Lottie Simple, hosted in assets/parachute.lottie at 3.7 KB). The whole stack drops in from above the viewport over 1.6s with a slight overshoot, much faster than the boxes in the background video, then the parachute keeps looping in place. Mouse parallax dropped from the button — it would fight the entrance animation. Video parallax stays. Co-Authored-By: Claude Opus 4.6 --- assets/parachute.lottie | Bin 0 -> 3757 bytes css/parallax.css | 138 +++++++++++++++++++++++----------------- index.html | 22 +++++-- 3 files changed, 98 insertions(+), 62 deletions(-) create mode 100644 assets/parachute.lottie diff --git a/assets/parachute.lottie b/assets/parachute.lottie new file mode 100644 index 0000000000000000000000000000000000000000..dbc53709f7bc1b541d21aadfa5aa134287ef0225 GIT binary patch literal 3757 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 J%oP8+{TCI${u=-Q literal 0 HcmV?d00001 diff --git a/css/parallax.css b/css/parallax.css index 7510186..0ca2381 100644 --- a/css/parallax.css +++ b/css/parallax.css @@ -117,80 +117,101 @@ html, body { linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%); } -/* ── BOUTON CTA centré ──────────────────────────────────────────────────── */ -.cta-btn { +/* ── PARACHUTE + BOUTON-NUAGE ──────────────────────────────────────────── + Le bloc tombe du haut de l'écran jusqu'au centre via translateY animé, + plus rapide que les parachutes de la vidéo (~1.6s vs 7s). Après l'atter- + rissage, le parachute Lottie continue à boucler doucement au-dessus + du nuage. Aucune parallaxe souris sur ce groupe — la chute est l'effet. */ +.cta-stack { position: absolute; top: 50%; left: 50%; - /* Bouge légèrement en sens INVERSE des couches → effet de tilt 3D */ - transform: translate( - calc(-50% + var(--mx) * 8px), - calc(-50% + var(--my) * 8px) - ); z-index: 10; + display: flex; + flex-direction: column; + align-items: center; + pointer-events: none; + transform: translate(-50%, -50%); + animation: parachute-drop 1.6s cubic-bezier(0.34, 0.4, 0.5, 1) 0.2s both; +} +.cta-stack > * { pointer-events: auto; } + +@keyframes parachute-drop { + 0% { transform: translate(-50%, -130vh); opacity: 0; } + 10% { opacity: 1; } + 85% { transform: translate(-50%, -42%); opacity: 1; } + 100% { transform: translate(-50%, -50%); } +} + +.cta-parachute { + width: 170px; + height: 170px; + margin-bottom: -22px; + filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); + pointer-events: none; +} + +/* ── BOUTON-NUAGE ──────────────────────────────────────────────────────── + Pill blanche moelleuse + 5 puffs en absolu pour la silhouette nuage. */ +.cloud-btn { + position: relative; display: inline-flex; align-items: center; - gap: 16px; - padding: 22px 56px; - background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%); - color: var(--navy); text-decoration: none; - border-radius: 50px; + padding: 22px 52px; + border-radius: 60px; + background: linear-gradient(180deg, #ffffff 0%, #eaf1ff 100%); + color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; - letter-spacing: 0.6px; - overflow: hidden; + letter-spacing: 0.4px; white-space: nowrap; box-shadow: - 0 20px 60px rgba(197, 165, 90, 0.55), - 0 0 0 0 rgba(197, 165, 90, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.45); - transition: box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), - transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); + 0 24px 70px rgba(120, 150, 220, 0.45), + 0 6px 18px rgba(20, 20, 50, 0.18), + inset 0 -3px 8px rgba(180, 200, 235, 0.5), + inset 0 2px 0 rgba(255, 255, 255, 0.95); + transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), + box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); } - -.cta-btn:hover { - transform: translate( - calc(-50% + var(--mx) * 8px), - calc(-50% + var(--my) * 8px) - ) scale(1.04); +.cloud-btn:hover { + transform: scale(1.04); box-shadow: - 0 28px 75px rgba(197, 165, 90, 0.7), - 0 0 0 12px rgba(197, 165, 90, 0.12), - inset 0 1px 0 rgba(255, 255, 255, 0.55); + 0 30px 85px rgba(120, 150, 220, 0.55), + 0 10px 24px rgba(20, 20, 50, 0.22), + inset 0 -3px 8px rgba(180, 200, 235, 0.5), + inset 0 2px 0 rgba(255, 255, 255, 1); } -.cta-btn-shine { +/* Puffs de nuage — 5 boules positionnées autour de la pill */ +.cloud-puff { position: absolute; - top: 0; left: -120%; - width: 60%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); - transform: skewX(-22deg); - transition: left 0.7s ease; - pointer-events: none; + background: linear-gradient(180deg, #ffffff 0%, #e7eefc 100%); + border-radius: 50%; + box-shadow: + inset 0 -3px 6px rgba(180, 200, 235, 0.5), + inset 0 2px 0 rgba(255, 255, 255, 0.9); + z-index: 0; } -.cta-btn:hover .cta-btn-shine { left: 130%; } +.cloud-puff-tl { width: 60px; height: 60px; top: -22px; left: 8%; } +.cloud-puff-tm { width: 52px; height: 52px; top: -32px; left: 50%; transform: translateX(-50%); } +.cloud-puff-tr { width: 56px; height: 56px; top: -22px; right: 8%; } +.cloud-puff-bl { width: 44px; height: 44px; bottom: -18px; left: 22%; } +.cloud-puff-br { width: 48px; height: 48px; bottom: -20px; right: 22%; } -.cta-btn i { +.cloud-content { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + gap: 14px; +} +.cloud-content i { font-size: 0.95rem; transition: transform 0.32s ease; } -.cta-btn:hover i { transform: translateX(8px); } - -.cta-btn::after { - content: ''; - position: absolute; - inset: -3px; - border-radius: 50px; - border: 2px solid rgba(197, 165, 90, 0.55); - animation: ctaPulse 2.8s ease-out infinite; - pointer-events: none; -} -@keyframes ctaPulse { - 0% { transform: scale(1); opacity: 0.7; } - 100% { transform: scale(1.18); opacity: 0; } -} +.cloud-btn:hover .cloud-content i { transform: translateX(6px); } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { @@ -199,12 +220,15 @@ html, body { .parallax-logo img { height: 38px; } .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; } - .cta-btn { - padding: 16px 36px; - font-size: 0.98rem; - } + .cta-parachute { width: 130px; height: 130px; margin-bottom: -16px; } + .cloud-btn { padding: 16px 34px; font-size: 0.98rem; } + .cloud-puff-tl { width: 50px; height: 50px; top: -22px; } + .cloud-puff-tm { width: 44px; height: 44px; top: -26px; } + .cloud-puff-tr { width: 46px; height: 46px; top: -22px; } + .cloud-puff-bl { width: 38px; height: 38px; bottom: -16px; } + .cloud-puff-br { width: 42px; height: 42px; bottom: -18px; } } @media (prefers-reduced-motion: reduce) { - .cta-btn::after { animation: none; } + .cta-stack { animation: none; } } diff --git a/index.html b/index.html index 3e14ffd..bdec668 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ + @@ -36,11 +37,22 @@
- - - Accéder au site - - +
+ + + + + + + + + Accéder au site + + + +