diff --git a/assets/css/main.css b/assets/css/main.css index 728a87d..7141b8f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2206,6 +2206,149 @@ body.mit-hintergrund::after { } } +/* ========================================================================== + .card-duel — "Ultra"-Überarbeitung der vier Bewerbungs-Karten auf + bewerben.html (03.08.2026, auf Wunsch: "extrem geil, ultra von ultra, + trotzdem professionell", Farben MÜSSEN gleich bleiben). Nutzt bewusst + dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt + sind (Community-Karten inline babyblau/lila, Agentur-Karten automatisch + rot/orange vom Spicy-Media-Theme) — dadurch bleibt die Farbwelt exakt + erhalten, nur die Machart wird komplett neu: rotierender Farbring um + die Karte, driftender Aurora-Glow im Hintergrund, leuchtendes Icon- + Badge statt schlichtem Rahmen-Tag, dramatischer Hover-Lift mit + Farbexplosion. ========================================================================== */ +.card-duel { + position: relative; + isolation: isolate; + overflow: hidden; + background: + radial-gradient(140% 120% at 12% -15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%), + var(--card-bg); + border: 1px solid rgba(255, 255, 255, .14); + border-radius: calc(var(--radius) + 6px); + padding: 2.1rem 1.9rem 2.3rem; + transition: transform .35s cubic-bezier(.2, .8, .2, 1.25), box-shadow .35s ease, border-color .3s ease; + box-shadow: 0 14px 34px rgba(0, 0, 0, .5); +} +/* Rotierender, dünner Farbring exakt am Kartenrand entlang */ +.card-duel::before { + content: ""; + position: absolute; + inset: -1.5px; + z-index: 0; + border-radius: inherit; + padding: 2px; + background: conic-gradient(from 0deg, + var(--accent) 0deg, var(--accent-2) 90deg, transparent 150deg, transparent 210deg, var(--accent) 270deg, var(--accent) 360deg); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: .6; + animation: card-duel-rotate 7s linear infinite; +} +/* Driftender Farbschein-Nebel im Hintergrund, hinter dem Text */ +.card-duel::after { + content: ""; + position: absolute; + inset: -45%; + z-index: 0; + background: + radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%), + radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 58%); + filter: blur(26px) saturate(1.35); + opacity: .45; + animation: nav-cta-aurora 8s ease-in-out infinite alternate; + pointer-events: none; +} +.card-duel > * { position: relative; z-index: 2; } +.card-duel .tag { + display: inline-flex; + align-items: center; + gap: .35rem; + background: color-mix(in srgb, var(--accent) 20%, transparent); + border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); + color: #fff; + font-weight: 700; + text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, black 20%); + box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); +} +.card-duel h3 { + font-size: 1.55rem; + text-shadow: 0 2px 12px rgba(0, 0, 0, .5); +} +.card-duel p { font-size: 1.04rem; } +.card-duel:hover { + transform: translateY(-9px) scale(1.025); + border-color: color-mix(in srgb, var(--accent) 70%, transparent); + box-shadow: 0 26px 54px rgba(0, 0, 0, .6), + 0 0 44px color-mix(in srgb, var(--accent) 50%, transparent), + 0 0 44px color-mix(in srgb, var(--accent-2) 40%, transparent); +} +@keyframes card-duel-rotate { to { transform: rotate(360deg); } } +@media (prefers-reduced-motion: reduce) { + .card-duel::before, .card-duel::after { animation: none; } +} + +/* Trennwand + Emblem: von schlichtem Steg zu einem pulsierenden + "Energiekern" mit Doppelring und fließendem Lichtstrom aufgewertet. */ +.bewerben-wall { + background-size: 100% 220%; + animation: bewerben-wall-flow 3.4s linear infinite; +} +@keyframes bewerben-wall-flow { + 0% { background-position: 0 20%; } + 100% { background-position: 0 -180%; } +} +.bewerben-wall span { + width: 58px; + height: 58px; + font-size: 1.5rem; + box-shadow: 0 0 0 3px rgba(10, 12, 16, .75), + 0 0 0 5px rgba(255, 255, 255, .16), + 0 0 26px rgba(143, 217, 234, .5), + 0 0 26px rgba(217, 74, 92, .45); + animation: bewerben-emblem-pulse 2.4s ease-in-out infinite; +} +@keyframes bewerben-emblem-pulse { + 0%, 100% { + transform: translate(-50%, -50%) scale(1); + box-shadow: 0 0 0 3px rgba(10, 12, 16, .75), 0 0 0 5px rgba(255, 255, 255, .16), + 0 0 26px rgba(143, 217, 234, .5), 0 0 26px rgba(217, 74, 92, .45); + } + 50% { + transform: translate(-50%, -50%) scale(1.1); + box-shadow: 0 0 0 3px rgba(10, 12, 16, .75), 0 0 0 6px rgba(255, 255, 255, .28), + 0 0 40px rgba(143, 217, 234, .7), 0 0 40px rgba(217, 74, 92, .6); + } +} +@media (prefers-reduced-motion: reduce) { + .bewerben-wall, .bewerben-wall span { animation: none; } +} +/* Seitenlabels: leuchtender Unterstrich statt schlichtem Text */ +.bewerben-side-label { + position: relative; + padding-bottom: .55rem; + font-size: .8rem; +} +.bewerben-side-label::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 64px; + height: 2px; + border-radius: 2px; +} +.bewerben-side-blau .bewerben-side-label::after { + background: linear-gradient(90deg, transparent, #8fd9ea, transparent); + box-shadow: 0 0 10px rgba(143, 217, 234, .6); +} +.bewerben-side-rot .bewerben-side-label::after { + background: linear-gradient(90deg, transparent, #d94a5c, transparent); + box-shadow: 0 0 10px rgba(217, 74, 92, .6); +} + /* ========================================================================== TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt ========================================================================== */ diff --git a/bewerben.html b/bewerben.html index 39b4567..9339882 100644 --- a/bewerben.html +++ b/bewerben.html @@ -47,12 +47,12 @@
🩵 Community — Team Dogi - + Community

Modi werden

DogFathers persönliches Team. Chat, Community und Zusammenhalt im Alltag.

 - + Anfrage

Kooperation anfragen

Firma, Marke oder eigenes Projekt — schick deine Idee direkt an Team Dogi.

@@ -63,12 +63,12 @@
Agentur — Spicy Media 🌶️ - + Agentur

Scout werden

Finde und begleite neue Talente für DogFather als Manager.

 - + Manager-Bewerbung

Als Streamer bewerben

Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.