diff --git a/assets/css/main.css b/assets/css/main.css index cea1760..2a4fe39 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -513,34 +513,49 @@ 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 { +/* 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 + Plattform ihre EIGENEN echten Farben bekommt, ohne den ganzen Block + pro Plattform zu duplizieren. Die konkreten Farben stehen weiter unten + in den .card--Klassen. */ +.card-brand { position: relative; isolation: isolate; overflow: hidden; background: #0b0e14; border-color: rgba(255, 255, 255, .16); + padding: 2rem 1.8rem; } -.card-tiktok h3, .card-tiktok p { +.card-brand .icon-badge, .card-brand h3, .card-brand p { position: relative; z-index: 2; +} +.card-brand h3, .card-brand p { text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35); } -.card-tiktok::before { +.card-brand .icon-badge { + display: block; + font-size: 2.4rem; + line-height: 1; + margin-bottom: .6rem; + filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); +} +.card-brand h3 { font-size: 1.5rem; } +.card-brand p { font-size: 1.05rem; margin-top: .3rem; } +.card-brand::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%); + radial-gradient(circle at 22% 28%, var(--brand-1, rgba(143, 217, 234, .85)), transparent 55%), + radial-gradient(circle at 78% 70%, var(--brand-2, rgba(139, 92, 246, .85)), transparent 58%), + radial-gradient(circle at 50% 92%, var(--brand-3, transparent), transparent 55%); filter: blur(11px) saturate(1.35); animation: nav-cta-aurora 9s ease-in-out infinite alternate; } -.card-tiktok::after { +.card-brand::after { content: ""; position: absolute; inset: 0; @@ -551,16 +566,25 @@ header.site-header { animation: nav-cta-shimmer 4.5s linear infinite; pointer-events: none; } -.card-tiktok:hover { +.card-brand: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); + 0 0 22px var(--brand-1, rgba(143, 217, 234, .3)), + 0 0 22px var(--brand-2, rgba(139, 92, 246, .28)); } @media (prefers-reduced-motion: reduce) { - .card-tiktok::before, .card-tiktok::after { animation: none; } + .card-brand::before, .card-brand::after { animation: none; } } +/* Bewusst NUR echte Plattform-/CTA-Farben, keine erfundenen: */ +.card-tiktok { --brand-1: rgba(37, 244, 238, .95); --brand-2: rgba(254, 44, 85, .95); } +.card-instagram { --brand-1: rgba(131, 58, 180, .9); --brand-2: rgba(253, 29, 29, .82); --brand-3: rgba(252, 176, 69, .55); } +.card-snapchat { --brand-1: rgba(255, 252, 0, .85); --brand-2: rgba(255, 220, 0, .45); } +.card-snapchat h3, .card-snapchat p { text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 16px rgba(0, 0, 0, .55); } +.card-discord { --brand-1: rgba(88, 101, 242, .95); --brand-2: rgba(88, 101, 242, .4); } +.card-shop { --brand-1: rgba(212, 175, 55, .85); --brand-2: rgba(255, 183, 77, .6); } +.card-bewerben { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .8); --brand-3: rgba(217, 74, 92, .5); } + .nav-toggle { display: none; background: none; diff --git a/assets/js/i18n-links.js b/assets/js/i18n-links.js index dd30c69..11eb61b 100644 --- a/assets/js/i18n-links.js +++ b/assets/js/i18n-links.js @@ -27,9 +27,13 @@ window.I18N_PAGE = { de: "Folgt in Kürze", "de-CH": "Chunnt bald", en: "Coming soon", fr: "Bientôt disponible", pt: "Em breve", }, + lk_shop_h3: { + de: "Merchandise / Shop", "de-CH": "Merchandise / Shop", + en: "Merchandise / Shop", fr: "Produits dérivés / Boutique", pt: "Produtos / Loja", + }, lk_bewerben_h3: { - de: "📝 Bewerben", "de-CH": "📝 Bewärbe", - en: "📝 Apply", fr: "📝 Postuler", pt: "📝 Candidatar-se", + de: "Bewerben", "de-CH": "Bewärbe", + en: "Apply", fr: "Postuler", pt: "Candidatar-se", }, lk_bewerben_p: { de: "Modi, Scout, Creator oder Kooperation", diff --git a/links.html b/links.html index b1c37ea..7a4313f 100644 --- a/links.html +++ b/links.html @@ -37,29 +37,35 @@