/* ============================================================================ NUIT NOIRE INTERNATIONAL — profile-terms.css Die langen Listen der Profilseite: „Repertoire" und „Toys & treasures" (SPEC11, Abschnitt 3). Ersetzt die frühere Kachelwand aus wiederholten Präfixen (parts/profile-terms.php gruppiert; diese Datei stellt dar). Muss NACH profile-page.css geladen werden — dort steht die allgemeine Regel „.nni-psec__body :where(p, li, dd, blockquote) { max-width: … }", die ohne Zutun auch auf
  • in dieser Datei griffe. Beide Regeln wiegen eine Klasse und sind damit gleich stark; es entscheidet die Ladereihenfolge (siehe Kommentar zu .nni-pnav in profile-page.css — dieselbe Technik). Farben, Masse und Zeiten kommen ausnahmslos aus tokens.css. Die wenigen lokalen Werte tragen das Präfix --nnipt- (profile terms) und stehen auf dem Wurzelelement .nni-terms, nach demselben Muster wie --nnipf- in profile.css und --nnis- in salon.css. Achtung ch-Falle (siehe tokens.css, Kommentar zu --nni-max-text): die Einträge stehen in Cormorant Garamond, deren Null schmal ist. Breiten werden deshalb nie in eigenen ch-Werten gesetzt, sondern über das dafür bereits kalibrierte --nni-max-text. Abschnitte: 0 Rahmen und lokale Masse .nni-terms 1 Gruppenkopf .nni-terms__label 2 Satzform (bis 6) .nni-terms__sentence 3 Listenform (7+, Spalten) .nni-terms__list 4 Aufklapper .nni-terms__more 5 Leerzustand .nni-terms__empty 6 Telefon 7 Drucken EINE REGEL, DIE NICHT GEBROCHEN WIRD: Inhalt ist ohne JavaScript sichtbar. Einzige Ausnahme ist
    selbst — das ist der native Mechanismus, den SPEC11 ausdrücklich verlangt, keine .nni-js-Verstecktechnik. ========================================================================= */ /* --------------------------------------------------------------------------- 0 · Rahmen und lokale Masse ------------------------------------------------------------------------ */ .nni-terms { /* SPEC11 verlangt Fliesstext ab 16px — nicht mehr. Der frühere Bezug auf --nni-fs-md (endet bei 19,2px) trug bei vielen sichtbaren Zeilen (eine Gruppe mit 39 Einträgen zeigt allein zwölf) spürbar zur Gesamthöhe der Sektion bei; --nni-fs-base (endet bei 16,8px) erfüllt denselben Boden und spart rund 3px je Zeile, ohne die Lesbarkeit zu schmälern. */ --nnipt-fs-label: max(12px, var(--nni-fs-xs)); --nnipt-fs-entry: max(16px, var(--nni-fs-base)); --nnipt-line: var(--nni-hair) solid var(--nni-line-soft); --nnipt-line-strong: var(--nni-hair) solid var(--nni-line); display: flex; flex-direction: column; /* --nni-sp-7 (bis zu 66px) war für zehn Gruppenübergänge gedacht, nicht gemessen worden: neun Zwischenräume kosteten am Schreibtisch allein 530px. clamp(12px, 1.3vw, 18px) hält die Gruppen weiterhin sichtbar getrennt — echte Luft, spürbar mehr als der Zeilenabstand innerhalb einer Gruppe (clamp(8px, .9vw, 10px) auf .nni-terms__group), also weiterhin klar als GRUPPENgrenze lesbar, keine Kachel —, aber ohne bei zehn Gruppen allein für die Zwischenräume ein Viertel des Höhenbudgets zu binden. */ gap: clamp(12px, 1.3vw, 18px); width: 100%; min-width: 0; } .nni-terms__group { display: flex; flex-direction: column; align-items: flex-start; /* War clamp(12px, 1.6vw, 18px) — läuft in jeder Gruppe zweimal (Kopf zu Liste, Liste zu Aufklapper), bei zehn Gruppen bis zu vierzehnmal. Enger gesetzt, aber weiterhin klar grösser als der Nullabstand: die Haarlinie der Liste bleibt die eigentliche Trennung, dieser Abstand ist nur Luft zum Atmen. */ gap: clamp(8px, .9vw, 10px); width: 100%; min-width: 0; } /* * Die Grenzen der Dame. profile-terms.php stellt diese Gruppe ans Ende der * Karte; hier bekommt sie den Abstand dazu. Eine Haarlinie und etwas Luft, * mehr nicht — der Satz soll gelesen werden, nicht angerufen. Ist sie die * einzige Gruppe, steht keine Linie über ihr. */ .nni-terms__group--limits:not(:first-child) { margin-top: clamp(10px, 1.2vw, 16px); padding-top: clamp(14px, 1.7vw, 24px); border-top: var(--nnipt-line-strong); } /* --------------------------------------------------------------------------- 1 · Gruppenkopf Bewusst kompakt und NICHT auf volle Breite gestreckt: bei den mehrspaltigen Gruppen wäre die Zahl sonst weit vom eigenen Namen weggerissen, an den rechten Rand der ganzen Bahn gepinnt. „Rechts die Anzahl" heisst hier: der letzte Teil der kurzen Kopfzeile, nicht der rechte Rand der Seite. Die Kleinschrift ist dieselbe gesperrte Sperrschrift wie überall im Haus (vgl. .nni-vitals__label, .nni-menu__cat in profile-page.css) — Sans, Versalien, feine Sperrung, --nni-muted. Die Zahl daneben ist ausdrücklich NICHT gesperrt und trägt --nni-faint, wie von SPEC11 verlangt. ------------------------------------------------------------------------ */ .nni-terms__label { display: inline-flex; align-items: baseline; gap: .6em; margin: 0; max-width: 100%; min-width: 0; font-family: var(--nni-sans); font-weight: 300; font-size: var(--nnipt-fs-label); /* War 1.5 — bei zehn Kopfzeilen in einer einzigen, gesperrten Zeile ohne Rücksprung trägt so viel Zeilenhöhe nichts zur Lesbarkeit bei, nur zur Gesamthöhe der Sektion. */ line-height: 1.2; /* War --nni-muted — Zeichen für Zeichen dieselbe Schreibweise wie der Aufklapper darunter (.nni-terms__toggle), obwohl das eine eine Überschrift ist und das andere ein Bedienelement. --nni-cream-soft hebt den Gruppentitel eine Stufe heller ab. */ color: var(--nni-cream-soft); } .nni-terms__label-text { min-width: 0; text-transform: uppercase; letter-spacing: var(--nni-ls-fine); /* Der Nachlauf der Sperrung stünde sonst als Lücke vor der Zahl. */ margin-inline-end: calc(-1 * var(--nni-ls-fine)); overflow-wrap: break-word; } .nni-terms__count { flex: none; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--nni-faint); } /* --------------------------------------------------------------------------- 2 · Satzform — bis 6 Einträge Läuft wie ein Fliesstext, nicht wie eine Liste: die Mittelpunkte trennen, der Zeilenumbruch fällt, wo er will. Dieselbe Bauart wie .nni-places in single-nni_journey.php (Wort, Trenner, Wort…), hier in Serife und in Lesegrösse statt als kleine Überzeile, weil hier echter Inhalt steht und keine Ortsangabe. ------------------------------------------------------------------------ */ .nni-terms__sentence { margin: 0; /* Bewusst OHNE Deckel: --nni-max-text ist für Prosa kalibriert, die von der ersten bis zur letzten Zeile gelesen wird (siehe tokens.css). Diese Zeile ist keine Prosa, sondern eine überflogene Liste in Satzform — bei ein bis zwei sehr langen Einträgen (Lingerie, Corsets, High heels & boots) brach sie auf --nni-max-text sonst auf zwei bis drei Zeilen um und trug allein dadurch spürbar zur Gesamthöhe der Sektion bei. Die Bahn selbst deckelt die Breite bereits (profile-page.css, Abschnitt 1). */ max-width: none; min-width: 0; font-family: var(--nni-serif); font-weight: 300; font-size: var(--nnipt-fs-entry); line-height: var(--nni-lh-snug); letter-spacing: -.004em; color: var(--nni-cream); overflow-wrap: break-word; text-wrap: pretty; } .nni-terms__sep { display: inline-block; margin-inline: .5em; color: var(--nni-faint); } /* --------------------------------------------------------------------------- 3 · Listenform — 7 bis 14 Einträge, ab 15 mehrspaltig Eine Spalte ist die Voreinstellung; --cols schaltet ab 48em auf zwei, ab 64em auf drei Spalten. Jede Zeile trägt oben UND unten eine Haarlinie (border-top am Rahmen, border-bottom an jeder Zeile) — dieselbe Bauart wie .nni-vitals in profile-page.css, nur ohne die zweite Spalte für einen Wert: hier ist die ganze Zeile der Wert. ------------------------------------------------------------------------ */ .nni-terms__list { margin: 0; padding: 0; list-style: none; width: 100%; max-width: var(--nni-max-text); min-width: 0; border-top: var(--nnipt-line-strong); } .nni-terms__row { margin: 0; max-width: none; min-width: 0; /* War clamp(10px, 1.3vw, 14px) — bei 24 sichtbaren Zeilen (vier aufklappbare Gruppen à sechs) allein 336px Innenabstand. Die Zeile bleibt mit 10-14px Gesamthöhe klar antippbar, ohne die Sektion zu einer zweiten Seite aufzublähen. */ padding-block: clamp(5px, .7vw, 7px); border-bottom: var(--nnipt-line-strong); font-family: var(--nni-serif); font-weight: 300; font-size: var(--nnipt-fs-entry); line-height: var(--nni-lh-snug); letter-spacing: -.004em; color: var(--nni-cream); overflow-wrap: break-word; text-wrap: pretty; break-inside: avoid; -webkit-column-break-inside: avoid; } /* Zwischen sichtbarer Liste und der aufgeklappten Fortsetzung reicht die eigene obere Haarlinie der Fortsetzung als Trennung — kein zweiter Rahmen. */ .nni-terms__list--tail { margin-block-start: clamp(2px, .6vw, 6px); } @media (min-width: 48em) { .nni-terms__list--cols { max-width: none; column-count: 2; column-gap: clamp(28px, 4vw, 56px); } } @media (min-width: 64em) { .nni-terms__list--cols { column-count: 3; } } /* --------------------------------------------------------------------------- 4 · Aufklapper —
    /, ab acht Einträgen Nativ bedienbar ohne jede Zeile JavaScript. Der Text wechselt rein über CSS anhand des reflektierten [open]-Attributs; profile.js macht daraus später nur ein weiches Auf- und Zuschieben (siehe assets/js/profile.js). Die Fläche ist mindestens 44px hoch — auf dem Telefon der wichtigste Griff der Seite (SPEC11, Abschnitt 6). ------------------------------------------------------------------------ */ .nni-terms__more { width: 100%; min-width: 0; margin: 0; } .nni-terms__toggle { display: inline-flex; align-items: center; gap: .65em; /* 44px ist der Boden aus SPEC11 Abschnitt 6 (antippbare Fläche) — er bleibt unangetastet. margin-block-start und padding-block sind enger als vorher: die Haarlinie der letzten Zeile darüber trennt bereits sichtbar, ein grosser zusätzlicher Abstand ist hier nicht nötig. */ min-height: 44px; margin-block-start: 4px; padding-block: .35em; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: var(--nni-sans); font-weight: 300; font-size: var(--nnipt-fs-label); line-height: 1.5; text-transform: uppercase; /* War --nni-ls-fine/--nni-muted — exakt die Werte von .nni-terms__label darüber. Eigene Sperrung und eigener, leiserer Ton halten das Bedienelement von der Gruppenüberschrift getrennt, wie .nni-more__toggle es gegenüber .nni-psec__title bereits tut (profile-page.css). */ letter-spacing: var(--nni-ls-ui); margin-inline-end: calc(-1 * var(--nni-ls-ui)); color: var(--nni-faint); transition: color var(--nni-t-fast) var(--nni-ease-soft); } .nni-terms__toggle::-webkit-details-marker { display: none; } .nni-terms__toggle::marker { content: ""; } .nni-terms__toggle-close { display: none; } .nni-terms__more[open] > .nni-terms__toggle .nni-terms__toggle-open { display: none; } .nni-terms__more[open] > .nni-terms__toggle .nni-terms__toggle-close { display: inline; } .nni-terms__toggle-icon { flex: none; inline-size: 7px; block-size: 7px; border-right: var(--nni-hair) solid currentColor; border-bottom: var(--nni-hair) solid currentColor; transform: rotate(45deg); transition: transform var(--nni-t-fast) var(--nni-ease); } .nni-terms__more[open] > .nni-terms__toggle .nni-terms__toggle-icon { transform: rotate(-135deg); } @media (hover: hover) { .nni-terms__more:hover > .nni-terms__toggle { color: var(--nni-cream); } } .nni-terms__toggle:focus-visible { color: var(--nni-cream); outline-offset: 4px; } /* --------------------------------------------------------------------------- 5 · Leerzustand Kommt nur zum Zug, wenn die aufrufende Stelle trotz leerer Liste einen Satz übergibt (Argument „empty") — sonst gibt die Vorlage nichts aus. ------------------------------------------------------------------------ */ .nni-terms__empty { margin: 0; max-width: var(--nni-max-text); font-family: var(--nni-sans); font-weight: 300; /* War var(--nni-fs-sm) — auf dem Telefon 13,6px, unter dem in SPEC11 Abschnitt 6 geforderten Boden von 16px für Fliesstext. Dieser Satz ist kein Label, sondern ein vollständiger englischer Satz. Bewusst NICHT --nnipt-fs-entry: dieser Absatz steht ausserhalb von .nni-terms (siehe parts/profile-terms.php, früher Rückgabepfad bei leerer Liste) und hätte dort keinen Zugriff auf die dort deklarierte Custom Property. */ font-size: max(16px, var(--nni-fs-sm)); line-height: var(--nni-lh-snug); color: var(--nni-faint); } /* --------------------------------------------------------------------------- 6 · Telefon Mehrspaltige Raster fallen unter 48em von allein auf eine Spalte (kein column-count gesetzt). Ein eigener, engerer Gruppenabstand ist hier nicht mehr nötig: die Basis in Abschnitt 0 steht auf dem Telefon bereits bei ihrem Boden von 12px — enger als der frühere Wert dieses Abschnitts (36-52px) es war. Eine eigene Regel hier würde die Gruppen auf dem Telefon heute wieder AUSEINANDERZIEHEN statt sie zusammenzuhalten, also bleibt der Abschnitt bewusst leer. ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- 7 · Drucken Der Aufklapper führt auf Papier nirgendwohin — die Fortsetzung wird deshalb erzwungen sichtbar, unabhängig vom Bildschirmzustand. Das gelingt nicht in jeder Engine gleich zuverlässig; profile.js hilft beim Drucken zusätzlich nach (beforeprint öffnet jeden Aufklapper), ist dafür aber nicht Voraussetzung — ohne Skript bleibt diese Regel der einzige, bestmögliche Versuch. ------------------------------------------------------------------------ */ @media print { .nni-terms__toggle { display: none !important; } .nni-terms__more:not([open]) > *:not(summary) { display: block !important; } .nni-terms__label-text, .nni-terms__sentence, .nni-terms__word, .nni-terms__row, .nni-terms__empty { color: #111; } .nni-terms__count { color: #444; } .nni-terms__list, .nni-terms__row { border-color: #ccc; } .nni-terms__list--cols { column-count: 2; } }