/* ============================================================ LEAKERZ — Enhancements esthétiques 1. Waveform SVG en fond du hero 2. Curseur custom avec halo violet 3. Effet parallaxe subtle au scroll 4. Loading progress bar entre les pages 5. Support light mode (via data-theme="light" sur ) ============================================================ */ /* ===== 1. WAVEFORM en background du hero ===== */ .enhance-waveform-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .55; } .enhance-waveform-bg svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200%; min-width: 1400px; height: 42%; filter: blur(.2px); } .enhance-waveform-bg .enhance-wave-path { animation: enhanceWavePulse 4.5s ease-in-out infinite; transform-origin: 50% 100%; } .enhance-waveform-bg .enhance-wave-path-2 { animation-delay: -2s; animation-duration: 6s; opacity: .5; } .enhance-waveform-bg .enhance-wave-path-3 { animation-delay: -3.5s; animation-duration: 5.2s; opacity: .3; } @keyframes enhanceWavePulse { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.15) translateY(-4px); } } /* Assure la superposition correcte sur le hero */ #home.hero { position: relative; overflow: hidden; } #home.hero > .hero-content { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .enhance-waveform-bg .enhance-wave-path { animation: none !important; } } /* ===== 2. CURSEUR custom avec halo violet ===== */ .enhance-cursor-dot, .enhance-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 50%; will-change: transform; transition: opacity .2s; opacity: 0; } .enhance-cursor-dot { width: 6px; height: 6px; background: linear-gradient(135deg, #a855f7, #ec4899); transform: translate(-50%, -50%); transition: transform .05s ease-out, opacity .2s, background .2s; box-shadow: 0 0 12px rgba(168, 85, 247, .8); } .enhance-cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(168, 85, 247, .55); transform: translate(-50%, -50%); transition: transform .12s cubic-bezier(.2,.7,.3,1), width .18s, height .18s, border-color .18s, background .18s, opacity .2s; background: rgba(168, 85, 247, .04); } .enhance-cursor-active .enhance-cursor-dot, .enhance-cursor-active .enhance-cursor-ring { opacity: 1; } /* Grow au hover sur les éléments cliquables */ .enhance-cursor-hover .enhance-cursor-ring { width: 52px; height: 52px; border-color: rgba(236, 72, 153, .85); background: rgba(236, 72, 153, .08); } .enhance-cursor-hover .enhance-cursor-dot { background: #fff; box-shadow: 0 0 18px rgba(236, 72, 153, .9); } /* Désactivé sur mobile/touch */ @media (hover: none), (pointer: coarse) { .enhance-cursor-dot, .enhance-cursor-ring { display: none !important; } } @media (prefers-reduced-motion: reduce) { .enhance-cursor-dot, .enhance-cursor-ring { display: none !important; } } /* ===== 3. PARALLAXE au scroll (léger, sur sections marquées) ===== */ .enhance-parallax { will-change: transform; transition: transform 60ms linear; } /* ===== 4. LOADING progress bar top ===== */ .enhance-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #a855f7, #ec4899, #a855f7); background-size: 200% 100%; z-index: 9999; box-shadow: 0 0 12px rgba(236, 72, 153, .7); opacity: 0; transition: opacity .2s, width .3s cubic-bezier(.3,.6,.1,1); animation: enhanceLoaderShimmer 1.5s linear infinite; pointer-events: none; } .enhance-loader.enhance-loader-active { opacity: 1; } @keyframes enhanceLoaderShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ===== 5. LIGHT MODE (opt-in via toggle dans le header) ===== */ :root[data-theme="light"] { --enhance-bg: #f4efe7; --enhance-fg: #1a0f1f; --enhance-fg-soft: #4a3e4e; --enhance-card: #ffffff; --enhance-border: rgba(26, 15, 31, .08); --enhance-shadow: 0 8px 30px -12px rgba(26, 15, 31, .15); } :root[data-theme="light"] body { background: #f4efe7 !important; color: #1a0f1f !important; } :root[data-theme="light"] .hero .lede, :root[data-theme="light"] .lede, :root[data-theme="light"] p:not([style*="color"]) { color: #4a3e4e !important; } :root[data-theme="light"] h1:not([style*="color"]), :root[data-theme="light"] h2:not([style*="color"]), :root[data-theme="light"] h3:not([style*="color"]) { color: #1a0f1f !important; } :root[data-theme="light"] header, :root[data-theme="light"] .header-nav, :root[data-theme="light"] .site-header { background: rgba(244, 239, 231, .85) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(26, 15, 31, .06) !important; } :root[data-theme="light"] .btn.btn-primary { background: #1a0f1f !important; color: #f4efe7 !important; } :root[data-theme="light"] .btn.btn-link { color: #1a0f1f !important; } :root[data-theme="light"] .hero-proof { background: rgba(255, 255, 255, .6) !important; border-color: rgba(168, 85, 247, .35) !important; color: #4a3e4e !important; } :root[data-theme="light"] .hero-proof strong { color: #1a0f1f !important; } :root[data-theme="light"] .logo img, :root[data-theme="light"] .site-logo img { filter: invert(1) hue-rotate(180deg) contrast(1.05); } :root[data-theme="light"] .enhance-waveform-bg { opacity: .35; filter: hue-rotate(-30deg); } /* ===== 6. THEME TOGGLE dans le header ===== */ .enhance-theme-toggle { position: fixed; top: 18px; right: 72px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; z-index: 100; display: grid; place-items: center; transition: transform .18s, border-color .18s, background .18s; color: #e4e4e7; } .enhance-theme-toggle:hover { transform: scale(1.08); border-color: rgba(168, 85, 247, .5); background: rgba(168, 85, 247, .1); } .enhance-theme-toggle svg { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.2,.7,.3,1); } :root[data-theme="light"] .enhance-theme-toggle { background: rgba(26, 15, 31, .06); border-color: rgba(26, 15, 31, .12); color: #1a0f1f; } :root[data-theme="light"] .enhance-theme-toggle svg { transform: rotate(180deg); } @media (max-width: 640px) { .enhance-theme-toggle { top: 14px; right: 60px; width: 34px; height: 34px; } }