/* ========================================================================= SITERO — LA GOUTTE (curseur FINAL, prévu pour remplacer cursor.css) ------------------------------------------------------------------------- À charger APRÈS style.css et palette.css. Ce fichier se suffit à lui-même : il ne dépend d'aucune règle des autres feuilles, et tous ses noms commencent par « gt- » pour ne rien pouvoir écraser. C'EST LA VERSION RETENUE. Plus de variante, plus de sélecteur : la goutte, une respiration de 6 %, et pas de barre en I sur le texte. CE QU'IL Y A À L'ÉCRAN, ET RIEN D'AUTRE 1. LE POINT (.gt-pt__c) 4 px, net, posé EXACTEMENT sur la souris, sans le moindre retard. C'est lui, et lui seul, qui vise. 2. LA GOUTTE (.gt-cp__eau) 20 px d'eau. Elle ne peint pas : elle déforme et éclaire ou assombrit ce qu'il y a dessous. Elle suit avec un lissage, respire au repos, s'allonge dans le sens du geste, et s'ouvre sur ce qui est cliquable. Comme elle ne vise pas, elle a le droit d'être discrète. LES DEUX ÉTATS (classes posées sur .gt par le script) .is-vu le curseur est affiché .is-actif la souris survole un lien, un bouton, un champ .is-presse bouton de souris enfoncé .f-clair / .f-sombre / .f-mixte nature du fond juste dessous L'état « barre en I sur le texte » de la version précédente a été RETIRÉ : il n'a pas été retenu. POURQUOI ÇA RESTE VISIBLE SUR TOUS LES FONDS Le point est dessiné DEUX FOIS : un cœur d'une couleur et, collé autour, un liseré d'un demi-pixel de la clarté opposée. Un cœur noir bordé de blanc tient sur du blanc, un cœur blanc bordé de noir tient sur du noir, et sur n'importe quel gris ou n'importe quelle couleur il y en a forcément un des deux qui tranche. C'est l'astuce des repères des logiciels de retouche, et elle ne dépend d'AUCUNE mesure du fond. Les classes .f-clair / .f-sombre / .f-mixte ne font que choisir lequel des deux tons passe devant : même si le script se trompe de fond, le curseur reste visible. Ceinture ET bretelles, volontairement. « mix-blend-mode » a été essayé puis écarté : il disparaît sur les gris moyens, et surtout il annule le backdrop-filter — donc l'effet d'eau. PERFORMANCE Rien n'est animé ici en dehors de « transform » et « opacity ». Le seul backdrop-filter de tout le projet est celui de la goutte, qui mesure 20 px : la taille d'une gomme de crayon, le coût est nul. Il est TOLÉRÉ ICI ET NULLE PART AILLEURS. Aucun filter:blur, aucun content-visibility. Le script n'écrit que deux « transform » par image, et seulement s'ils ont changé. ========================================================================= */ /* Réservé aux ordinateurs équipés d'une souris ou d'un trackpad précis. Sur écran tactile, (pointer:fine) est faux : rien n'est appliqué et le doigt garde le comportement natif du navigateur. */ @media (hover:hover) and (pointer:fine) { /* ----------------------------------------------------------------------- 1. LE MASQUAGE DU CURSEUR NATIF La classe .gt-on est posée par le script SEULEMENT une fois le remplaçant réellement construit ET affiché, c'est-à-dire au premier vrai mouvement de souris. Si le script échoue ou n'a pas démarré, la flèche du système reste là : on ne laisse jamais l'utilisateur sans curseur du tout. ----------------------------------------------------------------------- */ html.gt-on, html.gt-on * { cursor: none; } /* ----------------------------------------------------------------------- 2. LE SOCLE — LA GÉOMÉTRIE EXACTE Tout repose sur des boîtes de taille ZÉRO. Une boîte de 0 x 0 posée en haut à gauche de la fenêtre n'a qu'un seul point : son coin. Le script lui applique translate3d(x, y, 0), donc ce coin tombe exactement sur (x, y) — aucune marge négative à compenser, contrairement à l'ancien curseur qui corrigeait sa taille à la main. Chaque dessin est ensuite un enfant en position absolue à left:0 / top:0 — donc posé PAR SON COIN sur ce même point — que l'on recentre par translate(-50%,-50%). Ce -50 % se calcule sur la taille de l'enfant lui-même, jamais sur celle du parent : le centre du dessin tombe donc sur (x, y) quelle que soit sa taille. Et comme toute mise à l'échelle se fait autour du centre de l'élément (transform-origin: 50% 50% par défaut), grossir ou rétrécir ne déplace jamais ce centre. AUCUN état ne peut décaler la visée : elle est exacte par CONSTRUCTION, pas par réglage. ----------------------------------------------------------------------- */ .gt { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; /* ne doit jamais intercepter un clic */ opacity: 0; transition: opacity .22s cubic-bezier(.22,.61,.36,1); } .gt.is-vu { opacity: 1; } .gt-pt, .gt-cp { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; /* Ces deux boîtes-là, et elles seules, portent le transform réécrit à chaque image. Elles vivent donc sur leur propre couche graphique : c'est le seul « will-change » du fichier. */ will-change: transform; } /* Le point passe DEVANT la goutte : la visée n'est jamais recouverte. */ .gt-pt { z-index: 2; } .gt-cp { z-index: 1; } /* Tous les dessins : centrés sur l'origine, jamais cliquables. */ .gt-pt > *, .gt-cp > * { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); pointer-events: none; } /* ----------------------------------------------------------------------- 3. L'ENCRE ET SON CONTRE-TON Trois variables, réécrites seulement quand le fond change de nature — donc jamais dans la boucle d'animation. --gt-encre la couleur du point --gt-contre le demi-pixel qui l'entoure, de clarté opposée --gt-vif la couleur de survol (le bleu de la marque) La palette du site : #1166F9, #2297FD, #2FC1FF, #31EEF5. ----------------------------------------------------------------------- */ .gt, .gt.f-clair { --gt-encre: rgba(14,18,28,.86); /* encre foncée sur fond clair */ --gt-contre: rgba(255,255,255,.55); --gt-vif: var(--tint, #1166F9); } .gt.f-sombre { --gt-encre: rgba(255,255,255,.94); /* encre claire sur fond sombre */ --gt-contre: rgba(0,0,0,.45); --gt-vif: var(--tint-l, #2FC1FF); } .gt.f-mixte { /* Photo, vidéo, aplat coloré : on ne peut rien parier sur le fond. Blanc franc + liseré noir franc, la paire qui tient partout. */ --gt-encre: rgba(255,255,255,.96); --gt-contre: rgba(0,0,0,.66); --gt-vif: #FFFFFF; } /* ----------------------------------------------------------------------- 4. LE POINT DE VISÉE 4 px au repos. C'est petit, et c'est le but : à cette taille l'œil ne voit plus une pastille mais un point, et un point n'a aucune ambiguïté sur ce qu'il désigne. ----------------------------------------------------------------------- */ .gt-pt__c { width: 4px; height: 4px; border-radius: 50%; background: var(--gt-encre); box-shadow: 0 0 0 1px var(--gt-contre); transition: transform .16s cubic-bezier(.22,.61,.36,1), opacity .14s linear, background .18s ease, box-shadow .18s ease; } /* Au survol d'un lien, le point NE GROSSIT PAS : s'il grossissait, on perdrait exactement ce qu'on est venu chercher. Il prend le bleu de la marque, c'est tout. Le signal de survol est donné par la goutte, qui elle a le droit de bouger. */ .gt.is-actif .gt-pt__c { background: var(--gt-vif); box-shadow: 0 0 0 1px var(--gt-contre), 0 0 6px -1px var(--gt-vif); } /* Au clic, il se resserre brièvement : c'est l'accusé de réception le plus direct qui soit, puisqu'il se produit là où l'œil regarde déjà. */ .gt.is-presse .gt-pt__c { transform: translate(-50%,-50%) scale(.55); } /* ----------------------------------------------------------------------- 5. LA GOUTTE D'EAU 20 px au lieu des 38 px de l'ancien curseur : la surface visible est divisée par 3,6. Elle ne peint pas, elle déforme et éclaire ou assombrit ce qu'il y a dessous — c'est ce qui lui garde son aspect d'eau plutôt que de pastille de couleur. Aucun liseré dessiné : le contour net était justement ce qui la faisait lire comme un objet d'interface. Le backdrop-filter est TOLÉRÉ ICI ET NULLE PART AILLEURS sur ce projet : sur 20 px de côté, son coût est nul. ----------------------------------------------------------------------- */ .gt-cp__eau { display: block; width: 20px; height: 20px; border-radius: 50%; -webkit-backdrop-filter: blur(1.4px) saturate(1.45) brightness(.92); backdrop-filter: blur(1.4px) saturate(1.45) brightness(.92); /* Le reflet : un simple dégradé, jamais un filter:blur. */ background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 72%); box-shadow: 0 1px 5px -2px rgba(0,0,0,.28); transition: transform .20s cubic-bezier(.22,.61,.36,1), -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease, opacity .2s linear; } /* Sur fond sombre, éclaircir un noir pur ne donne rien (1,8 fois zéro fait toujours zéro) : il faut AJOUTER de la lumière. C'est aussi ce que fait une vraie goutte sur une surface noire — elle ne montre plus le fond, elle renvoie le ciel. */ .gt.f-sombre .gt-cp__eau { -webkit-backdrop-filter: blur(1.4px) saturate(1.15) brightness(1.8); backdrop-filter: blur(1.4px) saturate(1.15) brightness(1.8); background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 55%, rgba(255,255,255,.05) 100%); box-shadow: 0 1px 7px -2px rgba(0,0,0,.5); } /* Photo, vidéo, aplat coloré : un peu plus de flou et de contraste, ce qui suffit à faire lire la lentille sur n'importe quelle image. */ .gt.f-mixte .gt-cp__eau { -webkit-backdrop-filter: blur(1.7px) saturate(1.35) contrast(1.12); backdrop-filter: blur(1.7px) saturate(1.35) contrast(1.12); } /* ----------------------------------------------------------------------- 6. LES DEUX ÉTATS DE LA GOUTTE Au survol, elle s'ouvre (× 1,5, soit 30 px) et c'est elle qui porte tout le signal. Au clic, elle se resserre. C'est aussi au survol que l'AIMANTATION la fait pencher vers le centre du bouton, pendant que le point de visée, lui, reste rigoureusement sous la main : le décalage est plafonné à 10 px par le script, donc une goutte de 15 px de rayon recouvre toujours le point. Le détail est dans _a-integrer/goutte.md. ----------------------------------------------------------------------- */ .gt.is-actif .gt-cp__eau { transform: translate(-50%,-50%) scale(1.5); } .gt.is-presse .gt-cp__eau { transform: translate(-50%,-50%) scale(.82); } /* Au clic sur un bouton, les deux se composent : on part de 1,5 et on retombe à 1,22 — la goutte « encaisse » le clic sans disparaître. */ .gt.is-actif.is-presse .gt-cp__eau { transform: translate(-50%,-50%) scale(1.22); } /* ----------------------------------------------------------------------- 7. PENDANT LA TRAVERSÉE DU NOM GÉANT (classe .wm-vol sur ) ----------------------------------------------------------------------- Ceci reprend une protection qui existait déjà pour l'ancien curseur, dans style.css, sous ses anciens noms de classes (.cr-drop). Comme le curseur change de nom, cette protection ne s'appliquerait plus toute seule : on la réécrit ici, avec les nouveaux noms, pour qu'elle continue de faire son travail. Il n'y a donc RIEN à modifier dans style.css. Pourquoi c'est nécessaire : un flou d'arrière-plan doit être recalculé dès que ce qu'il y a DERRIÈRE change. Pendant la traversée du nom géant, tout l'écran change à chaque image — le navigateur refait donc le flou de la goutte 60 fois par seconde en plus du reste. Le temps du mouvement, on coupe le flou et on efface la goutte aux trois quarts : invisible à l'œil, décisif pour la machine. ----------------------------------------------------------------------- */ .wm-vol .gt-cp__eau { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: .35; } } /* ========================================================================= PRÉFÉRENCE SYSTÈME « MOINS D'ANIMATIONS » Dans ce cas : aucun curseur personnalisé, la flèche du système reprend la main. Le script s'arrête déjà tout seul ; ces deux règles sont la ceinture en plus des bretelles, au cas où la préférence changerait pendant la visite. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .gt { display: none !important; } html.gt-on, html.gt-on * { cursor: auto !important; } }