From 1f9537e5c91e6b236a5883c1a5ee89bf120e4867 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sun, 2 Aug 2026 19:52:11 +0200 Subject: [PATCH] =?UTF-8?q?VanVan-Seite:=20Fotos=20getauscht=20(echtes=20F?= =?UTF-8?q?oto=20<->=20Team-Dogi-Grafik),=20Silber-Button=20aufgewertet=20?= =?UTF-8?q?und=20Buttons=20vergr=C3=B6=C3=9Fert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hauptfoto oben ("Wer ich bin") zeigt jetzt das echte VanVan-Foto (vorher: illustrierte Team-Dogi-Grafik), diese wandert dafür in den "Was Team Dogi für mich bedeutet"-Bereich - .btn-silver ("Coming soon") komplett neu gestaltet: Chrome-Metallic- Textverlauf, rotierender Metallrand-Schimmer, funkelnde Sparkle-Akzente, pulsierender Halo-Glow statt reiner Farbkopie von .btn-tiktok - .btn-tiktok und .btn-silver vergrößert (Padding/Schrift), wirkt sich automatisch auf alle TikTok-Buttons site-weit aus --- assets/css/main.css | 98 +++++++++++++++++++++++++++++++-------------- vanvan.html | 6 +-- 2 files changed, 72 insertions(+), 32 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 2127dcf..1a5d0a1 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -548,12 +548,12 @@ header.site-header { overflow: hidden; display: inline-flex; align-items: center; - gap: .4rem; - padding: .6rem 1.5rem; + gap: .5rem; + padding: .85rem 2.1rem; border-radius: 999px; color: #fff; font-weight: 700; - font-size: .95rem; + font-size: 1.08rem; background: #0b0e14; border: 1px solid rgba(255, 255, 255, .16); text-decoration: none; @@ -598,63 +598,103 @@ header.site-header { .btn-tiktok::before, .btn-tiktok::after { animation: none; } } -/* Silberner "Coming soon"-Button: exakt derselbe Polarlicht-Mechanismus - wie .btn-tiktok, nur in gedämpftem Silber statt Markenfarben — für - Dinge, die noch nicht live sind (z.B. VanVans zweiter Kanal). */ +/* Silberner "Coming soon"-Button: eigener, deutlich edlerer Look als + .btn-tiktok — echtes Chrome-Metallic-Textglitzern, rotierender + Metallrand-Schimmer, zwei funkelnde Sparkle-Akzente und ein sanft + pulsierender Halo-Glow. Für Dinge, die noch nicht live sind + (z.B. VanVans zweiter Kanal), aber trotzdem besonders auffallen sollen. */ .btn-silver { position: relative; isolation: isolate; - overflow: hidden; + overflow: visible; display: inline-flex; align-items: center; - gap: .4rem; - padding: .6rem 1.5rem; + gap: .55rem; + padding: .95rem 2.4rem; border-radius: 999px; color: #fff; - font-weight: 700; - font-size: .95rem; - background: #0b0e14; - border: 1px solid rgba(255, 255, 255, .16); + font-weight: 800; + font-size: 1.1rem; + letter-spacing: .02em; + background: linear-gradient(160deg, #14161c, #0b0e14 55%, #1a1d24); + border: 1px solid rgba(255, 255, 255, .22); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; - box-shadow: 0 6px 18px rgba(0, 0, 0, .35); + box-shadow: 0 6px 18px rgba(0, 0, 0, .4), + 0 0 0 1px rgba(255, 255, 255, .03) inset; + animation: btn-silver-halo 3.2s ease-in-out infinite; } -.btn-silver span { +.btn-silver-text { position: relative; z-index: 2; - text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35); + background: linear-gradient(100deg, #9aa4b2 0%, #ffffff 28%, #e6ebf2 42%, #c7ccd1 58%, #ffffff 76%, #9aa4b2 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-silver-text-shine 3.6s linear infinite; } +.btn-silver-spark { + position: relative; + z-index: 2; + display: inline-block; + font-size: .9em; + filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); + animation: btn-silver-twinkle 1.8s ease-in-out infinite; +} +.btn-silver-spark:last-child { animation-delay: .9s; } .btn-silver::before { content: ""; position: absolute; - inset: -60%; + inset: -1px; z-index: 0; - background: - radial-gradient(circle at 25% 30%, rgba(230, 235, 242, .85), transparent 55%), - radial-gradient(circle at 75% 70%, rgba(190, 200, 215, .7), transparent 58%); - filter: blur(9px) saturate(1.2); - animation: nav-cta-aurora 9s ease-in-out infinite alternate; + border-radius: inherit; + padding: 1.5px; + background: conic-gradient(from 0deg, #eef1f5, #9aa4b2, #ffffff, #c7ccd1, #7d8794, #eef1f5); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + animation: btn-silver-shine-rotate 5s linear infinite; } .btn-silver::after { content: ""; position: absolute; inset: 0; z-index: 1; - background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%); + border-radius: inherit; + background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 49%, transparent 63%); background-size: 240% 100%; mix-blend-mode: overlay; animation: nav-cta-shimmer 4.5s linear infinite; pointer-events: none; } .btn-silver:hover { - transform: translateY(-1px); - border-color: rgba(255, 255, 255, .32); - box-shadow: 0 10px 26px rgba(0, 0, 0, .45), - 0 0 22px rgba(220, 226, 235, .3), - 0 0 22px rgba(190, 200, 215, .25); + transform: translateY(-1px) scale(1.02); + border-color: rgba(255, 255, 255, .4); + box-shadow: 0 10px 30px rgba(0, 0, 0, .5), + 0 0 26px rgba(230, 235, 242, .45), + 0 0 26px rgba(190, 200, 215, .35); +} +@keyframes btn-silver-shine-rotate { + to { transform: rotate(360deg); } +} +@keyframes btn-silver-text-shine { + 0% { background-position: 0% 50%; } + 100% { background-position: 260% 50%; } +} +@keyframes btn-silver-twinkle { + 0%, 100% { opacity: .45; transform: scale(.85) rotate(0deg); } + 50% { opacity: 1; transform: scale(1.15) rotate(15deg); } +} +@keyframes btn-silver-halo { + 0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 14px rgba(200, 208, 220, .18); } + 50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 26px rgba(230, 235, 242, .4); } } @media (prefers-reduced-motion: reduce) { - .btn-silver::before, .btn-silver::after { animation: none; } + .btn-silver, .btn-silver::before, .btn-silver::after, .btn-silver-text, .btn-silver-spark { + animation: none; + } } /* Plattform-Karten mit echten Markenfarben (z.B. links.html-Übersicht): diff --git a/vanvan.html b/vanvan.html index c779ed3..ccbd0c4 100644 --- a/vanvan.html +++ b/vanvan.html @@ -45,7 +45,7 @@
- VanVan + VanVan

Wer ich bin

@@ -53,7 +53,7 @@

Auf TikTok findet ihr mich unter:

TikTok
- Coming soon… + Coming soon…

Ich bin ein Mensch, der mit dem Herzen denkt, unglaublich loyal ist und für die Menschen kämpft, die ihm wichtig sind.

Wenn ich zu jemandem Vertrauen aufgebaut habe, gibt es für mich kein „halb“. Dann bin ich da – unabhängig davon, ob gerade gute oder schwierige Zeiten herrschen.

Freundschaft, Zusammenhalt und Ehrlichkeit bedeuten mir mehr als alles andere. Für mich zählen keine Fassaden, sondern der Charakter eines Menschen. Wenn ich jemanden unterstütze, dann nicht, weil es von mir erwartet wird, sondern weil ich aus voller Überzeugung hinter diesem Menschen stehe.

@@ -134,7 +134,7 @@

Sondern weil ich es von Herzen möchte.

- VanVan + VanVan