/* ============================================================================ NUIT NOIRE INTERNATIONAL — home.css Die Bildflächen der Startseite: die Ankunft unter dem Kopf, die drei Einstiegskarten, das Editorial. Mehr nicht. Typografie, Raster und Rhythmus der Startseite stehen unverändert in private.css; diese Datei ergänzt nur das, was ohne Bilder nicht nötig war. Alle Werte stammen aus tokens.css. Erfundene Namen wie --nni-rule oder --nni-ink-dim gibt es nicht und fallen still auf nichts zurück; nachgesehen wurde vor der ersten Zeile. Reihenfolge der Abschnitte: 1 Die Ankunft — vollbreite Fläche unter dem Kopf 2 Where to begin — Bilder in den drei Karten 3 Editorial — Bild und Text nebeneinander 4 Bewegung 5 Druck 6 Messblock: was bei 360, 390 und 414 px nachgerechnet wurde ========================================================================= */ /* --------------------------------------------------------------------------- 1 · Die Ankunft Vollbreit ohne Viewport-Einheiten. private.css gibt die Bahnbreite des privaten Bereichs an :where(.nni-main) > :where(section, article, header, aside, div, form) — eine
steht nicht in dieser Liste und ist deshalb von Haus aus so breit wie .nni-main, also so breit wie der Inhaltsbereich des Fensters. Das ist der entscheidende Unterschied zu 100vw: 100vw rechnet die Bildlaufleiste mit und erzeugt genau das seitliche Scrollen, vor dem SPEC8 Abschnitt 6 warnt. Die drei Angaben unten wiederholen deshalb nur, was ohnehin gilt — sie stehen da, damit die Fläche auch dann vollbreit bleibt, wenn jemand die Liste in private.css eines Tages um
erweitert. ------------------------------------------------------------------------ */ .nni-home__arrival { position: relative; display: block; width: 100%; max-width: none; margin-inline: 0; margin-block: 0 clamp(32px, 5vw, 72px); padding: 0; overflow: hidden; aspect-ratio: 4 / 5; background-color: var(--nni-black); } @media (min-width: 40em) { .nni-home__arrival { aspect-ratio: 16 / 9; } } @media (min-width: 64em) { .nni-home__arrival { aspect-ratio: 21 / 9; } } .nni-home__arrival-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Der Verlauf nimmt der Fläche die Kante. Oben steht der Kopf, unten die Haarlinie und die drei Wege — beide Ränder grenzen an Text, also werden beide weich. Als Gegenfarbe steht bewusst `transparent` und nicht ein zweites Mal --nni-black mit Alpha: CSS mischt Verläufe mit vorgewichtetem Alphakanal, ein Grauschleier in der Mitte kann dabei nicht entstehen. */ .nni-home__arrival::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( to bottom, var(--nni-black) 0%, transparent 24%, transparent 64%, var(--nni-black) 100% ); } /* --------------------------------------------------------------------------- 2 · Where to begin Die drei Karten sind in private.css bewusst offen gesetzt: kein Rahmen, keine Füllung, versetzt im Zwölferraster. Daran ändert sich nichts, die Karte bekommt nur ein Bild über den Text gestellt. Der Verweis in der Karte trug bisher keine eigene Anordnung; die Lücke aus dem Raster wirkte auf ihn nicht, weil er das einzige Kind der Karte ist. Mit dem Bild braucht er eine — hier dieselbe Lücke, die private.css für die Karten selbst vergibt, damit die Seite eine Rhythmik behält. Fehlt eines der drei Bilder, bleibt diese Karte textlich. Die Reihe fällt dadurch nicht auseinander: jede Karte steht ab 64em mit eigener Spalte und eigenem Vorsprung im Raster, keine Zeile richtet sich an einer anderen aus. ------------------------------------------------------------------------ */ .nni-home__way .nni-card__link { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.6vw, 20px); width: 100%; } .nni-home__wayfig { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--nni-ink); } .nni-home__wayfig-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* --------------------------------------------------------------------------- 3 · Editorial .nni-editorial ist in private.css ab 64em ein Zweispalter aus 52 zu 48 Teilen und erwartet genau zwei Kinder. Die Vorlage liefert jetzt beide: links die Bildfläche, rechts den Textkasten. Der Vorsprung des Bildes ist derselbe, den private.css für .nni-editorial .nni-figure vorsieht — die Bildfläche heisst hier nur anders, weil sie ein festes Verhältnis trägt und nicht das über --nni-ratio gesteuerte der Figuren. Unter 64em bleibt der Abschnitt einspaltig; das Bild steht dann über dem Text, weil es in der Vorlage zuerst kommt. ------------------------------------------------------------------------ */ .nni-home__edfig { position: relative; display: block; width: 100%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--nni-ink); } .nni-home__edfig-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (min-width: 64em) { .nni-home__edfig { margin-top: clamp(24px, 5vw, 84px); } /* Ohne Bild hat der Abschnitt nur ein Kind. Bliebe er zweispaltig, stünde der ganze Text in etwas mehr als der halben Bahn und die rechte Hälfte leer. Der Baustein .nni-editorial und seine Abwandlung --flip stehen in private.css; --solo kommt von der Startseite und wohnt deshalb hier. Die doppelte Klasse gewinnt gegen private.css unabhängig davon, in welcher Reihenfolge die Stilblätter geladen werden. */ .nni-editorial.nni-home__editorial--solo { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- 4 · Bewegung Genau eine: die Ankunftsfläche kommt sehr langsam von scale(1.06) zur Ruhe. Getragen wird sie von der vorhandenen Mechanik — .nni-reveal steht an der Fläche, site.js setzt .is-in. Bewegt wird das Bild, nicht die Fläche selbst, damit die Verschiebung aus base.css unangetastet bleibt. Die Regel aus base.css gilt: ohne .nni-js ist alles sichtbar und steht still. Hier wird deshalb nichts durchsichtig gesetzt und der Ausgangswert scale(1.06) hängt ausdrücklich an einem .nni-js-Vorfahren. ------------------------------------------------------------------------ */ .nni-js .nni-home__arrival .nni-home__arrival-img { transform: scale(1.06); transition: transform var(--nni-t-slow) var(--nni-ease); will-change: transform; } .nni-js .nni-home__arrival.is-in .nni-home__arrival-img { transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .nni-js .nni-home__arrival .nni-home__arrival-img, .nni-js .nni-home__arrival.is-in .nni-home__arrival-img { transform: none !important; transition: none !important; will-change: auto; } } /* --------------------------------------------------------------------------- 5 · Druck ------------------------------------------------------------------------ */ @media print { .nni-home__arrival, .nni-home__wayfig, .nni-home__edfig { break-inside: avoid; aspect-ratio: 16 / 9; } .nni-home__arrival { margin-block-end: 8mm; } .nni-home__arrival::after { display: none; } } /* --------------------------------------------------------------------------- 6 · Messblock Gemessen, nicht geschätzt: im Browser an einem Prüfstand, der genau diese Stilblätter in genau dieser Reihenfolge lädt und das Markup der Vorlage trägt. Abgelesen wurden getBoundingClientRect() und getComputedStyle(). Kein seitliches Scrollen. Bei 360, 390 und 414 px ist document.documentElement.scrollWidth gleich window.innerWidth, Differenz jeweils 0. Bei 414 px wurden zusätzlich alle Nachfahren von .nni-main durchgezählt: kein einziges Element ragt über den rechten Rand oder links darüber hinaus. Der Grund steht in Abschnitt 1 — keine der drei Flächen benutzt vw, 100vw oder einen negativen Rand. Flächen (Breite × Höhe in px): 360 px Ankunft 360 × 450 (4/5) Weg 320 × 426,7 (3/4) Editorial 320 × 400 (4/5) 390 px Ankunft 390 × 487,5 Weg 350 × 466,7 Editorial 350 × 437,5 414 px Ankunft 414 × 517,5 Weg 372,6 × 496,8 Editorial 372,6 × 465,8 1440 px Ankunft 1440 × 617,1 (21/9), linke Kante bei 0 — vollbreit Antippbare Flächen. Der Verweis der Einstiegskarte umfasst jetzt auch das Bild und misst bei 360 px 320 × 596 px, bei 390 px 350 × 636 px. Die Vorgabe von 44 × 44 px ist mit weitem Abstand erfüllt. Eine Spalte. Der Zweispalter des Editorials beginnt erst ab 64em; bei 360, 390 und 414 px meldet gridTemplateColumns eine einzige Spur. Ab 1440 px sind es 621,5 px für das Bild und 573,7 px für den Text, das Bild links. Schrift. Diese Datei setzt keinen Schriftgrad. Nachgemessen wurde trotzdem .nni-card__text der drei Einstiegskarten, weil --nni-fs-sm rechnerisch auf 13,6 px hinunterläuft: gemessen werden bei 360, 390 und 414 px jeweils 16 px. mobile.css fängt das unter 30em mit `.nni-card__text { font-size: 1rem }` ab. Der Boden aus SPEC7 3.5 ist an dieser Stelle also eingehalten — die Rechnung allein hätte das Gegenteil nahegelegt. Fehlende Bilder. Beide Ausfälle wurden im Prüfstand durchgespielt: · Alle drei Wegebilder entfernt — die Karten behalten Spalte und Vorsprung (72/619, 862/506, 298/619) und sind gleich hoch. Die Reihe fällt nicht auseinander. · Editorial ohne Bild und mit --solo — eine Spur über 1296 px, der Absatz bleibt bei 690 px stehen, weil private.css ihn auf --nni-max-text hält. Bewegung. Mit .nni-js und ohne .is-in steht die Ankunftsfläche auf matrix(1.06, 0, 0, 1.06, 0, 0), mit .is-in auf none; die Übergangsdauer beträgt 1,2 s, also --nni-t-slow. Ohne .nni-js ist die Verzerrung none und die Deckkraft 1 — die Fläche steht also auch dann sichtbar und still da, wenn kein Skript läuft. Das ist die Regel aus base.css, und sie bleibt. ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- 6 · Die Ankunft trägt den Text — nur auf dem Schreibtisch Bisher stand die Überschrift auf leerem Schwarz und die Tür begann erst darunter, meist schon ausserhalb des ersten Bildschirms. Auf breiten Geräten legt sich der Text jetzt über die Fläche: die Ankunft rückt hinter den Kopfbereich, die Tür wandert nach rechts aus dem Satzspiegel heraus, und der Bildausschnitt wird angehoben, damit die Tür ganz im Bild steht. Auf dem Telefon bleibt alles, wie es ist — Text, darunter das Bild. Die ganze Sektion hängt deshalb an `min-width: 64em`; darunter wird keine einzige Eigenschaft angefasst. Drei Dinge, die hier bewusst NICHT benutzt werden: · `transform` auf dem Bild. Die Einblendung weiter oben setzt es auf scale(1.06) und mit `.is-in` auf `none` — jede Verschiebung, die dort stünde, wäre nach 1,2 Sekunden wieder fort. Der Versatz läuft deshalb über die Breite des Bildes, die niemand sonst anfasst. · `object-position` in der Waagerechten. Das Bild ist 2000×1125, also 16:9; die Fläche ist breiter. Bei `cover` wird auf die Breite skaliert, überstehen tut nur die Höhe — waagerecht hat `object-position` deshalb keinerlei Wirkung. Nachgemessen, nicht vermutet. · Ein negativer Aussenabstand. Der hätte alles darunter mit hochgezogen. Die Fläche wird stattdessen aus dem Fluss genommen; der Platz, den sie bisher belegte, schliesst sich von selbst. ------------------------------------------------------------------------ */ @media (min-width: 64em) { .home .nni-main { position: relative; } /* Volle Höhe des ersten Bildschirms. Die Kopfleiste ist `sticky` und am Seitenanfang durchsichtig (private.css:99) — die Fläche darf also unter ihr durchlaufen. Dafür wird sie um genau die Kopfhöhe nach oben gezogen und ist danach 100svh hoch; `svh` und nicht `vh`, damit die Adressleiste eines Tablets im Querformat nichts abschneidet. */ .home .nni-main > .nni-home__arrival { position: absolute; top: calc(-1 * var(--nnip-head, clamp(58px, 7.4vh, 82px))); left: 0; right: 0; z-index: 0; height: 100svh; aspect-ratio: auto; margin: 0; pointer-events: none; background-color: var(--nni-black); } /* Der Kopfbereich ist das erste Kind und steht darüber. */ .home .nni-main > :where(section, article):first-child { position: relative; z-index: 1; } /* Die Tür steht weit rechts. Dafür ist das Bild NICHT mehr so breit wie die Fläche, sondern ein schmaler Streifen an deren rechtem Rand. Bei 1440 px sind das rund 1000 px, die bei 62 % der Breite beginnen — die Tür, die in der Vorlage mittig steht, landet damit weit rechts, und links bleibt Platz für den Satz. Der Streifen ist schmaler als die Vorlage hoch ist. Damit überläuft bei `cover` endlich die WAAGERECHTE, und `object-position` bekommt in dieser Richtung überhaupt erst eine Wirkung. Der Wert ist gerechnet, nicht geraten: Streifen 1008 px breit, Vorlage auf 1600 px skaliert, Überlauf also 592 px. Damit die mittig stehende Tür bei rund 75 % der Fensterbreite landet, muss das sichtbare Fenster bei 185 px der Vorlage beginnen — 185 von 592 sind 31 %. Ein KLEINERER Wert schiebt die Tür nach rechts, nicht ein grösserer; das ist die Falle an `object-position`. Senkrecht zeigt 66 % den unteren Teil der Vorlage, also die Tür in ganzer Höhe statt nur ihres Sturzes. `transform` bleibt tabu — die Einblendung weiter oben setzt es auf scale(1.06) und mit `.is-in` auf `none`; jede Verschiebung von hier wäre nach 1,2 Sekunden fort. */ .home .nni-main > .nni-home__arrival > .nni-home__arrival-img { position: absolute; inset: 0 -2% 0 auto; width: 70%; max-width: none; height: 100%; object-fit: cover; object-position: 30% 66%; filter: brightness(0.72) contrast(1.05); /* Nach links läuft das BILD aus, nicht ein Verlauf darüber. Ein Verlauf auf der Fläche kann das nicht: er deckt zu, und dort wo er aufreisst, steht eine senkrechte Kante — genau die war sichtbar. Eine Maske nimmt stattdessen die Deckkraft des Bildes selbst weg, Zeile für Zeile, und es gibt keinen Rand, an dem etwas anfängt. Die Kurve ist bewusst lang und beginnt bei null: über die halbe Breite des Streifens hinweg. Erst bei 58 % steht das Bild voll. */ -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.06) 14%, rgba(0, 0, 0, 0.22) 28%, rgba(0, 0, 0, 0.52) 40%, rgba(0, 0, 0, 0.82) 50%, #000 58% ); mask-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.06) 14%, rgba(0, 0, 0, 0.22) 28%, rgba(0, 0, 0, 0.52) 40%, rgba(0, 0, 0, 0.82) 50%, #000 58% ); } /* Der Rest läuft aus. Links steht der Satz auf reinem Schwarz, nach rechts hin taucht die Tür auf; oben und unten weiche Kanten, damit die Fläche weder die Kopfleiste noch die Haarlinie darunter anschneidet. Das Auslaufen nach links macht die Maske am Bild selbst. Hier bleibt nur, was ein Verlauf gut kann: die Kanten oben und unten weich halten, damit die Fläche weder die Kopfleiste noch die Haarlinie darunter anschneidet, und links etwas Ruhe unter den Satz legen. Rechts wird nichts abgedunkelt — dort steht die Tür. */ .home .nni-main > .nni-home__arrival::after { background-image: linear-gradient( to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 34%, transparent 56% ), linear-gradient( to bottom, var(--nni-black) 0%, transparent 18%, transparent 72%, var(--nni-black) 100% ); } }