knsoandClaude Opus 5
ecf66c7340
Unter dem großen Zeichen steht jetzt der Claim „Persönlichkeit · Wirkung · Erfolg“ (englisch „Personality · Impact · Success“), rechtsbündig auf dessen Kante, in der Kapitälchen-Zeile der Seite. Das Trennzeichen setzt der Hero, wie im Ledger – im Inhalt stehen nur die drei Wörter. Das Monogramm schrumpft dafür von 45vh auf 40vh, mobil von 14 auf 12svh: so kostet der Claim keine Höhe, das Cover bleibt bei min-h-svh. Der Nackenstrich endet nicht mehr an der Folio-Haarlinie, sondern an der Oberkante des Claims (20 px bei 1440×900, 1 px Luft). Der Ursprung der Haarlinie bleibt derselbe Punkt unter dem V – nachgemessen: --handoff-x 957+151 = 1108, transform-origin der Regel 72+1036 = 1108. Die Vertikale liest sich Nacken → Strich → Claim → Haarlinie. Die H1 heißt „Mit deiner Persönlichkeit entwickelst du deine Wirkung – und deinen Erfolg.“ Sie betont drei Wörter statt einem, weil sie den Claim wiederholt; den Gold-Verlauf trägt weiterhin genau eines. Dafür gibt es Headline.parts, und em-plain nimmt den übrigen das Gold wieder ab (Regel in globals.css, Ausnahme in AGENTS.md notiert). Die Größe ist gemessen, nicht geschätzt. Playfair bei 100 px: „Mit deiner Persönlichkeit“ = 1033 px, „entwickelst du deine Wirkung –“ = 1315 px. max-w-[10.9em] liegt zwischen beiden, damit bricht die Headline auf jeder Schriftgröße in dieselben vier Zeilen – der Umbruch hängt nicht mehr an der Fensterbreite. Der Clamp bleibt zusätzlich von der Fensterhöhe gedeckelt (22vh − 120px), für 800- und 768-px-Laptops. HeadlinePart.tail klammert Wort und Satzzeichen in ein white-space: nowrap. Nötig, weil SplitText die Zeilen selbst neu aufbaut: es normalisiert U+00A0 zu einem gewöhnlichen Leerzeichen und darf an jeder Elementgrenze umbrechen. Ohne die Klammer fing der Gedankenstrich im Englischen eine Zeile an, mit einem Punkt statt des Strichs derselbe Fehler. Ein Margin verschiebt den Umbruch nur, nowrap nimmt ihn weg. 02 Trainings & Workshops nimmt HR auf: „Leadership & HR mit Persönlichkeit – für Führungskräfte und Teams.“ Die Stichworte tragen HR-Teambuilding & Konfliktlösung und Kommunikation & Teamgeist – es geht darum, dass ein Team sich besser kennenlernt und versteht. Bei 1280 px bleiben 76 px Luft zur Link-Spalte. Geprüft bei 390/1024/1180/1440/1600 px in beiden Sprachen: kein Gedankenstrich am Zeilenanfang, kein waagerechter Überlauf, Cover trifft die Fensterhöhe. Kein Build gelaufen – der Dev-Server einer anderen Sitzung hält .next; geprüft ist tsc --noEmit und eslint. Offen und nicht Teil dieses Commits: src/content/coaching.ts sichert seinen Gedankenstrich noch mit U+00A0 ab, was aus demselben Grund nicht wirkt. Dort fällt der Umbruch derzeit zufällig richtig. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
49 lines
2.9 KiB
Markdown
49 lines
2.9 KiB
Markdown
<!-- BEGIN:nextjs-agent-rules -->
|
||
|
||
# This is NOT the Next.js you know
|
||
|
||
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
|
||
|
||
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
|
||
|
||
<!-- END:nextjs-agent-rules -->
|
||
|
||
# Anelia Wolf – Projektregeln
|
||
|
||
Dieser Abschnitt steht bewusst UNTER dem generierten Block oben (`next dev`
|
||
schreibt den Block neu, dieser Teil bleibt).
|
||
|
||
## Harte Regeln
|
||
|
||
- `src/components/brand/WolfMark.tsx` wird **nie** bearbeitet.
|
||
- Kein `localStorage`, kein `sessionStorage`, keine Cookies.
|
||
- Keine externen Requests, Skripte, Schriften oder iframes – die
|
||
Datenschutzerklärung sagt das zu (`src/content/legal.ts`, Ziffer 2/3/6).
|
||
- Radius 0, keine Schatten, kein Fettdruck.
|
||
- Playfair Display (`font-display`) nie unter 28 px. Unter `lg` weicht Text auf
|
||
`font-sans` (Source Sans 3) aus, statt die Display-Schrift zu verkleinern.
|
||
- Betonungswort einer Headline: genau ein `<em>`. Kursiv, und auf `data-theme="dark"`
|
||
zusätzlich golden – das macht eine Regel in `globals.css`, nicht die Komponente.
|
||
Auf hellem Grund bleibt es rein typografisch (Gold-Verlauf auf Elfenbein = 2,4:1).
|
||
Einzige Ausnahme: eine Headline, die eine Aufzählung IST – die Trias der Startseite
|
||
(„Persönlichkeit … Wirkung … Erfolg“), weil sie den Claim unter dem Monogramm
|
||
wiederholt. Dann trägt jedes Wort ein `<em>`, den Gold-Verlauf aber weiterhin nur
|
||
eines; die übrigen bekommen `em-plain` (`Headline.parts[].gold` im Inhalt steuert das).
|
||
- Goldene Schrift nur auf `[data-theme="dark"]`; auf Ivory gilt `--gold-deep`.
|
||
- Sichtbare Copy lebt ausschließlich in `src/content/*.ts`, nie im JSX.
|
||
|
||
## Konventionen
|
||
|
||
- Jeder Top-Level-Block malt seinen eigenen Grund (`data-theme` + Regel in
|
||
`globals.css`); die Naht zwischen zwei Gründen ist die goldene Haarlinie.
|
||
- Scroll-Reveals animieren **nur** `opacity` (+ `y`) – nie `autoAlpha` oder
|
||
`visibility`, sonst fallen Links aus der Tab-Reihenfolge.
|
||
- Alle Animationen laufen über `gsap.matchMedia` mit `MM.reduce`/`MM.ok`;
|
||
GSAP ist die einzige Animations-Runtime im Bundle.
|
||
- Ein Ankersprung nutzt genau einen Offset: `anchorOffset()` in
|
||
`TransitionLink.tsx` bzw. `scroll-margin-top` in `globals.css`.
|
||
- `ScrollTrigger.refresh()` nur über `refreshSoon()` aus `@/lib/gsap`.
|
||
- Jede `<section>` braucht eine Überschrift (notfalls das Eyebrow als `<h2>`).
|
||
- Platzhalter immer über `ph()`; der Build-Guard in `src/lib/legal.ts` stoppt
|
||
den Launch-Flip, solange irgendwo noch ein „[…]“ steht.
|