Alle TikTok-Buttons/-Karten site-weit im neuen TikTok-Farbschema

Der neue .btn-tiktok-Stil (Cyan #25F4EE + Pink/Rot #FE2C55 Polarlicht,
bisher nur auf vanvan.html/dogfather.html) wird jetzt konsequent überall
angewendet, wo es einen echten TikTok-Link gibt:
- profil.html: TikTok-Social-Link (Diene/Miss/Ghost) nutzt .btn-tiktok
  statt generischem .btn-outline, andere Plattformen unverändert.
- streamplan.html: "Zur Dogi TikTok-Seite"-Button jetzt .btn-tiktok.
- links.html: neue .card-tiktok-Variante wendet denselben Polarlicht-
  Mechanismus auf die TikTok-Karte im Karten-Grid an (Kartenform bleibt
  erhalten, damit das Grid nicht durcheinanderkommt), alle anderen
  Plattform-Karten (Instagram/Snapchat/Discord/Shop/Bewerben) bleiben
  im normalen Karten-Stil.
Bewusst NUR TikTok — keine andere Plattform bekommt diese Farben.
This commit is contained in:
2026-08-02 13:38:16 +02:00
parent 8048d03fad
commit 7d365e3c48
4 changed files with 63 additions and 3 deletions
+48
View File
@@ -510,6 +510,54 @@ header.site-header {
.btn-tiktok::before, .btn-tiktok::after { animation: none; }
}
/* TikTok-Karte (z.B. links.html-Übersicht): gleicher Polarlicht-
Mechanismus wie .btn-tiktok, nur auf die normale .card-Form angewendet,
damit sie sich in ein Karten-Grid mit anderen Plattformen einfügt.
Bewusst NUR für die TikTok-Karte, keine andere Plattform-Karte. */
.card-tiktok {
position: relative;
isolation: isolate;
overflow: hidden;
background: #0b0e14;
border-color: rgba(255, 255, 255, .16);
}
.card-tiktok h3, .card-tiktok p {
position: relative;
z-index: 2;
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
}
.card-tiktok::before {
content: "";
position: absolute;
inset: -60%;
z-index: 0;
background:
radial-gradient(circle at 22% 30%, rgba(37, 244, 238, .85), transparent 55%),
radial-gradient(circle at 78% 68%, rgba(254, 44, 85, .85), transparent 58%);
filter: blur(11px) saturate(1.35);
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
}
.card-tiktok::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
background-size: 240% 100%;
mix-blend-mode: overlay;
animation: nav-cta-shimmer 4.5s linear infinite;
pointer-events: none;
}
.card-tiktok:hover {
border-color: rgba(255, 255, 255, .32);
box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
0 0 22px rgba(37, 244, 238, .3),
0 0 22px rgba(254, 44, 85, .28);
}
@media (prefers-reduced-motion: reduce) {
.card-tiktok::before, .card-tiktok::after { animation: none; }
}
.nav-toggle {
display: none;
background: none;