930ce340a8
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>
209 lines
5.6 KiB
CSS
209 lines
5.6 KiB
CSS
/* =========================================================================
|
|
PARALLAX INTRO — MVA Global Fret
|
|
Page unique, fixe (pas de scroll). Vidéo Terre rotative + ligne rouge 3D
|
|
Paris ↔ Antananarivo (suit la rotation du globe) + bouton centré.
|
|
========================================================================= */
|
|
|
|
:root {
|
|
--navy: #1a1a3e;
|
|
--navy-deep: #050518;
|
|
--gold: #c5a55a;
|
|
--gold-light: #e0c98a;
|
|
--red: #ff2a3d;
|
|
--white: #fff;
|
|
--mx: 0;
|
|
--my: 0;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.parallax-body {
|
|
font-family: 'Inter', sans-serif;
|
|
color: var(--white);
|
|
background: var(--navy-deep);
|
|
}
|
|
|
|
/* ── HEADER ─────────────────────────────────────────────────────────────── */
|
|
.parallax-header {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 22px 36px;
|
|
z-index: 50;
|
|
}
|
|
|
|
.parallax-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--white);
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 1.2px;
|
|
font-size: 0.92rem;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
}
|
|
.parallax-logo img {
|
|
height: 44px;
|
|
width: auto;
|
|
filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65));
|
|
}
|
|
|
|
.lang-switcher {
|
|
display: inline-flex;
|
|
background: rgba(255,255,255,0.08);
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
border-radius: 50px;
|
|
padding: 4px;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.lang-switcher button {
|
|
background: transparent;
|
|
border: none;
|
|
color: rgba(255,255,255,0.7);
|
|
padding: 6px 14px;
|
|
cursor: pointer;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
font-size: 0.78rem;
|
|
font-family: inherit;
|
|
transition: all 0.2s;
|
|
}
|
|
.lang-switcher button.active {
|
|
background: var(--gold);
|
|
color: var(--navy);
|
|
}
|
|
.lang-switcher button:hover:not(.active) { color: var(--white); }
|
|
|
|
/* ── STAGE ──────────────────────────────────────────────────────────────── */
|
|
.stage {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Parallaxe vidéo : suit la souris avec easing. Sur-dimensionnée pour
|
|
masquer les bords quand elle bouge. */
|
|
.layer-video {
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)) scale(1.06);
|
|
}
|
|
|
|
.layer-tint {
|
|
background:
|
|
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 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;
|
|
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.1rem;
|
|
letter-spacing: 0.6px;
|
|
overflow: hidden;
|
|
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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.cta-btn-shine {
|
|
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;
|
|
}
|
|
.cta-btn:hover .cta-btn-shine { left: 130%; }
|
|
|
|
.cta-btn 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; }
|
|
}
|
|
|
|
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.parallax-header { padding: 14px 18px; }
|
|
.parallax-logo span { display: none; }
|
|
.parallax-logo img { height: 38px; }
|
|
.lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
|
|
|
|
.cta-btn {
|
|
padding: 16px 36px;
|
|
font-size: 0.98rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.cta-btn::after { animation: none; }
|
|
}
|