/* ============================================================ MAP CONSULTING — Logo animé "Letters Assemble" (ralenti) Typo : Saira Stencil One — chrome metallic Hover : Tilt 3D (logique JS dans logo.js) Distance d'entrée : 400 px desktop / 200 px mobile ============================================================ Comment l'utiliser dans une page : 1. Dans : 2. Dans : 3. Avant : ⚠️ IMPORTANT : sur le ou conteneur du header, mettre `overflow-x: hidden` pour absorber l'animation d'entrée (lettres viennent de 400 px). ============================================================ */ .map-logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; cursor: pointer; user-select: none; position: relative; padding: 6px 12px; border-radius: 8px; transform-style: preserve-3d; transition: transform 0.15s ease-out; } /* Highlight radial qui suit la souris (effet Tilt 3D) */ .map-logo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(76, 201, 240, 0.22), transparent 55%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: inherit; } .map-logo:hover::before { opacity: 1; } .map-logo-main { font-family: 'Saira Stencil One', 'Impact', sans-serif; font-size: 36px; font-weight: 400; letter-spacing: 0.06em; line-height: 1; display: inline-flex; } .map-logo-sub { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 10px; letter-spacing: 0.42em; margin-top: 4px; text-transform: uppercase; font-weight: 500; opacity: 0.85; } .map-logo .ll-m, .map-logo .ll-a, .map-logo .ll-p { display: inline-block; } /* Style chrome metallic (par défaut clair sur fond sombre) */ .map-logo .chrome { background: linear-gradient(180deg, #ffffff 0%, #a8b3cc 45%, #6e7c99 50%, #d4dcf0 55%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 12px rgba(180, 200, 240, 0.2); } /* Variante chrome sombre (pour fonds clairs) */ .map-logo.chrome-dark .chrome { background: linear-gradient(180deg, #2a2f3e 0%, #5a6373 45%, #1a1d28 50%, #4a5365 55%, #2a2f3e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 4px rgba(0,0,0,0.15); } /* === Animation Letters Assemble (ralentie, distance 400 px) === */ .map-logo.run .ll-m { animation: maplogo-tl 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .map-logo.run .ll-a { animation: maplogo-bottom 2.2s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .map-logo.run .ll-p { animation: maplogo-tr 2.0s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .map-logo.run .map-logo-sub { animation: maplogo-subFade 1.6s 2.4s ease-out both; } /* === Variante rapide (pour le header, ~2.4s au lieu de 5.4s) === */ .map-logo.run.run-fast .ll-m { animation: maplogo-tl 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .map-logo.run.run-fast .ll-a { animation: maplogo-bottom 1.0s 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .map-logo.run.run-fast .ll-p { animation: maplogo-tr 0.9s 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .map-logo.run.run-fast .map-logo-sub { animation: maplogo-subFade 0.8s 1.0s ease-out both; } .map-logo.run::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-20deg); animation: maplogo-shine 2.4s 3.0s ease-out; /* pas de "forwards" pour que ça disparaisse */ pointer-events: none; } .map-logo.run.run-fast::after { animation: maplogo-shine 1.0s 1.3s ease-out; } @keyframes maplogo-tl { from { opacity: 0; transform: translate(-400px, -320px) rotate(-25deg); } to { opacity: 1; transform: translate(0, 0) rotate(0); } } @keyframes maplogo-bottom { from { opacity: 0; transform: translateY(380px) scale(0.5); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes maplogo-tr { from { opacity: 0; transform: translate(400px, -320px) rotate(25deg); } to { opacity: 1; transform: translate(0, 0) rotate(0); } } @keyframes maplogo-subFade { from { opacity: 0; letter-spacing: 0.15em; } to { opacity: 0.85; letter-spacing: 0.42em; } } @keyframes maplogo-shine { from { left: -100%; } to { left: 200%; } } /* Tailles preset */ .map-logo.size-sm .map-logo-main { font-size: 26px; } .map-logo.size-sm .map-logo-sub { font-size: 8px; letter-spacing: 0.36em; } .map-logo.size-md .map-logo-main { font-size: 36px; } .map-logo.size-md .map-logo-sub { font-size: 10px; } .map-logo.size-lg .map-logo-main { font-size: 56px; } .map-logo.size-lg .map-logo-sub { font-size: 14px; } .map-logo.size-xl .map-logo-main { font-size: 80px; } .map-logo.size-xl .map-logo-sub { font-size: 18px; } /* === Mobile : distance d'entrée réduite à 200 px === */ @media (max-width: 768px) { @keyframes maplogo-tl { from { opacity: 0; transform: translate(-200px, -160px) rotate(-25deg); } to { opacity: 1; transform: translate(0, 0) rotate(0); } } @keyframes maplogo-bottom { from { opacity: 0; transform: translateY(190px) scale(0.5); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes maplogo-tr { from { opacity: 0; transform: translate(200px, -160px) rotate(25deg); } to { opacity: 1; transform: translate(0, 0) rotate(0); } } /* Désactiver le tilt 3D sur mobile (pas de mousemove utile sur tactile) */ .map-logo { transform: none !important; transition: none; } .map-logo::before { display: none; } } /* === Reduced motion : on respecte les préférences système === */ @media (prefers-reduced-motion: reduce) { .map-logo.run .ll-m, .map-logo.run .ll-a, .map-logo.run .ll-p, .map-logo.run .map-logo-sub { animation: none !important; opacity: 1 !important; transform: none !important; } .map-logo.run::after { display: none; } }