DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bewerben.html: Mitten-Emblem zum "Reaktorkern" umgebaut

Browse Source 
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:
DogFatherGit
2026-08-03 03:41:47 +02:00
parent 50ba908317
commit 648a28ec11
1 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+35 -21
View File
@@ -2191,23 +2191,44 @@ body.mit-hintergrund::after {
transparent 100%);
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 {
position: absolute;
position: relative;
isolation: isolate;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
background: linear-gradient(135deg, #8fd9ea 0%, #8fd9ea 48%, #d94a5c 52%, #d94a5c 100%);
border: 2px solid rgba(255, 255, 255, .18);
box-shadow: 0 0 0 6px rgba(10, 12, 16, .55),
0 0 20px rgba(143, 217, 234, .4),
0 0 20px rgba(217, 74, 92, .35);
font-size: 1.65rem;
background: radial-gradient(circle at 34% 28%, #232830, #0a0c10 72%);
border: 1px solid rgba(255, 255, 255, .2);
text-shadow: 0 0 10px rgba(255, 214, 140, .9), 0 0 4px rgba(0, 0, 0, .6);
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, .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) {
.bewerben-split { flex-direction: column; gap: 2.2rem; width: 100%; }
@@ -2314,25 +2335,18 @@ body.mit-hintergrund::after {
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);
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, .45), 0 0 26px rgba(217, 74, 92, .4);
}
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);
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 7px rgba(255, 255, 255, .26),
0 0 42px rgba(143, 217, 234, .7), 0 0 42px rgba(217, 74, 92, .6);
}
}
@media (prefers-reduced-motion: reduce) {