vanvan.html: größeres Foto, größerer Text, neuer "Coming soon"-Button
- Foto in der "Wer ich bin"-Sektion vergrößert (Grid-Spalten von 1:1 auf 1.25:1 zugunsten des Fotos). - Fließtext/Lead/Zitate/Überschriften auf der ganzen Seite spürbar größer (eigener <style>-Block, nur für diese Seite). - Neuer .btn-silver-Button-Stil (gleicher Polarlicht-Mechanismus wie .btn-tiktok, nur in Silber) direkt unter dem TikTok-Button, Text "Coming soon…" für VanVans zweiten, noch nicht gestarteten Kanal.
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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.",
|
||||
|
||||
+11
-2
@@ -21,6 +21,13 @@
|
||||
<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
|
||||
<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
|
||||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
|
||||
<style>
|
||||
/* Auf Wunsch: Text auf der ganzen VanVan-Seite größer, wirkte zu klein. */
|
||||
main p { font-size: 1.14rem; line-height: 1.85; }
|
||||
main .lead { font-size: 1.3rem; }
|
||||
main .quote { font-size: 1.2rem; }
|
||||
main h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-vanvan.jpg');--page-bg-mobile:url('/assets/img/bg-vanvan-mobile.jpg');">
|
||||
<div id="site-header"></div>
|
||||
@@ -36,7 +43,7 @@
|
||||
</section>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container grid grid-2" style="align-items:center;">
|
||||
<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;" />
|
||||
</div>
|
||||
@@ -44,7 +51,9 @@
|
||||
<h2 data-i18n="vv_wer_h2">Wer ich bin</h2>
|
||||
<p class="lead" data-i18n="vv_wer_lead">Huhu, hier ist VanVan, die rechte Hand von Dogi.</p>
|
||||
<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:1rem;"><span>TikTok</span></a>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user