/* ========================================================= SARAH CARINA — Champagner-Laufschrift Ein helles Band wandert nacheinander durch "Maske ab.", "wahres" und "Leben" — im Lesefluss, nicht gleichzeitig. Danach eine kurze Ruhe, dann beginnt es von vorn. TON Kein Messinggold, sondern Champagner: entsaettigte, kuehlere Toene aus der Familie von --champagne (#dad5ca). Der Grundton ist ein tiefes, warmes Taupe, der Lichtpunkt eine helle Perle. Das wirkt zurueckhaltender und teurer als kraeftiges Gold. LESBARKEIT Gemessen gegen die hellste Stelle des Hero-Fotos (#e8e3dc), grosser Text braucht 3,0:1: #6b6047 4,85:1 traegt #7a6e58 3,92:1 traegt #8c7f66 3,08:1 traegt #efe6d2 1,03:1 nur als kurzer Lichtpunkt Die Grundtoene liegen deshalb alle ueber 3:1. Der helle Kern ist schmal und wandert; er steht nie laenger als einen Moment auf demselben Buchstaben, und die dunkle Kontur haelt die Form. FORTLAUFEND STATT GLEICHZEITIG Der Verlauf ist viermal so breit wie das Wort. Bei Position 0 % und 100 % liegt der helle Kern ausserhalb des Wortes — das ist der Ruhezustand. Dazwischen wandert er hindurch. Jedes Wort bekommt denselben Ablauf, nur zeitversetzt gestartet. Haengt an . ========================================================= */ /* Ohne background-clip:text waere der Text unsichtbar — deshalb bekommt nur der unterstuetzende Browser den Effekt. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { body.hologramm .holo { font-style: normal; /* waere sonst kursiv */ /* Breites Lichtband nach dem Vorbild von soulcode-marketing.de. WARUM 340 % UND NICHT 260 % Sichtbar ist immer nur ein Fenster von einer Wortbreite. Bei 260 % Verlaufsbreite war dieses Fenster 38 % des Verlaufs gross — breiter als die schwarzen Zonen an den Enden. Selbst in der Ruhephase lag deshalb immer ein Stueck Aufhellung ueber dem Wort, und es wirkte blass. Bei 340 % ist das Fenster nur 29 % gross und passt vollstaendig in die schwarzen Zonen: in Ruhe steht das Wort satt schwarz da. Der Strahl selbst behaelt seine Breite: Kern und Schultern zusammen rund 88 % der Wortbreite, der helle Kern davon etwa 20 %. In Verlaufsprozenten faellt das kleiner aus, weil der Verlauf insgesamt breiter geworden ist. */ background-image: linear-gradient( 96deg, #141312 0%, #141312 35%, #3a3327 39%, #8a7c62 43%, #d5c8ac 45.5%, #ece3cd 48.5%, #d5c8ac 51.5%, #8a7c62 54%, #3a3327 58%, #141312 62%, #141312 100% ); background-size: 340% 100%; background-position: 90% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* KEIN drop-shadow. Die Referenz setzt einen weichen Schein, aber sie steht auf fast schwarzem Grund — dort wirkt er wie Licht. Auf dem hellen Foto hier legt derselbe Schein einen Schleier ueber die Buchstaben und macht sie unscharf. Ohne Filter sind die Worte exakt so scharf wie die schwarzen daneben. Die Lesbarkeit traegt der Grundton selbst: die dunkelsten Stopps liegen bei 4,85:1 und 3,92:1. */ animation-duration: 7s; animation-timing-function: linear; /* gleichmaessiges Tempo, sonst bremst das Licht am Wortende ab und der Uebergang zum naechsten Wort wirkt wie ein zweiter Anlauf */ animation-iteration-count: infinite; will-change: background-position; } /* --------------------------------------------------------- RICHTUNG: VON LINKS NACH RECHTS Der Verlauf ist breiter als das Wort. Waechst die Position, schiebt sich das Bild nach links — der helle Kern wandert dann von rechts nach links. Fuer die Leserichtung laeuft der Wert deshalb von 100 % auf 0 %. TAKT: EIN ZUG OHNE PAUSE Das Licht laeuft in einem durch: aus "Maske ab." heraus direkt in "wahres", von dort direkt in "Leben". Kein Abstand dazwischen — jeder Lauf beginnt exakt in dem Bild, in dem der vorige endet. WARUM 90 % BIS 6 % Der Verlauf ist viermal so breit wie das Wort, der helle Kern sitzt bei 42 % davon. Rechnet man nach, wo der Kern im Wort steht, liegt er nur zwischen Position 56 % und 23 % ueberhaupt auf dem Wort — davor und danach steht er daneben. Lief die Animation von 100 % bis 0 %, verbrachte das Licht zwei Drittel der Zeit ausserhalb und es entstanden unsichtbare Luecken. Der Weg ist auf genau die Strecke gekuerzt, auf der der Strahl ueber dem Wort steht — mit Rand, damit er vorher und nachher vollstaendig daneben liegt: Position 90 % bis 6 %. Jetzt laeuft das Licht die ganze Laufzeit ueber sichtbar durchs Wort. Alle drei teilen denselben 7-Sekunden-Takt. Die Laufzeiten haengen an den gemessenen Wortbreiten (279 / 205 / 175 px), damit das Tempo ueberall gleich ist: rund 140 Pixel je Sekunde. Maske ab. 0,00 – 1,99 s wahres 1,99 – 3,46 s Leben 3,46 – 4,71 s Ruhe bis 7 s --------------------------------------------------------- */ body.hologramm .holo { animation-name: holo-lauf-1; } body.hologramm .holo--2 { animation-name: holo-lauf-2; } body.hologramm .holo--3 { animation-name: holo-lauf-3; } @keyframes holo-lauf-1 { 0% { background-position: 90% 0; } 28.5% { background-position: 6% 0; } 100% { background-position: 6% 0; } } @keyframes holo-lauf-2 { 0%, 28.5% { background-position: 90% 0; } 49.4% { background-position: 6% 0; } 100% { background-position: 6% 0; } } @keyframes holo-lauf-3 { 0%, 49.4% { background-position: 90% 0; } 67.2% { background-position: 6% 0; } 100% { background-position: 6% 0; } } /* --------------------------------------------------------- DIE RUHIGEN WORTE IN CHAMPAGNER "Fang an, dein" und "zu leben." tragen kein Licht, sondern nur die Farbe. Der Ton liegt bei 3,92:1 gegen die hellste Stelle des Hero-Fotos und damit ueber den 3,0:1, die eine grosse Ueberschrift braucht. --------------------------------------------------------- */ body.hologramm .champ { font-style: normal; color: #7a6e58; } /* --------------------------------------------------------- AUF DEM ANTHRAZIT-HERO GEDREHT Der Grundton oben ist Schwarz — auf dunklem Grund waere die Ueberschrift damit unsichtbar. Hier kippt deshalb nur die Farbskala: der Grundton wird hell, das Band laeuft von dort nach strahlend statt von Schwarz nach Champagner. ACHTUNG BEI AENDERUNGEN OBEN: Ueberschrieben wird nur `background-image`. Breite (340 %), Position und Keyframes kommen weiter aus der Grundregel — die STOPP-POSITIONEN hier muessen deshalb exakt denen oben entsprechen (35/39/43/45,5/ 48,5/51,5/54/58/62 %). Wird die Geometrie oben neu eingemessen, muss diese Liste mitwandern, sonst laeuft das Band auf dem dunklen Hero versetzt. WARUM DER GRUNDTON GENAU SO BLEIBT Von Sarah ausdruecklich so gewuenscht. Ein Versuch, ihn auf #ded7c4 anzuheben, wurde zurueckgenommen — die Farbe ist der abgestimmte Ton und bleibt unveraendert. Was der "verblasste" Eindruck wirklich war, lag nicht an der Farbe, sondern an der Verlaufsgeometrie (siehe oben, 340 % statt 260 %): in der Pause lag frueher noch ein Stueck Aufhellung ueber dem Wort. Gegen #141312: Grundton 8,4:1, Lichtkern 18,2:1, die ruhigen Woerter 6,9:1. Wie in der hellen Fassung bleiben die Champagner- Woerter bewusst eine Stufe leiser als die mit dem Band. --------------------------------------------------------- */ body.hologramm .hero--ink .holo { background-image: linear-gradient( 96deg, #b8ae97 0%, #b8ae97 35%, #c9c0a9 39%, #ded5bd 43%, #f2ecda 45.5%, #fffdf6 48.5%, #f2ecda 51.5%, #ded5bd 54%, #c9c0a9 58%, #b8ae97 62%, #b8ae97 100% ); } body.hologramm .hero--ink .champ { color: #a89d84; } /* --------------------------------------------------------- RUHE STATT BEWEGUNG Der Champagnerton bleibt, das Band steht still. --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.hologramm .holo { animation: none; background-position: 6% 0; } } }