/* ============================================================ HERO INTRO OVERLAY — calque fullscreen par-dessus la home. Palette et mesures conformes au BRIEF (§4, §6, §7). IMPORTANT : - Le PNG source (mark.png) n'est jamais redessiné, seulement révélé par un masque SVG dont le trait suit la ligne centrale. - overflow:visible partout sur les conteneurs du logo, sinon bloom et halo sont rognés par la boîte (cf. BRIEF §7). - Fond forcé sombre sur html/body pour éviter le flash blanc à l'ouverture (cf. functions.php enqueue). ============================================================ */ :root { --hi-night: #0b0b1e; /* fond charte site (identique .osm-cta-banner) */ --hi-ink: #e6f4f8; --hi-dim: rgba(255, 255, 255, 0.55); --hi-cyan: #61c3d8; /* couleur exacte du trait Osmose (couleur du logo dans mark.png) */ --hi-cyan-hi: #a8ecfa; --hi-deep: #1d5f8a; } /* Fond sombre forcé sur la homepage (via ajoutée par functions.php). Évite le flash blanc entre le HTML rendu et la première frame de l'overlay. */ body.hero-intro-active { background: var(--hi-night); } body.hero-intro-active #hero-intro-overlay { opacity: 1; } /* Une fois l'intro finie, .hero-intro-done est ajoutée sur — le voile s'estompe puis l'overlay disparaît totalement du flow. */ body.hero-intro-done #hero-intro-overlay { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; } /* ─── Overlay racine ─── */ .hero-intro-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--hi-night); color: var(--hi-ink); font-family: "Poppins", "Archivo", system-ui, sans-serif; overflow: hidden; /* La sortie se fait maintenant via un ZOOM sur le mark (scale up jusqu'à traverser l'écran) + fade opacity de l'overlay et de ses enfants (GSAP). Plus de mask ni de dispersion en particules. */ } /* Le mark SVG doit avoir son transform-origin au centre pour que le zoom exit soit centré et non basé sur le coin haut-gauche. */ .hero-intro__mark-svg { transform-origin: center center; transform-box: fill-box; will-change: transform, opacity; } /* Canvas de dispersion (créé par le JS à naturalExit) — appendé au body, au-dessus de l'overlay, pour continuer à peindre les particules pendant que l'overlay fade son opacity. */ #hero-intro-particles { position: fixed; inset: 0; z-index: 10000; pointer-events: none; } /* Motif à points en fond de l'overlay — identique à .osm-cta-banner du site. z-index 0 pour rester derrière le sky (orbes) et le stage (logo). */ .hero-intro-overlay::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(147, 197, 253, 0.10) 1px, transparent 1px); background-size: 14px 14px; pointer-events: none; } /* prefers-reduced-motion : l'overlay est masqué immédiatement, aucune animation. Le JS fait exactement pareil (double filet). */ @media (prefers-reduced-motion: reduce) { .hero-intro-overlay { display: none !important; } } /* ─── Fond décoratif : orbes lumineuses ─── */ .hero-intro__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-intro__glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0; /* révélé par la timeline GSAP */ mix-blend-mode: screen; } .hero-intro__glow--g1 { width: 75vw; height: 75vw; left: -18vw; top: -22vw; background: radial-gradient(circle, var(--hi-cyan) 0%, transparent 62%); } .hero-intro__glow--g2 { width: 62vw; height: 62vw; right: -14vw; bottom: -20vw; background: radial-gradient(circle, var(--hi-deep) 0%, transparent 62%); } /* Grain SVG turbulence, 3 steps (mesuré sur la référence : opacity .13) */ .hero-intro__grain { position: absolute; inset: -150%; z-index: 5; pointer-events: none; opacity: 0.13; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); animation: hero-intro-grain-shift .55s steps(3) infinite; } @keyframes hero-intro-grain-shift { 0% { transform: translate(0, 0); } 33% { transform: translate(-2%, 2%); } 66% { transform: translate(2%, -2%); } 100% { transform: translate(0, 0); } } /* ─── UI bas : status ticker + compteur ─── */ .hero-intro__ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: clamp(20px, 4vw, 44px); font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(13px, 1.3vw, 17px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi-dim); } .hero-intro__status-mask { height: 1.5em; overflow: hidden; position: relative; flex: 1; } .hero-intro__status-line { position: absolute; inset: 0; white-space: nowrap; } .hero-intro__count { font-variant-numeric: tabular-nums; } /* ─── Skip bouton (invisible tant que non révélé par la timeline) ─── */ .hero-intro__skip { position: absolute; top: clamp(20px, 4vw, 44px); right: clamp(20px, 4vw, 44px); z-index: 7; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi-dim); background: none; border: 0; cursor: pointer; opacity: 0; padding: 8px 10px; transition: color .3s ease; } .hero-intro__skip:hover, .hero-intro__skip:focus-visible { color: var(--hi-cyan); } .hero-intro__skip:focus-visible { outline: 1px solid var(--hi-cyan); outline-offset: 4px; } /* ─── Stage centré ─── */ .hero-intro__stage { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: clamp(20px, 4vw, 44px); } .hero-intro__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 6vh, 64px); width: 100%; } /* Logo (symbole SVG + wordmark PNG) */ .hero-intro__logo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3.5vh, 38px); } .hero-intro__mark-wrap { position: relative; /* Logo agrandi (~+60%) — plus imposant à l'écran */ width: clamp(300px, 42vw, 560px); padding: 6%; } .hero-intro__mark-svg { width: 100%; height: auto; display: block; overflow: visible; /* pas de crop du bloom */ } /* overflow:visible propagé partout — cf. BRIEF §7 */ .hero-intro__logo, .hero-intro__mark-wrap, .hero-intro__stage, .hero-intro__inner { overflow: visible; } /* Halo cyan qui prend derrière le logo — révélé par GSAP */ .hero-intro__halo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 190%; height: 280%; border-radius: 50%; background: radial-gradient(ellipse, rgba(97, 195, 216, 0.30) 0%, transparent 62%); filter: blur(45px); opacity: 0; z-index: -1; pointer-events: none; } /* Anciennes têtes lumineuses cyan qui suivaient le tracé — désactivées depuis le passage en logo blanc pur (plus de bloom néon). Les restent dans le DOM mais totalement cachées pour ne plus créer de point bleu visible au centre du logo. */ .hero-intro__head { display: none; } /* Wordmark : wipe reveal gauche→droite piloté par --wipe. opacity:0 initial → sinon le fade de 7% du masque montre les premières lettres pendant les 4s avant que la wipe démarre. GSAP met opacity:1 pile au moment où la wipe commence. */ .hero-intro__word { opacity: 0; width: clamp(230px, 34vw, 430px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--wipe, 0%), transparent calc(var(--wipe, 0%) + 7%)); mask-image: linear-gradient(90deg, #000 0%, #000 var(--wipe, 0%), transparent calc(var(--wipe, 0%) + 7%)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .hero-intro__word img { width: 100%; height: auto; display: block; } /* ── Baseline h1 sous le logo ───────────────────────────────────── Deux lignes cachées sous leur mask, révélées par translateY + blur. La 2e ligne se remplit ensuite en cyan via clip-path sur .fill-top. */ .hero-intro__title { font-family: "Poppins", "Archivo", system-ui, sans-serif; font-size: clamp(22px, 3.6vw, 46px); line-height: 1.15; font-weight: 500; letter-spacing: -0.025em; text-align: center; text-wrap: balance; color: var(--hi-ink); max-width: 900px; margin: 0 auto; } .hero-intro__mask { display: block; overflow: hidden; padding-bottom: 0.1em; } .hero-intro__line { display: block; transform: translateY(115%); filter: blur(7px); will-change: transform, filter; } .hero-intro__fill { position: relative; display: inline-block; } .hero-intro__fill-base { /* Base texte sombre (état initial) — reste dans le DOM pour l'a11y. */ color: #26414d; } .hero-intro__fill-top { /* Copie cyan qui se dévoile par clip-path, superposée à la base. */ position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--hi-cyan); clip-path: inset(0 100% 0 0); } /* Voile de sortie — GSAP monte son opacity à 1 avant que body.hero-intro-done soit ajoutée pour cacher tout l'overlay. Effet : fondu, pas coupure. */ .hero-intro__veil { position: absolute; inset: 0; z-index: 20; background: var(--hi-night); opacity: 0; pointer-events: none; } /* ── Mobile <768px : intro écourtée par le JS (cf. BRIEF §9). La CSS ne fait qu'ajuster tailles pour lisibilité. ── */ @media (max-width: 768px) { .hero-intro__mark-wrap { width: clamp(160px, 55vw, 260px); } .hero-intro__word { width: clamp(200px, 65vw, 340px); } }