Neumorphic Club Fintech

Club fintech néumorphique

Un site financier réservé aux membres, taillé dans deux matériaux doux : une page sombre et des îlots clairs incrustés (cartes, panneaux, pièces, le téléphone, barres FAQ). À l'intérieur de chaque matériau, les boutons et les puits sont en relief (surélevés) ou en creux (enfoncés), et une lumière qui suit le curseur rend le relief physique. Le thème clair inverse les deux : page claire, îlots sombres. Le ton est calme et exclusif : grands énoncés serif en minuscules, peu de texte, beaucoup d'espace.

La construction de référence est example/index.html (Atlasio Reserve, un club de cartes fictif, EN/TR, relief sombre et clair). Le code détaillé se trouve dans references/components.md ; screenshots/ montre chaque section sur desktop, mobile, les deux thèmes et en turc.

Si l'utilisateur nomme un site de référence, n'en retenir que la structure et l'ambiance. Ne jamais copier ses rendus, noms de produits, textes ou logo.

1. Avant de concevoir

1. Collecter l'offre réelle : promesse en une ligne, critères d'éligibilité, 3 à 5 fonctionnalités produit, récompenses, déclaration de sécurité, avis ou nombre de membres uniquement si le client peut les justifier, FAQ, liens d'application. Étiqueter tout le reste comme échantillon.
2. Ne jamais inventer de certifications de sécurité, taux d'intérêt, frais, règles d'approbation ou effets sur le score de crédit. Les textes financiers sont réglementés ; laisser un espace réservé indiquant ce qui doit être mis.
3. Choisir le seul état actif qui reçoit la LED lime (date d'échéance, paiement reçu, carte active). L'accent n'apparaît nulle part ailleurs, sauf sur le texte des boutons primaires et les anneaux de focus.

2. ADN visuel

Élément	Règle
Matériaux	Deux. Page : foncé #272a31 (hi #2e3139, lo #212329). Îlots (.alt) : clair #e6e9ee (hi #f1f3f6, lo #d7dbe1). Le thème clair les inverse. À l'intérieur d'un matériau, chaque surface est de cette couleur. Jamais de noir ou blanc pur : les ombres ont besoin d'espace des deux côtés.
Îlots	Cartes, panneaux histoire et rejoindre, le téléphone, tuiles de rail, pièces, cadran, tuiles d'avis, barres FAQ, promo footer, badge de l'application. L'en-tête, le texte héro, les puits de statistiques, les titres et le footer restent sur le matériau de la page. Viser environ moitié clair, moitié foncé sur chaque écran.
Relief	Surélevé = X Y 24px foncé, -X -Y 24px clair ; enfoncé = la même paire inset. Matériau foncé rgba(0,0,0,.55) / rgba(255,255,255,.06) ; matériau clair rgba(146,156,172,.75) / rgba(255,255,255,.95). Petites variantes à demi-décalage. Les boutons et puces convexes ajoutent linear-gradient(145deg, hi, lo). L'ombre extérieure propre d'un îlot tombe sur la page, donc elle utilise la paire de la page (--island), jamais son propre surlignage blanc (cela créerait un halo sur fond foncé).
Lumière	Les décalages proviennent de --lx/--ly (un vecteur unitaire). Lumière par défaut en haut à gauche (.7071, .7071) ; JS l'oriente vers le curseur.
Texte	Chaque matériau a sa propre encre : sur foncé #f4f5f7 / #c9cdd5 / #959aa4, sur clair #191c22 / #3c414c / #5f6571. Le texte n'est jamais à faible contraste : le relief est pour les surfaces, pas pour le texte à lire.
Accent	LED lime #b9f26b sur matériau foncé, #3e8a1d sur matériau clair, avec une faible lueur. Les puits de fonctionnalités peuvent contenir une seule lueur saturée chacun (rose, violet, vert, bleu) à ~38% d'opacité.
Police d'affichage	Fraunces 700, opsz 144, letter-spacing:-.035em, minuscules, hauteur de ligne .92 (Denton est le look original payant).
Corps / UI	Urbanist 400–700 (look Gilroy). Sourcils 13px 700 majuscules letter-spacing:.32em. Boutons 13px 700 majuscules .18em.
Formes	Pills pour boutons et bascules ; rayons de 20 à 44px pour panneaux ; cercles pour puits d'icônes, pièces et cadran. Pas de bordures, pas de filets.
Gravure	Même couleur que la surface + text-shadow: 1px 1px 1px clair, -1px -1px 1px foncé. Uniquement pour la décoration (numéros de carte, mots non lus).

3. Modèles de sections

1. En-tête – monogramme rond surélevé + mot-symbole serif ; pillule enfoncée avec LED ("nouveau·…") ; piste de langue enfoncée dont le segment actif est surélevé ; bouton de thème rond surélevé. Collant ; gagne une ombre portée douce après le défilement.
2. Héro – gauche : sourcil, titre serif en minuscules sur 2 lignes, courte introduction, un bouton primaire (texte lime) et un bouton pillule simple, deux puits de statistiques enfoncés marqués "échantillon". Droite : anneaux de relief concentriques (surélevé, enfoncé, surélevé) avec une carte en relief par-dessus (puce convexe, numéro gravé, LED), inclinée de -8° et suivant la souris.
3. Histoire – un grand panneau surélevé ; sourcil ("l'adhésion se mérite.") ; un paragraphe serif dont les mots commencent gravés et s'illuminent un par un au fur et à mesure que le lecteur défile.
4. Application – un téléphone surélevé avec un écran enfoncé sort d'une fente encastrée ; à l'intérieur, une carte de facture surélevée (LED date d'échéance, montant, bouton payer) et deux lignes de liste. Titre serif centré et introduction en dessous.
5. Cartes – divisé : texte à gauche ; cinq plaques de cartes surélevées s'ouvrant en éventail depuis un pivot commun au fur et à mesure que la section défile ; la plaque avant porte l'état LED.
6. Rail de paiement – sourcil + titre, boutons rond surélevés précédent/suivant ; rail horizontal à défilement par accrochage de tuiles surélevées : puits d'icône enfoncé + étiquette en majuscules, titre sur deux lignes, petit bouton pillule, un puits "afficher" enfoncé avec une lueur colorée et un objet en relief (téléphone en pointillés, grille de puce, anneaux sans contact, barres divisées).
7. Récompenses – titre centré ; grille 3×2 de pièces convexes qui flottent lentement ; appuyer sur l'une l'enfonce et révèle une récompense échantillon.
8. Sécurité – divisé : cadran surélevé avec 60 graduations qui tournent au défilement autour d'un bouton convexe avec un cadenas lime ; sourcil et un grand paragraphe sans serif éclairé par un projecteur mobile (suit le pointeur, dérive seul sinon).
9. Preuve – titre + deux tuiles d'avis surélevées : nombre serif, /5, une piste enfoncée avec un remplissage lime. Étiqueté échantillon sauf si réel.
10. Rejoindre – panneau surélevé : titre ("la porte s'ouvre pour certains."), introduction, une piste glisser-pour-rejoindre enfoncée avec un bouton convexe ; à droite un puits enfoncé avec une tuile QR surélevée.
11. FAQ – étiquette centrée à espacement large ; barres <details> surélevées qui deviennent enfoncées lorsqu'ouvertes.
12. Footer – un panneau enfoncé avec logo, deux colonnes de liens et une carte promotionnelle surélevée ; une ligne de petits caractères en dessous.
13. Badge flottant – "obtenir l'application" en bas à droite surélevé avec un petit QR ; se cache pendant que la section rejoindre est visible et en dessous de 900px.

4. Interactions signature

• Lumière du curseur – sur pointermove, définir le vecteur d'ombre sur normaliser(centre − curseur) et interpoller --lx/--ly avec requestAnimationFrame. Chaque ombre est construite à partir de ces variables, donc toute la page se ré-éclaire en une fois. Uniquement pour (pointer:fine) ; lumière fixe en haut à gauche avec mouvement réduit.
• Mots gravés → illuminés – diviser le paragraphe en <span class="w"> ; éclairer les premiers progression × nombre mots. Re-diviser après un changement de langue. Mouvement réduit : tout illuminé.
• Inclinaison de carte – rotateX/rotateY jusqu'à ±11° depuis la position du pointeur sur le stage ; revient à plat en quittant.
• Sortie du téléphone / éventail de cartes / cadran – chacun lit une valeur de progression de défilement (0→1) et écrit une variable CSS (--p, --fan, --rot). Mouvement réduit : état final.
• États de pression – chaque élément de relief cliquable échange son ombre extérieure pour la paire intérieure sur :active ou aria-pressed="true" et se met à l'échelle à .985.
• Texte projecteur – un paragraphe dupliqué aria-hidden en blanc pur masqué avec un dégradé radial à --mx/--my.
• Glisser pour rejoindre – bouton capturé par le pointeur ; relâcher après 90% complète, sinon revient en arrière ; les touches fléchées et Entrée fonctionnent ; le bouton a role="slider" avec aria-valuenow. Il ne soumet jamais rien sauf si le client le connecte.
• Changement de thème – bascule data-theme sur <html> ; seuls les jetons changent.

5. Règles de construction

• HTML autonome avec doctype/charset/viewport ; Google Fonts uniquement ; aucune image requise (tout le relief est en CSS, le QR est un motif de canvas décoratif, marqué comme échantillon).
• Définir les deux matériaux comme ensembles de jetons. L'ensemble de la page repose sur :root ; l'ensemble opposé sur .alt (inversé sous [data-theme="light"]). Reconstruire --raise --raise-sm --inset --inset-sm sur :root, .alt pour que chaque îlot utilise sa propre paire ; déclarer --island / --island-sm sur :root uniquement pour que les îlots héritent de la paire de la page pour leur ombre extérieure. Les composants n'écrivent jamais d'ombre à la main.
• Tout ce qui lit les couleurs en JavaScript (le canvas QR) doit les lire depuis son propre élément, pas depuis :root.
• Chaque élément qui projette une ombre repose sur background: var(--bg). Les conteneurs avec débordement (rails) nécessitent environ 30px de padding pour que les ombres ne soient pas coupées.
• Accessibilité : contraste du texte ≥ 4.5:1 quel que soit le relief ; anneau de focus lime visible ; l'état enfoncé est également exposé avec aria-pressed ; le relief décoratif est aria-hidden.
• prefers-reduced-motion : pas de suivi lumineux, pas d'inclinaison, pas de flottement, toutes les pièces de défilement dans leur état final, projecteur éteint.
• Mobile (< 900px) : grilles empilées, badge caché ; (< 640px) la pillule d'en-tête se cache, les pièces passent à 2 colonnes.

6. Rédaction des textes

• Titres en minuscules, courts et déclaratifs, deux lignes maximum : "construit pour les gens qui paient à l'heure".
• Les sourcils sont des phrases complètes en majuscules avec un point : "L'ADHÉSION SE MÉRITE."
• Texte du corps simple et concret. Pas d'emphase, pas de chiffres inventés ; marquer les échantillons en place.
• Traduire chaque chaîne, y compris celles écrites en JavaScript (pièces, résultat du curseur, étiquettes de thème).

7. Liste de vérification finale

• Deux matériaux, à peu près équilibrés sur chaque écran ; pas de bordures ; chaque ombre provient des jetons.
• Pas de halo blanc autour des îlots clairs sur la page sombre (l'ombre extérieure utilise --island).
• Déplacer la souris tourne chaque ombre sur la page ; le toucher et le mouvement réduit obtiennent une lumière fixe.
• Tout texte lisible passe le contraste dans les deux thèmes ; la gravure uniquement sur la décoration.
• Les ombres du rail ne sont pas coupées ; rien ne défile horizontalement à 390px.
• Les avis, nombres de membres, taux et affirmations de sécurité sont réels ou étiquetés ; pas de logos ou rendus tiers.
• Le changement de langue ne laisse aucun texte dans la langue source.
• Captures d'écran à 1440×900 et 390×844 (node scripts/screenshots.mjs example/index.html screenshots ; le script déplace une souris virtuelle pour que la direction de la lumière s'affiche, et capture les deux thèmes).