diff --git a/assets/css/main.css b/assets/css/main.css index fc815df..2127dcf 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -598,6 +598,65 @@ 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). */ +.btn-silver { + position: relative; + isolation: isolate; + overflow: hidden; + display: inline-flex; + align-items: center; + gap: .4rem; + padding: .6rem 1.5rem; + border-radius: 999px; + color: #fff; + font-weight: 700; + font-size: .95rem; + background: #0b0e14; + border: 1px solid rgba(255, 255, 255, .16); + 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); +} +.btn-silver span { + position: relative; + z-index: 2; + text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35); +} +.btn-silver::before { + content: ""; + position: absolute; + inset: -60%; + 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; +} +.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%); + 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); +} +@media (prefers-reduced-motion: reduce) { + .btn-silver::before, .btn-silver::after { animation: none; } +} + /* Plattform-Karten mit echten Markenfarben (z.B. links.html-Übersicht): gleicher Polarlicht-Mechanismus wie .btn-tiktok, aber generisch über --brand-1/--brand-2 (+ optional --brand-3) einstellbar, damit jede diff --git a/assets/js/i18n-vanvan.js b/assets/js/i18n-vanvan.js index 3968e57..66ff2f1 100644 --- a/assets/js/i18n-vanvan.js +++ b/assets/js/i18n-vanvan.js @@ -32,6 +32,10 @@ window.I18N_PAGE = { fr: `Vous me trouverez sur TikTok sous :`, pt: `Vocês me encontram no TikTok em:`, }, + vv_coming_soon: { + de: `Coming soon…`, "de-CH": `Coming soon…`, + en: `Coming soon…`, fr: `Coming soon…`, pt: `Coming soon…`, + }, vv_wer_1: { de: "Ich bin ein Mensch, der mit dem Herzen denkt, unglaublich loyal ist und für die Menschen kämpft, die ihm wichtig sind.", "de-CH": "Ich bin en Mönsch, wo mit em Herz dänkt, unglaublich loyal isch und für die Mönsche kämpft, wo ihm wichtig sind.", diff --git a/vanvan.html b/vanvan.html index 5df76d0..c779ed3 100644 --- a/vanvan.html +++ b/vanvan.html @@ -21,6 +21,13 @@ + @@ -36,7 +43,7 @@
-
+
VanVan
@@ -44,7 +51,9 @@

Wer ich bin

Huhu, hier ist VanVan, die rechte Hand von Dogi.

Auf TikTok findet ihr mich unter:

- TikTok + TikTok +
+ 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.