/* Natural High · Das Partnerband --------------------------------------------------------------------------- Chris am 24.08.: „ein Partner-Logokarussell noch auf die Landingpage ... schön weiter unten, mehr nach der Hälfte." Dieselbe Sprache wie das Ortsband weiter oben: ein Streifen, der von rechts nach links zieht, an beiden Seiten weich ausläuft und beim Berühren stehenbleibt. Nur leiser - Namen sind keine Bilder. ⚠️ WARUM WORTE UND KEINE BILDER (noch). Die Vorlagen aus dem CorpoHealth-Band sind JPGs mit eingebackenem Grund: zwei auf Weiß, eins auf Dunkelgrau, eins auf einem Pastellverlauf. Auf einer Seite, die zwischen Hell und Dunkel wechselt, kann so ein Bild nie beides sein. Sobald freigestellte PNGs oder SVGs da sind, wird aus einem ein im
- die Regeln dafür stehen unten und bleiben stehen. -------------------------------------------------------------------------- */ .partner-band{ width:100%; /* Luft darum, nicht darin - ohne Kästen ist es nur eine Zeile. */ margin:clamp(2.6rem,8vh,4.4rem) 0; overflow:hidden; --rand:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 5%, rgba(0,0,0,.8) 11%, #000 19%, #000 81%, rgba(0,0,0,.8) 89%, rgba(0,0,0,.35) 95%, transparent 100%); -webkit-mask-image:var(--rand); mask-image:var(--rand); } .partner-titel{ margin:0 0 clamp(1rem,2.6vh,1.5rem); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-dim); opacity:.45; text-align:center; } .partner-lauf{ display:flex; align-items:center; width:max-content; gap:clamp(2.4rem,6vw,4.5rem); will-change:transform; animation:partner-links var(--partner-dauer, 52s) linear infinite; } .partner-band:hover .partner-lauf, .partner-band:focus-within .partner-lauf{ animation-play-state:paused } /* Der Name in der Schrift der Seite. Kein Kasten, kein Grund - eine Zeile, die sich einreiht, statt zu rufen. */ .partner-wort{ flex:0 0 auto; font-size:clamp(.72rem,2vw,.92rem); font-weight:300; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); opacity:.5; white-space:nowrap; transition:opacity .7s ease, color .7s ease; } .partner-band:hover .partner-wort{ opacity:.85; color:var(--fg) } /* ---- Für später: ein echtes Logo ------------------------------------------ Wenn eine freigestellte Datei da ist, steht sie hier drin und nimmt dieselbe Höhe wie die Worte daneben. */ .partner-feld{ flex:0 0 auto; display:grid; place-items:center; padding:.4rem .7rem; border-radius:9px; /* Ein sehr leiser Grund, damit der eingebackene Rand der Datei wie Teil des Feldes aussieht statt wie ein Fehler - in beiden Welten. */ background:rgba(var(--schleier),.045); transition:background .7s ease; } .partner-band:hover .partner-feld{ background:rgba(var(--schleier),.08) } .partner-feld img{ /* ⚠️ Die Hoehe steht HIER, nicht als height:100% im Feld: Ein Prozentwert loest in einem Grid-Feld nicht auf, das Bild kam in Originalgroesse heraus - 312px breit quer ueber die Seite. */ height:clamp(1.4rem,3.4vw,1.9rem); width:auto; display:block; object-fit:contain; border-radius:5px; opacity:.55; filter:saturate(.8); transition:opacity .7s ease, filter .7s ease; } .partner-band:hover .partner-feld img{ opacity:.92; filter:saturate(1) } /* Von rechts nach links. Die zweite Hälfte ist die erste noch einmal - erst dadurch ist der Sprung von -50 % zurück auf 0 unsichtbar. */ @keyframes partner-links{ from{ transform:translate3d(0,0,0) } to { transform:translate3d(-50%,0,0) } } @media (prefers-reduced-motion: reduce){ .partner-lauf{ animation:none } } /* ---- Ein Logo, das immer Dunkelheit hinter sich braucht -------------------- Chris am 24.08.: „Klangtherapie ist ein weißes transparentes Logo, deswegen bitte dark bg dahinter." Ein freigestelltes Weiß hat kein eigenes Feld - es verschwindet auf hellem Grund vollständig. Es bekommt deshalb als einziges einen dunklen Kasten, und zwar in BEIDEN Welten: Im Dunkeln fällt er nicht auf, im Hellen ist er das, was das Logo überhaupt sichtbar macht. ⚠️ Der Kasten trägt --bg NICHT, denn --bg kippt mit. Er hält seinen dunklen Ton fest - sonst wäre das Logo im hellen Modus wieder weg. */ .partner-feld.partner-dunkel{ background:#14181d; padding:.42rem .62rem; border-radius:9px; } .partner-band:hover .partner-feld.partner-dunkel{ background:#191e24 } .partner-feld.partner-dunkel img{ /* Das Zeichen ist quadratisch und wirkt bei gleicher Höhe größer als die Wortmarken daneben - deshalb ein Stück kleiner. */ height:clamp(1.05rem,2.6vw,1.45rem); opacity:.72; } .partner-band:hover .partner-feld.partner-dunkel img{ opacity:1 } /* ---- Wenn ein Partner eine Adresse hat ------------------------------------- Chris am 24.08.: „verknüpfen, Link mit neuem Tab." Aus dem wird dann ein mit derselben Klasse - die Gestaltung bleibt, es kommt nur der Weg dazu. Beim Berühren hebt sich das Feld einen Hauch: Das ist der einzige Unterschied zwischen etwas, das man ansehen kann, und etwas, das irgendwohin führt. */ a.partner-feld, a.partner-wort{ text-decoration:none; color:inherit; transition:opacity .7s ease, color .7s ease, transform .5s cubic-bezier(.22,.61,.36,1), background .7s ease; } a.partner-feld:hover, a.partner-wort:hover{ transform:translateY(-2px) } a.partner-feld:focus-visible, a.partner-wort:focus-visible{ outline:1px solid rgba(var(--azur-teile),.6); outline-offset:4px; border-radius:9px; } /* ---- Und das Gegenstück: schwarz auf transparent -------------------------- Chris am 24.08. zum Fusion-Logo: „das mit schwarzer Schrift, also weißer BG bitte." Dieselbe Überlegung wie bei .partner-dunkel, nur andersherum: Ein Zeichen in Schwarz braucht Helligkeit hinter sich, und die darf nicht mitkippen - sonst verschwindet es im dunklen Modus. */ .partner-feld.partner-weiss{ background:#f4f2ee; padding:.42rem .7rem; border-radius:9px; } .partner-band:hover .partner-feld.partner-weiss{ background:#fbfaf7 } .partner-feld.partner-weiss img{ opacity:.82 } .partner-band:hover .partner-feld.partner-weiss img{ opacity:1 }