bewerben.html: Mitten-Emblem zum "Reaktorkern" umgebaut
Vorher: flacher zweifarbiger Kreis (hart 48/52 geteilt Blau/Rot) mit Blitz-Emoji. Jetzt: dunkle Kern-Mitte mit separat rotierendem Farbring dahinter (::before, conic-gradient Blau→Lila→Rot) — der Ring dreht sich, der Blitz bleibt aufrecht stehen statt mitzudrehen. Größer (60px statt 42px), stärkerer Textschatten am Blitz, kräftigerer Puls-Glow. Zwei kollidierende alte CSS-Regeln für denselben Selektor zu einer sauberen zusammengeführt.
This commit is contained in:
+35
-21
@@ -2191,23 +2191,44 @@ body.mit-hintergrund::after {
|
|||||||
transparent 100%);
|
transparent 100%);
|
||||||
box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3);
|
box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3);
|
||||||
}
|
}
|
||||||
|
/* "Reaktorkern"-Emblem: dunkle Mitte mit statischem Blitz, dahinter ein
|
||||||
|
EIGENER, separat rotierender Farbring (::before) — dadurch dreht sich
|
||||||
|
der Farbschein, ohne dass der Blitz selbst mitdreht/schief steht. */
|
||||||
.bewerben-wall span {
|
.bewerben-wall span {
|
||||||
position: absolute;
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 42px;
|
width: 60px;
|
||||||
height: 42px;
|
height: 60px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.1rem;
|
font-size: 1.65rem;
|
||||||
background: linear-gradient(135deg, #8fd9ea 0%, #8fd9ea 48%, #d94a5c 52%, #d94a5c 100%);
|
background: radial-gradient(circle at 34% 28%, #232830, #0a0c10 72%);
|
||||||
border: 2px solid rgba(255, 255, 255, .18);
|
border: 1px solid rgba(255, 255, 255, .2);
|
||||||
box-shadow: 0 0 0 6px rgba(10, 12, 16, .55),
|
text-shadow: 0 0 10px rgba(255, 214, 140, .9), 0 0 4px rgba(0, 0, 0, .6);
|
||||||
0 0 20px rgba(143, 217, 234, .4),
|
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85),
|
||||||
0 0 20px rgba(217, 74, 92, .35);
|
0 0 0 6px rgba(255, 255, 255, .14),
|
||||||
|
0 0 26px rgba(143, 217, 234, .45),
|
||||||
|
0 0 26px rgba(217, 74, 92, .4);
|
||||||
|
}
|
||||||
|
.bewerben-wall span::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -5px;
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: conic-gradient(from 0deg,
|
||||||
|
#8fd9ea 0%, #b285c9 25%, #d94a5c 50%, #b285c9 75%, #8fd9ea 100%);
|
||||||
|
filter: blur(2px) saturate(1.3);
|
||||||
|
animation: bewerben-emblem-spin 5s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes bewerben-emblem-spin { to { transform: rotate(360deg); } }
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.bewerben-wall span::before { animation: none; }
|
||||||
}
|
}
|
||||||
@media (max-width: 760px) {
|
@media (max-width: 760px) {
|
||||||
.bewerben-split { flex-direction: column; gap: 2.2rem; width: 100%; }
|
.bewerben-split { flex-direction: column; gap: 2.2rem; width: 100%; }
|
||||||
@@ -2314,25 +2335,18 @@ body.mit-hintergrund::after {
|
|||||||
100% { background-position: 0 -180%; }
|
100% { background-position: 0 -180%; }
|
||||||
}
|
}
|
||||||
.bewerben-wall span {
|
.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;
|
animation: bewerben-emblem-pulse 2.4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@keyframes bewerben-emblem-pulse {
|
@keyframes bewerben-emblem-pulse {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: translate(-50%, -50%) scale(1);
|
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),
|
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 6px rgba(255, 255, 255, .14),
|
||||||
0 0 26px rgba(143, 217, 234, .5), 0 0 26px rgba(217, 74, 92, .45);
|
0 0 26px rgba(143, 217, 234, .45), 0 0 26px rgba(217, 74, 92, .4);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translate(-50%, -50%) scale(1.1);
|
transform: translate(-50%, -50%) scale(1.08);
|
||||||
box-shadow: 0 0 0 3px rgba(10, 12, 16, .75), 0 0 0 6px rgba(255, 255, 255, .28),
|
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 7px rgba(255, 255, 255, .26),
|
||||||
0 0 40px rgba(143, 217, 234, .7), 0 0 40px rgba(217, 74, 92, .6);
|
0 0 42px rgba(143, 217, 234, .7), 0 0 42px rgba(217, 74, 92, .6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
Reference in New Issue
Block a user