/* ================================================================ atlas® — EFFETS D'OUVERTURE DU MENU (temporaire, A/B test) 3 partis pris d'animation pour le menu mobile plein écran, taillé dans le VERRE de la nav bar. Activé par une classe . Structure réutilisée : .nav-mobile > .nav-mobile-sheet (liens + CTA), togglée par atlas.js (classe .open + html.nav-open). Tout est en CSS. Une fois l'effet choisi : on le fond dans atlas.css et on supprime ce fichier + les pages candidates. ================================================================ */ /* ---- Overlay : masqué quand fermé (sinon le verre flouterait la page). Le délai garde l'overlay rendu le temps de l'anim de fermeture. ---- */ body[class*="fx-"] .nav-mobile { background: transparent; opacity: 1; visibility: hidden; pointer-events: none; transition: visibility 0s linear .6s; } body[class*="fx-"] .nav-mobile.open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } /* ---- Panneau plein écran. ÉTAT FERMÉ = pas de verre (background transparent + blur 0) : le flou est ANIMÉ (28px -> 0) en synchro avec la fermeture, donc aucun flou résiduel quand le menu est parti. ÉTAT OUVERT = le verre de la nav. ---- */ body[class*="fx-"] .nav-mobile-sheet { position: fixed; inset: 0; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; /* contenu ancré vers le bas */ display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(1px, 0.5vh, 6px); padding: clamp(96px, 13vh, 140px) clamp(24px, 7vw, 56px) clamp(40px, 7vh, 72px); /* filtres dans le MÊME ordre que l'état ouvert pour que le flou s'interpole */ background-color: rgba(95, 96, 104, 0); /* Pas de flou quand fermé — et SURTOUT le backdrop-filter n'est PAS animé : Safari ne le repeint pas proprement (flou fantôme ~1–1,5 s). On le retire donc instantanément à la fermeture ; la douceur vient de l'opacité + du fond. */ backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform .5s var(--ease-spring), clip-path .55s var(--ease-out), opacity .38s ease, background-color .32s ease; } body[class*="fx-"] .nav-mobile.open .nav-mobile-sheet { background-color: rgba(95, 96, 104, 0.55); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } /* Liens : grandes capitales, sans filets entre eux, ancrés en bas */ body[class*="fx-"] .nav-mobile-link { font-family: var(--font-display); /* +15% sur les trois bornes (demande utilisateur) : 20→23 · 4,5→5,18vw · 28→32,2. Les trois sont augmentées de la même proportion pour que la courbe de croissance du texte selon la largeur d'écran reste identique — ne relever que le maximum aurait agrandi les grands écrans sans toucher aux téléphones. */ font-size: clamp(23px, 5.18vw, 32.2px); font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; color: #fff; padding: 1px 0; border-bottom: 0; } body[class*="fx-"] .nav-mobile-link:hover, body[class*="fx-"] .nav-mobile-link:active { background: transparent; color: rgba(255,255,255,0.62); } /* Bouton « Démarrer un projet » à la place d'INITIATIVES, précédé d'un court trait */ body[class*="fx-"] .nav-mobile-cta { align-self: flex-start; margin-top: 0; padding: 12px 18px; font-size: 10.2px; gap: 8.5px; } body[class*="fx-"] .nav-mobile-cta .pulse-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3.6px rgba(16,185,129,0.22); } /* Trait court entre les liens et le bouton — marges symétriques => espaces égaux au-dessus/en-dessous */ body[class*="fx-"] .nav-mobile-div { display: block; align-self: flex-start; width: 32px; height: 2px; background: rgba(255,255,255,0.5); margin: clamp(14px, 2.4vh, 22px) 0; border: 0; } /* Bloc bas : contacts + legal (ancré tout en bas) */ body[class*="fx-"] .nav-mobile-foot { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: clamp(30px, 7vh, 64px); } body[class*="fx-"] .nav-mobile-foot-col { display: flex; flex-direction: column; gap: 5px; } body[class*="fx-"] .nav-mobile-foot a { font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); transition: color .2s ease; } body[class*="fx-"] .nav-mobile-foot a:hover { color: #fff; } /* Flèche « lien externe » ↗ sur INSTAGRAM et DISCORD (les deux « coming soon », lien à venir) */ body[class*="fx-"] .nav-mobile-foot a.nav-ext { display: inline-flex; align-items: center; gap: 4px; } body[class*="fx-"] .nav-mobile-foot a.nav-ext .nav-ext-arr { width: 11px; height: 11px; flex: none; } /* « COMING SOON » = DESIGNNNNN@ (colonne gauche), INSTAGRAM et DISCORD (colonne droite) : aucun lien (pas de href/mailto). Une bulle apparaît au survol (desktop) / au focus après un tap (mobile — l' est focusable via tabindex). Look repris des bulles de personnages d'about.html (§4 ABOUT) : fond blanc opaque, coins arrondis, ombre douce + flèche carrée tournée à 45°. AUCUNE transition (§5 pt 3 : pas de fondu d'opacité, et la preview fige les transitions). Bulle et flèche toutes deux #fff opaques → leur raccord se confond, pas d'arête (même raison qu'about). */ body[class*="fx-"] .nav-mobile-foot .nav-soon { position: relative; cursor: default; } body[class*="fx-"] .nav-mobile-foot .nav-soon:focus:not(:focus-visible) { outline: none; } body[class*="fx-"] .nav-mobile-foot .nav-soon:hover, body[class*="fx-"] .nav-mobile-foot .nav-soon:focus, body[class*="fx-"] .nav-mobile-foot .nav-soon.tip-on { color: #fff; } body[class*="fx-"] .nav-mobile-foot .nav-soon-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 8px 12px; border-radius: 11px; white-space: nowrap; background: #fff; color: #0a0a0a; font-family: var(--font-label); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(2,6,23,.22), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; visibility: hidden; pointer-events: none; z-index: 10; } body[class*="fx-"] .nav-mobile-foot .nav-soon-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin-left: -4.5px; margin-top: -5px; background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(2,6,23,.10); } body[class*="fx-"] .nav-mobile-foot .nav-soon:hover .nav-soon-tip, body[class*="fx-"] .nav-mobile-foot .nav-soon:focus .nav-soon-tip, body[class*="fx-"] .nav-mobile-foot .nav-soon:focus-visible .nav-soon-tip, body[class*="fx-"] .nav-mobile-foot .nav-soon.tip-on .nav-soon-tip { opacity: 1; visibility: visible; } /* ---------------------------------------------------------------- EFFET 1 · fx-top — le panneau descend du haut, repart vers le haut. ---------------------------------------------------------------- */ body.fx-top .nav-mobile-sheet { transform: translateY(-100%); } body.fx-top .nav-mobile.open .nav-mobile-sheet { transform: translateY(0); } /* ---------------------------------------------------------------- EFFET 2 · fx-propagate — révélation circulaire depuis le burger. ---------------------------------------------------------------- */ body.fx-propagate .nav-mobile-sheet { clip-path: circle(0% at calc(100% - 38px) 40px); } body.fx-propagate .nav-mobile.open .nav-mobile-sheet { clip-path: circle(150% at calc(100% - 38px) 40px); } /* ---------------------------------------------------------------- EFFET 3 · fx-surprise — « glass bloom » + cascade des liens. ---------------------------------------------------------------- */ body.fx-surprise .nav-mobile-sheet { opacity: 0; transform: translateY(-22px) scale(0.985); transform-origin: top center; } body.fx-surprise .nav-mobile.open .nav-mobile-sheet { opacity: 1; transform: none; } body.fx-surprise .nav-mobile-link, body.fx-surprise .nav-mobile-cta { opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .55s var(--ease-spring); } body.fx-surprise .nav-mobile.open .nav-mobile-link, body.fx-surprise .nav-mobile.open .nav-mobile-cta { opacity: 1; transform: none; } body.fx-surprise .nav-mobile.open .nav-mobile-sheet > *:nth-child(1) { transition-delay: .14s; } body.fx-surprise .nav-mobile.open .nav-mobile-sheet > *:nth-child(2) { transition-delay: .20s; } body.fx-surprise .nav-mobile.open .nav-mobile-sheet > *:nth-child(3) { transition-delay: .26s; } body.fx-surprise .nav-mobile.open .nav-mobile-sheet > *:nth-child(4) { transition-delay: .32s; } body.fx-surprise .nav-mobile.open .nav-mobile-sheet > *:nth-child(5) { transition-delay: .40s; }