/* ========================================================================== core.css — curseur, menu, viewport-fix, reset Chargé sur toutes les pages (Landing, Carrousel Projets pro, Carrousel Playground, Projet, Contact). Ne pas dupliquer ces styles ailleurs. ========================================================================== */ /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #f2f2f2; } /* Cache la page tant que le loader (ou, sur les pages carrousel, le flash blanc tenu) n'est pas en place : core.css est une feuille de style bloquante chargee dans le , donc cette regle s'applique avant le premier rendu, contrairement au script de core.js qui tourne en fin de et laisserait sinon voir le contenu brut une fraction de seconde. core.js ajoute .gus-ready des que le loader/l'overlay est en place. */ body { opacity: 0; } body.gus-ready { opacity: 1; } :root { --custom-pink: #ef206d; } /* -------------------------------------------------------------------------- Curseur custom (absorbé depuis cursor.css) -------------------------------------------------------------------------- */ /* Curseur custom par défaut */ body { cursor: url('https://res.cloudinary.com/dpu3llnmb/image/upload/v1782469168/pointerwebgus_ehq02s.svg'), auto !important; } /* Curseur au survol des éléments cliquables */ a, button { cursor: url('https://res.cloudinary.com/dpu3llnmb/image/upload/v1784194620/grabbing_jfv0ij.svg'), pointer !important; } /* Cacher le curseur pendant le loader */ #loader, #loader * { cursor: none !important; } /* -------------------------------------------------------------------------- Menu latéral (bouton, overlay, liste, liens, responsive mobile) -------------------------------------------------------------------------- */ /* Bouton menu — en miroir du logo (.logo-home : top:100px; right:100px;) */ #menu-toggle { position: fixed; top: 100px; left: 100px; z-index: 10001; } /* Overlay */ #menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; } #menu-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } /* Menu Desktop */ #menu-list { position: fixed; top: 0; left: -25%; width: 25%; height: 100vh; background: #000; z-index: 10000; padding: 60px 40px; overflow-y: auto; transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; } #menu-list.active { left: 0; } /* Bouton fermer */ #menu-close { position: absolute; top: 24px; left: 24px; width: 21px; height: 21px; cursor: pointer; background: transparent; border: none; padding: 0; } #menu-close::before, #menu-close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #b6d7b4; transition: background 0.3s ease; } #menu-close::before { transform: rotate(45deg); } #menu-close::after { transform: rotate(-45deg); } #menu-close:hover::before, #menu-close:hover::after { background: white; } /* Liens */ #menu-list a { display: block; color: #b6d7b4; font-size: 14px; font-weight: 100; font-family: 'Archivo', sans-serif; text-decoration: none; margin: 15px 0; transition: all 0.15s ease; opacity: 0; transform: translateY(20px); } #menu-list.active a { opacity: 1; transform: translateY(0); } #menu-list.active a:nth-child(2) { transition-delay: 0.1s; } #menu-list.active a:nth-child(3) { transition-delay: 0.15s; } #menu-list.active a:nth-child(4) { transition-delay: 0.2s; } #menu-list.active a:nth-child(5) { transition-delay: 0.25s; } #menu-list.active a:nth-child(6) { transition-delay: 0.3s; } #menu-list.active a:nth-child(7) { transition-delay: 0.35s; } #menu-list.active a:nth-child(8) { transition-delay: 0.4s; } #menu-list a:hover { color: #b6d7b4; } /* Mobile */ @media (max-width: 768px) { #menu-toggle { top: 24px; left: 24px; } #menu-list { top: -100%; left: 0; width: 100%; height: 100vh; padding: 80px 40px; overflow-y: auto; transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #menu-list.active { top: 0; left: 0; } #menu-list a { font-size: 14px; margin: 20px 0; } } /* -------------------------------------------------------------------------- Loader — mise au point (piste B) Structure et respiration statiques. Le detail dynamique (crans de rotation generes, parallax, construction du DOM + SVG) vit dans core.js. -------------------------------------------------------------------------- */ #loader { position: fixed; inset: 0; overflow: hidden; background: #ffffff; z-index: 9999; transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1); } .loader-centered { position: absolute; top: 50%; left: 50%; width: auto; height: auto; pointer-events: none; } #loader-logo { z-index: 3; display: flex; align-items: center; justify-content: center; width: 10.6667vmin; height: auto; aspect-ratio: 420.5 / 162.8; transform: translate(-50%, -50%); animation: loaderBreathe 2.4s ease-in-out infinite; } #loader-logo svg { width: 100%; height: 100%; display: block; } #loader-logo svg * { fill: #000000 !important; stroke: #000000 !important; } @keyframes loaderBreathe { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } } /* -------------------------------------------------------------------------- Fix viewport mobile Safari -------------------------------------------------------------------------- */ #three-container, #menu-overlay, #menu-list, #loader { height: 100dvh !important; } @supports not (height: 100dvh) { #three-container, #menu-overlay, #menu-list, #loader { height: 100vh !important; } }