@zevra/ui 0.29.0 → 0.30.0

package/src/layout.css

@@ -440,8 +440,21 @@
    * les entrées de nav posées sur ses lettres. Deux textes superposés, aucun
    * lisible. Signalé en recette sur mcp-factory.
    * Le dégradé n'est pas perdu : il vit sous la barre, là où il adoucit le
-   * passage sans se disputer la place avec la navigation. */
-  background: color-mix(in srgb, var(--paper) 92%, transparent);
+   * passage sans se disputer la place avec la navigation.
+   *
+   * L'OPACITÉ, elle, est retombée de 92 à 72 %. À 92 la barre était un
+   * bandeau blanc : ce qui passait dessous n'était plus qu'un fantôme, et
+   * le flou ne servait à rien puisqu'il n'y avait rien à voir au travers.
+   * C'est du verre qu'on veut, pas un cache — le rendu de
+   * landing.zevra.tech, qui fait toujours référence. À 72 avec un flou de
+   * 14, le contenu transparaît franchement ET les entrées de nav restent
+   * nettes. Comparé à l'écran sur un titre passant sous la barre, à 92, 72
+   * et 60 : 92 ne montre rien, 60 devient bavard.
+   *
+   * ⚠️ Baisser l'opacité SANS monter le flou rendrait la nav illisible :
+   * les deux vont ensemble. C'est le flou qui fait le verre ; l'opacité ne
+   * fait que doser ce qu'on en voit. */
+  background: color-mix(in srgb, var(--paper) 72%, transparent);
   /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS — le compilateur de Tailwind v4,
    * donc celui de toutes nos applications Next — SUPPRIME `backdrop-filter`
    * non préfixé quand il précède la forme `-webkit-`. Or Firefox ne connaît
@@ -457,12 +470,16 @@
    * compilateur NUE, sans repli, et un navigateur qui l'ignore n'a alors
    * plus AUCUN fond sous une barre fixe — 3,5 % d'usage qui voyaient le
    * voile correctement et ne verraient plus rien. */
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
 }
 
 /* La frange de dégradé, posée SOUS la barre. `pointer-events: none` : elle
  * couvre le haut du contenu, elle ne doit rien intercepter. */
+/* Le prolongement du voile SOUS la barre : il éteint le verre au lieu de
+ * le couper net. Son sommet doit valoir EXACTEMENT l'opacité de la barre —
+ * sinon la jointure fait une marche, d'autant plus visible que la barre est
+ * translucide. Les deux valeurs bougent donc ensemble. */
 .zv-header::after {
   content: '';
   position: absolute;
@@ -472,11 +489,11 @@
   height: 24px;
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--paper) 92%, transparent),
+    color-mix(in srgb, var(--paper) 72%, transparent),
     color-mix(in srgb, var(--paper) 0%, transparent)
   );
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
   pointer-events: none;
 }
 

package/src/rail.js

@@ -27,14 +27,26 @@
  */
 (() => {
   if (typeof document === 'undefined') return
-  if (document.documentElement.dataset.zvRail === 'on') return
-  document.documentElement.dataset.zvRail = 'on'
+  /* ⚠️ Le drapeau d'armement ne doit JAMAIS reprendre le nom de l'attribut
+   * qui désigne un rail. Il s'appelait `data-zv-rail`, comme le composant :
+   * posé sur <html>, il faisait de la PAGE ENTIÈRE un rail. Sur une page
+   * sans rail — la seule où ça se voit —, `a[href^="#"]` ramassait alors
+   * tous les liens d'ancre, boutons compris, et le premier d'entre eux
+   * recevait `.zv-rail__item--on` : un appel à l'action en indigo sur fond
+   * indigo, illisible. Constaté sur /bootcamp. */
+  if (document.documentElement.dataset.zvRailArme === 'on') return
+  document.documentElement.dataset.zvRailArme = 'on'
 
   /** Hauteur de la ligne de lecture, en fraction du viewport. 45 % : un peu
    *  au-dessus du milieu, là où l'œil se pose vraiment. */
   const LIGNE = 0.45
 
-  const rails = () => Array.from(document.querySelectorAll('[data-zv-rail]'))
+  /* Ceinture et bretelles : <html> et <body> ne sont jamais des rails, quoi
+   * qu'un consommateur écrive dessus. */
+  const rails = () =>
+    Array.from(document.querySelectorAll('[data-zv-rail]')).filter(
+      (el) => el !== document.documentElement && el !== document.body,
+    )
 
   const suivre = (rail) => {
     const entrees = Array.from(rail.querySelectorAll('a[href^="#"]'))