Corvella

Ce que c’est

Un site vitrine d’une page pour un restaurant de bord de mer : écran d’accueil au logo centré entre deux assiettes détourées, photographie pleine largeur dans laquelle un chevron est taillé, trois plats en rotation, bannière de vins, carrousel de trois photos, une phrase seule sur fond bleu, formulaire de réservation et pied de page à quatre colonnes. Une seule page, un seul fichier HTML.

Ce qui fait ce site, c’est le bleu et ce qu’on y découpe. Les grandes photos ne sont pas posées bord à bord : un triangle de la couleur du fond mord dans leur bord supérieur ou inférieur, et c’est une seule ligne de clip-path qui le dessine — pas une image, pas un masque. Le second geste, c’est la loupe de la section bleue : un disque de 200 px qui suit le curseur pendant que la photographie qu’il révèle, elle, ne bouge pas.

Le design vient d’un gabarit Webflow pour restaurant dont seule la structure a été gardée. Tout le reste a été réécrit : jQuery, le bundle de 1,17 Mo qui contient le moteur d’animation IX2, les 70 Ko de CSS minifié, le slider maison, une animation Lottie, le badge de l’éditeur, le widget Google Maps, 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 il ne reste rien de l’original dans les fichiers : nom, logo, adresse, téléphone, e-mail, compte social, noms des plats. Les huit photographies ont été générées pour ce template et les six dessins — la coquille du logo, le poisson, le filet, le nautile, le semis de coquillages, le plan du quartier — sont écrits à la main en SVG.

Ce que tu changes en premier

Les couleurs — cinq lignes

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

--blue:       #0b3a5b;  /* fonds bleus, texte sur le crème */
--blue-dark:  #06283e;  /* le même bleu, un cran plus foncé (survol) */
--blue-light: #6e9dbb;  /* le même bleu, éclairci : dessins posés SUR le bleu */
--cream:      #f1f5f7;  /* fond de page */
--white:      #ffffff;  /* cartes et rails */

Une chose à savoir avant d’y toucher : il y a trois bleus, et ils ne sont pas interchangeables. Le plein tient à 10,8:1 sur le crème et porte du blanc à 11,9:1 ; le foncé est là pour les survols (13,9:1 sur le crème) ; l’éclairci sert au nautile, aux coquillages et aux filets posés sur le bleu, où le plein disparaîtrait (4,1:1). Changer l’un oblige à changer les trois — et la couleur des dessins est écrite dans l’attribut stroke des fichiers SVG, pas dans le CSS.

Le nom

Cherche « Corvella » dans index.html : le titre, la description, le logo répété trois fois, l’adresse e-mail, le compte social, le pied de page. Aucune classe CSS ne contient la marque, donc un rechercher-remplacer ne peut rien casser. Le logo n’est pas une image : c’est un paragraphe avec une coquille en SVG et deux lignes de texte, dimensionné par une seule variable, --mark.

Les plats

Un plat est un <a class="dish"> : une assiette détourée dans un cercle, un libellé dessous. Duplique-le ou supprime-le, la grille se recompose seule. Les assiettes sont des WebP à fond transparent — si tu remplaces la photo, découpe-la en disque, sinon le coin blanc du fichier se verra sur le bleu.

Les tailles

L’échelle typographique est déclarée une fois en haut, puis redéclarée à chacun des quatre points de rupture. Un titre n’a donc jamais sa propre media query : tu changes --size-h2 et tous les titres suivent. La mise en page tient elle aussi dans quatre variables, toutes en unités d’écran : --gutter, --inset, --rail et --plate.

Les onze 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 filtrés sur la page d’accueil et dédupliqués. Le gabarit y déclare 31 événements pour 12 effets distincts. Onze sont reproduits ; le douzième animait la carte de visite de l’auteur du gabarit, retirée avec elle.

Ce qu’il faut savoir

• Aucune requête externe. 21 requêtes au chargement, toutes locales. Polices auto-hébergées, images locales, zéro CDN. Vérifié en listant les requêtes du chargement, pas supposé. L’original tirait jQuery, un bundle Webflow et Google Fonts depuis quatre domaines.
• 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> : 9 titres sur 9 visibles, zéro bloc caché, l’écran de chargement n’apparaît pas et le menu s’ouvre quand même.
• L’écran de chargement ne dépend pas du script pour partir. Chaque étape est une animation CSS avec un retard, pas une classe ajoutée par le JavaScript. Si main.js tombe après que enhance.js a posé la classe, la page finit quand même d’apparaître — c’est exactement le cas que le voile plein écran rend dangereux.
• Le menu est un <details>. Il s’ouvre au clic et au clavier, script ou pas, et <summary> expose l’état déplié tout seul. Le script n’ajoute que l’animation d’entrée — et il faut qu’il l’ajoute, parce qu’un <details> fermé est masqué par content-visibility 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, et les trois points sont de vraies ancres. Les deux flèches et la position annoncée en role="status" sont la couche par-dessus. Mesuré aux trois largeurs : la dernière photo est atteignable.
• 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 : zéro violation, zéro erreur JavaScript.
• 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.
• Les liens du menu sont en texte contourné. -webkit-text-stroke n’existe pas partout ; là où il manque, les liens seraient invisibles, donc un @supports not les remplit en blanc.
• 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.