/* ========================================================================== Onoma — couche MOTION (GSAP). Chargée APRÈS style.css. N'altère pas la DA : jaune #FFED00, noir #202020, Lineal + Allen Sans. Effets : reveals fluides, marker-highlight, marquee, sweep au survol, CTA magnétiques + brillance, barre de progression. Robustesse : « html.motion-armed » n'est posé (script ) que si le mouvement est autorisé, et un filet le retire si GSAP ne charge pas → le contenu reste TOUJOURS visible (jamais bloqué). ========================================================================== */ /* ---------- Pré-masquage : NB — les .reveal-up ne sont PAS masqués en CSS. motion.js ne masque QUE les blocs sous la ligne de flottaison (non vus), après rendu → impossible d'avoir un contenu bloqué invisible. Seul le surligneur des titres est pré-masqué (effet non critique, texte lisible). */ /* ========================================================================== Barre de progression de lecture — fin liseré jaune (signature discrète) ========================================================================== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; /* au-dessus du header (50) */ pointer-events: none; } /* ========================================================================== MARKER-HIGHLIGHT — surligneur jaune animé derrière un mot-clé des titres. Motif repris du brandboard (« ONOMASTUDIO » surligné). Le est injecté par motion.js autour du dernier mot de chaque .section-title. Par défaut : surligneur AFFICHÉ (scaleX 1) → lisible sans JS / reduced-motion. Armé : masqué (scaleX 0) → dessiné au scroll. ========================================================================== */ .tt-mark { position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: var(--black); /* mot toujours noir → noir-sur-jaune lisible partout */ } .tt-mark__hi { position: absolute; inset: 0.14em -0.07em 0.09em -0.07em; z-index: -1; background: var(--yellow); transform: scaleX(1); transform-origin: 0 50%; border-radius: 1px; } .motion-armed .tt-mark__hi { transform: scaleX(0); } /* ========================================================================== MARQUEE — bandeau kinétique (services + glyphe cible). Fidèle : mots déjà présents dans la DA. Boucle infinie douce, vitesse réactive au scroll (JS). ========================================================================== */ .marquee { overflow: hidden; padding: 26px 0; background: var(--white); border-top: 1px solid rgba(32, 32, 32, 0.10); border-bottom: 1px solid rgba(32, 32, 32, 0.10); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; } .marquee__item { display: inline-flex; align-items: center; gap: 46px; padding-right: 46px; flex: 0 0 auto; } .marquee__word { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1; color: var(--black); } /* Un mot sur deux surligné → rythme, sans surcharge */ .marquee__word--hi { position: relative; z-index: 0; color: var(--black); padding: 0 0.08em; } .marquee__word--hi::before { content: ""; position: absolute; inset: 0.12em -0.02em 0.12em -0.02em; z-index: -1; background: var(--yellow); } .marquee__glyph { width: clamp(20px, 3vw, 30px); height: auto; flex: 0 0 auto; opacity: 0.9; } .marquee__logo { height: clamp(66px, 8vw, 108px); width: auto; aspect-ratio: 242 / 150; object-fit: contain; /* aucun logo déformé, quel que soit son ratio d'export */ flex: 0 0 auto; display: block; } /* Égalisation optique des logos — chaque fichier a des marges internes et des proportions différentes (dessin mesuré de 19px à 48px de haut dans la même boîte !). Facteurs calculés pour une MASSE VISUELLE équivalente (√ hauteur × largeur du dessin réel). transform → n'affecte ni l'espacement ni la boucle. */ .marquee__logo[src="logoossss-02.svg"] { transform: scale(1.09); } /* Quantirel */ .marquee__logo[src="03kaltrionix.svg"] { transform: scale(1.09); } /* kaltrionix */ .marquee__logo[src="logoossss-04.svg"] { transform: scale(1.20); } /* Arkenovae */ .marquee__logo[src="logoossss-05.svg"] { transform: scale(1.20); } /* orivexa */ .marquee__logo[src="logoAOofficiel.svg"] { transform: scale(1.15); } /* A&O */ .marquee__logo[src="logoossss-07.svg"] { transform: scale(0.95); } /* Solstice */ .marquee__logo[src="btlogo.svg"] { transform: scale(0.82); } /* BT gifts */ /* ========================================================================== SWEEP AU SURVOL — surligneur jaune qui se dessine sous les titres de cartes. Même langage que le marker des sections → cohérence totale. CSS pur. ========================================================================== */ .work-card__title, .incl-card__title, .method-card__title, .offer-card__name, .benefit__title { position: relative; z-index: 0; display: inline-block; } .work-card__title::after, .incl-card__title::after, .method-card__title::after, .offer-card__name::after, .benefit__title::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.02em; height: 0.40em; z-index: -1; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1); } .work-card:hover .work-card__title::after, .incl-card:hover .incl-card__title::after, .method-card:hover .method-card__title::after, .offer-card:hover .offer-card__name::after, .benefit:hover .benefit__title::after { transform: scaleX(1); } /* Sur la bande sombre (bénéfices) : le titre passe en noir au survol → inversion noir-sur-jaune, très accrocheuse, cohérente avec la DA. Le surligneur doit couvrir TOUTE la hauteur du titre (sinon le texte noir sur la partie non-jaune devient invisible sur le fond noir). */ .benefit__title { transition: color 0.42s cubic-bezier(0.25, 0.1, 0.25, 1); } .benefit:hover .benefit__title { color: var(--black); } .benefit__title::after { top: -0.06em; bottom: -0.06em; height: auto; } /* ========================================================================== CTA — brillance (shine) sur les boutons pleins + magnétisme (JS). ========================================================================== */ .offer-btn, .contact-submit { position: relative; overflow: hidden; } .offer-btn::after, .contact-submit::after { content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; } .offer-btn:hover::after, .contact-submit:hover::after { animation: onoma-shine 0.85s ease; } @keyframes onoma-shine { 0% { left: -75%; opacity: 1; } 100% { left: 130%; opacity: 1; } } /* Le magnétisme translate le bouton (JS pose --mx/--my) sans casser le verre */ .glass-btn { transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1); } .glass-btn.is-magnetic { transition: transform 0.15s ease-out; } /* ========================================================================== MÉTHODE — micro-animations des glyphes, une par étape (en boucle, subtiles). 01 Échange : les deux groupes de cercles « respirent » en alternance (dialogue). 02 Direction : la flèche jaune se trace, se pose, s'efface, recommence. 03 Univers : les trois satellites tournent autour du système (orbite lente). ========================================================================== */ /* 01 — onde lumineuse qui rayonne du centre vers l'extérieur (les 2 groupes écartés, illumination séquentielle centre → moyen → externe = ondulation continue). */ .ma1-w { transform-box: fill-box; transform-origin: center; } .ma1-L.ma1-w--1 { animation: ma1-wave 2.8s ease-in-out infinite; } .ma1-L.ma1-w--2 { animation: ma1-wave 2.8s ease-in-out infinite 0.28s; } .ma1-L.ma1-w--3 { animation: ma1-wave 2.8s ease-in-out infinite 0.56s; } .ma1-R.ma1-w--1 { animation: ma1-wave 2.8s ease-in-out infinite 1.4s; } .ma1-R.ma1-w--2 { animation: ma1-wave 2.8s ease-in-out infinite 1.68s; } .ma1-R.ma1-w--3 { animation: ma1-wave 2.8s ease-in-out infinite 1.96s; } @keyframes ma1-wave { 0%, 100% { opacity: 0.35; transform: scale(1); } 40% { opacity: 1; transform: scale(1.09); } } /* 02 — radar : un secteur jaune balaie la cible en continu */ .ma2-wedge { opacity: 0.2; } .ma2-sweep { transform-box: view-box; transform-origin: 120px 90px; animation: ma2-sweep 7s linear infinite; } @keyframes ma2-sweep { to { transform: rotate(360deg); } } /* 03 — deux orbites contra-rotatives autour du système (centré 120,92) */ .ma3-orbit, .ma3-orbit2 { transform-box: view-box; transform-origin: 120px 92px; } .ma3-orbit { animation: ma3-orbit 22s linear infinite; } .ma3-orbit2 { animation: ma3-orbit-rev 15s linear infinite; } @keyframes ma3-orbit { to { transform: rotate(360deg); } } @keyframes ma3-orbit-rev { to { transform: rotate(-360deg); } } /* Perf : les 3 glyphes sont figés tant que la section n'est pas à l'écran (classe posée par main.js) → aucun repaint inutile pendant le scroll. */ .method.is-offscreen .ma1-w, .method.is-offscreen .ma2-sweep, .method.is-offscreen .ma3-orbit, .method.is-offscreen .ma3-orbit2 { animation-play-state: paused; } /* ========================================================================== Accessibilité — mouvement réduit : tout est visible et figé. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } .tt-mark__hi { transform: scaleX(1) !important; } .marquee__track { transform: none !important; } .work-card__title::after, .incl-card__title::after, .method-card__title::after, .offer-card__name::after, .benefit__title::after { transition: none; } /* Glyphes Méthode : figés. */ .ma1-w, .ma2-sweep, .ma3-orbit, .ma3-orbit2 { animation: none !important; } }