Aerivo

Ce que c’est

Un site d’opérateur de vols privés, complet : accueil sur un ciel animé avec moteur de recherche de vol, présentation, séquence « votre vol étape par étape » en trois photographies pleine page, services, hublot d’avion qui s’ouvre jusqu’à remplir l’écran, flotte, globe des destinations, histoire de l’entreprise, actualités, Instagram, demande de devis, pied de page. Une seule page, un seul fichier HTML.

Le design reprend celui d’un site néerlandais d’aviation d’affaires dont seules les photos ont été conservées. Tout le code a été réécrit : l’original tient dans 28 bundles Next.js (2,7 Mo), GSAP et son module ScrollTrigger, three.js pour le globe (1,8 Mo à lui seul), Lenis pour le défilement inertiel, Swiper pour les carrousels, 196 Ko de Tailwind compilé et trois domaines de mesure d’audience. Illisible, et impossible à modifier sans relancer une chaîne de build.

Le contenu de la démo reste en néerlandais, comme l’original. Ce n’est pas un oubli : un template se lit mieux quand le texte n’est pas du faux latin.

Ce que tu changes en premier

Les couleurs — six lignes

Tout en haut de assets/css/style.css :

--navy:           #05275b;  /* le texte, les boutons pleins, les épingles */
--navy-dark:      #071831;  /* le voile du hublot */
--cloud:          #fcfdfe;  /* le fond de page */
--accent:         #0069c8;  /* les surtitres, le focus */
--accent-strong:  #004e96;  /* le survol des boutons pleins */
--accent-light:   #5eb2ff;  /* le même bleu, éclairci pour le texte sur photo */

Une chose à comprendre avant de toucher au reste : il y a trois bleus d’accent, pas un. L’accent plein passe le contraste AA sur le blanc nuage (5,35:1), mais il disparaît dans le ciel d’une photo. C’est pour ça que la version éclaircie existe (7,84:1 sur le bleu nuit). Si tu changes l’accent, change les trois.

Le ciel lui-même est un dégradé à quatre arrêts, repris tel quel : linear-gradient(#214c6f -10%, #7495b5 33.18%, #b4cadd 70.2%, #e5eaf0 100%).

Le nom

Cherche « Aerivo » dans index.html. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chacun des quatre points de rupture — 1200, 991, 767 et 479 px, ceux du site d’origine. Un titre n’a donc jamais sa propre media query : tu changes --fs-h2 et toute la page suit.

Les 22 effets, et comment ils sont faits

Tous relevés dans le site d’origine par script, pas à l’œil : ses réglages GSAP sont portés par des attributs data-* sur les éléments eux-mêmes, ce qui donne les durées, les courbes et les plages de défilement exactes. Ce qui n’y était pas a été mesuré au navigateur.

Ce qu’il faut savoir

• Un seul mécanisme pilote tout le défilement. Le script écrit --p, un nombre entre 0 et 1, sur chaque bloc qui porte data-track ; le CSS s’en sert comme il veut. Trois façons de le mesurer — à l’arrivée du bloc, sur sa traversée, ou pendant qu’il est plus haut que l’écran. Pour ajouter une parallaxe : un attribut sur le conteneur, un calc() sur l’enfant, zéro ligne de JavaScript.
• Aucune requête externe. Vérifié en servant le dossier en HTTP : 0 requête hors du dossier. L’original en fait vers trois domaines de mesure d’audience et un espace de stockage.
• Sans JavaScript, rien n’est caché. L’état caché n’existe que si le script a tourné. Vérifié en retirant les balises <script> : 15 titres sur 15 et 17 paragraphes sur 17 restent visibles, le rideau n’existe pas, le menu est une liste.
• Zéro style et zéro script en ligne. Le template respecte la politique de sécurité stricte du site, vérifiée en servant le dossier avec l’en-tête : 0 violation. C’est ce qui explique une particularité du globe — les douze épingles sont placées par :nth-child() dans la feuille, parce que l’attribut style est bloqué.
• Pas d’animation-timeline, qui n’existe que dans Chrome. Tout passe par IntersectionObserver et une variable CSS.
• Accessibilité : lien d’évitement, état du menu annoncé et fermeture à Échap, position des carrousels annoncée, focus visible, décorations masquées aux lecteurs d’écran, et prefers-reduced-motion qui remet les durées et les retards à zéro.
• Responsive vérifié à 390, 1440 et 2560 px, au chargement comme après défilement complet, sans débordement horizontal.

Ce qui n’est pas parfait

Autant le dire ici plutôt que te le laisser découvrir.