Bandes et cellules allumées
Les cellules vertes qui s’allument entre deux sections, et celle qui finit une grille.
La bande
Entre deux sections, deux rangées de 48 px sur la grille, et quelques cellules vertes, profondes ou pâles, qui s’allument l’une après l’autre à l’arrivée, puis respirent. Deux motifs, décrits en données.
- Emploi
- Marquer un passage entre deux sections sans poser de surface colorée : après les offres, avant le contact.
- Moment
- Deux fois sur l’accueil, motif a puis motif b. Une bande par passage, jamais deux à la suite.
- Jamais
- Comme fond d’une section. Avec du texte dessus. En dessin libre : les cellules sont des données, colonne, rangée, largeur, ton.
<Bande motif="a" />
<Bande motif="b" />| Classe | Zone | Valeur |
|---|---|---|
| .tr-bande | la bande | 96 px de haut, deux rangées de 48 ; overflow hidden |
| .tr-bande | la grille | deux conic-gradient, 8 × 48 px et 48 × 8 px : un tiret de 4 px tous les 8, une ligne tous les 48 ; var(--line) à 55 % |
| .tr-bande i | une cellule | left : colonne × 48 px ; top : rangée × 48 px ; largeur : cellules × 48 px moins 1 ; 47 px de haut |
| .tr-bande__v | vert | var(--grinn), #98D1CB ; parmi les vertes seules, celles de rang 3n + 1 (:nth-child(3n+1 of .tr-bande__v)) passent au vert moyen (#60B8AF) : la première et la quatrième verte de chaque motif, colonnes 0 et 20 dans le motif a, 3 et 19 dans le motif b ; deux carrés en vert moyen par bande |
| .tr-bande__d | vert profond | var(--grinn-deep), #367972 |
| .tr-bande__p | pâle | un dégradé à 160° du vert moyen #60B8AF au vert clair #E9F4EA (les verts en relief, 12 octobre) |
| MOTIFS | les données | [colonne, rangée, largeur, ton] ; onze cellules par motif, sur 24 colonnes ; dans Bande.astro |
| data-allume | l’allumage | scaleX(0) depuis la gauche, puis 1 : 640 ms var(--ease), 55 ms de plus par cellule (--i) ; .is-trace posé par trame.ts à l’arrivée |
| tr-respire | la respiration | opacité de 1 à .45 et retour, 3,6 s en boucle, décalée de -.5 s par cellule |
| --defile, --s | au défilement | trame.ts, partie 7 : --defile vaut 1 quand le milieu de la bande est en bas de l’écran, 0 au milieu, −1 en haut ; translate --defile × --s × 48 px, --s valant 1 pour la première rangée et −1 pour la seconde (posé par le composant). En descendant, la première rangée glisse vers la gauche, de 48 px à droite de sa place à 48 px à gauche, la seconde vers la droite : une case de chaque côté, 96 px de course ; à mi-écran, les carrés sont sur la grille |
| mouvement réduit | sans | cellules allumées d’emblée, pas de respiration, pas de glissement |
| .tr-bande-sec > .tr-in | la section | padding 0 ; la ligne de section au-dessus ; aria-hidden : la bande est décorative |
La cellule allumée
Une cellule pâle où cinq carrés verts s’allument l’un après l’autre, puis respirent. Elle remplit les cases vides d’une grille : après les cinq engagements, deux cellules allumées finissent la rangée de quatre (Engagements en pose deux au plus) ; après les six cartes d’offre, aucune : les cartes remplissent leurs rangées de trois. Décorative, et absente sous 600 px.
-
Une seule personne à appeler
Votre chef de projet vous suit du premier échange au suivi. Vous n’avez rien à coordonner.
-
Un délai annoncé d’avance, et tenu
Vous connaissez le délai de mise en ligne avant qu’on commence. Vous pouvez caler votre lancement ou votre saison dessus.
-
Un devis écrit, et pas de facture surprise
Le devis dit ce qui est compris et ce qui ne l’est pas. Si le projet change en route, on chiffre l’écart avant de s’y mettre.
<Grille element="ol" classe="tr-eng" stagger={60}>
<Cellule>
<span class="tr-eng__n" aria-hidden="true">01</span>
<h3>Une seule personne à appeler</h3>
<p class="small">Votre chef de projet vous suit du premier échange au suivi. Vous n’avez rien à coordonner.</p>
</Cellule>
{/* les quatre autres */}
<CelluleAllumee />
<CelluleAllumee />
</Grille>
<!-- Sur l’accueil, Engagements.astro pose lui-même les cellules allumées : ce qui manque pour finir la rangée de quatre, deux au plus. -->| Classe | Zone | Valeur |
|---|---|---|
| .tr-cel--allume | la cellule | fond var(--pale), min-height 120 px ; la première des engagements prend le dégradé ramassé dans l’angle (--degrade-angle), et son deuxième carré le vert moyen |
| .tr-cel--allume i | un carré | 16 % de la largeur de la cellule, carré ; var(--grinn) ; transform-origin left, right pour les pairs |
| i:nth-child(1) | le premier | left 12 %, top 14 %, var(--grinn-deep) |
| i:nth-child(2) | le deuxième | left 28 %, top 14 % |
| i:nth-child(3) | le troisième | left 60 %, top 42 %, var(--grinn-deep) |
| i:nth-child(4) | le quatrième | left 44 %, bottom 12 %, vert moyen (#60B8AF) |
| i:nth-child(5) | le cinquième | left 76 %, bottom 12 %, var(--grinn-deep) |
| allumage | à l’arrivée | scaleX(0) tant que la grille n’est pas tracée (.is-trace) ; 640 ms var(--ease), 90 ms de plus par carré (--k) |
| tr-respire | ensuite | 3,6 s en boucle ; les carrés pairs décalés |
| sous 600 px | écran étroit | display none : la grille finit sur sa dernière cellule de texte |
| element | la balise | li par défaut, div ; aria-hidden |
Les cellules de la page contact et du pied
Autour du formulaire complet de la page contact, et de la candidature de la page carrières, sept cellules allumées posées sur une vraie grille de 48 px, masquée au milieu pour laisser la tête lisible. Dans le pied, trois cellules dans le coin de la cellule pâle. Aucune ne s’allume : elles respirent d’emblée. Le point de contact des autres pages (Contact.astro) ne les pose plus depuis le 12 octobre : sa tête a ses cellules vivantes, décrites dans Formulaire.
<div class="tr-cellules" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="tr-pied__cellules" aria-hidden="true"><i></i><i></i><i></i></div>| Classe | Zone | Valeur |
|---|---|---|
| .tr-cellules | le fond de la page contact et de la candidature | posé à la main dans la Section tr-contact, avant la tête ; absolu, inset 0, sans pointeur ; la section coupe ce qui dépasse |
| .tr-cellules::before | la grille | 8 × 48 px et 48 × 8 px, var(--line) à 38 % |
| mask | le masque | plein jusqu’à 192 px, fondu jusqu’à 300 px, vide au milieu, plein à nouveau sur les 144 derniers px |
| .tr-cellules i | une cellule | 47 × 47 px, var(--grinn) ; la 1, la 5 et la 6 en var(--grinn-deep) ; la 2 et la 7 en vert moyen, la 3 en dégradé du vert moyen au vert clair |
| positions | les sept | 48/48 ; 96/96 ; 240/0 ; droite 96, haut 48 ; droite 48, haut 144 ; 144, bas 48 ; droite 192, bas 96 |
| de 861 à 1140 px | écran moyen | la 6 passe à 48 ; la 7 à droite 48, bas 48 |
| sous 860 px | écran étroit | seules la 1 (12/12) et la 3 (droite 12, haut 0) restent |
| .tr-pied__cellules | le coin du pied | absolu, inset 0, overflow hidden ; 47 × 47 px, var(--grinn) ; la 2 en vert moyen, la 3 en dégradé du vert moyen au vert clair |
| positions | les trois | droite 0, haut 0, var(--grinn-deep) ; droite 48, haut 48 ; droite 0, bas 0 ; la 2 disparaît sous 480 px |
| tr-respire | la respiration | 3,6 s en boucle, les pairs décalés ; aucune en mouvement réduit |
Jamais une surface
Le vert est un trait, une cellule allumée, un surlignage. Jamais la surface d’une section : le vert numérique vibre en grand aplat, et la trame disparaît dessous.
RègleLe vert s’allume cellule par cellule, sur la grille de 48 px, et ne couvre jamais une section.