WEBklar/Chickago-Boys
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grafikfehler behoben: gleichmäßige Kartenränder, keine Faltlinie, weiche Feuerwirbel-Kanten

Browse Source 
- Rote Special-Karten: Rand per Outline rundum gleich breit (auch beim Antippen), kein harter Sockel-Schatten mehr
- Papier-Textur ohne senkrechte Faltlinie (zog sich durch alle Papierkarten)
- Feuerwirbel blendet am Rand weich aus, keine geraden Kanten mehr quer durch dunkle/rote Flächen
- Gerissene Kante unter Kategorie-Bändern mit gleicher Papierkörnung wie der Seitenhintergrund

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-10-02 02:49:08 +00:00
1 parent 8d4512d9b4
commit 2acd62009b
1 file changed
+13 -11
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+13 -11
View File
@@ -278,9 +278,12 @@ p:last-child { margin-bottom: 0; }
left: 50%; top: var(--swirl-y, 50%); width: var(--swirl-size, min(1500px, 115vw)); aspect-ratio: 1; left: 50%; top: var(--swirl-y, 50%); width: var(--swirl-size, min(1500px, 115vw)); aspect-ratio: 1;
translate: -50% -50%; translate: -50% -50%;
background: var(--swirl, rgba(90, 0, 0, .42)); background: var(--swirl, rgba(90, 0, 0, .42));
-webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 98%);
mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; -webkit-mask-composite: source-in;
mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 98%);
mask-composite: intersect;
} }
@media (max-width: 820px) { .fx > .fx__swirl, .cat-bg .fx__swirl { --swirl-size: 175vw; } }
.fx__spot { inset: 0; background: radial-gradient(var(--spot-size, 60% 55%) at var(--spot-x, 50%) var(--spot-y, 45%), var(--spot, rgba(255, 90, 40, .55)), transparent 70%); } .fx__spot { inset: 0; background: radial-gradient(var(--spot-size, 60% 55%) at var(--spot-x, 50%) var(--spot-y, 45%), var(--spot, rgba(255, 90, 40, .55)), transparent 70%); }
.fx__vignette { inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vignette, rgba(40, 0, 0, .45))); } .fx__vignette { inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vignette, rgba(40, 0, 0, .45))); }
.fx__grain { inset: 0; background: var(--grain) 0 0 / 240px; opacity: var(--grain-o, .22); mix-blend-mode: var(--grain-mode, overlay); } .fx__grain { inset: 0; background: var(--grain) 0 0 / 240px; opacity: var(--grain-o, .22); mix-blend-mode: var(--grain-mode, overlay); }
@@ -297,10 +300,9 @@ p:last-child { margin-bottom: 0; }
.paper { .paper {
background-color: #fdf4e3; background-color: #fdf4e3;
background-image: background-image:
linear-gradient(90deg, transparent calc(50% - 1px), rgba(120, 70, 20, .05) calc(50% - 1px), rgba(255, 255, 255, .5) calc(50% + 1px), transparent calc(50% + 2px)),
radial-gradient(130% 100% at 50% 35%, transparent 45%, rgba(170, 100, 30, .16)), radial-gradient(130% 100% at 50% 35%, transparent 45%, rgba(170, 100, 30, .16)),
var(--grain-soft); var(--grain-soft);
background-size: 100% 100%, 100% 100%, 240px; background-size: 100% 100%, 240px;
} }
/* ============ Flammen-Übergänge ============ /* ============ Flammen-Übergänge ============
@@ -878,7 +880,7 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); }
.cat-bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--cat-bg); } .cat-bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--cat-bg); }
.cat-bg .flames { --fh: clamp(60px, 8vw, 130px); } .cat-bg .flames { --fh: clamp(60px, 8vw, 130px); }
.cat-bg .fx { overflow: hidden; } .cat-bg .fx { overflow: hidden; }
.cat-bg .torn--in { color: var(--cream); } .cat-bg .torn--in { color: var(--cream); background-image: var(--grain-soft); background-size: 240px; }
.menu-cat--red { --cat-bg: var(--red); --spot: rgba(255, 140, 50, .45); --spot-y: 60%; --swirl: rgba(100, 3, 1, .4); --dot: rgba(70, 0, 0, .9); --dots-o: .16; --grain-o: .3; color: var(--cream); } .menu-cat--red { --cat-bg: var(--red); --spot: rgba(255, 140, 50, .45); --spot-y: 60%; --swirl: rgba(100, 3, 1, .4); --dot: rgba(70, 0, 0, .9); --dots-o: .16; --grain-o: .3; color: var(--cream); }
.menu-cat--yellow { --cat-bg: var(--yellow); --spot: rgba(255, 255, 220, .5); --dot: rgba(229, 19, 11, .8); --dots-o: .12; --grain-o: .2; } .menu-cat--yellow { --cat-bg: var(--yellow); --spot: rgba(255, 255, 220, .5); --dot: rgba(229, 19, 11, .8); --dots-o: .12; --grain-o: .2; }
.menu-cat--ink { --cat-bg: var(--ink); --spot: rgba(255, 80, 20, .3); --spot-y: 100%; --spot-size: 90% 70%; --swirl: rgba(150, 25, 5, .28); --grain-o: .35; color: var(--cream); } .menu-cat--ink { --cat-bg: var(--ink); --spot: rgba(255, 80, 20, .3); --spot-y: 100%; --spot-size: 90% 70%; --swirl: rgba(150, 25, 5, .28); --grain-o: .35; color: var(--cream); }
@@ -891,8 +893,8 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); }
.menu-cat--red .item, .menu-cat--ink .item { border-color: rgba(251, 238, 214, .2); } .menu-cat--red .item, .menu-cat--ink .item { border-color: rgba(251, 238, 214, .2); }
.menu-cat--red .item p, .menu-cat--ink .item p { opacity: .9; } .menu-cat--red .item p, .menu-cat--ink .item p { opacity: .9; }
.menu-cat--red .menu-extra span, .menu-cat--ink .menu-extra span { background: rgba(0, 0, 0, .22); } .menu-cat--red .menu-extra span, .menu-cat--ink .menu-extra span { background: rgba(0, 0, 0, .22); }
.menu-cat--red .dish--special { box-shadow: 0 6px 0 var(--oxblood), 0 0 0 3px var(--cream), 0 26px 40px -8px rgba(60, 0, 0, .55); } .menu-cat--red .dish--special, .menu-cat--red .dish--special:hover { box-shadow: 0 26px 40px -10px rgba(60, 0, 0, .55); outline: 3px solid var(--cream); outline-offset: -3px; }
.menu-cat--yellow .dish { box-shadow: 0 6px 0 #c98c00, 0 22px 36px -8px rgba(120, 70, 0, .35); } .menu-cat--yellow .dish { box-shadow: 0 2px 6px rgba(120, 70, 0, .15), 0 22px 36px -10px rgba(120, 70, 0, .38); }
.page-end { position: relative; height: clamp(26px, 3vw, 44px); margin-top: clamp(3rem, 6vw, 5rem); } .page-end { position: relative; height: clamp(26px, 3vw, 44px); margin-top: clamp(3rem, 6vw, 5rem); }
.menu-cat__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); } .menu-cat__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.menu-cat__head .display { font-size: clamp(3rem, 8.6vw, 8rem); color: var(--red); --ext: var(--oxblood); } .menu-cat__head .display { font-size: clamp(3rem, 8.6vw, 8rem); color: var(--red); --ext: var(--oxblood); }
@@ -915,13 +917,13 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); }
var(--white); var(--white);
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
box-shadow: 0 6px 0 #e3cfae, 0 22px 36px -8px rgba(110, 50, 10, .3); box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 22px 36px -10px rgba(110, 50, 10, .32);
--tx: 0deg; --ty: 0deg; --tx: 0deg; --ty: 0deg;
transform: perspective(1000px) rotateX(var(--tx)) rotateY(var(--ty)); transform: perspective(1000px) rotateX(var(--tx)) rotateY(var(--ty));
transition: transform .45s var(--ease-pop), box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95); transition: transform .45s var(--ease-pop), box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95);
} }
.dish.is-tilting { transition: transform .15s ease-out, box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95); } .dish.is-tilting { transition: transform .15s ease-out, box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95); }
.dish:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 6px 0 #e3cfae, 0 34px 50px -10px rgba(110, 50, 10, .4); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; } .dish:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 34px 50px -12px rgba(110, 50, 10, .4); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; }
.dish__name { .dish__name {
font-family: var(--f-wide); font-weight: 900; text-transform: uppercase; font-family: var(--f-wide); font-weight: 900; text-transform: uppercase;
font-size: clamp(1.2rem, 8cqi, 2.5rem); line-height: .95; letter-spacing: -.01em; font-size: clamp(1.2rem, 8cqi, 2.5rem); line-height: .95; letter-spacing: -.01em;
@@ -956,8 +958,8 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); }
radial-gradient(120% 90% at 50% 40%, #cc160d 0%, var(--bg) 50%, #9a0604 100%); radial-gradient(120% 90% at 50% 40%, #cc160d 0%, var(--bg) 50%, #9a0604 100%);
box-shadow: 0 14px 32px rgba(140, 10, 6, .28); box-shadow: 0 14px 32px rgba(140, 10, 6, .28);
} }
.dish--special:hover { box-shadow: 0 6px 0 var(--oxblood), 0 34px 50px -10px rgba(140, 10, 6, .45); background-position: 0 0, 0 0; } .dish--special { box-shadow: 0 2px 6px rgba(140, 10, 6, .2), 0 22px 36px -10px rgba(140, 10, 6, .42); }
.dish--special { box-shadow: 0 6px 0 var(--oxblood), 0 22px 36px -8px rgba(140, 10, 6, .4); } .dish--special:hover { box-shadow: 0 2px 6px rgba(140, 10, 6, .2), 0 34px 50px -12px rgba(140, 10, 6, .5); background-position: 0 0, 0 0; }
.dish--special::before { content: ""; position: absolute; left: 50%; top: 55%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: rgba(100, 3, 1, .4); -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; pointer-events: none; } .dish--special::before { content: ""; position: absolute; left: 50%; top: 55%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: rgba(100, 3, 1, .4); -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; pointer-events: none; }
.dish--special::after { content: ""; position: absolute; left: 50%; top: 52%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 50, .45), transparent); pointer-events: none; } .dish--special::after { content: ""; position: absolute; left: 50%; top: 52%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 50, .45), transparent); pointer-events: none; }
.dish--special > * { position: relative; z-index: 1; } .dish--special > * { position: relative; z-index: 1; }