/* ============================================================================ COFFEE FESTIVAL EUROPE — Der Hero ---------------------------------------------------------------------------- Eigene Datei, weil der Hero der einzige Abschnitt ist, der nur auf einer Seite steht. Sie liegt NACH mobile.css im Kopf: der Hero bringt seine Telefonfassung selbst mit und muss die allgemeinen Regeln ueberschreiben koennen. Der grosse Unterschied zur alten Fassung: der Grund ist hell. Der Film zeigt ein Festival bei Tageslicht, und darauf ist elfenbeinfarbene Schrift nicht lesbar — gemessen kam der Fliesstext auf 1,6 : 1. Also dreht sich der Abschnitt um: dunkle Schrift, ein warmer heller Schleier statt eines dunklen, Glaskarten statt Kaesten. Am
steht dafuer `data-orb="light quiet"`; daran haengen die Kopfleiste (sie kippt auf ihre helle Fassung) und der runde Knopf (er wird zur Kontur). Beides ohne eine einzige neue Regel — die Mechanik gab es schon. Vier Ebenen: 0 .hero__media der Film 1 .hero__scrim der Schleier, der die Schrift traegt 2 .hero__inner Satz, Schaltflaechen, Karten ========================================================================= */ .hero{position:relative;min-height:100svh;height:auto;overflow:clip;isolation:isolate; background:#EDE7DD; --hero-ink:#221A14; /* Satzfarbe auf hellem Grund */ --hero-ink-2:#4A3D33; --glas:rgba(255,255,255,.56); --glas-kante:rgba(255,255,255,.72)} /* ---- 0 · Der Film ------------------------------------------------------- Er bringt Becher, Dampf und Szenenwechsel selbst mit. Deshalb gibt es hier weder eine freigestellte Tasse noch eine zweite Dampfebene: beides waere dasselbe ein zweites Mal, und zwar das schlechtere. */ .hero__media{position:absolute;inset:0;z-index:0;overflow:clip} .hero__stage{position:absolute;inset:0;transform-origin:50% 46%;will-change:transform} .hero__film{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block; background:#EDE7DD} /* ---- 1 · Der Schleier --------------------------------------------------- Drei Laeufe: von links fuer die Satzspalte, von oben fuer die Kopfleiste, von unten fuer die Karten. Warm getoent (nicht weiss), damit das Bild nicht ausgewaschen wirkt. */ /* Dritte Lage, und die wichtigste: ein weicher Fleck genau dort, wo Vorzeile, Titel und Satz stehen. Der Auftrag lautete „Filtereffekt verringern" — das heisst weniger Schleier ueber dem BILD, nicht weniger unter der SCHRIFT. Beides zusammen geht nur, wenn der Schleier eine Form hat statt einer Staerke. Ohne diese Lage kam die Vorzeile auf 2,7 : 1 und der Satz auf 3,7 : 1, gemessen gegen den dunkelsten Teil des Films darunter. */ .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none; /* Eine Spalte statt einer Flaeche. Der ganze Satz steht links; rechts steht der Becher, und dort soll gar nichts liegen. Der Lauf endet bei 64 Prozent der Breite — vorher reichte er bis 74 und war ueberall schwach statt links stark. */ background:linear-gradient(90deg,rgba(247,243,236,.93) 0,rgba(247,243,236,.80) 22%, rgba(247,243,236,.42) 38%,rgba(247,243,236,.10) 52%,rgba(247,243,236,0) 64%)} .hero__scrim::before{content:'';position:absolute;inset:0; background:linear-gradient(103deg,rgba(247,243,236,.34) 0,rgba(247,243,236,.16) 24%, rgba(247,243,236,0) 46%)} .hero__scrim::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(247,243,236,.46) 0,rgba(247,243,236,.14) 15%, rgba(247,243,236,0) 32%,rgba(247,243,236,.14) 76%,rgba(247,243,236,.38) 100%)} /* ---- 3 · Satz und Schaltflaechen ---------------------------------------- */ .hero__inner{position:relative;z-index:2;display:flex;flex-direction:column; min-height:100svh; padding-top:calc(var(--sa-o) + var(--nav-h) + clamp(6px,1.4vh,18px)); padding-bottom:calc(var(--sa-u) + clamp(12px,1.4vh,20px)); color:var(--hero-ink)} /* Die Vorzeile steht ganz oben, und dort wechselt der Film zwischen hellem Himmel und der dunklen Roesttrommel. Mit --hero-ink-2 kam sie auf 3,2 : 1; mit der vollen Satzfarbe und einem hellen Schein traegt sie auf jedem der sechs Standbilder. */ .hero__brand{display:flex;align-items:center;gap:.7rem;margin:0 0 clamp(10px,1.5vh,18px); color:var(--hero-ink);letter-spacing:.24em;text-transform:uppercase; text-shadow:0 1px 10px rgba(252,249,244,.92),0 0 20px rgba(252,249,244,.7)} .hero__brand .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none; box-shadow:0 0 0 4px rgba(226,85,30,.14)} .hero__title{margin:0 0 clamp(10px,1.5vh,18px);filter:none} .hero__title .hline{display:block;overflow:hidden} /* Die Hoehe ist hier so knapp wie die Breite: unter dem Titel stehen noch Satz, zwei Knoepfe und zwei Karten. `min(..., 9.4vh)` deckelt ihn deshalb auch nach der Fensterhoehe — auf einem 1920 x 800 Fenster war der Hero sonst neunundvierzig Punkte zu hoch, und die Zahlenkarte stand unter der Kante. Genau das war die Beschwerde. */ .hero__d{font-size:min(clamp(2.3rem,4.6vw,5.3rem),9.4vh);white-space:nowrap;line-height:.9; letter-spacing:-.03em;color:var(--hero-ink)} /* Der Satz stand in der halbdunklen Zweitfarbe. Auf den Buchstaben gemessen (nicht auf dem Kasten) trug er damit 3,66 : 1. Die volle Satzfarbe kostet keinen einzigen Punkt Schleier und bringt ihn auf ueber 6. */ .hero__sub{max-width:42ch;margin:0 0 clamp(12px,1.7vh,22px); color:var(--hero-ink);font-size:var(--t-lead);line-height:1.5} /* „die karten sind nah an den buttons" — sie bekommen jetzt einen festen Mindestabstand, und der Rest der freien Hoehe faellt weiterhin dorthin (margin-top:auto an der Karte). */ .hero__btns{margin:0 0 clamp(20px,3.4vh,46px)} /* Form und Groesse der Knoepfe bleiben, wie sie sind — nur die Farben drehen sich mit dem Grund. Auf Elfenbein war die Kontur des zweiten Knopfes elfenbeinfarben und damit unsichtbar. */ /* Der zweite Knopf ist eine Kontur ohne Flaeche — auf einem Bild, das mal hell und mal dunkel ist, kam sein Wort auf 2,2 : 1. Er bekommt deshalb eine helle Glasfuellung (die Form bleibt) und ein dunkleres Orange: #E2551E auf Weiss traegt 3,4 : 1 und reicht nicht, #A8390C traegt 5,7. */ /* Auf den Buchstaben gemessen trug das Wort bei halber Fuellung 3,59 : 1 — der Kasten daneben war hell, die Schrift stand aber ueber dem Film. Die Fuellung ist deshalb dichter; Form, Kontur und Groesse bleiben. */ .hero .btn--ghost{border-color:rgba(226,85,30,.6);color:#A8390C; background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); --fillc:var(--ember);--bubblec:rgba(255,255,255,.4)} .hero .btn--ghost .btn__fill{background:var(--ember)} .hero .btn--ghost:hover,.hero .btn--ghost:focus-visible{color:#fff;border-color:var(--ember)} /* Der Rollhinweis. Auf dem Rechner steht er zwischen den beiden Karten. */ /* Der Hinweis nahm 93 Punkte — mehr als die Zahlenkarte. Die Schiene wird flacher, der Rest bleibt, wie er ist. */ .hero__foot{display:flex;justify-content:center; margin:clamp(8px,1.1vh,14px) 0 clamp(8px,1.1vh,14px)} /* Die Schiene wird flacher — und die beiden Wellenkreise, die sonst um sie herum laufen, fallen weg: bei dieser Hoehe standen sie nicht mehr um die Schiene, sondern mitten in der Themenkarte darueber. */ .hero__foot .hero__scroll-rail{height:clamp(22px,2.6vh,32px); background:rgba(34,26,20,.28)} .hero__foot .hero__scroll-rail::before, .hero__foot .hero__scroll-rail::after{display:none} /* Der Hinweis steht auf dem hellsten Teil des Bildes. Mit --hero-ink-2 kam er auf 2,8 : 1; jetzt traegt er die volle Satzfarbe und einen weissen Schein, der ihn vom Bild abhebt. */ .hero__scroll{position:static;color:var(--hero-ink); text-shadow:0 1px 10px rgba(252,249,244,.9),0 0 22px rgba(252,249,244,.7)} .hero__scroll:hover{color:#000} .hero__scroll-txt{color:inherit} .hero__scroll .hero__scroll-txt b{color:inherit} .hero__scroll-rail{background:rgba(34,26,20,.22)} .hero__scroll-rail i{background:var(--ember)} /* ---- 4 · Die Karten ----------------------------------------------------- Glas: eine helle Flaeche mit Unschaerfe dahinter und einer Haarlinie als Kante. Bewusst nur hier — Informationsflaechen duerfen so aussehen, der Rest der Seite nicht. */ .glass{position:relative;list-style:none;margin:0;padding:0; background:var(--glas);border:1px solid var(--glas-kante);border-radius:16px; -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15); box-shadow:0 18px 44px rgba(58,42,30,.10)} /* Die Karte laesst dem Becher die rechte Seite. Ueber die volle Breite gezogen lag sie genau ueber ihm — und er ist der Grund, warum dieser Film dieser Film ist. */ .hero__marks{display:grid;grid-template-columns:repeat(5,1fr); width:min(100%,78ch);max-width:61%;overflow:hidden} .hero__marks li{position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;gap:.34rem;padding:clamp(11px,1.4vh,16px) clamp(7px,.8vw,14px); transition:background-color .45s var(--e-out-cubic)} .hero__marks li + li{border-left:1px solid rgba(58,42,30,.12)} .hero__marks li:hover,.hero__marks li:focus-within{background:rgba(255,255,255,.42)} /* ---- Die Zeichen --------------------------------------------------------- Drei Lagen Bewegung, und keine davon laeuft ins Leere: · beim Eintreten zeichnet sich die Kontur selbst (`is-draw`, gestaffelt ueber die fuenf Spalten). Dafuer setzt hero.js `pathLength="1"` an jeden Pfad — dann laesst sich ein Strich in CSS abzaehlen, ohne dass jemand seine Laenge kennen muss. · danach laufen die beweglichen Teile weiter, die icons.js ohnehin mitbringt: Dampf ueber der Tasse, der Ausschlag beim Ton, der Puls bei Buehne und Karte. Hier etwas kraeftiger als sonst — in einer Karte von 130 Punkten Hoehe geht die uebliche Zurueckhaltung unter. · unter dem Zeigefinger hebt sich das Zeichen aus seiner Scheibe. Der Kreis dahinter ist der Teil, der die Karte modern macht: er kommt beim Eintreten mit und waechst beim Ueberfahren. */ .hero__ico{position:relative;display:grid;place-items:center; width:clamp(30px,2.6vw,38px);height:clamp(30px,2.6vw,38px); color:var(--ember); transition:transform .5s var(--e-out-expo),color .35s} .hero__ico::before{content:'';position:absolute;inset:-22%;border-radius:50%; background:radial-gradient(circle,rgba(226,85,30,.16),rgba(226,85,30,.04) 62%,transparent 72%); transform:scale(.4);opacity:0; transition:transform .6s var(--e-out-expo),opacity .5s var(--e-out-cubic)} .hero__ico svg{position:relative;width:78%;height:78%;display:block;overflow:visible} .hero__marks li:hover .hero__ico{transform:translateY(-3px) scale(1.06)} .hero__marks li:hover .hero__ico::before{transform:scale(1.06);opacity:1} @media (prefers-reduced-motion:no-preference){ .hero__marks .hero__ico::before{transform:scale(.55);opacity:.5} .hero__marks.is-draw .hero__ico::before{transform:scale(1);opacity:1} /* Das Zeichnen der Kontur selbst steht NICHT hier. main.js zeichnet jedes [data-icon] beim Eintreten mit GSAP und schreibt dabei `stroke-dashoffset` als Auszeichnung ins Element — eine Regel aus dem Stylesheet kommt dagegen nicht an. Zweimal dasselbe zu tun waere ein Wettlauf; hero.js laesst deshalb denselben Weg noch einmal laufen, zum richtigen Zeitpunkt. Hier bleibt nur, was der Karte gehoert: die Scheibe, der Zeigerzustand und das Tempo der Schleifen. /* die Schleifen etwas kraeftiger als im uebrigen Satz */ .hero__marks .i-steam path{animation-duration:2.6s} .hero__marks .i-eq path{animation-duration:.9s} .hero__marks .i-pulse{animation-duration:2.2s} .hero__marks li:hover .i-eq path{animation-duration:.55s} .hero__marks li:hover .i-steam path{animation-duration:1.7s} } .a11y-rm .hero__marks .hero__ico::before{transform:scale(1);opacity:.7;transition:none} .hero__marks b{font-family:var(--f-mono);font-weight:500;font-size:clamp(.62rem,.74vw,.73rem); letter-spacing:.16em;text-transform:uppercase;color:var(--hero-ink)} /* `:not(.hero__ico)` ist hier kein Schmuck: das Zeichen IST ein , und `.hero__marks span` wiegt schwerer als `.hero__ico`. Ohne diese Ausnahme war jedes Zeichen dunkelbraun statt in der Markenfarbe — gemessen rgb(74,61,51) statt rgb(226,85,30). */ .hero__marks li > span:not(.hero__ico){font-size:clamp(.72rem,.8vw,.8rem); line-height:1.38;color:var(--hero-ink-2);max-width:20ch} .hero__facts{display:none} .hero__stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:0} .hero__stats li{display:flex;flex-direction:column;align-items:center;text-align:center; gap:.14rem;padding:clamp(9px,1.2vh,15px) clamp(8px,1vw,16px)} .hero__stats li + li{border-left:1px solid rgba(58,42,30,.14)} .hero__stats b{font-family:var(--f-display);font-weight:750;line-height:1; font-size:clamp(1.4rem,2.2vw,2.1rem);color:var(--ember);font-variant-numeric:tabular-nums} .hero__stats em{font-style:normal;font-family:var(--f-mono); font-size:clamp(.6rem,.72vw,.72rem);letter-spacing:.16em;text-transform:uppercase; color:var(--hero-ink)} .hero__stats span{font-size:clamp(.72rem,.8vw,.82rem);line-height:1.4;color:var(--hero-ink-2)} /* Reihenfolge auf dem Rechner: Themenkarte, Rollhinweis, Zahlen. */ @media (min-width:821px){ /* Die Zahlenkarte lief unter die beiden schwebenden Knoepfe. Gemessen bei 1440 x 900: der Barrierefreiheitsknopf ragte 18 Punkte in die Karte, der Kontaktkreis 61. Beide sind fest positioniert und liegen darueber — man sieht die Zahl nicht mehr, und der Knopf steht auf Text. Die Karte haelt jetzt links und rechts Abstand. Die Werte sind aus den Massen der beiden Knoepfe hergeleitet (Kreis clamp(84,6.4vw,112) plus sein Randabstand), mit rund zwanzig Punkten Luft. */ .hero__stats{margin-left:clamp(30px,2.6vw,44px); margin-right:clamp(72px,6.6vw,104px)} .hero__inner > *{flex:none} .hero__brand{order:1}.hero__title{order:2}.hero__sub{order:3}.hero__btns{order:4} .hero__marks{order:5;margin-top:auto} .hero__foot{order:6} .hero__stats{order:7} } /* ---- 5 · Der Uebergang nach unten --------------------------------------- */ .hero__seam{position:absolute;left:50%;bottom:0;z-index:4;width:1px;height:0; translate:-50% 0;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(226,85,30,0),var(--ember))} /* ════════════════════════════════════════════════════════════════════════ TELEFON — eigener Aufbau, keine verkleinerte Fassung ------------------------------------------------------------------------ Reihenfolge nach dem Entwurf: Titel, Satz, beide Knoepfe, Rollhinweis, Faktenkarte, Zahlen. Die Themenkarte mit ihren fuenf Saetzen faellt weg — sie kostet auf 390 Punkten eine halbe Bildschirmhoehe; an ihrer Stelle stehen vier kurze Angaben, die dasselbe sagen. Der Hauptknopf steht dabei ueber der Kante: nachgemessen bei 320, 360, 390, 402 und 768 Punkten. ==================================================================== */ @media (max-width:820px){ .hero{min-height:100svh;height:auto} /* Der Schleier ist deutlich leichter als vorher. Er traegt nur noch die obere Haelfte — darunter steht nichts mehr, und dort soll man den Film sehen und nicht den Schleier. */ /* Statt eines Laufs ueber die ganze Hoehe: ein enger Fleck hinter Vorzeile, Titel und Satz, und darunter nur noch so viel, wie der Rollhinweis braucht. Damit liegt ueber dem Film selbst deutlich weniger. */ .hero__scrim{background:radial-gradient(112% 40% at 10% 22%, rgba(249,246,240,.80) 0,rgba(249,246,240,.52) 46%,rgba(249,246,240,0) 82%)} .hero__scrim::before{background:none} /* Deutlich leichter als vorher: oben sah man vom Film gar nichts mehr. Der Titel hat dafuer Luft — er traegt 12,9 : 1, da ist genug Reserve. */ .hero__scrim::after{background:linear-gradient(180deg,rgba(249,246,240,.44) 0, rgba(249,246,240,.34) 26%,rgba(249,246,240,.26) 44%,rgba(249,246,240,.18) 56%, rgba(249,246,240,.06) 66%,rgba(249,246,240,0) 76%,rgba(249,246,240,0) 100%)} /* Satz und Schaltflaechen stehen oben, der Rest der Hoehe gehoert dem Film und dem Becher. Nichts liegt mehr darauf. */ /* Unten bleibt so viel frei, dass die Themenkarte ueber dem Barrierefreiheitsknopf und dem Kontaktkreis endet — beide sitzen fest in den unteren Ecken. Gemessen: Kreis beginnt bei 786, Karte endet bei 764. */ .hero__inner{justify-content:flex-start; padding-top:calc(var(--sa-o) + var(--nav-h) + clamp(8px,2vh,20px)); padding-bottom:calc(var(--sa-u) + 108px)} /* Ein weicher heller Schein hinter jeder Satzflaeche. Er deckt nichts zu — er liegt nur so eng an den Buchstaben, dass sie sich vom Film loesen, auch wenn dahinter gerade etwas Dunkles vorbeizieht. */ .hero__brand{margin-bottom:.7rem;font-size:.74rem;letter-spacing:.18em; text-shadow:0 1px 10px rgba(252,249,244,.95),0 0 22px rgba(252,249,244,.75)} .hero__d{text-shadow:0 2px 18px rgba(252,249,244,.9),0 0 40px rgba(252,249,244,.6)} .hero__sub{text-shadow:0 1px 12px rgba(252,249,244,.95),0 0 26px rgba(252,249,244,.7)} .hero__scroll-txt{text-shadow:0 1px 10px rgba(252,249,244,.95),0 0 20px rgba(252,249,244,.7)} .hero__d{font-size:clamp(2.5rem,11.4vw,3.9rem);line-height:.94;letter-spacing:-.034em} /* Die dritte Zeile in der Markenfarbe — so steht es im Entwurf. */ .hero__d--em{color:var(--ember)} .hero__title{margin-bottom:.8rem} /* Etwas mehr Luft ueber den Schaltflaechen — sie sollen tiefer sitzen. */ .hero__sub{font-size:.96rem;max-width:26ch;margin-bottom:2rem;color:var(--hero-ink)} /* Die beiden Knoepfe sind nicht mehr randbreit. Randbreit liefen sie quer ueber den Becher, und genau darauf soll nichts liegen. Sie stehen jetzt links, so breit wie ihr Wort es verlangt, und enden vor ihm. */ .hero__btns{gap:.5rem;margin-bottom:0;flex-direction:column;align-items:flex-start;flex-wrap:nowrap} /* Auf dem Telefon liegt der Knopf ueber dem Film und nicht ueber dem Satzverlauf. Die helle Pille traegt darum eine dichtere Fuellung als auf dem Rechner — dort steht sie auf dem hellen Verlauf, hier auf dem Film. Gemessen gegen das dunkelste der sechs Standbilder. */ .hero .liqb--klar{background:linear-gradient(168deg,rgba(255,252,249,.90) 0%,rgba(255,243,234,.82) 100%)} /* ---- Was auf dem Telefon NICHT gezeigt wird --------------------------- Beide Karten. Auf 402 Punkten nahmen sie zusammen 192 Punkte, lagen ueber dem Becher und ueber dem unteren Drittel des Films, und der Kontaktkreis sass auf ihrer rechten Kante. Der Auftrag war eindeutig: auf dem Becher soll nichts liegen, der Film soll nicht zugedeckt sein, die unteren Angaben sollen auf dem Telefon weg. Auf dem Rechner stehen sie weiter — dort ist Platz dafuer. Damit loest sich auch die Ueberschneidung mit dem Barrierefreiheitsknopf und dem Kontaktkreis von selbst: es gibt nichts mehr, worauf sie liegen koennten. */ /* Die Faktenkarte und die Zahlen bleiben weg. Die Themenkarte kommt zurueck — aber kompakt: Zeichen und Wort, ohne den Satz darunter. Fuenf Saetze kosten auf 402 Punkten 120 Punkte, fuenf Woerter kosten 34. Sie steht ganz unten und endet ueber den beiden schwebenden Knoepfen. */ .hero__facts,.hero__stats{display:none} .hero__marks{display:grid;grid-template-columns:repeat(5,1fr); width:auto;max-width:none;margin:0} .hero__marks li{gap:.34rem;padding:.7rem .18rem .75rem} .hero__marks li + li{border-left:1px solid rgba(58,42,30,.14)} .hero__marks li > span:not(.hero__ico){display:none} .hero__marks .hero__ico{width:26px;height:26px} .hero__marks .hero__ico svg{width:88%;height:88%} /* 8,8 Pixel waren zu wenig — das ist die Groesse, bei der Mono-Versalien auf einem Telefon zu einem Muster werden statt zu einem Wort. Gemessen passt das laengste Wort aller drei Sprachen ("Experience", 10 Zeichen) bei .62rem noch in seine Spalte: 72 Pixel stehen zur Verfuegung, das Wort braucht 66. Deshalb hier .62 statt .55 — und nicht mehr. */ .hero__marks b{font-size:.62rem;letter-spacing:.06em} /* ---- Bewegung in der Leiste ------------------------------------------ Auf dem Rechner traegt die Karte fuenf Saetze und lebt davon. Hier sind es fuenf Woerter — sie braucht eine eigene Bewegung, sonst ist sie nur eine Zeile Text. Drei Dinge, alle billig (nur transform und opacity) und alle ausserhalb des Bildes von motion.js angehalten: · die Scheibe hinter jedem Zeichen atmet, um eine Fuenftelsekunde versetzt — die Leiste laeuft dadurch von links nach rechts durch · ein Lichtstreifen wandert alle zwoelf Sekunden einmal darueber · beim Antippen hebt sich das Zeichen kurz an */ .hero__marks{position:relative;overflow:hidden} .hero__marks li{transition:background-color .4s var(--e-out-cubic)} .hero__marks li:active{background:rgba(255,255,255,.5)} .hero__marks li:active .hero__ico{transform:translateY(-3px) scale(1.08)} } @media (max-width:820px) and (prefers-reduced-motion:no-preference){ .hero__marks .hero__ico::before{animation:heroAtem 4.6s ease-in-out infinite} .hero__marks li:nth-child(1) .hero__ico::before{animation-delay:0s} .hero__marks li:nth-child(2) .hero__ico::before{animation-delay:.2s} .hero__marks li:nth-child(3) .hero__ico::before{animation-delay:.4s} .hero__marks li:nth-child(4) .hero__ico::before{animation-delay:.6s} .hero__marks li:nth-child(5) .hero__ico::before{animation-delay:.8s} @keyframes heroAtem{ 0%,100%{transform:scale(.86);opacity:.5} 46% {transform:scale(1.1); opacity:1} } .hero__marks::after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%; pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); animation:heroStreif 12s ease-in-out infinite} @keyframes heroStreif{ 0%,8% {transform:translateX(-120%)} 38%,100%{transform:translateX(330%)} } } .a11y-rm .hero__marks .hero__ico::before, .a11y-rm .hero__marks::after{animation:none} @media (max-width:820px){ /* Die Karte steht auf dem hellsten Teil des Bildes und muss trotzdem als Flaeche zu erkennen sein — auf dem Telefon deshalb etwas dichter als auf dem Rechner. */ .hero__marks{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.8)} /* ---- Der Rollhinweis --------------------------------------------------- Derselbe wie auf dem Rechner — Schiene, Punkt, Wort darunter —, nur kleiner und links statt mittig: mittig laege er auf dem Becher, und darauf soll nichts liegen. Der weiche Auslauf dahinter ist noetig, weil der Schleier an dieser Stelle schon fast weg ist (das war der Auftrag: den Film nicht zudecken). Gemessen ohne ihn 3,2 : 1, mit ihm 8,7. Er hat keine Kante — ein runder Verlauf, der nach allen Seiten auf null geht. */ /* Kein eigener Grund hinter dem Hinweis — jeder Fleck war als heller Kasten zu sehen. Getragen wird er stattdessen vom Schleier selbst, der dafuer ein Stueck weiter nach unten reicht (siehe oben). Ein Verlauf hat keine Kante; ein Kasten hat vier. */ /* Der Hinweis sitzt unten in der Mitte, direkt ueber der Karte. Der Zwischenraum darueber ist der freie Blick auf Film und Becher. */ .hero__foot{margin:auto 0 .8rem;justify-content:center} .hero__scroll{position:static;padding:0;margin:0;border:0;border-radius:0; text-shadow:none;color:var(--hero-ink); background:none;-webkit-backdrop-filter:none;backdrop-filter:none} .hero__foot .hero__scroll-rail{height:20px;width:1px; background:rgba(34,26,20,.26);border:0;border-radius:0;transform:none} .hero__foot .hero__scroll-rail::before, .hero__foot .hero__scroll-rail::after{display:none} .hero__scroll-txt{font-size:.68rem;letter-spacing:.14em} /* Der Film ist hochkant geschnitten; der Becher steht darin schon tief. */ /* Nach rechts geruckt: der Becher steht im Film rechts, und bei `cover` auf einem stehenden Schirm faellt er sonst aus dem Bild. */ .hero__film{object-position:62% 42%} } @media (max-width:360px){ .hero__sub{max-width:22ch;font-size:.9rem} } /* Querformat auf dem Telefon: 100svh sind dort rund 380 Punkte. Karten und Ring wuerden den Satz verdecken. */ @media (max-height:540px) and (orientation:landscape){ .hero__marks,.hero__facts,.hero__stats,.hero__foot{display:none} .hero__inner{justify-content:center;min-height:520px} .hero{min-height:520px} } /* Stehende Tafeln (iPad hoch) bekommen denselben Ausschnitt wie das Telefon — der 820er Block greift dort nicht. */ @media (orientation:portrait) and (pointer:coarse) and (min-width:821px){ .hero__film{object-position:62% 44%} } /* ---- 6 · Rueckzug -------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .hero__stage{transform:none !important} } /* ════════════════════════════════════════════════════════════════════════ LIQB — der fluessige Glasknopf, 1:1 nach camo-liquid-button.framer.website ------------------------------------------------------------------------ Das Vorbild ist KEINE eingefaerbte Flaeche. Es ist eine Pille aus Glas, durch die man den Grund sieht, und darin ein WebGL-Verlauf, der ruhend nur im runden Zeichen sichtbar ist und beim Ueberfahren ueber die ganze Pille aufblendet. Der Verlauf steht in assets/js/liqb.js. Alle Zahlen unten sind an der laufenden Vorlage abgegriffen. Sie stehen dort fuer eine Pille von 88 Punkten Hoehe; hier sind sie als Anteil von --h notiert, damit die Verhaeltnisse bei unserer Groesse dieselben sind: Zeichen 76 / 88 = .8636 Ring 3 / 88 = .0341 Rand li 6 / 88 = .0682 Rand re 40 / 88 = .4545 Abstand 22 / 88 = .25 Sinnbild 32 / 88 = .3636 Reihenfolge der Lagen, wie beim Vorbild: 1 .liqb__camo die volle Zeichenflaeche, ruhend Deckkraft 0 2 .liqb__chip der Kreis mit eigener Zeichenflaeche und Ring 3 .liqb__glas der Glasstapel (sieben Lagen), z-index 1 4 .liqb__ico das Sinnbild ueber dem Kreis, z-index 2 5 .liqb__t die Schrift, z-index 2 ==================================================================== */ .liqb{--h:clamp(50px,4.4vw,60px); --e:calc(var(--h) / 88); /* ein Punkt des Vorbilds */ --chip:calc(var(--h) * .8636); --ring:calc(var(--h) * .0341); position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:flex-start; height:var(--h);border-radius:100px; gap:calc(var(--h) * .25); padding:0 calc(var(--h) * .38) 0 calc(var(--h) * .0682); text-decoration:none;-webkit-tap-highlight-color:transparent; box-shadow:0 calc(24*var(--e)) calc(44*var(--e)) calc(-8*var(--e)) rgba(36,42,28,.42), 0 calc(4*var(--e)) calc(10*var(--e)) rgba(36,42,28,.16)} /* Die zweite Pille traegt eine helle Rampe und dunkle Schrift. Der Bau ist derselbe; nur die drei Farbstellen und der Schatten sind anders. */ .liqb--klar{box-shadow:0 calc(20*var(--e)) calc(36*var(--e)) calc(-10*var(--e)) rgba(94,32,8,.30), 0 calc(3*var(--e)) calc(8*var(--e)) rgba(94,32,8,.14)} /* 1 · Die volle Zeichenflaeche. Ruhend unsichtbar — beim Vorbild steht dort opacity 0, und beim Ueberfahren geht sie auf 1. Sonst nichts. */ /* EIN Verhalten fuer alle Geraete, und es ist das des Vorbilds: ruhend zeigt nur der KREIS den Film, die Pille ist Glas; beim Ueberfahren waechst der Film ueber die ganze Pille. Vorher war das zweierlei: auf dem Rechner blendete die Flaeche auf, auf Telefon und Tafel stand sie dauerhaft offen (dort gibt es kein Ueberfahren) — dunkle Pille, weisse Schrift, waehrend der Rechner ruhend hell war mit schwarzer Schrift. Zwei verschiedene Knoepfe. Der Ausschnitt ist ein `clip-path`, kein Auf- und Zublenden: er laesst sich bewegen, und er liegt UNTER dem Glas — die Glaslagen wirken also auch auf den laufenden Film, so wie beim Vorbild. Damit der Kreis ruhend trotzdem klar zu sehen ist, haben die Glaslagen an genau dieser Stelle ein Loch (siehe --loch weiter unten). */ .liqb{--mx:calc(var(--h) * .0682 + var(--chip) / 2)} .liqb__camo{position:absolute;inset:0;z-index:0;border-radius:100px; overflow:hidden;pointer-events:none; clip-path:circle(calc(var(--chip) / 2 + 1px) at var(--mx) 50%); transition:clip-path .42s var(--e-out-expo)} .liqb.is-auf .liqb__camo{clip-path:circle(calc(var(--h) * 7) at var(--mx) 50%)} .liqb__camo .liqb__film{display:block;width:100%;height:100%;object-fit:cover;border-radius:100px} /* Der Schleier ueber dem Film. Gemessen: der hellste Punkt der Crema kommt nach der Abstimmung auf eine Leuchtdichte von 0,495 — weisse Schrift stuende dort bei 1,9 : 1. Mit 44 Prozent Schleier sind es 5,03 : 1. Er liegt UEBER dem Film und UNTER dem Glas, damit die Glaslagen des Vorbilds unveraendert darauf wirken. */ /* Ruhend liegt der Film nur im Kreis — der Schleier darf leicht sein. Aufgedeckt steht die weisse Schrift darauf, dann traegt er .44. Gemessen: der hellste Punkt der Crema kommt nach der Abstimmung auf eine Leuchtdichte von 0,495; weisse Schrift stuende dort bei 1,89 : 1, mit .44 bei 5,03 : 1. */ .liqb__camo::after{content:'';position:absolute;inset:0;border-radius:100px; background:rgba(26,11,4,.20);pointer-events:none; transition:background .42s var(--e-out-expo)} .liqb.is-auf .liqb__camo::after{background:rgba(26,11,4,.44)} /* 2 · Der Kreis. Beim Vorbild eine eigene, quadratische Zeichenflaeche mit einem Ring von 3 Punkten darueber und drei Schlagschatten. */ /* Beim Vorbild liegt der Kreis UNTER dem Glas — dort ist die Glaslage aber fast durchsichtig (.10), und der Kreis kommt trotzdem durch. Bei uns traegt sie ruhend .68 Weiss, damit die schwarze Schrift steht; der Kreis waere darunter verschwunden. Er liegt deshalb darueber, auf der Ebene des Sinnbilds. Das Bild ist damit dasselbe wie beim Vorbild, der Weg dorthin ein anderer. */ .liqb__chip{position:relative;z-index:2;flex:0 0 auto; width:var(--chip);height:var(--chip);border-radius:100px;overflow:clip; display:flex;align-items:center;justify-content:center;pointer-events:none; box-shadow:0 calc(6*var(--e)) calc(14*var(--e)) rgba(34,40,26,.35), inset 0 calc(2*var(--e)) calc(3*var(--e)) rgba(255,255,255,.9), inset 0 calc(-2*var(--e)) calc(4*var(--e)) rgba(30,36,22,.35)} /* Der Kreis hat KEINEN eigenen Film mehr. Beim Vorbild sind es zwei Zeichenflaechen; ein Film kostet aber mehr als ein Shader, und auf dem Telefon zaehlt jeder. Ruhend traegt der Kreis darum das Standbild als Bildgrund. Sobald der Film aufgedeckt ist, wird der Grund durchsichtig und der Kreis zeigt, was darunter laeuft — dieselbe Stelle desselben Films, nur ohne zweites Element. */ /* Der Kreis ist durchsichtig: darunter laeuft der Film, ueber ihm liegen Ring und Pfeil. Nur wenn der Film nicht anlaeuft (auf iOS blockiert der Stromsparmodus jedes Abspielen), tritt das Standbild an seine Stelle — `liqb--still` setzt liqb.js. */ .liqb--still .liqb__chip{background-image:url(../../public/video/liqb-espresso.webp); background-size:cover;background-position:center} .liqb--still .liqb__camo{display:none} .liqb__chip::before{content:'';position:absolute;inset:0;border-radius:999px;z-index:1; background:rgba(26,11,4,.34);pointer-events:none; transition:opacity .5s var(--e-out-expo)} .liqb.is-auf .liqb__chip::before{opacity:0} .liqb__chip::after{content:'';position:absolute;inset:0;border-radius:100px; border:var(--ring) solid rgba(255,244,236,.95)} .liqb--klar .liqb__chip::after{border-color:rgba(255,248,242,.62)} /* 3 · Der Glasstapel. Sieben Lagen, jede mit den Werten des Vorbilds. */ .liqb__glas{position:absolute;inset:0;z-index:1;border-radius:100px; overflow:hidden;isolation:isolate;pointer-events:none} .liqb__glas > span{position:absolute;inset:0;border-radius:100px;display:block} /* Das Loch: die Glaslagen sparen den Kreis aus, damit der Film dort klar steht statt hinter Milchglas. Der Ring und der Pfeil liegen darueber und decken die Kante. */ .liqb__g1,.liqb__g2,.liqb__g3,.liqb__g4,.liqb__g5{ -webkit-mask-image:radial-gradient(circle at var(--mx) 50%, transparent calc(var(--chip) / 2), #000 calc(var(--chip) / 2 + 1px)); mask-image:radial-gradient(circle at var(--mx) 50%, transparent calc(var(--chip) / 2), #000 calc(var(--chip) / 2 + 1px))} /* 3a Grundton und erste Unschaerfe */ /* Beim Vorbild traegt diese Lage nur einen Hauch Farbe (.10). Sie steht dort aber auch auf einem ruhigen, mittelhellen Grund. Bei uns liegt der Knopf auf dem Hero-Film — hell, wechselnd, mit dem Becher darin. Weisse Schrift auf durchsichtigem Glas waere dort nicht zu lesen. Die Lage traegt deshalb im Ruhezustand einen Rauchton: dunkles Glas, durch das man den Film noch sieht. Sobald der Espresso-Film aufgedeckt ist, bringt der seinen eigenen Schleier mit (.44) — dann nimmt sich der Rauch zurueck. */ .liqb__g1{-webkit-backdrop-filter:blur(5.6px) saturate(1.24);backdrop-filter:blur(5.6px) saturate(1.24); transition:background .5s var(--e-out-expo)} /* Ruhend ist die Pille HELL: darauf steht schwarze Schrift, und die liest sich auf dem wechselnden Hero-Film am sichersten. Schwarz hat die Leuchtdichte 0; damit 4,5 : 1 sicher steht, muss der Grund ueberall ueber 0,175 liegen — das leistet ein heller Ton ab etwa .60, auch dort, wo hinter dem Glas der dunkle Becherschatten steht. Sobald der Espresso-Film laeuft, kippt es: der Film bringt seinen eigenen Schleier mit, die helle Lage geht weg, die Schrift wird weiss. */ .liqb--voll .liqb__g1{background:rgba(255,249,242,.68)} .liqb--klar .liqb__g1{background:rgba(252,250,247,.66)} .liqb--voll.is-auf .liqb__g1{background:rgba(58,20,6,.24)} .liqb--klar.is-auf .liqb__g1{background:rgba(20,14,10,.24)} /* 3b die verzerrte Unschaerfe. Der Ausschnitt in der Mitte ist das, was die Linse ausmacht: aussen Glas, innen klar. Deckkraft und Maske stehen genau so beim Vorbild. */ .liqb__g2{-webkit-backdrop-filter:url(#liqbFilter) blur(14px) saturate(1.4); backdrop-filter:url(#liqbFilter) blur(14px) saturate(1.4); opacity:.534286; -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 52.92%, rgb(0,0,0) 100%); mask-image:radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 52.92%, rgb(0,0,0) 100%)} /* 3c der Innenring und der weisse Verlauf von oben */ .liqb__g3{border:1px solid rgba(255,255,255,.35); background:linear-gradient(rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 18%, rgba(255,255,255,.02) 45%, rgba(255,255,255,.07) 100%)} /* 3d der Farbsaum: rot links, blau rechts, im Modus screen bei .15 */ .liqb__g4{mix-blend-mode:screen;opacity:.15;filter:blur(6px); background:radial-gradient(120% 100% at 0% 50%, rgba(255,60,60,.38), rgba(255,60,60,0) 45%), radial-gradient(120% 100% at 100% 50%, rgba(80,120,255,.38), rgba(80,120,255,0) 45%); -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46.92%, rgb(0,0,0) 100%); mask-image:radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46.92%, rgb(0,0,0) 100%)} /* 3e der Glanz oben: 44 Prozent der Hoehe, unten weicher Radius */ .liqb__g5{inset:0 0 56%;height:44%;border-radius:100px 100px calc(45*var(--e)) calc(45*var(--e)); background:linear-gradient(rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 32%, rgba(255,255,255,0) 100%); filter:blur(.4px);opacity:.3} /* 3f der Schatten von unten nach innen */ .liqb__g6{box-shadow:inset 0 calc(-10*var(--e)) calc(20*var(--e)) rgba(0,0,0,.216); opacity:.35;transition:opacity .5s var(--e-out-expo)} .liqb.is-auf .liqb__g6{opacity:1} /* 3g der Lichtstreif am Rand. Die Mitte ist ausgespart, sodass nur die Kante leuchtet; darin dreht sich ein Kegel, sechs Sekunden je Runde. */ .liqb__streif{padding:var(--ring);overflow:hidden; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .liqb__streif i{position:absolute;left:50%;top:50%; width:220%;aspect-ratio:1;border-radius:50%; transform:translate(-50%,-50%) rotate(0deg);will-change:transform; animation:liqbStreifSpin 6s linear infinite; background:conic-gradient(rgba(0,0,0,0) 0deg, #E2551E 54deg, #8E2C06 98deg, rgba(0,0,0,0) 145deg, rgba(255,255,255,.75) 210deg, rgba(0,0,0,0) 280deg, rgba(0,0,0,0) 360deg)} .liqb--klar .liqb__streif i{ background:conic-gradient(rgba(0,0,0,0) 0deg, #C2440F 54deg, #7C2708 98deg, rgba(0,0,0,0) 145deg, rgba(255,255,255,.85) 210deg, rgba(0,0,0,0) 280deg, rgba(0,0,0,0) 360deg)} @keyframes liqbStreifSpin{ 0% {transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(360deg)} } /* 4 · Das Sinnbild liegt ueber dem Kreis und ueber dem Glas — beim Vorbild ein Bild von 32 Punkten in einem Feld von 76. Unseres ist der Pfeil, der auf der ganzen Seite fuer „weiter" steht. */ .liqb__ico{position:absolute;z-index:2; left:calc(var(--h) * .0682);top:50%;transform:translateY(-50%); width:var(--chip);height:var(--chip); display:flex;align-items:center;justify-content:center;pointer-events:none} .liqb__ico svg{width:calc(var(--h) * .3636);height:calc(var(--h) * .3636);display:block} .liqb__ico{color:#FFF8F4;filter:drop-shadow(0 1px 2px rgba(28,15,7,.6))} /* 5 · Die Schrift. Beim Vorbild Geist 500 in 30 Punkten, gemischt geschrieben, eng gestellt, mit einem Schattenriss 0 1px 3px. Stellung und Riss sind uebernommen; die Schriftart ist die der Seite (Archivo, --f-body) — dieselbe, die Titel und Fliesstext tragen. Die Farbe haengt am Zustand: solange kein Film laeuft, steht sie schwarz auf der hellen Pille; sobald der Espresso aufgedeckt ist, wird sie weiss. */ .liqb__t{position:relative;z-index:2; font-family:var(--f-body);font-weight:600; font-size:calc(var(--h) * .285);letter-spacing:-.01em;line-height:1; white-space:nowrap; /* Der Farbwechsel ist ein SPRUNG, keine Ueberblendung — und er sitzt auf dem Kreuzungspunkt. Das ist gemessen, nicht geschaetzt. Der Kreis waechst mit einer Expo-Kurve; unter der Schrift wird es darum sehr schnell dunkel. Der Grund unter den Buchstaben, ueber die Zeit (eingefrorene Uebergaenge, Kontrast gegen Schwarz und Weiss): 0 ms schwarz 5,55 weiss 1,05 20 ms schwarz 5,46 weiss 1,23 40 ms schwarz 4,06 weiss 2,42 60 ms schwarz 2,93 weiss 3,16 <- Kreuzung 80 ms schwarz 2,26 weiss 3,58 Es gibt also keinen Zeitpunkt, an dem beide Farben ueber 4,5 stehen — jede Ueberblendung zwischen hellem und dunklem Grund fuehrt zwangs- laeufig durch einen Mittelton. Das Beste, was geht, ist ein Sprung genau bei 60 ms: davor schwarz, danach weiss, schlechtester Moment rund 3 : 1 fuer ein bis zwei Bilder. Eine Ueberblendung stand an derselben Stelle bei 1,71 : 1 und ueber 200 Millisekunden lang. Die beiden RUHENDEN Zustaende, auf die es ankommt, stehen bei 17,95 : 1 (schwarz, ruhend) und 6,51 : 1 (weiss, aufgedeckt). */ transition:color 1ms 40ms, text-shadow 1ms 40ms} .liqb .liqb__t{color:#000000;text-shadow:0 1px 2px rgba(255,255,255,.55)} .liqb.is-auf .liqb__t{color:#FFFFFF;text-shadow:0 1px 3px rgba(20,24,32,.4); transition:color 1ms 60ms, text-shadow 1ms 60ms} .liqb:focus-visible{outline:2px solid var(--ember);outline-offset:5px} /* Rueckzug. Der Film wird nicht gestartet (liqb.js prueft das), es bleibt das Standbild; der Lichtstreif bleibt aus, das Aufblenden geschieht ohne Uebergang. Glas, Ring, Glanz und Schatten bleiben — die sind Aussehen, keine Bewegung. */ /* `.liqb__glas > span` waere hier staerker (0,1,1) als `.liqb__streif` (0,1,0) — der Streif bliebe trotz Rueckzug stehen. Gemessen: display kam als „block" zurueck. Deshalb steht die Klasse des Elternteils mit davor. Das ist in diesem Stylesheet der neunte Fall dieser Art. */ @media (prefers-reduced-motion:reduce){ .liqb__glas > .liqb__streif{display:none} .liqb__camo{transition:none} .liqb__t{transition:none} .liqb__g1,.liqb__g6,.liqb__chip::before{transition:none} } .a11y-rm .liqb__glas > .liqb__streif{display:none} .a11y-rm .liqb__camo,.a11y-rm .liqb__t{transition:none} .a11y-rm .liqb__g1,.a11y-rm .liqb__g6,.a11y-rm .liqb__chip::before{transition:none} /* Auf dem Telefon stehen die beiden Pillen UNTEREINANDER und kleiner. Nach Ihrem Bild: nebeneinander reichten sie bei breiteren Geraeten (430 Punkte) bis an den Becher. Untereinander und bei 44 Punkten Hoehe endet die laengste („Aussteller werden") deutlich davor. */ @media (max-width:820px){ .liqb{--h:44px} .liqb__t{font-size:calc(var(--h) * .315)} }