Vantera

Ce que c’est

Un site vitrine d’une page pour un showroom de voitures de sport et de luxe : héros en pleine image avec barre de recherche, panneau de chiffres, six fiches voiture, quatre étapes d’achat, carrousel d’avis, deux showrooms, quatre articles, deux appels à l’action, pied de page à cinq colonnes. Une seule page, un seul fichier HTML.

Ce qui fait ce site, c’est son héros : une photographie pleine largeur sur laquelle trois couches sont empilées dans une seule propriété CSS — un assombrissement plat de 40 % pour que le blanc tienne, un fondu vers le blanc sur le dernier quart, et la photo. C’est ce fondu qui laisse le panneau sombre des chiffres chevaucher l’image de 140 px sans découpe ni masque.

Le design vient d’un gabarit Webflow pour concessionnaire dont seule la structure a été gardée. Tout le reste a été réécrit : jQuery, le moteur d’animation IX2 et ses 126 événements, les 94 Ko de CSS minifié, le slider maison, le badge de l’éditeur, et les style="opacity:0" posés en ligne sur chaque bloc animé — qu’une politique de sécurité stricte bloque, ce qui donnerait une page blanche.

Le site a été rebaptisé, et pas seulement dans le titre : les cinq marques automobiles réelles qu’il affichait — logos compris — sont devenues cinq marques inventées, et les quatre réseaux sociaux du pied de page aussi. Vingt photographies ont été produites pour ce template.

Ce que tu changes en premier

Les couleurs — neuf lignes

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

--accent:        #31b5a3;  /* remplir : boutons, écussons, étoiles */
--accent-deep:   #1f7a6e;  /* écrire sur du clair, et le survol */
--accent-bright: #62daca;  /* écrire sur une photo, et sur l’encre */
--ink:           #0e1523;  /* panneaux sombres, pied de page, texte */
--cloud:         #f6f6f6;  /* les sections grises */

Une chose à savoir avant d’y toucher : l’accent existe en trois nuances et elles ne sont pas interchangeables. Le teal plein passe à 7,2:1 sur le bleu nuit et disparaît sur du blanc (2,5:1) ; la version foncée fait l’inverse, à 4,8:1 sur le gris clair ; la version éclaircie tient à 10,8:1 sur l’encre et à 7,5:1 sur une photo assombrie. Changer l’une oblige à changer les trois.

Le nom

Cherche « Vantera » dans index.html : le titre, la description, le logo, le héros, le pied de page, l’adresse e-mail. Aucune classe CSS ne contient la marque, donc un rechercher-remplacer ne peut rien casser. Le logo est un pictogramme SVG de 667 octets ; le mot à côté est du texte, dans la police du template.

Les voitures

Une fiche est un <article class="car">. Duplique-le ou supprime-le, la grille se recompose seule — même chose pour un avis et pour un article. Les rapports d’affichage des photos sont figés en CSS par aspect-ratio : 16/9 pour une voiture, 25/18 pour un showroom, 3/2 pour un article. Une image d’un autre rapport est recadrée, pas déformée.

Les tailles

L’échelle typographique est déclarée une fois en haut, puis redéclarée à chacun des trois points de rupture. Un titre n’a donc jamais sa propre media query : tu changes --h2-size et tous les titres de section suivent. Si tu te retrouves à écrire une @media ailleurs dans la feuille, c’est probablement qu’il te manque un jeton.

Les treize effets, et comment ils sont faits

Les réglages ne sont pas estimés à l’œil : ils sont lus dans le magasin ixData du moteur d’animation de Webflow, puis dédupliqués. Le gabarit y déclare 126 événements — un par instance de collection — pour 13 effets distincts.

Ce qu’il faut savoir

• Aucune requête externe. Polices auto-hébergées, images locales, zéro CDN. Vérifié en listant les requêtes du chargement, pas supposé.
• Sans JavaScript, rien n’est caché. L’état masqué de l’apparition au scroll s’écrit sous html.js, une classe posée avant le premier rendu. Vérifié en retirant les balises <script> : 25 titres sur 25, 68 paragraphes sur 68, les six voitures, les six avis, et le menu qui reste déplié.
• Les filtres et le menu sont natifs. Les trois filtres du héros sont des <details> : ils s’ouvrent au clic et au clavier, script ou pas. Le panneau « Pages » s’ouvre au :focus-within, donc au clavier seul. Le script n’ajoute que l’animation de 300 ms — et il faut qu’il l’ajoute, parce qu’un <details> fermé est retiré du rendu et qu’une @keyframes ne rejouerait jamais après la première ouverture.
• Le carrousel glisse tout seul. La piste est un conteneur de défilement avec scroll-snap : souris, doigt et flèches du clavier fonctionnent sans une ligne de JavaScript. Les deux boutons, leur état désactivé aux extrémités et la position annoncée en role="status" sont la couche par-dessus.
• 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 réel — lu dans le /_headers du projet, pas recopié.
• Le déclencheur est à 15 % du bas de l’écran, mesuré sur l’écran et non sur l’élément comme dans l’original. Un seuil exprimé en fraction de l’élément ne se déclenche jamais pour un bloc plus haut que la fenêtre — et ici un bloc entre visiblement au lieu d’avoir fini avant d’être vu.
• Contraste corrigé. L’original écrit en blanc sur son accent vert : 2,6:1, là où un texte de 16 px en demande 4,5. Ici le libellé d’un bouton plein est en bleu nuit, à 7,2:1 sur le même remplissage.
• Responsive vérifié à 390, 1440 et 2560 px, au chargement comme pendant tout le défilement, sans débordement horizontal.

Ce qui n’est pas parfait

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