smyrna-pergamum/neumorphic-club-fintech

Neumorpher Club-Fintech

Eine Mitglieder-Finanzseite, die aus zwei weichen Materialien geschnitzt ist: einer dunklen Seite und hellen Inseln, die darin eingelassen sind (Karten, Panels, Münzen, das Telefon, FAQ-Leisten). Innerhalb jedes Materials werden Buttons und Wells entweder herausgedrückt oder hineingedrückt, und ein Licht, das dem Cursor folgt, lässt das Relief physisch wirken. Das helle Thema tauscht die beiden Materialien: helle Seite, dunkle Inseln. Der Ton ist ruhig und exklusiv: große, klein geschriebene Serifen-Headlines, wenig Text, viel Luft.

Der Referenz-Build ist example/index.html (Atlasio Reserve, ein fiktiver Kartenclub, EN/TR, dunkles und helles Relief). Detaillierter Code befindet sich in references/components.md; screenshots/ zeigt jeden Abschnitt auf Desktop, Mobil, in beiden Themen und auf Türkisch.

Wenn der Benutzer eine Referenzseite nennt, übernimm nur deren Struktur und Stimmung. Kopiere niemals deren Renderings, Produktnamen, Texte oder Logos.

1. Vor dem Design

1. Sammle das tatsächliche Angebot: Einzeiler-Versprechen, wer qualifiziert ist, 3–5 Produktmerkmale, Belohnungen, Sicherheitserklärung, Bewertungen oder Mitgliederzahlen nur wenn der Kunde sie belegen kann, FAQs, App-Links. Kennzeichne alles andere als Beispiel.
2. Erfinde niemals Sicherheitszertifikate, Zinssätze, Gebühren, Genehmigungsregeln oder Bonitätsauswirkungen. Finanztexte sind reguliert; hinterlasse einen Platzhalter, der angibt, was dort stehen muss.
3. Wähle den einen Live-Status, der die limefarbene LED erhält (Fälligkeitsdatum, Zahlung erhalten, Karte aktiv). Der Akzent erscheint nirgendwo sonst, außer im primären Button-Text und in Fokusringen.

2. Visuelle DNA

Element	Regel
Materialien	Zwei. Seite: dunkel #272a31 (hi #2e3139, lo #212329). Inseln (.alt): hell #e6e9ee (hi #f1f3f6, lo #d7dbe1). Das helle Thema tauscht sie. Innerhalb eines Materials ist jede Oberfläche diese Farbe. Niemals reines Schwarz oder Weiß: Schatten brauchen auf beiden Seiten Platz.
Inseln	Karten, Story- und Join-Panels, Telefon, Rail-Kacheln, Münzen, Zifferblatt, Bewertungskacheln, FAQ-Leisten, Footer-Promo, App-Badge. Header, Hero-Text, Stat-Wells, Überschriften und Footer bleiben auf dem Seitenmaterial. Strebe etwa zur Hälfte hell, zur Hälfte dunkel auf jedem Bildschirm an.
Relief	Erhaben = X Y 24px dunkel, -X -Y 24px hell; gedrückt = dasselbe Paar inset. Dunkles Material rgba(0,0,0,.55) / rgba(255,255,255,.06); helles Material rgba(146,156,172,.75) / rgba(255,255,255,.95). Kleine Varianten mit halbem Versatz. Konvexe Knöpfe und Chips fügen linear-gradient(145deg, hi, lo) hinzu. Der eigene äußere Schatten einer Insel fällt auf die Seite, also verwendet sie das Seitenpaar (--island), niemals ihre eigene weiße Hervorhebung (die würde auf Dunkel wie ein Hof leuchten).
Licht	Die Versätze stammen von --lx/--ly (einem Einheitsvektor). Standardmäßig Licht von oben links (.7071, .7071); JS dreht es zum Cursor.
Text	Jedes Material hat seine eigene Tinte: auf Dunkel #f4f5f7 / #c9cdd5 / #959aa4, auf Hell #191c22 / #3c414c / #5f6571. Text ist nie kontrastarm: Relief ist für Oberflächen, nicht für lesbaren Text.
Akzent	Limefarbene LED #b9f26b auf dunklem Material, #3e8a1d auf hellem Material, mit einem kleinen Leuchten. Funktions-Wells können jeweils eine einzelne gesättigte Leuchte enthalten (pink, violett, grün, blau) mit ca. 38 % Deckkraft.
Display-Schrift	Fraunces 700, opsz 144, letter-spacing:-.035em, klein geschrieben, Zeilenhöhe .92 (Denton ist der kostenpflichtige Original-Look).
Fließtext / UI	Urbanist 400–700 (Gilroy-Look). Augenbrauen 13px 700 GROSSBUCHSTABEN letter-spacing:.32em. Buttons 13px 700 GROSSBUCHSTABEN .18em.
Formen	Pillen für Buttons und Toggles; 20–44px Radien für Panels; Kreise für Icon-Wells, Münzen und Zifferblatt. Keine Rahmen, keine Haarlinien.
Gravur	Gleiche Farbe wie die Oberfläche + text-shadow: 1px 1px 1px hell, -1px -1px 1px dunkel. Nur für Dekoration (Kartennummern, ungelesene Wörter).

3. Abschnittsmuster

1. Header – erhabenes rundes Monogramm + Serifen-Wortmarke; gedrückte Pille mit LED („neu · …“); gedrückte Sprachspur, deren aktives Segment erhaben ist; runder erhabener Theme-Button. Klebrig; erhält nach dem Scrollen einen weichen Schlagschatten.
2. Hero – links: Augenbraue, 2-zeilige klein geschriebene Serifen-Headline, kurzer Lead, ein primärer (limetext) und ein einfacher Pillen-Button, zwei gedrückte Stat-Wells mit der Markierung „Beispiel“. Rechts: konzentrische Reliefringe (erhaben, gedrückt, erhaben) mit einer erhabenen Karte obenauf (konvexer Chip, gravierte Nummer, LED), um -8° geneigt und folgt der Maus.
3. Story – ein großes erhabenes Panel; Augenbraue („MITGLIEDSCHAFT WIRD VERDIENT.“); ein Serifen-Absatz, dessen Wörter graviert beginnen und beim Scrollen nacheinander aufleuchten.
4. App – ein erhabenes Telefon mit einem gedrückten Bildschirm ragt aus einem gedrückten Schlitz heraus; darin eine erhabene Rechnungskarte (LED-Fälligkeitsdatum, Betrag, Bezahl-Button) und zwei Listenzeilen. Zentrierte Serifen-Headline und Lead darunter.
5. Karten – geteilt: Text links; fünf erhabene Kartenplatten, die sich beim Einblenden des Abschnitts aus einem gemeinsamen Drehpunkt fächerförmig öffnen; die vorderste Platte trägt den LED-Status.
6. Zahlungsschiene – Augenbraue + Headline, erhabene runde Zurück-/Weiter-Buttons; horizontale Scroll-Snap-Schiene aus erhabenen Kacheln: gedrücktes Icon-Well + Großbuchstaben-Label, zweizeiliger Titel, kleiner Pillen-Button, ein gedrücktes „Show“-Well mit farbigem Leuchten und einem Relief-Objekt (gepunktetes Telefon, Chip-Gitter, kontaktlose Ringe, geteilte Balken).
7. Belohnungen – zentrierte Headline; 3×2-Raster aus konvexen Münzen, die langsam schweben; drücken senkt eine und zeigt eine Beispielbelohnung.
8. Sicherheit – geteilt: erhabenes Zifferblatt mit 60 Strichen, die sich mit dem Scrollen um einen konvexen Knopf mit einem limefarbenen Schloss drehen; Augenbraue und ein großer serifenloser Absatz, der von einem beweglichen Spotlight beleuchtet wird (folgt dem Zeiger, driftet ansonsten von selbst).
9. Beweise – Headline + zwei erhabene Bewertungskacheln: Serifenzahl, /5, eine gedrückte Spur mit limefarbener Füllung. Als Beispiel gekennzeichnet, wenn nicht echt.
10. Beitreten – erhabenes Panel: Headline („die Tür öffnet sich für einige.“), Lead, eine gedrückte Slide-to-Join-Spur mit einem konvexen Knopf; rechts ein gedrücktes Well mit einer erhabenen QR-Kachel.
11. FAQ – weit gespanntes zentriertes Label; erhabene <details>-Leisten, die beim Öffnen gedrückt werden.
12. Footer – ein gedrücktes Panel mit Logo, zwei Linkspalten und einer erhabenen Promo-Karte; eine Zeile Kleingedrucktes darunter.
13. Schwebendes Badge – erhabene „App holen“-Schaltfläche unten rechts mit kleinem QR; versteckt, während der Beitragsabschnitt sichtbar ist und unter 900px.

4. Signatur-Interaktionen

• Cursorlicht – bei pointermove den Schattenvektor auf normalize(Zentrum − Cursor) setzen und --lx/--ly in requestAnimationFrame dorthin erleichtern. Jeder Schatten wird aus diesen Variablen aufgebaut, sodass die ganze Seite auf einmal neu beleuchtet wird. Nur für (pointer:fine); festes Licht von oben links bei reduzierter Bewegung.
• Gravierte → beleuchtete Wörter – den Absatz in `<span class=