Revert to original gold-pill CTA — cloud version was off-brand
User didn't like the cloud look. Roll the button back to the gold
pill from c52ac51 (gold gradient, shine sweep, pulse halo, mouse
parallax tilt). Keep the parachute video swap, just restore the CTA
styling.
Drop assets/cloud.png — no longer referenced.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret
parent
90e5ff7116
commit
930ce340a8
BIN
assets/cloud.png
BIN
assets/cloud.png
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
112
css/parallax.css
112
css/parallax.css
@ -109,79 +109,86 @@ html, body {
|
||||
transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)) scale(1.06);
|
||||
}
|
||||
|
||||
/* Voile très léger — la vidéo en golden hour est belle, on la laisse vivre.
|
||||
Petit assombrissement vers les bords pour la lisibilité du bouton. */
|
||||
.layer-tint {
|
||||
background:
|
||||
radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 24, 0.32) 100%),
|
||||
linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%);
|
||||
radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 24, 0.55) 100%),
|
||||
linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%);
|
||||
}
|
||||
|
||||
/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
|
||||
Le nuage tombe du haut jusqu'au centre via animation, ~3.4s avec léger
|
||||
overshoot. Une fois posé, hover scale léger. */
|
||||
.cloud-btn {
|
||||
/* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
|
||||
.cta-btn {
|
||||
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: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
width: 520px;
|
||||
height: 360px;
|
||||
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;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.4px;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.6px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
filter: drop-shadow(0 28px 38px rgba(20, 20, 50, 0.45));
|
||||
animation: cloud-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
|
||||
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);
|
||||
}
|
||||
|
||||
@keyframes cloud-drop {
|
||||
0% { transform: translate(-50%, -130vh); opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
85% { transform: translate(-50%, -42%); opacity: 1; }
|
||||
100% { transform: translate(-50%, -50%); }
|
||||
.cta-btn:hover {
|
||||
transform: translate(
|
||||
calc(-50% + var(--mx) * 8px),
|
||||
calc(-50% + var(--my) * 8px)
|
||||
) 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);
|
||||
}
|
||||
|
||||
.cloud-btn:hover {
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
/* hover désactive l'animation de chute pour que scale ne saute pas */
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.cloud-bg {
|
||||
.cta-btn-shine {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
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;
|
||||
z-index: 0;
|
||||
user-select: none;
|
||||
}
|
||||
.cta-btn:hover .cta-btn-shine { left: 130%; }
|
||||
|
||||
/* Texte centré sur le « cœur » du nuage (légèrement plus haut que le centre
|
||||
géométrique de l'image, parce que le nuage Fluent a une grosse base et un
|
||||
sommet bombé). */
|
||||
.cloud-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: -10px;
|
||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.cloud-content i {
|
||||
font-size: 1.05rem;
|
||||
.cta-btn i {
|
||||
font-size: 0.95rem;
|
||||
transition: transform 0.32s ease;
|
||||
}
|
||||
.cloud-btn:hover .cloud-content i { transform: translateX(6px); }
|
||||
.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; }
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
@ -190,9 +197,12 @@ html, body {
|
||||
.parallax-logo img { height: 38px; }
|
||||
.lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
|
||||
|
||||
.cloud-btn { width: 360px; height: 250px; font-size: 1.05rem; }
|
||||
.cta-btn {
|
||||
padding: 16px 36px;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cloud-btn { animation: none; }
|
||||
.cta-btn::after { animation: none; }
|
||||
}
|
||||
|
||||
10
index.html
10
index.html
@ -36,12 +36,10 @@
|
||||
|
||||
<div class="layer layer-tint"></div>
|
||||
|
||||
<a href="accueil.html" class="cta-btn cloud-btn">
|
||||
<img class="cloud-bg" src="assets/cloud.png" alt="">
|
||||
<span class="cloud-content">
|
||||
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
||||
<i class="fa-solid fa-arrow-right"></i>
|
||||
</span>
|
||||
<a href="accueil.html" class="cta-btn">
|
||||
<span class="cta-btn-shine"></span>
|
||||
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
||||
<i class="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user