Bucket
-
@@ -286,6 +288,8 @@
diff --git a/assets/css/style.css b/assets/css/style.css index 9edda72..c9b109d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -692,22 +692,37 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl border-radius: calc(var(--radius) + 4px); padding: clamp(1.4rem, 3vw, 2.4rem); overflow: hidden; - box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--red), 0 14px 0 9px #5a0604, 0 40px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 80, 20, .25); + 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::before { - content: ""; position: absolute; inset: auto 0 0 0; height: 64px; - background-color: #fff; - background-image: linear-gradient(90deg, rgba(229, 19, 11, .8) 50%, transparent 50%), linear-gradient(rgba(229, 19, 11, .8) 50%, transparent 50%); - background-size: 32px 32px; - opacity: .9; +.fight-card > :not(.flames):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; + color: var(--yellow); background: linear-gradient(var(--red), var(--red-deep)); + padding: .5em 1.6em .5em .9em; margin-left: calc(-1 * clamp(1.4rem, 3vw, 2.4rem)); + clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%); + box-shadow: 0 4px 0 var(--oxblood); } -.fight-card__class { font-family: var(--f-sticker); text-transform: uppercase; color: var(--red-deep); font-size: 1rem; letter-spacing: .08em; } +/* Strahlenkranz 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); +} +.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); } .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 { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: 38px; } -.fight-card__foot .price { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); } -.fight-card__foot img { position: relative; z-index: 2; width: clamp(150px, 18vw, 280px); margin: -7rem -1.5rem -2.6rem 0; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .35)); transition: transform .6s var(--ease-pop); } +.fight-card__foot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: clamp(28px, 3vw, 44px); } +.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: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 ee9cf27..d47cad7 100644 --- a/index.html +++ b/index.html @@ -274,6 +274,8 @@