Bucket
-
@@ -289,7 +288,6 @@
diff --git a/assets/css/style.css b/assets/css/style.css index c9b109d..8cb5c12 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -694,7 +694,7 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl overflow: hidden; box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--red), 0 40px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 80, 20, .25); } -.fight-card > :not(.flames):not(.fight-card__rays) { position: relative; z-index: 2; } +.fight-card > :not(.fight-card__rays) { position: relative; z-index: 2; } /* Gewichtsklasse als Banderole */ .fight-card__class { display: inline-block; font-family: var(--f-sticker); text-transform: uppercase; font-size: .9rem; letter-spacing: .1em; line-height: 1; @@ -703,26 +703,23 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%); box-shadow: 0 4px 0 var(--oxblood); } -/* Strahlenkranz hinter dem Essen */ +/* Strahlenkranz: füllt die ganze Karte, Zentrum hinter dem Essen */ .fight-card__rays { - position: absolute; z-index: 0; right: -18%; bottom: -30%; width: 85%; aspect-ratio: 1; pointer-events: none; - background: repeating-conic-gradient(rgba(229, 19, 11, .16) 0 7deg, transparent 7deg 16deg); - -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); + position: absolute; z-index: 0; left: 72%; top: 70%; width: 260%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; + background: + radial-gradient(closest-side, rgba(255, 196, 60, .75), rgba(255, 140, 40, .35) 22%, transparent 42%), + repeating-conic-gradient(from 3deg, rgba(229, 19, 11, .26) 0 6deg, rgba(255, 200, 28, .14) 6deg 8deg, transparent 8deg 15deg); + -webkit-mask: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, .35) 60%, transparent 85%); + mask: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, .35) 60%, transparent 85%); + animation: rays-spin 60s linear infinite; } -.fight-card__rays::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 70, .55), transparent); } -/* Feuer am unteren Rand statt Karomuster */ -.flames--card { top: auto; bottom: 0; transform: none; z-index: 1; height: clamp(90px, 9vw, 140px); --fw: 520px; } -.flames--card i { left: 0; right: 0; } -.flames--card i:nth-child(1) { --fw: 560px; } -.flames--card i:nth-child(2) { --fw: 460px; } -.flames--card i:nth-child(3) { --fw: 620px; background: linear-gradient(var(--red), var(--red-deep)); } -.flames--card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--red-deep); } +@keyframes rays-spin { to { rotate: 360deg; } } .fight-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; margin: .15em 0 .3em; font-size: clamp(2.8rem, 2rem + 3vw, 5rem); line-height: .86; color: var(--red); --ext: var(--oxblood); text-shadow: 1px 1px 0 var(--ext), 2px 2px 0 var(--ext), 3px 3px 0 var(--ext), 4px 4px 0 var(--ext), 5px 5px 0 var(--ext), 8px 10px 14px rgba(0, 0, 0, .2); } .fight-card ul { list-style: none; margin: 0 0 1.2rem; padding: 0 clamp(0px, 9vw, 150px) 0 0; display: flex; flex-wrap: wrap; gap: .45rem; } .fight-card li { background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: .25em .7em; font-weight: 700; font-size: .92rem; } -.fight-card__foot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: clamp(28px, 3vw, 44px); } +.fight-card__foot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; } .fight-card__foot .price { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); background: linear-gradient(var(--yellow-hot), var(--yellow)); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 14px 22px rgba(0, 0, 0, .35); } -.fight-card__foot img { position: relative; z-index: 2; width: clamp(170px, 21vw, 320px); margin: -8rem -1rem -2.4rem 0; filter: drop-shadow(0 16px 14px rgba(60, 0, 0, .45)); transition: transform .6s var(--ease-pop); } +.fight-card__foot img { position: relative; z-index: 2; width: clamp(170px, 21vw, 320px); margin: -8rem -1rem -1rem 0; filter: drop-shadow(0 16px 14px rgba(60, 0, 0, .45)); transition: transform .6s var(--ease-pop); } .fight-card:hover .fight-card__foot img { transform: scale(1.08) rotate(-5deg); } .buckets__note { margin-top: 2.5rem; text-align: center; opacity: .8; font-size: .95rem; } diff --git a/index.html b/index.html index d47cad7..63df239 100644 --- a/index.html +++ b/index.html @@ -275,7 +275,6 @@