bewerben.html: Bewerbungs-Karten komplett neu inszeniert ("ultra von ultra"), Farben unverändert
Neue Klasse .card-duel: rotierender Farbring exakt am Kartenrand, driftender Aurora-Glow im Hintergrund, leuchtende Icon-Badges statt schlichter Rahmen-Tags, dramatischer Hover-Lift mit Farbexplosion. Trennwand + Blitz-Emblem in der Mitte zum pulsierenden "Energiekern" mit Doppelring und fließendem Lichtstrom aufgewertet. Seitenlabels bekommen einen leuchtenden Unterstrich. Alle Effekte nutzen bewusst dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt waren (Community weiterhin babyblau/lila, Agentur weiterhin rot/orange vom Spicy-Media-Theme) — Farbwelt bleibt exakt erhalten, nur die Machart ist komplett neu.
This commit is contained in:
@@ -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
|
||||
========================================================================== */
|
||||
|
||||
Reference in New Issue
Block a user