From f3e465736c3a86af43a0be64b579df3794da33de Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 3 Aug 2026 02:08:36 +0200 Subject: [PATCH] streamer.html: neuer "Casperlino"-Button unter dem Casper-Text, verlinkt zu casper.html MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Neue CSS-Klasse .btn-legendary: eigener, besonders edler Button-Stil in Babyblau + Silber (Chrome-Textglanz, rotierender Rand, Sparkles, pulsierender Halo-Glow) — gleiche Machart wie .btn-silver, aber in der Marken-Akzentfarbe und größer/kräftiger für einen "legendären" Auftritt. Neuer i18n-Key str_casperlino_btn (Name bleibt in allen 5 Sprachen gleich). --- assets/css/main.css | 99 ++++++++++++++++++++++++++++++++++++++ assets/js/i18n-streamer.js | 4 ++ streamer.html | 1 + 3 files changed, 104 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index 51e3646..9c35464 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -705,6 +705,105 @@ header.site-header { } } +/* "Legendärer" Button (z.B. Casperlino-Link auf streamer.html): babyblau + + Silber, gleiche edle Machart wie .btn-silver (Chrome-Textglanz, + rotierender Rand, Sparkles, pulsierender Halo), aber größer, kräftiger + und in der Marken-Akzentfarbe --accent (Babyblau) statt neutralem Grau — + soll bewusst wie ein besonderes, "episches" Highlight wirken. */ +.btn-legendary { + position: relative; + isolation: isolate; + overflow: visible; + display: inline-flex; + align-items: center; + gap: .6rem; + padding: 1.05rem 2.7rem; + border-radius: 999px; + color: #fff; + font-weight: 800; + font-size: 1.18rem; + letter-spacing: .02em; + background: linear-gradient(160deg, #101b20, #0b0e14 55%, #16232a); + border: 1px solid rgba(143, 217, 234, .35); + text-decoration: none; + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; + box-shadow: 0 8px 22px rgba(0, 0, 0, .45), + 0 0 0 1px rgba(143, 217, 234, .06) inset; + animation: btn-legendary-halo 3s ease-in-out infinite; +} +.btn-legendary-text { + position: relative; + z-index: 2; + background: linear-gradient(100deg, #8fd9ea 0%, #ffffff 26%, #c7ccd1 42%, #8fd9ea 58%, #ffffff 76%, #c7ccd1 100%); + background-size: 260% 100%; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); + animation: btn-legendary-text-shine 3.4s linear infinite; +} +.btn-legendary-spark { + position: relative; + z-index: 2; + display: inline-block; + font-size: .95em; + filter: drop-shadow(0 0 5px rgba(143, 217, 234, .9)); + animation: btn-legendary-twinkle 1.7s ease-in-out infinite; +} +.btn-legendary-spark:last-child { animation-delay: .85s; } +.btn-legendary::before { + content: ""; + position: absolute; + inset: -1.5px; + z-index: 0; + border-radius: inherit; + padding: 2px; + background: conic-gradient(from 0deg, #8fd9ea, #eef1f5, #c7ccd1, #ffffff, #8fd9ea, #7d8794, #8fd9ea); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + animation: btn-legendary-shine-rotate 4.5s linear infinite; +} +.btn-legendary::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + border-radius: inherit; + background: linear-gradient(115deg, transparent 32%, rgba(143, 217, 234, .55) 49%, transparent 66%); + background-size: 240% 100%; + mix-blend-mode: overlay; + animation: nav-cta-shimmer 4s linear infinite; + pointer-events: none; +} +.btn-legendary:hover { + transform: translateY(-2px) scale(1.03); + border-color: rgba(143, 217, 234, .55); + box-shadow: 0 14px 34px rgba(0, 0, 0, .5), + 0 0 30px rgba(143, 217, 234, .5), + 0 0 30px rgba(199, 204, 209, .35); +} +@keyframes btn-legendary-shine-rotate { + to { transform: rotate(360deg); } +} +@keyframes btn-legendary-text-shine { + 0% { background-position: 0% 50%; } + 100% { background-position: 260% 50%; } +} +@keyframes btn-legendary-twinkle { + 0%, 100% { opacity: .5; transform: scale(.85) rotate(0deg); } + 50% { opacity: 1; transform: scale(1.2) rotate(15deg); } +} +@keyframes btn-legendary-halo { + 0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(143, 217, 234, .22); } + 50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(143, 217, 234, .5); } +} +@media (prefers-reduced-motion: reduce) { + .btn-legendary, .btn-legendary::before, .btn-legendary::after, .btn-legendary-text, .btn-legendary-spark { + animation: none; + } +} + /* Kompakter Polarlicht-Button für Karten (z.B. Marinas Team-Modi-Karte → direkter Link zur Manager-Seite): exakt derselbe Mechanismus wie .btn-tiktok, nur kleiner und in den Spicy-Media-Markenfarben diff --git a/assets/js/i18n-streamer.js b/assets/js/i18n-streamer.js index 918475b..cf84a76 100644 --- a/assets/js/i18n-streamer.js +++ b/assets/js/i18n-streamer.js @@ -155,6 +155,10 @@ window.I18N_PAGE = { fr: "Sur bien des points, Casper ressemble beaucoup à son papa : calme, gentil, parfois complètement tête en l'air et toujours partant pour des bêtises. Mais dès qu'il s'agit de personnes ou de choses qu'il aime, il montre son côté protecteur.", pt: "Em muitos aspectos, Casper é igualzinho ao papai dele: calmo, amoroso, às vezes completamente distraído e sempre disposto a fazer travessuras. Mas assim que se trata de pessoas ou coisas que ele ama, ele mostra seu lado protetor.", }, + str_casperlino_btn: { + de: "Casperlino", "de-CH": "Casperlino", + en: "Casperlino", fr: "Casperlino", pt: "Casperlino", + }, str_casper_quote: { de: "Was Casper liebt, beschützt er mit seinem Leben.", "de-CH": "Was de Casper liebt, beschützt er mit sim Läbe.", diff --git a/streamer.html b/streamer.html index d16973d..097af57 100644 --- a/streamer.html +++ b/streamer.html @@ -81,6 +81,7 @@

Ein ganz besonderer Teil meines Lebens und auch meiner Community ist mein Husky Casper.

Casper wurde adoptiert und stammt aus einem Kriegsgebiet in der Ukraine. Trotz allem, was er erlebt hat, besitzt er ein unglaublich großes und liebevolles Herz.

In vielen Dingen ist Casper genauso wie sein Papa: ruhig, lieb, manchmal völlig verpeilt und immer für Dummheiten zu haben. Doch sobald es um Menschen oder Dinge geht, die er liebt, zeigt er seine beschützende Seite.

+ Casperlino