VanVan-Seite: Fotos getauscht (echtes Foto <-> Team-Dogi-Grafik), Silber-Button aufgewertet und Buttons vergrößert
- 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
This commit is contained in:
+69
-29
@@ -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):
|
||||
|
||||
+3
-3
@@ -45,7 +45,7 @@
|
||||
<section class="section-tight">
|
||||
<div class="container grid grid-2" style="align-items:center;grid-template-columns:1.25fr 1fr;">
|
||||
<div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
|
||||
<img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" />
|
||||
<img src="assets/img/vanvan-team-2.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 data-i18n="vv_wer_h2">Wer ich bin</h2>
|
||||
@@ -53,7 +53,7 @@
|
||||
<p data-i18n="vv_wer_tiktok">Auf TikTok findet ihr mich unter:</p>
|
||||
<a class="btn-tiktok" href="https://www.tiktok.com/@o.o.vanessa.o.o" target="_blank" rel="noopener" style="margin-bottom:.7rem;"><span>TikTok</span></a>
|
||||
<br />
|
||||
<a class="btn-silver" href="#" aria-disabled="true" onclick="return false;" style="margin-bottom:1rem;"><span data-i18n="vv_coming_soon">Coming soon…</span></a>
|
||||
<a class="btn-silver" href="#" aria-disabled="true" onclick="return false;" style="margin-bottom:1rem;"><span class="btn-silver-spark" aria-hidden="true">✨</span><span class="btn-silver-text" data-i18n="vv_coming_soon">Coming soon…</span><span class="btn-silver-spark" aria-hidden="true">✨</span></a>
|
||||
<p data-i18n="vv_wer_1" style="margin-top:1.4rem;">Ich bin ein Mensch, der mit dem Herzen denkt, unglaublich loyal ist und für die Menschen kämpft, die ihm wichtig sind.</p>
|
||||
<p data-i18n="vv_wer_2">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.</p>
|
||||
<p data-i18n="vv_wer_3">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.</p>
|
||||
@@ -134,7 +134,7 @@
|
||||
<p data-i18n="vv_team_7">Sondern weil ich es von Herzen möchte.</p>
|
||||
</div>
|
||||
<div class="collage-photo frame-lila" style="aspect-ratio:auto;border-radius:var(--radius);">
|
||||
<img src="assets/img/vanvan-team-2.jpg" alt="VanVan" style="width:100%;height:auto;display:block;" />
|
||||
<img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:auto;display:block;" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user