/* ============================================================================ COFFEE FESTIVAL EUROPE — Satz und Bewegung der Story-Texte ---------------------------------------------------------------------------- Zwei Dinge stehen hier, und nur diese zwei: 1 · Der Satz wird kleiner. Der Titel stand bei 6vw — auf einem 1440 Punkte breiten Fenster sind das 86 Punkte, und ein Satz wie „DIE PFLANZE TRAEGT DIE GANZE GESCHICHTE." fuellte damit vier Zeilen und die halbe Hoehe. Das Bild dahinter ist die Seite; der Text ist die Bildunterschrift. Jetzt 4,1vw (59 Punkte), engere Zeilen, schmalere Spalte. 2 · Die Texte haengen am Scrollbalken statt still zu stehen. `--k` ist der Fortschritt des Kapitels (0 bis 1), gesetzt von story-motion.js. Alles hier rechnet daraus: --auf 0 bis 1 ueber das erste Fuenftel (Ankommen) --ab 0 bis 1 ueber das letzte Viertel (Weggehen) --da was davon uebrig bleibt (Dasein) Bewegt wird nur mit transform und opacity — dieselbe Regel wie im Rest des Auftritts: kein filter, kein clip-path in einer Schleife. Bei „reduzierte Bewegung" steht alles still und vollstaendig da; die Klasse `st-ruhig` am schaltet jede Verschiebung ab. ========================================================================= */ /* ---------- 1 · Satz ------------------------------------------------------ */ .scroll-scrub__copy{width:min(34rem,42vw)} .scroll-scrub__title{ font-size:clamp(2rem,4.1vw,4.4rem); line-height:.98; letter-spacing:-.035em; max-width:17ch} .scroll-scrub__kicker{ font-size:.72rem;letter-spacing:.16em;margin:0 0 .8rem; display:flex;align-items:center;gap:.7rem} /* Ein Strich vor der Vorzeile, der sich mit dem Kapitel aufzieht. */ .scroll-scrub__kicker::before{ content:'';flex:none;height:1px;width:clamp(18px,2.4vw,34px); background:currentColor;transform-origin:left center; transform:scaleX(var(--auf,1))} .scroll-scrub__body{ font-size:clamp(.95rem,1.02vw,1.08rem);line-height:1.5; margin:1.1rem 0 0;max-width:44ch} .scroll-scrub__tags{margin:1.15rem 0 0;gap:.4rem} .scroll-scrub__tags li{font-size:.72rem;padding:.34rem .6rem;border-radius:99px} @media (max-width:860px){ .scroll-scrub__copy{width:min(100%,30rem)} .scroll-scrub__title{font-size:clamp(1.9rem,8.2vw,3.2rem);max-width:15ch} .scroll-scrub__body{font-size:1rem;max-width:38ch} } /* ---------- 2 · Bewegung -------------------------------------------------- */ .scroll-scrub__chapter{ --k:0; /* Ankommen ueber die ersten 18 Prozent, Weggehen ueber die letzten 22. */ --auf:clamp(0,calc(var(--k) / .18),1); --ab:clamp(0,calc((var(--k) - .78) / .22),1); --da:calc(var(--auf) * (1 - var(--ab)))} .scroll-scrub__copy{ opacity:var(--da,1); transform:translate3d(0,calc((1 - var(--auf,1)) * 26px - var(--ab,0) * 34px),0); will-change:transform,opacity} /* Die Woerter des Titels kommen versetzt an — jedes eine Spur spaeter als das vorige, hoechstens sechs Stufen, damit ein langer Titel nicht auseinanderfaellt. */ .st-w{ display:inline-block; --v:clamp(0,calc((var(--auf,1) - var(--i,0) * .055) / .5),1); opacity:var(--v); transform:translate3d(0,calc((1 - var(--v)) * .5em),0) rotate(calc((1 - var(--v)) * -1.2deg)); transform-origin:left bottom} .scroll-scrub__body{ opacity:calc(var(--da,1) * .92 + .08); transform:translate3d(0,calc((1 - var(--auf,1)) * 14px),0)} .scroll-scrub__tags li{ --v:clamp(0,calc((var(--auf,1) - .35) / .45),1); opacity:var(--v); transform:translate3d(0,calc((1 - var(--v)) * 10px),0) scale(calc(.94 + var(--v) * .06))} .scroll-scrub__tags li:nth-child(2){--v:clamp(0,calc((var(--auf,1) - .45) / .45),1)} .scroll-scrub__tags li:nth-child(3){--v:clamp(0,calc((var(--auf,1) - .55) / .45),1)} /* Der Schleier hinter dem Satz atmet mit: dicht, solange der Text steht, und weg, sobald er geht. Sonst bleibt ein dunkler Fleck ueber dem Bild. */ .scroll-scrub__copy::before{opacity:calc(.35 + var(--da,1) * .65)} /* ---------- 3 · Ruhe ------------------------------------------------------ */ .st-ruhig .scroll-scrub__copy, .st-ruhig .st-w, .st-ruhig .scroll-scrub__body, .st-ruhig .scroll-scrub__tags li{opacity:1;transform:none} .st-ruhig .scroll-scrub__kicker::before{transform:none} @media (prefers-reduced-motion:reduce){ .scroll-scrub__copy,.st-w,.scroll-scrub__body,.scroll-scrub__tags li{ opacity:1;transform:none} .scroll-scrub__kicker::before{transform:none} } /* ══ LESBARKEIT UEBER DEM BILD ═════════════════════════════════════════════ Gemessen im Bild: die Vorzeile stand als dunkles Ember auf der hellen Stelle des Sonnenaufgangs, und der Fliesstext lief ueber den Hirten. Der mitgelieferte Schleier ist ein weicher Kreis um den Satz — auf einem ruhigen Bild genug, auf einem hellen nicht. Deshalb dasselbe Mittel wie im Hero der Website: der Schleier bekommt eine FORM statt einer Staerke. Er steht als Spalte auf der Seite, auf der der Text steht, ist dort dicht und hoert zur Bildmitte hin auf. Das Bild bleibt frei, der Text steht auf Grund. */ .scroll-scrub__copy::before{ inset:-2.6rem -3rem -2.6rem -6rem; background: linear-gradient(90deg, color-mix(in srgb, var(--ss-bg) 92%, transparent) 0%, color-mix(in srgb, var(--ss-bg) 80%, transparent) 46%, color-mix(in srgb, var(--ss-bg) 40%, transparent) 78%, transparent 100%), radial-gradient(120% 130% at 30% 50%, color-mix(in srgb, var(--ss-bg) 62%, transparent) 0%, transparent 70%)} .scroll-scrub__chapter[data-align="right"] .scroll-scrub__copy::before{ inset:-2.6rem -6rem -2.6rem -3rem; background: linear-gradient(270deg, color-mix(in srgb, var(--ss-bg) 92%, transparent) 0%, color-mix(in srgb, var(--ss-bg) 80%, transparent) 46%, color-mix(in srgb, var(--ss-bg) 40%, transparent) 78%, transparent 100%), radial-gradient(120% 130% at 70% 50%, color-mix(in srgb, var(--ss-bg) 62%, transparent) 0%, transparent 70%)} @media (max-width:860px){ /* Auf dem Telefon steht der Satz unten — dort ist die Spalte eine Bank. */ .scroll-scrub__copy::before, .scroll-scrub__chapter[data-align="right"] .scroll-scrub__copy::before{ inset:-2.2rem -2rem -3rem -2rem; background:linear-gradient(to top, var(--ss-bg) 0%, color-mix(in srgb, var(--ss-bg) 88%, transparent) 52%, color-mix(in srgb, var(--ss-bg) 30%, transparent) 84%, transparent 100%)} } /* Die Vorzeile war das dunkelste Element auf der hellsten Stelle. Sie traegt jetzt den helleren Ember des Auftritts und einen Schatten, der sie auch dann traegt, wenn hinter ihr der Sonnenaufgang steht. */ .scroll-scrub__kicker{ color:#F0A277; text-shadow:0 1px 10px rgba(8,8,8,.85),0 0 2px rgba(8,8,8,.9)} .scroll-scrub__title{text-shadow:0 2px 18px rgba(8,8,8,.55)} .scroll-scrub__body{text-shadow:0 1px 10px rgba(8,8,8,.7)} .scroll-scrub__tags li{ background:color-mix(in srgb, var(--ss-bg) 55%, transparent); border-color:color-mix(in srgb, var(--ss-ink) 32%, transparent); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}