diff --git a/css/parallax.css b/css/parallax.css index 935d659..666adef 100644 --- a/css/parallax.css +++ b/css/parallax.css @@ -1,16 +1,16 @@ /* ========================================================================= PARALLAX INTRO — MVA Global Fret - Page unique fixe. Parallaxe pilotée à la souris uniquement. - Photos professionnelles Unsplash, aucun dessin maison. + Page unique, fixe (pas de scroll). Vidéo de fond + Terre + ligne rouge + Paris↔Antananarivo + bouton centré. Bouge à la souris. ========================================================================= */ :root { --navy: #1a1a3e; --navy-deep: #050518; - --navy-light: #2a2a5e; --gold: #c5a55a; --gold-light: #e0c98a; - --white: #ffffff; + --red: #ff2a3d; + --white: #fff; --mx: 0; --my: 0; } @@ -28,14 +28,14 @@ html, body { background: var(--navy-deep); } -/* ── HEADER MINIMAL ─────────────────────────────────────────────────────── */ +/* ── HEADER ─────────────────────────────────────────────────────────────── */ .parallax-header { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; - padding: 20px 36px; + padding: 22px 36px; z-index: 50; } @@ -46,15 +46,15 @@ html, body { color: var(--white); font-family: 'Poppins', sans-serif; font-weight: 700; - letter-spacing: 1px; - font-size: 0.95rem; + 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 12px rgba(0,0,0,0.5)); + filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65)); } .lang-switcher { @@ -90,293 +90,148 @@ html, body { width: 100vw; height: 100vh; overflow: hidden; - perspective: 1000px; } .layer { position: absolute; - inset: -8% -8%; /* Marge pour que la parallaxe ne révèle pas les bords */ + inset: -10% -10%; pointer-events: none; will-change: transform; } /* ────────────────────────────────────────────────────────────────────────── - COUCHE 1 — Terre depuis l'espace (background le plus profond) - Photo : NASA / Unsplash @nasa + COUCHE 1 — VIDÉO de nuages aériens (Pexels, libre) + Bouge le PLUS à la souris (effet de profondeur). ────────────────────────────────────────────────────────────────────────── */ -.layer-earth { - background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=2400&q=85'); - background-size: cover; - background-position: center; - /* Bouge légèrement à la souris */ - transform: translate(calc(var(--mx) * -18px), calc(var(--my) * -18px)) scale(1.04); +.layer-video { + width: 120%; + height: 120%; + object-fit: cover; + object-position: center; + filter: brightness(0.85) saturate(1.1) hue-rotate(-10deg); + transform: translate(calc(var(--mx) * -45px), calc(var(--my) * -45px)) scale(1.05); } /* ────────────────────────────────────────────────────────────────────────── - COUCHE 2 — Voile bleu nuit pour assombrir et amener la palette de marque + COUCHE 2 — TERRE depuis l'espace (photo NASA / Unsplash) + Superposée à la vidéo en mode screen → on voit la motion en transparence. + ────────────────────────────────────────────────────────────────────────── */ +.layer-earth { + background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=2400&q=85') center/cover no-repeat; + opacity: 0.78; + mix-blend-mode: screen; + transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)) scale(1.04); +} + +/* ────────────────────────────────────────────────────────────────────────── + COUCHE 3 — Voile bleu nuit (palette MVA) ────────────────────────────────────────────────────────────────────────── */ .layer-tint { background: - radial-gradient(ellipse at center, rgba(26, 26, 62, 0.4) 0%, rgba(5, 5, 24, 0.85) 100%), - linear-gradient(180deg, rgba(26, 26, 62, 0.5) 0%, rgba(5, 5, 24, 0.7) 100%); + radial-gradient(ellipse at center, rgba(20, 20, 50, 0.35) 0%, rgba(5, 5, 24, 0.85) 100%), + linear-gradient(180deg, rgba(10, 10, 30, 0.55) 0%, rgba(5, 5, 24, 0.7) 100%); inset: 0; } /* ────────────────────────────────────────────────────────────────────────── - COUCHE 3 — Nuages au coucher de soleil (vue aérienne) - Mode soft-light pour fusionner avec la Terre - Photo : Unsplash + COUCHE 4 — Route Paris ↔ Antananarivo (ligne rouge fine) + Bouge légèrement (entre vidéo et bouton), donne une 3ème profondeur. ────────────────────────────────────────────────────────────────────────── */ -.layer-clouds { - background-image: url('https://images.unsplash.com/photo-1530908295418-a12e326966ba?w=2400&q=85'); - background-size: cover; - background-position: center; - opacity: 0.28; - mix-blend-mode: soft-light; - transform: translate(calc(var(--mx) * -32px), calc(var(--my) * -32px)) scale(1.06); -} - -/* ────────────────────────────────────────────────────────────────────────── - COUCHE 4 — Halo doré central qui suit la souris - ────────────────────────────────────────────────────────────────────────── */ -.layer-glow { - background: radial-gradient(circle at calc(50% + var(--mx) * 8%) calc(50% + var(--my) * 8%), - rgba(197, 165, 90, 0.22) 0%, - rgba(197, 165, 90, 0.10) 25%, - transparent 55%); +.layer-route { inset: 0; - mix-blend-mode: screen; + transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -12px)); } +.layer-route svg { width: 100%; height: 100%; display: block; } /* ────────────────────────────────────────────────────────────────────────── - COUCHE 5 — Particules dorées flottantes (parallaxe la plus rapide) + BOUTON CTA centré — "Accéder au site" + Bouge en sens INVERSE des couches → effet de tilt. ────────────────────────────────────────────────────────────────────────── */ -.layer-particles { - inset: 0; - transform: translate(calc(var(--mx) * -55px), calc(var(--my) * -55px)); -} -.particle { - position: absolute; - border-radius: 50%; - background: radial-gradient(circle, #fff 0%, var(--gold) 50%, transparent 100%); - pointer-events: none; - filter: blur(0.5px); - animation: float 14s ease-in-out infinite; -} -.particle::after { - content: ''; - position: absolute; - inset: -4px; - border-radius: 50%; - background: radial-gradient(circle, rgba(197, 165, 90, 0.5) 0%, transparent 70%); - filter: blur(4px); -} -.p1 { top: 12%; left: 8%; width: 4px; height: 4px; animation-delay: 0s; animation-duration: 12s; } -.p2 { top: 22%; left: 78%; width: 3px; height: 3px; animation-delay: -2s; animation-duration: 16s; } -.p3 { top: 35%; left: 18%; width: 5px; height: 5px; animation-delay: -5s; animation-duration: 14s; } -.p4 { top: 48%; left: 88%; width: 2px; height: 2px; animation-delay: -8s; animation-duration: 18s; } -.p5 { top: 60%; left: 14%; width: 4px; height: 4px; animation-delay: -3s; animation-duration: 13s; } -.p6 { top: 72%; left: 72%; width: 3px; height: 3px; animation-delay: -6s; animation-duration: 17s; } -.p7 { top: 82%; left: 30%; width: 5px; height: 5px; animation-delay: -1s; animation-duration: 15s; } -.p8 { top: 18%; left: 48%; width: 2px; height: 2px; animation-delay: -7s; animation-duration: 19s; } -.p9 { top: 40%; left: 56%; width: 3px; height: 3px; animation-delay: -4s; animation-duration: 14s; } -.p10 { top: 88%; left: 92%; width: 4px; height: 4px; animation-delay: -9s; animation-duration: 16s; } -.p11 { top: 6%; left: 35%; width: 3px; height: 3px; animation-delay: -10s; animation-duration: 13s; } -.p12 { top: 92%; left: 56%; width: 2px; height: 2px; animation-delay: -11s; animation-duration: 17s; } - -@keyframes float { - 0%, 100% { transform: translate(0, 0); opacity: 0.4; } - 25% { transform: translate(20px, -30px); opacity: 1; } - 50% { transform: translate(-15px, -50px); opacity: 0.6; } - 75% { transform: translate(-25px, -20px); opacity: 1; } -} - -/* ────────────────────────────────────────────────────────────────────────── - CARTE CENTRALE — CTA - ────────────────────────────────────────────────────────────────────────── */ -.center-card { +.cta-btn { position: absolute; top: 50%; left: 50%; z-index: 10; - text-align: center; - width: min(560px, calc(100vw - 40px)); - padding: 50px 50px 44px; - background: rgba(13, 13, 36, 0.45); - border: 1px solid rgba(197, 165, 90, 0.25); - border-radius: 28px; - backdrop-filter: blur(24px) saturate(140%); - -webkit-backdrop-filter: blur(24px) saturate(140%); - box-shadow: - 0 30px 80px rgba(0, 0, 0, 0.55), - inset 0 1px 0 rgba(255, 255, 255, 0.08); - /* La carte bouge en sens INVERSE des autres couches (effet de tilt 3D) */ - transform: translate( - calc(-50% + var(--mx) * 12px), - calc(-50% + var(--my) * 12px) - ); - transition: transform 0.05s linear; -} - -/* Halo doré derrière la carte */ -.center-card::before { - content: ''; - position: absolute; - inset: -2px; - border-radius: 28px; - background: linear-gradient(135deg, rgba(197, 165, 90, 0.6), transparent 40%, transparent 60%, rgba(197, 165, 90, 0.4)); - z-index: -1; - opacity: 0.5; - filter: blur(8px); -} - -.card-pretitle { - font-family: 'Poppins', sans-serif; - font-weight: 500; - letter-spacing: 8px; - text-transform: uppercase; - color: var(--gold); - font-size: 0.78rem; - margin-bottom: 14px; - opacity: 0.92; -} - -.card-title { - font-family: 'Poppins', sans-serif; - font-size: clamp(2rem, 4.6vw, 3.4rem); - font-weight: 800; - letter-spacing: -1px; - line-height: 1; - background: linear-gradient(135deg, #fff 0%, #c5a55a 55%, #fff 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - color: transparent; - text-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); -} - -.card-line { - width: 64px; - height: 2px; - background: var(--gold); - margin: 22px auto 18px; - border-radius: 1px; - position: relative; -} -.card-line::after { - content: ''; - position: absolute; - inset: 0; - background: var(--gold); - filter: blur(4px); - opacity: 0.6; -} - -.card-subtitle { - font-size: clamp(0.95rem, 1.5vw, 1.1rem); - font-weight: 300; - color: rgba(255, 255, 255, 0.8); - line-height: 1.55; - letter-spacing: 0.3px; - max-width: 420px; - margin: 0 auto 36px; -} - -/* ── BOUTON CTA ─────────────────────────────────────────────────────────── */ -.cta-btn { - position: relative; display: inline-flex; align-items: center; - gap: 14px; - padding: 18px 44px; + 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.02rem; - letter-spacing: 0.5px; + font-size: 1.1rem; + letter-spacing: 0.6px; overflow: hidden; + white-space: nowrap; box-shadow: - 0 14px 40px rgba(197, 165, 90, 0.5), + 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.4); - transition: all 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); - z-index: 1; + inset 0 1px 0 rgba(255, 255, 255, 0.45); + transition: box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); + /* Bouge légèrement en sens opposé des couches arrière (effet 3D) */ + transform: translate( + calc(-50% + var(--mx) * 8px), + calc(-50% + var(--my) * 8px) + ); } + +.cta-btn:hover { + 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); +} + +/* Effet shine au hover */ .cta-btn-shine { position: absolute; top: 0; left: -120%; - width: 50%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); - transform: skewX(-20deg); + width: 60%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); + transform: skewX(-22deg); transition: left 0.7s ease; -} -.cta-btn:hover { - transform: translateY(-4px) scale(1.02); - box-shadow: - 0 22px 55px rgba(197, 165, 90, 0.65), - 0 0 0 10px rgba(197, 165, 90, 0.12), - inset 0 1px 0 rgba(255, 255, 255, 0.5); + 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(6px); } +.cta-btn:hover i { transform: translateX(8px); } -/* Pulse autour du bouton (continu) */ +/* Pulse continu autour du bouton */ .cta-btn::after { content: ''; position: absolute; inset: -3px; border-radius: 50px; - border: 2px solid rgba(197, 165, 90, 0.5); - animation: ctaPulse 2.5s ease-out infinite; + 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.6; } + 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.18); opacity: 0; } } -/* ── META INFOS SOUS LE BOUTON ──────────────────────────────────────────── */ -.card-meta { - margin-top: 32px; - display: flex; - justify-content: center; - gap: 14px; - flex-wrap: wrap; - color: rgba(255, 255, 255, 0.6); - font-size: 0.82rem; -} -.card-meta span { display: inline-flex; align-items: center; gap: 8px; } -.card-meta i { color: var(--gold); font-size: 0.85rem; } -.meta-sep { color: rgba(197, 165, 90, 0.4); padding: 0 4px; } - /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .parallax-header { padding: 14px 18px; } .parallax-logo span { display: none; } - .parallax-logo img { height: 40px; } + .parallax-logo img { height: 38px; } .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; } - .center-card { - width: calc(100vw - 28px); - padding: 36px 28px 32px; - border-radius: 22px; + .cta-btn { + padding: 16px 36px; + font-size: 0.98rem; } - .card-pretitle { letter-spacing: 5px; font-size: 0.72rem; } - .card-subtitle { font-size: 0.92rem; margin-bottom: 28px; } - .cta-btn { padding: 14px 30px; font-size: 0.95rem; } - - .card-meta { gap: 10px; font-size: 0.76rem; } - .meta-sep { display: none; } } @media (prefers-reduced-motion: reduce) { - .particle, .cta-btn::after { animation: none; } - .layer-earth, .layer-clouds, .layer-particles, .center-card { transition: none; } + .cta-btn::after { animation: none; } + .layer-video, .layer-earth, .layer-route, .cta-btn { transition: none; } } diff --git a/index.html b/index.html index c3ade6c..981ac1e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ MVA Global Fret — Bienvenue - + @@ -14,7 +14,6 @@ -
-
- + + + +
- +
- -
+ +
+ + + + + + + + + + + + + + + - -
+ + - -
- - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- -
-
Bienvenue chez
-

MVA Global Fret

-
-

Le pont aérien entre Paris et Madagascar

- - - - Accéder au site - - - -
- 2 envois / semaine - · - 2 semaines depuis Paris - · - 70 000 Ar / kg -
-
+ + + + Accéder au site + +
@@ -108,11 +132,11 @@ } })(); - // ── Mouse parallaxe avec easing fluide ─────────────────────────────────── + // ── Mouse parallaxe avec easing ────────────────────────────────────────── (function () { const root = document.documentElement; let targetX = 0, targetY = 0, currentX = 0, currentY = 0; - const ease = 0.07; + const ease = 0.06; function loop() { currentX += (targetX - currentX) * ease; @@ -128,7 +152,6 @@ targetY = (e.clientY / window.innerHeight - 0.5) * 2; }, { passive: true }); - // Mobile : effet basé sur l'orientation de l'appareil window.addEventListener('deviceorientation', (e) => { if (e.gamma == null || e.beta == null) return; targetX = Math.max(-1, Math.min(1, e.gamma / 30));