diff --git a/assets/css/style.css b/assets/css/style.css index 46707f2..2b79c49 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -51,18 +51,29 @@ /* ============ Tokens ============ */ :root { - --cream: #f7ebd9; - --cream-2: #efdcc0; - --red: #e0140e; - --red-deep: #b30d0a; + --cream: #fbeed6; + --cream-2: #f1dbb6; + --red: #e5130b; + --red-hot: #ff3216; + --red-deep: #a90c07; + --oxblood: #6a0503; --comb: #8e0a0c; - --yellow: #ffd21f; - --yellow-2: #f5b400; + --orange: #ff5512; + --orange-deep: #d63a05; + --yellow: #ffc81c; + --yellow-hot: #ffe066; + --yellow-2: #f2a900; --skin: #f7d7b7; - --ink: #150d0c; - --ink-2: #2a1d1b; + --ink: #170b09; + --ink-2: #2b1814; --white: #fff; + /* Texturen */ + --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .28 0 0 0 0 .06 0 0 0 1.3 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); + --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .05 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + --halftone: radial-gradient(circle at center, var(--dot, rgba(0, 0, 0, .55)) 0 1.5px, transparent 1.9px); + --f-display: "Anton", "Impact", "Arial Narrow", sans-serif; --f-sticker: "Titan One", "Arial Black", sans-serif; --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; @@ -85,7 +96,7 @@ html.lenis, html.lenis body { height: auto; } html, body { overflow-x: clip; } body { margin: 0; - background: var(--cream); + background: var(--grain-soft) 0 0 / 240px, var(--cream); color: var(--ink); font-family: var(--f-body); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); @@ -156,7 +167,7 @@ p:last-child { margin-bottom: 0; } /* ============ Buttons ============ */ .btn { - --bg: var(--red); --fg: var(--white); --bd: var(--white); + --bg: var(--red); --bg2: var(--red-deep); --fg: var(--white); --bd: var(--white); --depth: var(--oxblood); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: var(--f-sticker); @@ -165,23 +176,25 @@ p:last-child { margin-bottom: 0; } line-height: 1; letter-spacing: .02em; color: var(--fg); - background: var(--bg); - border: 4px solid var(--bd); + background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--bg), var(--bg2)); + border: 3px solid var(--bd); padding: 1em 1.7em 1.05em; - border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%; + border-radius: 999px; text-decoration: none; cursor: pointer; - box-shadow: 0 10px 22px rgba(21, 13, 12, .22); - transition: border-radius .5s var(--ease-pop), transform .35s var(--ease-pop), background-color .2s, color .2s; + box-shadow: 0 6px 0 var(--depth), 0 16px 26px rgba(21, 13, 12, .32), inset 0 2px 0 rgba(255, 255, 255, .35); + transition: transform .3s var(--ease-pop), box-shadow .2s, filter .2s; white-space: nowrap; + translate: 0 -3px; } -.btn:hover { border-radius: 42% 58% 45% 55% / 48% 55% 45% 52%; transform: rotate(-2deg) scale(1.05); } -.btn:active { transform: scale(.97); } +.btn:hover { transform: rotate(-2deg) scale(1.05); filter: saturate(1.15) brightness(1.05); } +.btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--depth), 0 6px 12px rgba(21, 13, 12, .3), inset 0 2px 0 rgba(255, 255, 255, .35); } .btn svg { width: 1.1em; height: 1.1em; flex: none; } -.btn--yellow { --bg: var(--yellow); --fg: var(--ink); --bd: var(--ink); } -.btn--ink { --bg: var(--ink); --fg: var(--cream); --bd: var(--cream); } -.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--ink); box-shadow: none; } -.on-dark .btn--ghost, .on-red .btn--ghost { --fg: var(--cream); --bd: var(--cream); } +.btn--yellow { --bg: var(--yellow-hot); --bg2: var(--yellow); --fg: var(--ink); --bd: var(--ink); --depth: #8a5a00; } +.btn--ink { --bg: var(--ink-2); --bg2: var(--ink); --fg: var(--cream); --bd: var(--cream); --depth: #000; } +.btn--ghost { --fg: var(--ink); --bd: var(--ink); --depth: rgba(21, 13, 12, .35); background: rgba(255, 255, 255, .35); box-shadow: 0 5px 0 var(--depth); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } +.btn--ghost:active { box-shadow: 0 1px 0 var(--depth); } +.on-dark .btn--ghost, .on-red .btn--ghost { --fg: var(--cream); --bd: var(--cream); --depth: rgba(0, 0, 0, .45); background: rgba(0, 0, 0, .18); } .pill { display: inline-flex; align-items: center; gap: .5em; @@ -217,12 +230,13 @@ p:last-child { margin-bottom: 0; } background: var(--yellow); color: var(--ink); border: 4px solid var(--white); - box-shadow: 0 8px 18px rgba(21, 13, 12, .25); + background-image: linear-gradient(165deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%), linear-gradient(transparent 60%, rgba(0, 0, 0, .1)); + box-shadow: 0 3px 0 rgba(0, 0, 0, .12), 0 12px 22px rgba(21, 13, 12, .32), inset 0 -3px 0 rgba(0, 0, 0, .12); font-size: clamp(.85rem, .7rem + .8vw, 1.45rem); transform: rotate(var(--r, -8deg)); } -.sticker--red { background: var(--red); color: var(--white); } -.sticker--ink { background: var(--ink); color: var(--yellow); } +.sticker--red { background-color: var(--red); color: var(--white); } +.sticker--ink { background-color: var(--ink); color: var(--yellow); } .die-cut { filter: drop-shadow(3px 0 0 var(--white)) drop-shadow(-3px 0 0 var(--white)) @@ -248,6 +262,86 @@ p:last-child { margin-bottom: 0; } .bg-red { background: var(--red); color: var(--cream); } .bg-yellow { background: var(--yellow); color: var(--ink); } .bg-ink { background: var(--ink); color: var(--cream); } +.bg-orange { background: var(--orange); color: var(--cream); } + +/* ============ Texturen & Licht ============ + .fx-Ebenen liegen hinter dem Inhalt (z-index 0), der Inhalt (.wrap) darüber. */ +.section > .wrap, .hero > *, .page-hero > .wrap { position: relative; z-index: 2; } +.fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } +.fx > * { position: absolute; } +/* Feuerwirbel: SVG als Maske, Farbe frei wählbar */ +.fx__swirl { + left: 50%; top: var(--swirl-y, 50%); width: var(--swirl-size, max(1900px, 150vw)); aspect-ratio: 1; + translate: -50% -50%; + background: var(--swirl, rgba(90, 0, 0, .42)); + -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; + mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; +} +.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__grain { inset: 0; background: var(--grain) 0 0 / 240px; opacity: var(--grain-o, .16); mix-blend-mode: var(--grain-mode, multiply); } +.fx__mottle { inset: 0; background: var(--mottle) 0 0 / 600px; opacity: var(--mottle-o, .12); mix-blend-mode: multiply; } +.fx__dots { + inset: 0; background: var(--halftone) 0 0 / var(--dot-size, 10px) var(--dot-size, 10px); + opacity: var(--dots-o, .22); + -webkit-mask: var(--dots-mask, radial-gradient(70% 70% at 50% 45%, transparent 35%, #000 85%)); + mask: var(--dots-mask, radial-gradient(70% 70% at 50% 45%, transparent 35%, #000 85%)); +} +.fx__glow { border-radius: 50%; filter: blur(60px); background: var(--glow, rgba(255, 120, 30, .5)); } + +/* Papier (Plakat mit Faltkanten) */ +.paper { + background-color: #fdf4e3; + 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)), + var(--grain-soft); + background-size: 100% 100%, 100% 100%, 240px; +} + +/* ============ Flammen-Übergänge ============ + Drei versetzte Flammenreihen (gelb, orange, Abschnittsfarbe) züngeln in den Abschnitt darüber. */ +.flames { + position: absolute; left: 0; right: 0; top: 1px; z-index: 3; + height: var(--fh, clamp(80px, 11vw, 190px)); + transform: translateY(-100%); + pointer-events: none; +} +.flames i { + position: absolute; left: -5%; right: -5%; bottom: 0; + -webkit-mask: url(../img/fx/flame-edge.svg) 0 100% / var(--fw, 1100px) 100% repeat-x; + mask: url(../img/fx/flame-edge.svg) 0 100% / var(--fw, 1100px) 100% repeat-x; + animation: flicker var(--ft, 9s) linear infinite; +} +.flames i:nth-child(1) { top: 0; background: linear-gradient(var(--yellow-hot), var(--yellow) 60%); --ft: 13s; } +.flames i:nth-child(2) { top: 18%; background: linear-gradient(var(--orange), var(--red-hot)); --fw: 900px; --ft: 10s; -webkit-mask-image: url(../img/fx/flame-edge-2.svg); mask-image: url(../img/fx/flame-edge-2.svg); animation-direction: reverse; } +.flames i:nth-child(3) { top: 40%; background: var(--flame-front, currentColor); --fw: 1250px; --ft: 15s; } +@keyframes flicker { to { -webkit-mask-position: var(--fw, 1100px) 100%; mask-position: var(--fw, 1100px) 100%; } } +.flames--down { top: auto; bottom: 1px; transform: translateY(100%) scaleY(-1); } + +/* Gerissene Papierkante */ +.torn { + position: absolute; left: 0; right: 0; top: 1px; z-index: 3; height: clamp(26px, 3vw, 44px); + transform: translateY(-100%); pointer-events: none; background: currentColor; + -webkit-mask: url(../img/fx/torn-edge.svg) 0 0 / 1200px 100% repeat-x; + mask: url(../img/fx/torn-edge.svg) 0 0 / 1200px 100% repeat-x; + filter: drop-shadow(0 -6px 8px rgba(0, 0, 0, .18)); +} +.torn--in { top: auto; bottom: -1px; transform: none; color: var(--ink); z-index: 3; } + +/* ============ 3D-Schrift ============ + Extrusion aus gestapelten Schatten + weicher Bodenschatten */ +.x3d { + --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), 6px 6px 0 var(--ext), 7px 7px 0 var(--ext), 8px 8px 0 var(--ext), + 9px 9px 0 var(--ext), 10px 10px 0 var(--ext), + 14px 18px 26px rgba(0, 0, 0, .35); +} +.x3d--sm { 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 16px rgba(0, 0, 0, .3); } +/* Puffy-Schrift wie auf Plakaten */ +.puffy { font-family: var(--f-sticker); text-transform: uppercase; line-height: .82; letter-spacing: -.01em; } .wave { position: absolute; left: 0; right: 0; height: clamp(40px, 7vw, 110px); @@ -277,6 +371,8 @@ p:last-child { margin-bottom: 0; } .nav.is-dark .nav__brand .wm { color: var(--cream); } .nav.is-dark .pill--outline { background: rgba(21, 13, 12, .55); border-color: rgba(247, 235, 217, .35); color: var(--cream); } .nav.is-dark .pill--outline:hover { border-color: var(--cream); } +.nav.is-dark .pill--red { background: var(--yellow); color: var(--ink); } +.nav.is-dark .pill--red:hover { background: var(--cream); } .nav__brand .wm { transition: color .3s; } .nav__burger { display: inline-grid; gap: 4px; width: 18px; } .nav__burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s, opacity .2s; } @@ -321,57 +417,69 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .hero { position: relative; min-height: 100svh; - padding: calc(var(--nav-h) + 1rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); + padding: calc(var(--nav-h) + 1rem) var(--gutter) clamp(5rem, 9vw, 9rem); display: grid; grid-template-rows: 1fr auto; overflow: hidden; + isolation: isolate; + background: radial-gradient(90% 80% at 50% 40%, #f0190d, var(--red) 40%, #b80d07 75%, #8c0805); + --spot: rgba(255, 110, 40, .55); --spot-y: 48%; --spot-size: 45% 50%; + --swirl: rgba(110, 4, 2, .5); + --dot: rgba(70, 0, 0, .9); --dots-o: .2; + --grain-o: .22; } +.hero .fx__grain { mix-blend-mode: overlay; opacity: .35; } .hero__stage { position: relative; display: grid; place-items: center; } .hero__title { position: relative; z-index: 1; text-align: left; margin: 0; } .hero__eyebrow { display: block; font-family: var(--f-sticker); text-transform: uppercase; line-height: 1.1; font-size: clamp(.95rem, .7rem + 1.1vw, 1.7rem); - color: var(--ink); letter-spacing: .02em; + color: var(--yellow); letter-spacing: .02em; margin: 0 0 1.1em .35em; + text-shadow: 0 2px 0 var(--oxblood), 0 6px 14px rgba(0, 0, 0, .3); } .hero__eyebrow > span { display: block; } .hero__big { display: block; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(6rem, 22.5vw, 26rem); - line-height: .82; color: var(--red); - -webkit-text-stroke: .055em var(--white); paint-order: stroke fill; + line-height: .82; color: var(--cream); white-space: nowrap; + --ext: #7d0603; } .hero__big .part { display: inline-block; letter-spacing: .02em; } .hero__burger { position: absolute; z-index: 2; - left: 50%; top: 57%; - width: clamp(250px, 33vw, 600px); + left: 50%; top: 55%; + width: clamp(250px, 34vw, 620px); transform: translate(-50%, -50%); pointer-events: none; } -.hero__burger img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(21, 13, 12, .3)); } +.hero__burger .blast__food { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 34px 34px rgba(60, 0, 0, .45)) saturate(1.08); } +.hero__glow { position: absolute; z-index: 0; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 60, .55), rgba(255, 90, 20, .25) 55%, transparent); filter: blur(10px); } .hero__wm { - position: absolute; z-index: 3; - left: 50%; top: 82%; + position: absolute; z-index: 4; + left: 50%; top: 84%; width: clamp(240px, 34vw, 600px); transform: translate(-50%, -50%) rotate(-6deg); - color: var(--red); + color: var(--yellow); } .hero__wm svg, .hero__wm img { width: 100%; height: auto; } -.hero__wm .wm-fill { filter: drop-shadow(4px 0 0 var(--white)) drop-shadow(-4px 0 0 var(--white)) drop-shadow(0 4px 0 var(--white)) drop-shadow(0 -4px 0 var(--white)) drop-shadow(0 10px 12px rgba(21, 13, 12, .25)); } -.hero__st1 { position: absolute; z-index: 4; left: 3%; top: 70%; --r: -12deg; } -.hero__st2 { position: absolute; z-index: 4; right: 4%; top: 68%; --r: 9deg; } -.hero__rooster { position: absolute; z-index: 4; right: 9%; top: 2%; width: clamp(80px, 9vw, 150px); transform: rotate(12deg); } +.hero__wm .wm-fill { filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 16px 16px rgba(30, 0, 0, .45)); } +.hero__st1 { position: absolute; z-index: 5; left: 3%; top: 70%; --r: -12deg; } +.hero__st2 { position: absolute; z-index: 5; right: 4%; top: 66%; --r: 9deg; } +.hero__rooster { position: absolute; z-index: 5; right: 9%; top: 2%; width: clamp(80px, 9vw, 150px); transform: rotate(12deg); } .hero__bottom { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem 3rem; margin-top: clamp(1rem, 2vw, 2rem); } -.hero__bottom .lead { max-width: 34ch; font-weight: 500; } +.hero__bottom .lead { max-width: 34ch; font-weight: 500; color: var(--cream); text-shadow: 0 2px 10px rgba(60, 0, 0, .35); } +.hero__bottom .lead strong { color: var(--yellow); } .hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: flex-end; align-items: center; } +.hero .flames { z-index: 4; } +.flames--in { top: auto; bottom: -2px; transform: none; } .open-badge { display: inline-flex; align-items: center; gap: .55em; @@ -388,89 +496,151 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .open-badge.is-closed::before { background: var(--red); } @keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(31, 168, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 168, 58, 0); } } -/* ============ Ticker ============ */ -.ticker-clip { position: relative; z-index: 6; overflow: clip; padding: 1.6rem 0; margin: -1.6rem 0; } +/* ============ Ticker (zwei gekreuzte Bänder) ============ */ +.ticker-clip { position: relative; z-index: 6; overflow: clip; padding: 2.4rem 0; margin: -3.4rem 0 -2.4rem; } .ticker { - position: relative; z-index: 6; - background: var(--ink); color: var(--yellow); + position: relative; z-index: 2; + background: linear-gradient(var(--ink-2), var(--ink)); color: var(--yellow); overflow: hidden; white-space: nowrap; - transform: rotate(-2deg); margin: -1.2rem -2vw 0; padding: .9rem 0; - border-block: 4px solid var(--white); + transform: rotate(-2.2deg); margin: 0 -2vw; padding: .9rem 0; + border-block: 4px solid var(--yellow); + box-shadow: 0 18px 30px rgba(21, 13, 12, .35), 0 6px 0 rgba(0, 0, 0, .25); } +.ticker--back { + position: absolute; z-index: 1; left: 0; right: 0; top: 50%; + transform: translateY(-50%) rotate(2.6deg); + background: linear-gradient(var(--red-hot), var(--red-deep)); color: var(--cream); + border-block: 3px solid var(--cream); + padding: .55rem 0; + box-shadow: 0 10px 20px rgba(21, 13, 12, .25); +} +.ticker--back .ticker__track { animation-direction: reverse; animation-duration: 40s; } +.ticker--back .ticker__track span { font-family: var(--f-sticker); font-size: clamp(1rem, .8rem + 1vw, 1.6rem); } +.ticker--back .ticker__track span::after { color: var(--yellow); } .ticker__track { display: inline-flex; gap: 2.2rem; animation: ticker 32s linear infinite; } .ticker__track span { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.8rem); text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; gap: 2.2rem; } .ticker__track span::after { content: "✦"; color: var(--red); font-size: .7em; } @keyframes ticker { to { transform: translateX(-50%); } } /* ============ Champions ============ */ -.champs { text-align: center; overflow-x: clip; } -.champs .h2 { max-width: 12ch; margin: 0 auto .3em; } +.champs { text-align: center; overflow-x: clip; --mottle-o: .06; --grain-o: .08; --dot: rgba(229, 19, 11, .7); --dots-o: .14; --dots-mask: radial-gradient(90% 80% at 50% 40%, transparent 45%, #000 95%); } +.champs .h2 { max-width: 12ch; margin: 0 auto .3em; --sw: 0; } .champs .lead { margin: 0 auto 2.2rem; } .champs__cards { - display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 3rem); - margin-top: clamp(3rem, 6vw, 5rem); - perspective: 1200px; + display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 3rem); + margin-top: clamp(6rem, 10vw, 9rem); + perspective: 1400px; + text-align: left; } -.photo-card { - position: relative; display: block; text-decoration: none; color: var(--ink); - transform: rotate(var(--r, 0deg)); - transition: transform .6s var(--ease-pop); +.champ { + --tx: 0deg; --ty: 0deg; + position: relative; display: flex; flex-direction: column; + min-height: clamp(440px, 40vw, 600px); + padding: clamp(1.4rem, 2.4vw, 2.2rem); + border-radius: calc(var(--radius) + 8px); + color: var(--cream); text-decoration: none; + transform: rotate(var(--r, 0deg)) rotateX(var(--tx)) rotateY(var(--ty)); + transform-style: preserve-3d; + transition: transform .6s var(--ease-pop), box-shadow .4s; + box-shadow: 0 2px 0 rgba(255, 255, 255, .25) inset, 0 -6px 0 rgba(0, 0, 0, .2) inset, 0 30px 50px -10px rgba(70, 10, 0, .45), 0 10px 0 var(--champ-depth, var(--oxblood)); + isolation: isolate; } -.photo-card:nth-child(1) { --r: -5deg; } -.photo-card:nth-child(2) { --r: 3deg; margin-top: 3rem; } -.photo-card:nth-child(3) { --r: -3deg; } -.photo-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); } -.photo-card__img { border-radius: var(--radius); overflow: hidden; border: 6px solid var(--white); box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: #ececec; } -.photo-card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .8s cubic-bezier(.2, .8, .2, 1); } -.photo-card:hover .photo-card__img img { transform: scale(1.14); } -.photo-card__label { position: absolute; left: 50%; bottom: -1.2rem; transform: translateX(-50%) rotate(-3deg); width: max-content; max-width: 92%; } -.photo-card__label .sticker { transform: none; font-size: clamp(.95rem, .8rem + .6vw, 1.3rem); } -.photo-card__price { position: absolute; top: -1rem; right: -0.6rem; } +.champ:nth-child(1) { --r: -3deg; } +.champ:nth-child(2) { --r: 2deg; margin-top: 3rem; } +.champ:nth-child(3) { --r: -2deg; } +.champ.is-tilting { transition: transform .15s ease-out, box-shadow .4s; } +.champ:hover { --r: 0deg; } +.champ__bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; background: var(--champ-bg); } +.champ__bg > * { position: absolute; } +.champ--red { --champ-bg: radial-gradient(90% 70% at 50% 60%, #ff2a12, var(--red) 45%, #9a0a05); --champ-depth: var(--oxblood); } +.champ--red .fx__swirl { --swirl-size: 260%; --swirl-y: 62%; --swirl: rgba(100, 3, 1, .45); } +.champ--red .fx__spot { --spot: rgba(255, 160, 60, .45); --spot-y: 62%; } +.champ--orange { --champ-bg: radial-gradient(90% 70% at 50% 60%, #ff7a1f, var(--orange) 45%, #c93804); --champ-depth: #8a2400; --dot: rgba(120, 30, 0, .9); --dots-o: .22; --dots-mask: linear-gradient(transparent 30%, #000); } +.champ__rays { inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 220, 120, .22) 0 6deg, transparent 6deg 15deg); -webkit-mask: radial-gradient(closest-side at 50% 62%, #000, transparent); mask: radial-gradient(closest-side at 50% 62%, #000, transparent); } +.champ--ink { --champ-bg: radial-gradient(100% 70% at 50% 85%, #5a1307, var(--ink) 60%); --champ-depth: #000; } +.champ__embers { inset: 0; background: radial-gradient(60% 40% at 50% 100%, rgba(255, 90, 18, .65), transparent 70%), radial-gradient(30% 25% at 20% 95%, rgba(255, 190, 40, .35), transparent), radial-gradient(30% 25% at 85% 92%, rgba(255, 60, 10, .4), transparent); } +.champ .fx__grain { inset: 0; mix-blend-mode: overlay; opacity: .4; } +.champ__kicker { font-family: var(--f-sticker); text-transform: uppercase; font-size: .95rem; letter-spacing: .08em; color: var(--yellow); transform: translateZ(30px); } +.champ__name { + font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5.2rem); color: var(--cream); margin-top: .2em; + --ext: rgba(60, 0, 0, .7); + text-shadow: 0 1px 0 var(--ext), 0 2px 0 var(--ext), 0 3px 0 var(--ext), 0 4px 0 var(--ext), 0 5px 0 var(--ext), 0 6px 0 var(--ext), 0 14px 20px rgba(0, 0, 0, .35); + transform: translateZ(40px); +} +.champ--ink .champ__name { color: var(--yellow); --ext: #000; } +.champ__food { position: relative; z-index: 2; display: block; width: 112%; margin: auto -6% 0; transform: translateZ(80px); transition: transform .7s var(--ease-pop); } +.champ__food .blast__food { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .45)); } +.champ:hover .champ__food { transform: translateZ(80px) scale(1.07) rotate(-2deg); } +.champ__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; transform: translateZ(30px); } +.champ__price { font-size: clamp(1.1rem, .9rem + .6vw, 1.5rem); background-color: var(--yellow); color: var(--ink); } +.champ--ink .champ__price { background-color: var(--red); color: var(--white); } +.champ__go { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-sticker); text-transform: uppercase; font-size: .95rem; } +.champ__go svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease-pop); } +.champ:hover .champ__go svg { transform: translateX(5px); } -/* ============ Wings ============ */ -.wings { overflow-x: clip; } -.wings__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; } -.wings .h2 { color: var(--cream); --stroke-c: var(--comb); } -.wings__hero { position: relative; } -.wings__hero img { width: 100%; max-width: 640px; margin-left: auto; } -.wings__hero .burst { position: absolute; left: 0; top: 4%; --r: -12deg; } -.wings__hero .rooster-st { position: absolute; right: 2%; bottom: -4%; width: clamp(90px, 10vw, 150px); transform: rotate(10deg); } -.wings__lead { color: var(--cream); margin-top: 1.4rem; } -.wings__lead em { font-family: var(--f-sticker); font-style: normal; color: var(--yellow); text-transform: uppercase; font-size: 1.1em; } +/* ============ Wings (Crunch-Time-Plakat) ============ */ +.wings { + overflow-x: clip; + background: radial-gradient(80% 60% at 70% 40%, #ff7426, var(--orange) 45%, #e04205); + --spot: rgba(255, 200, 90, .4); --spot-x: 72%; --spot-y: 35%; + --dot: rgba(140, 30, 0, .9); --dots-o: .18; --dots-mask: linear-gradient(160deg, #000, transparent 45%); +} +.wings .fx__grain { mix-blend-mode: overlay; opacity: .4; } +.wings__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "kick kick" "big big" "info hero"; align-items: start; } +.wings__stage .kicker { grid-area: kick; justify-self: start; } +.wings__big { + grid-area: big; position: relative; z-index: 1; + font-size: clamp(4.6rem, 15vw, 15.5rem); color: var(--cream); margin: 0; + --ext: #9a2800; + text-shadow: 0 2px 0 var(--ext), 0 4px 0 var(--ext), 0 6px 0 var(--ext), 0 8px 0 var(--ext), 0 10px 0 var(--ext), 0 12px 0 var(--ext), 0 24px 30px rgba(90, 20, 0, .45); +} +.wings__hero { grid-area: hero; position: relative; z-index: 2; margin-top: clamp(-14rem, -16vw, -5rem); } +.wings__hero .blast__food { position: relative; z-index: 2; width: 100%; max-width: 680px; margin-left: auto; filter: drop-shadow(0 30px 30px rgba(90, 20, 0, .5)) saturate(1.1) contrast(1.04); } +.wings__hero .burst { position: absolute; z-index: 4; left: 6%; top: 8%; --r: -12deg; } +.wings__info { grid-area: info; position: relative; z-index: 3; align-self: end; padding-bottom: 2rem; } +.wings__claim { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); color: var(--yellow); margin-bottom: .6rem; max-width: 14ch; text-shadow: 0 2px 0 #8a2400, 0 4px 0 #8a2400, 0 10px 16px rgba(0, 0, 0, .25); } +.wings__lead { color: var(--cream); } -.sauce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2.5rem, 5vw, 4rem); } +.sauce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(4rem, 7vw, 6rem); perspective: 1200px; } .sauce { + --tx: 0deg; --ty: 0deg; position: relative; - background: var(--cream); color: var(--ink); - border-radius: var(--radius); border: 4px solid var(--white); + color: var(--ink); + border-radius: var(--radius); border: 3px solid var(--white); padding: 1.1rem 1.1rem 1.3rem; text-align: center; - box-shadow: 0 14px 30px rgba(80, 0, 0, .3); + box-shadow: 0 8px 0 #a83200, 0 26px 40px -6px rgba(90, 20, 0, .55), inset 0 -4px 0 rgba(0, 0, 0, .06); + transform: rotate(var(--r, 0deg)) rotateX(var(--tx)) rotateY(var(--ty)); + transform-style: preserve-3d; transition: transform .45s var(--ease-pop); } -.sauce:nth-child(odd) { transform: rotate(-2deg); } -.sauce:nth-child(even) { transform: rotate(2deg); } -.sauce:hover { transform: rotate(0) translateY(-6px); } -.sauce__img { aspect-ratio: 1; display: grid; place-items: center; margin: -2.6rem auto .4rem; width: 88%; } -.sauce__img { position: relative; } -.sauce__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-pop); } -.sauce:hover .sauce__img img { transform: scale(1.07) rotate(-4deg); } -.sauce h3 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: .95; margin: 0 0 .35rem; color: var(--red-deep); } +.sauce.is-tilting { transition: transform .15s ease-out; } +.sauce:nth-child(odd) { --r: -2deg; } +.sauce:nth-child(even) { --r: 2deg; } +.sauce:hover { --r: 0deg; } +.sauce__img { aspect-ratio: 1; display: grid; place-items: center; margin: -3.4rem auto .4rem; width: 92%; position: relative; transform: translateZ(60px); } +.sauce__img::before { content: ""; position: absolute; inset: 14% 4% 10%; border-radius: 50%; background: radial-gradient(closest-side, var(--sauce), transparent); opacity: .55; filter: blur(14px); } +.sauce__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-pop); filter: drop-shadow(0 16px 14px rgba(70, 20, 0, .35)); } +.sauce:hover .sauce__img img { transform: scale(1.1) rotate(-4deg); } +.sauce h3 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: .95; margin: 0 0 .35rem; color: var(--red); text-shadow: 0 1px 0 var(--oxblood), 0 2px 0 var(--oxblood), 0 3px 0 var(--oxblood), 0 8px 10px rgba(0, 0, 0, .15); transform: translateZ(30px); } .sauce p { font-size: .95rem; margin: 0; } -.sauce .price { display: inline-block; margin-top: .7rem; } +.sauce .price { display: inline-block; margin-top: .7rem; transform: translateZ(20px); } .price { font-family: var(--f-sticker); font-size: 1.05rem; line-height: 1; background: var(--ink); color: var(--yellow); + background-image: linear-gradient(165deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 50%); padding: .5em .8em .55em; border-radius: 999px; white-space: nowrap; + box-shadow: 0 3px 0 rgba(0, 0, 0, .25), 0 8px 16px rgba(0, 0, 0, .25); } .price--light { background: var(--yellow); color: var(--ink); } .classic-wings { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem; align-items: center; - background: var(--ink); color: var(--cream); - border: 4px solid var(--white); border-radius: calc(var(--radius) + 6px); + background: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--grain) 0 0 / 240px, var(--ink); background-blend-mode: normal, soft-light, normal; color: var(--cream); + border: 3px solid var(--yellow); border-radius: calc(var(--radius) + 6px); + box-shadow: 0 8px 0 #000, 0 30px 50px -10px rgba(60, 10, 0, .6); padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 3vw, 2.6rem); } .classic-wings h3 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: .9; color: var(--yellow); } @@ -481,28 +651,40 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl /* ============ Photo band ============ */ .band { position: relative; height: clamp(360px, 70vw, 900px); overflow: hidden; background: #d9c8b2; } -.band img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; } -.band .wave { color: var(--red); } +.band img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: saturate(1.15) contrast(1.06); } +.band__shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(90% 80% at 50% 45%, transparent 50%, rgba(60, 10, 0, .45)), linear-gradient(transparent 60%, rgba(23, 11, 9, .55)); } +.band .wave { color: var(--orange); } .band .wave--top { top: -1px; transform: none; } -.band .wave--bottom { bottom: -1px; transform: scaleY(-1); } -.band .wave--bottom { color: var(--ink); } -.band__tag { position: absolute; z-index: 4; right: 6%; bottom: 16%; --r: 7deg; font-size: clamp(1rem, .7rem + 1.4vw, 2rem); } +.band__tag { position: absolute; z-index: 4; right: 6%; bottom: 26%; --r: 7deg; font-size: clamp(1rem, .7rem + 1.4vw, 2rem); } /* ============ Buckets ============ */ -.buckets { overflow-x: clip; } -.buckets .h2 { color: var(--yellow); --stroke-c: var(--red); font-size: clamp(3.4rem, 9.5vw, 9.5rem); } +.buckets { overflow-x: clip; background: radial-gradient(120% 70% at 50% 100%, #3a0d05, var(--ink) 60%); --spot: rgba(255, 80, 20, .28); --spot-y: 100%; --spot-size: 80% 60%; } +.buckets .fx__grain { mix-blend-mode: soft-light; opacity: .5; } +.fx__embers { inset: auto 0 0 0; height: 60%; background: radial-gradient(40% 50% at 20% 100%, rgba(255, 110, 20, .35), transparent 70%), radial-gradient(40% 50% at 80% 100%, rgba(255, 60, 10, .35), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(255, 170, 40, .25), transparent 70%); } +.fx__sparks { inset: 0; } +.fx__sparks i { position: absolute; bottom: -10px; width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%; background: #ffcf5a; box-shadow: 0 0 8px 2px rgba(255, 140, 30, .8); opacity: 0; animation: spark var(--d, 6s) linear var(--dl, 0s) infinite; } +@keyframes spark { + 0% { transform: translate(0, 0); opacity: 0; } + 10% { opacity: 1; } + 70% { opacity: .9; } + 100% { transform: translate(var(--dx, 40px), calc(-1 * var(--h, 600px))); opacity: 0; } +} +.buckets .h2 { color: var(--yellow); --ext: #8a1f00; font-size: clamp(3.4rem, 9.5vw, 9.5rem); } .buckets__head { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; align-items: end; } .buckets__head .lead { color: var(--cream); opacity: .92; } .fight-card-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); } -.vs { font-family: var(--f-display); font-size: clamp(3rem, 7vw, 7rem); color: var(--red); -webkit-text-stroke: .05em var(--cream); paint-order: stroke fill; line-height: 1; transform: rotate(-8deg); } +.fight-card.is-tilting { transition: transform .15s ease-out; } +.fight-card-row { perspective: 1400px; } +.vs { font-family: var(--f-display); font-size: clamp(3rem, 7vw, 7rem); color: var(--yellow); line-height: 1; transform: rotate(-8deg); --ext: var(--red-deep); 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), 6px 6px 0 var(--ext), 0 0 40px rgba(255, 100, 20, .6); } .fight-card { - position: relative; - background: var(--cream); color: var(--ink); + --tx: 0deg; --ty: 0deg; + position: relative; color: var(--ink); + transform: rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .5s var(--ease-pop); border: 5px solid var(--yellow); 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 30px 60px rgba(0, 0, 0, .45); + 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); } .fight-card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; @@ -512,17 +694,19 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl opacity: .9; } .fight-card__class { font-family: var(--f-sticker); text-transform: uppercase; color: var(--red-deep); font-size: 1rem; letter-spacing: .08em; } -.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); -webkit-text-stroke: .06em var(--white); paint-order: stroke fill; } +.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; 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 { width: clamp(120px, 13vw, 200px); margin: -4rem -1rem -2.4rem 0; } +.fight-card__foot img { width: clamp(130px, 15vw, 230px); margin: -5rem -1rem -2.4rem 0; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .35)); 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; } /* ============ Take away (route) ============ */ -.takeaway { overflow-x: clip; } -.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .045em; max-width: 13ch; } +.takeaway { overflow-x: clip; background: radial-gradient(90% 80% at 30% 30%, var(--yellow-hot), var(--yellow) 50%, #f3a800); color: var(--ink); --spot: rgba(255, 255, 220, .5); --spot-x: 25%; --spot-y: 25%; --dot: rgba(229, 19, 11, .85); --dots-o: .16; --dots-mask: linear-gradient(200deg, #000, transparent 50%); --mottle-o: .06; --grain-o: .1; } +.takeaway .torn { color: var(--yellow); } +.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .04em; --ext: var(--ink); max-width: 13ch; } .takeaway__lead { max-width: 40ch; margin-top: 1.4rem; font-weight: 500; } .route { position: relative; margin-top: clamp(6rem, 10vw, 9rem); } .route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } @@ -530,15 +714,15 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .route__rider { position: absolute; left: 0; top: 0; width: clamp(64px, 7vw, 100px); z-index: 3; will-change: transform; pointer-events: none; } .stops { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 3rem); } .stop { - background: var(--white); border: 4px solid var(--ink); border-radius: var(--radius); + border: 3px solid var(--ink); border-radius: var(--radius); padding: clamp(1.3rem, 2.4vw, 2rem); - box-shadow: 8px 8px 0 var(--ink); + box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3); transition: transform .45s var(--ease-pop), box-shadow .3s; } .stop:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); } .stop:nth-child(3) { margin-top: clamp(4rem, 12vw, 12rem); } -.stop:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--red); } -.stop__num { font-family: var(--f-display); font-size: 3.6rem; line-height: .8; color: var(--red); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; } +.stop:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--red), 20px 30px 40px rgba(90, 50, 0, .3); } +.stop__num { font-family: var(--f-display); font-size: 3.6rem; line-height: .8; 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); } .stop h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1; margin: .5rem 0 .6rem; } .stop p { font-size: 1rem; } .stop__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } @@ -554,13 +738,15 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .stop__links svg { width: 1em; height: 1em; } /* ============ Visit ============ */ +.visit { --mottle-o: .07; --grain-o: .08; } +.wave--deep svg { filter: drop-shadow(0 -8px 10px rgba(0, 0, 0, .12)); } .visit__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .visit .h2 { max-width: 10ch; } .info-card { - background: var(--white); border-radius: calc(var(--radius) + 6px); - border: 4px solid var(--ink); + border-radius: calc(var(--radius) + 6px); + border: 3px solid var(--ink); padding: clamp(1.4rem, 3vw, 2.4rem); - box-shadow: 10px 10px 0 var(--red); + box-shadow: 10px 10px 0 var(--red), 18px 26px 40px rgba(110, 40, 0, .22); } .info-card h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; margin: 0 0 .6rem; font-size: 1.25rem; color: var(--red-deep); } .info-card + .info-card { margin-top: 1.6rem; } @@ -573,23 +759,35 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .info-card .row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } .note { font-size: .88rem; opacity: .75; margin-top: .9rem; } .rating { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } -.rating__score { font-family: var(--f-display); font-size: clamp(3.4rem, 2.6rem + 3vw, 5.6rem); line-height: .8; color: var(--red); -webkit-text-stroke: .05em var(--white); paint-order: stroke fill; } +.rating__score { font-family: var(--f-display); font-size: clamp(3.4rem, 2.6rem + 3vw, 5.6rem); line-height: .8; 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); } .rating__stars { color: var(--yellow-2); font-size: 1.4rem; letter-spacing: .1em; line-height: 1; -webkit-text-stroke: 1px var(--ink); } .rating__meta { font-size: .95rem; line-height: 1.35; } .rating__meta a { font-weight: 700; } -.visit__deco { position: relative; margin-top: 2.2rem; } -.visit__deco img { width: min(460px, 90%); } -.visit__deco .sticker { position: absolute; right: 6%; top: 8%; --r: 8deg; } +.visit__deco { position: relative; margin-top: 3rem; width: min(500px, 88%); } +.visit__deco .blast__food { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 26px 24px rgba(90, 40, 0, .35)); } +.visit__deco .sticker { position: absolute; z-index: 4; right: -10%; top: 0; --r: 8deg; } /* ============ Final CTA ============ */ -.cta { text-align: center; overflow-x: clip; } -.cta .h2 { font-size: clamp(5rem, 20vw, 20rem); color: var(--yellow); --stroke-c: var(--ink); --sw: .045em; } -.cta__rooster { width: clamp(160px, 22vw, 340px); margin: -2rem auto 0; transform: rotate(-8deg); } -.cta .lead { margin: 1.2rem auto 2rem; color: var(--white); max-width: 30ch; } +.cta { text-align: center; overflow-x: clip; background: radial-gradient(80% 70% at 50% 55%, #ff2a12, var(--red) 40%, #9a0a05); --spot: rgba(255, 140, 40, .5); --spot-y: 60%; --swirl: rgba(100, 3, 1, .45); --swirl-y: 60%; --dot: rgba(70, 0, 0, .9); --dots-o: .2; } +.cta .fx__grain { mix-blend-mode: overlay; opacity: .35; } +.cta .h2 { font-size: clamp(5rem, 20vw, 20rem); color: var(--yellow); --ext: #7d0603; position: relative; z-index: 1; } +.cta__fire { position: relative; width: clamp(220px, 30vw, 460px); margin: clamp(-5rem, -6vw, -2rem) auto 0; } +.cta__burst { + position: absolute; left: 50%; bottom: -6%; width: 170%; aspect-ratio: 1; translate: -50% 0; + background: linear-gradient(var(--yellow-hot), var(--orange) 55%, var(--red-hot)); + -webkit-mask: url(../img/fx/flame-burst.svg) center / contain no-repeat; mask: url(../img/fx/flame-burst.svg) center / contain no-repeat; + filter: drop-shadow(0 0 40px rgba(255, 120, 30, .6)); + transform-origin: 50% 90%; animation: burn 1.8s ease-in-out infinite alternate; +} +@keyframes burn { 0% { transform: scale(1, 1) skewX(0deg); } 50% { transform: scale(1.03, .96) skewX(1.5deg); } 100% { transform: scale(.98, 1.05) skewX(-1.5deg); } } +.cta__rooster { position: relative; width: 74%; margin: 0 auto; transform: rotate(-8deg); } +.cta .lead { margin: 1.6rem auto 2rem; color: var(--white); max-width: 30ch; position: relative; } .cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* ============ Footer ============ */ .footer { position: relative; background: var(--ink); color: var(--cream); padding: clamp(4rem, 8vw, 6rem) 0 0; overflow: hidden; } +.footer .fx__grain { mix-blend-mode: soft-light; opacity: .5; } +.footer > .wrap, .footer__giant { position: relative; z-index: 2; } .footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; } .footer h2 { font-family: var(--f-sticker); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; color: var(--yellow); margin: 0 0 .9rem; letter-spacing: .04em; } .footer ul { list-style: none; margin: 0; padding: 0; } @@ -629,11 +827,19 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .orderbar .order { background: var(--red); color: var(--white); } /* ============ Speisekarte ============ */ -.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(5rem, 9vw, 8rem); overflow: hidden; } -.page-hero .display { font-size: clamp(5rem, 16vw, 16rem); color: var(--red); --stroke-c: var(--cream); --sw: .05em; } -.page-hero .lead { color: var(--cream); margin-top: 1.4rem; } -.page-hero__img { position: absolute; right: -3%; bottom: 6%; width: clamp(220px, 33vw, 560px); z-index: 1; } -.page-hero__st { position: absolute; right: 30%; top: 26%; z-index: 2; --r: -10deg; } +.page-hero { + position: relative; padding: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(7rem, 12vw, 11rem); overflow: hidden; isolation: isolate; + background: radial-gradient(90% 80% at 70% 50%, #f0190d, var(--red) 40%, #b80d07 75%, #8c0805); + --spot: rgba(255, 110, 40, .5); --spot-x: 72%; --spot-y: 55%; --swirl: rgba(110, 4, 2, .5); --swirl-y: 60%; + --dot: rgba(70, 0, 0, .9); --dots-o: .2; +} +.page-hero .fx__grain { mix-blend-mode: overlay; opacity: .35; } +.page-hero .display { font-size: clamp(5rem, 16vw, 16rem); color: var(--cream); --ext: #7d0603; } +.page-hero .lead { color: var(--cream); margin-top: 1.6rem; } +.page-hero__img { position: absolute; right: 1%; bottom: 12%; width: clamp(240px, 36vw, 600px); z-index: 2; } +.page-hero__img .blast__food { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 30px 30px rgba(60, 0, 0, .45)); } +.page-hero__st { position: absolute; right: 32%; top: 28%; z-index: 5; --r: -10deg; } +.page-hero .flames { z-index: 4; --fh: clamp(60px, 8vw, 130px); } .cat-nav { position: sticky; top: 0; z-index: 800; @@ -655,7 +861,7 @@ body.nav-visible .cat-nav { top: var(--nav-h); } .menu-cat { padding: clamp(3.5rem, 7vw, 6rem) 0 0; scroll-margin-top: calc(var(--nav-h) + 70px); } .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(3.4rem, 9vw, 8rem); color: var(--red); } +.menu-cat__head .display { font-size: clamp(3.4rem, 9vw, 8rem); color: var(--red); --ext: var(--oxblood); } .menu-cat__head p { max-width: 46ch; margin: 0; font-weight: 500; } .dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } @@ -675,10 +881,13 @@ body.nav-visible .cat-nav { top: var(--nav-h); } var(--white); border-radius: var(--radius); overflow: hidden; - box-shadow: 0 10px 26px rgba(21, 13, 12, .08); + box-shadow: 0 6px 0 #e3cfae, 0 22px 36px -8px rgba(110, 50, 10, .3); + --tx: 0deg; --ty: 0deg; + 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); } -.dish:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(21, 13, 12, .16); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; } +.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__name { 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; @@ -713,7 +922,11 @@ body.nav-visible .cat-nav { top: var(--nav-h); } radial-gradient(120% 90% at 50% 40%, #cc160d 0%, var(--bg) 50%, #9a0604 100%); box-shadow: 0 14px 32px rgba(140, 10, 6, .28); } -.dish--special:hover { box-shadow: 0 24px 44px rgba(140, 10, 6, .36); background-position: 0 0, 0 0; } +.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 6px 0 var(--oxblood), 0 22px 36px -8px rgba(140, 10, 6, .4); } +.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 > * { position: relative; z-index: 1; } .dish--special .dish__name { color: var(--cream); font-size: clamp(1.35rem, 12.5cqi, 3.6rem); line-height: .9; } .dish__script { display: block; position: relative; z-index: 1; @@ -760,25 +973,31 @@ body.nav-visible .cat-nav { top: var(--nav-h); } .menu-extra span { background: var(--cream-2); border-radius: 999px; padding: .35em .85em; } .only-here { + position: relative; overflow: hidden; isolation: isolate; + box-shadow: 0 8px 0 #000, 0 30px 50px -10px rgba(60, 10, 0, .5); margin: clamp(4rem, 8vw, 7rem) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; background: var(--ink); color: var(--cream); border-radius: calc(var(--radius) + 8px); padding: clamp(1.6rem, 4vw, 3rem); border: 4px solid var(--yellow); } +.only-here > img, .only-here > div:not(.fx) { position: relative; z-index: 2; } +.only-here .fx__grain { mix-blend-mode: soft-light; opacity: .5; } .only-here img { width: clamp(100px, 12vw, 170px); transform: rotate(-8deg); } .only-here h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: .9; margin: 0 0 .5rem; color: var(--yellow); } -.legal-note { margin-top: clamp(3rem, 6vw, 5rem); padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--cream-2); font-size: .95rem; } +.legal-note { margin-top: clamp(3rem, 6vw, 5rem); padding: 1.4rem 1.6rem; border-radius: 20px; font-size: .95rem; box-shadow: 0 4px 0 #e3cfae, 0 16px 30px -10px rgba(110, 50, 10, .25); } .legal-note h2 { font-family: var(--f-sticker); font-weight: 400; text-transform: uppercase; font-size: 1.1rem; margin: 0 0 .5rem; } /* ============ Legal pages ============ */ .legal { padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 8vw, 7rem); } -.legal .display { font-size: clamp(3.6rem, 11vw, 9rem); color: var(--red); margin-bottom: 2rem; } +.legal .display { font-size: clamp(3.6rem, 11vw, 9rem); color: var(--red); --ext: var(--oxblood); margin-bottom: 2rem; } .legal__body { max-width: 760px; } .legal__body h2 { font-family: var(--f-sticker); font-weight: 400; text-transform: uppercase; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); margin: 2.4rem 0 .7rem; color: var(--red-deep); } .legal__body h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; } .legal__body ul { padding-left: 1.2rem; } +.legal__body .credits { font-size: .92rem; } +.legal__body .credits li { margin: .25rem 0; } .draft-box { background: var(--yellow); border: 3px solid var(--ink); border-radius: 18px; padding: 1rem 1.2rem; font-weight: 600; margin-bottom: 2rem; box-shadow: 6px 6px 0 var(--ink); @@ -805,6 +1024,16 @@ body.nav-visible .cat-nav { top: var(--nav-h); } .sauce-chips span { display: inline-flex; gap: .7em; align-items: center; background: var(--white); border: 2px solid var(--red); border-radius: 999px; padding: .5em 1em; font-family: var(--f-wide); font-weight: 900; font-size: .82rem; text-transform: uppercase; color: var(--red); } .sauce-chips b { font-family: var(--f-mono); font-weight: 400; color: var(--ink); } +/* ============ Fliegende Zutaten ============ */ +.blast__bits { position: absolute; inset: 0; pointer-events: none; } +.bit { position: absolute; z-index: 3; translate: -50% -50%; will-change: transform; } +.bit__in { display: block; } +.bit img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 10px rgba(40, 0, 0, .35)); } +.bit--b { z-index: 1; } +.bit--b img { filter: blur(1.2px) brightness(.88) drop-shadow(0 8px 8px rgba(40, 0, 0, .3)); } +.hero__burger .blast__bits, .visit__deco .blast__bits, .wings__hero .blast__bits { z-index: auto; } +.champ__food .bit--f { z-index: 3; } + /* ============ Motion setup ============ */ html.js [data-pop] .pw { display: inline-block; will-change: transform; } html.js.anim [data-pop] .pw { opacity: 0; } @@ -854,8 +1083,14 @@ html.js.anim .juggle { visibility: hidden; } .hero__rooster { right: 6vw; top: 30vw; width: 24vw; } .hero__bottom { grid-template-columns: 1fr; margin-top: 2.2rem; } .hero__cta { justify-content: flex-start; } - .champs__cards { grid-template-columns: 1fr; gap: 3.2rem; max-width: 420px; margin-inline: auto; } - .photo-card:nth-child(2) { margin-top: 0; } + .champs__cards { grid-template-columns: 1fr; gap: 3.2rem; max-width: 440px; margin-inline: auto; margin-top: 4rem; } + .champ:nth-child(2) { margin-top: 0; } + .champ { min-height: 0; } + .wings__stage { grid-template-columns: 1fr; grid-template-areas: "kick" "big" "hero" "info"; } + .wings__hero { margin-top: -2rem; } + .wings__info { padding-bottom: 0; } + .flames { --fh: clamp(60px, 16vw, 110px); } + .flames i { --fw: 700px; } .wings__head, .buckets__head, .visit__grid { grid-template-columns: 1fr; } .wings__hero img { margin: 0 auto; } .classic-wings { grid-template-columns: 1fr; text-align: left; } diff --git a/assets/img/bits/bacon.webp b/assets/img/bits/bacon.webp new file mode 100644 index 0000000..d8f2712 Binary files /dev/null and b/assets/img/bits/bacon.webp differ diff --git a/assets/img/bits/chili.webp b/assets/img/bits/chili.webp new file mode 100644 index 0000000..8e903ff Binary files /dev/null and b/assets/img/bits/chili.webp differ diff --git a/assets/img/bits/crumb-1.webp b/assets/img/bits/crumb-1.webp new file mode 100644 index 0000000..c18050d Binary files /dev/null and b/assets/img/bits/crumb-1.webp differ diff --git a/assets/img/bits/crumb-2.webp b/assets/img/bits/crumb-2.webp new file mode 100644 index 0000000..c712e3f Binary files /dev/null and b/assets/img/bits/crumb-2.webp differ diff --git a/assets/img/bits/crumb-3.webp b/assets/img/bits/crumb-3.webp new file mode 100644 index 0000000..be3e172 Binary files /dev/null and b/assets/img/bits/crumb-3.webp differ diff --git a/assets/img/bits/crumb-4.webp b/assets/img/bits/crumb-4.webp new file mode 100644 index 0000000..75dfee3 Binary files /dev/null and b/assets/img/bits/crumb-4.webp differ diff --git a/assets/img/bits/crumb-5.webp b/assets/img/bits/crumb-5.webp new file mode 100644 index 0000000..cb6ce9e Binary files /dev/null and b/assets/img/bits/crumb-5.webp differ diff --git a/assets/img/bits/crumb-6.webp b/assets/img/bits/crumb-6.webp new file mode 100644 index 0000000..a071a23 Binary files /dev/null and b/assets/img/bits/crumb-6.webp differ diff --git a/assets/img/bits/crumb-7.webp b/assets/img/bits/crumb-7.webp new file mode 100644 index 0000000..e8cbdbc Binary files /dev/null and b/assets/img/bits/crumb-7.webp differ diff --git a/assets/img/bits/crumb-8.webp b/assets/img/bits/crumb-8.webp new file mode 100644 index 0000000..872c352 Binary files /dev/null and b/assets/img/bits/crumb-8.webp differ diff --git a/assets/img/bits/jalapeno-1.webp b/assets/img/bits/jalapeno-1.webp new file mode 100644 index 0000000..d2431dd Binary files /dev/null and b/assets/img/bits/jalapeno-1.webp differ diff --git a/assets/img/bits/jalapeno-2.webp b/assets/img/bits/jalapeno-2.webp new file mode 100644 index 0000000..4ccc5bb Binary files /dev/null and b/assets/img/bits/jalapeno-2.webp differ diff --git a/assets/img/bits/lettuce-1.webp b/assets/img/bits/lettuce-1.webp new file mode 100644 index 0000000..6eac6d9 Binary files /dev/null and b/assets/img/bits/lettuce-1.webp differ diff --git a/assets/img/bits/lettuce-2.webp b/assets/img/bits/lettuce-2.webp new file mode 100644 index 0000000..d7cc7b3 Binary files /dev/null and b/assets/img/bits/lettuce-2.webp differ diff --git a/assets/img/bits/lettuce-3.webp b/assets/img/bits/lettuce-3.webp new file mode 100644 index 0000000..0ac7092 Binary files /dev/null and b/assets/img/bits/lettuce-3.webp differ diff --git a/assets/img/bits/onion-1.webp b/assets/img/bits/onion-1.webp new file mode 100644 index 0000000..2b9a85d Binary files /dev/null and b/assets/img/bits/onion-1.webp differ diff --git a/assets/img/bits/onion-2.webp b/assets/img/bits/onion-2.webp new file mode 100644 index 0000000..df8aff5 Binary files /dev/null and b/assets/img/bits/onion-2.webp differ diff --git a/assets/img/bits/onionring.webp b/assets/img/bits/onionring.webp new file mode 100644 index 0000000..626f862 Binary files /dev/null and b/assets/img/bits/onionring.webp differ diff --git a/assets/img/bits/pickle.webp b/assets/img/bits/pickle.webp new file mode 100644 index 0000000..803b26d Binary files /dev/null and b/assets/img/bits/pickle.webp differ diff --git a/assets/img/bits/sesame-1.webp b/assets/img/bits/sesame-1.webp new file mode 100644 index 0000000..c0935dc Binary files /dev/null and b/assets/img/bits/sesame-1.webp differ diff --git a/assets/img/bits/sesame-2.webp b/assets/img/bits/sesame-2.webp new file mode 100644 index 0000000..a6e485a Binary files /dev/null and b/assets/img/bits/sesame-2.webp differ diff --git a/assets/img/bits/tomato.webp b/assets/img/bits/tomato.webp new file mode 100644 index 0000000..8eb0d72 Binary files /dev/null and b/assets/img/bits/tomato.webp differ diff --git a/assets/img/fx/flame-burst.svg b/assets/img/fx/flame-burst.svg new file mode 100644 index 0000000..6506f36 --- /dev/null +++ b/assets/img/fx/flame-burst.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/fx/flame-edge-2.svg b/assets/img/fx/flame-edge-2.svg new file mode 100644 index 0000000..a52e283 --- /dev/null +++ b/assets/img/fx/flame-edge-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/fx/flame-edge.svg b/assets/img/fx/flame-edge.svg new file mode 100644 index 0000000..4b79029 --- /dev/null +++ b/assets/img/fx/flame-edge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/fx/flame-swirl.svg b/assets/img/fx/flame-swirl.svg new file mode 100644 index 0000000..c5580f8 --- /dev/null +++ b/assets/img/fx/flame-swirl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/fx/torn-edge.svg b/assets/img/fx/torn-edge.svg new file mode 100644 index 0000000..73797be --- /dev/null +++ b/assets/img/fx/torn-edge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 79c3566..aed21f5 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -171,6 +171,103 @@ }, { passive: true }); } + /* ---------- Zutaten rund ums Essen (Explosion beim Scrollen) ---------- + Jede Zutat: [Datei, x %, y % (relativ zur Essens-Box), Größe % der Box, Drehung, Ebene, auch mobil, gespiegelt] + Ebenen: b = hinter dem Essen (leicht unscharf), f = davor */ + var BITS = 'assets/img/bits/'; + var PRESETS = { + burger: [ + ['lettuce-2', 114, 30, 20, 40, 'b', 0], ['tomato', -10, 40, 16, -12, 'b', 1], ['onion-2', 106, 88, 14, 0, 'b', 0], + ['jalapeno-1', 8, -8, 11, 30, 'b', 1], ['bacon', 24, -16, 20, -30, 'b', 0, 1], ['sesame-2', 64, -14, 4, 40, 'b', 0], + ['lettuce-1', -14, 70, 24, -25, 'f', 1], ['tomato', 110, 60, 20, 18, 'f', 1, 1], ['bacon', 100, 8, 24, 22, 'f', 1], + ['onion-1', -12, 12, 18, -16, 'f', 1], ['pickle', 22, 104, 13, 8, 'f', 0], ['jalapeno-2', 82, 106, 12, -24, 'f', 1], + ['sesame-1', 36, -8, 3.5, 0, 'f', 0], ['sesame-1', 50, -20, 3, 80, 'f', 0, 1] + ], + 'burger-sm': [ + ['onion-2', 6, 10, 15, -14, 'b', 1], ['bacon', 94, 6, 20, 24, 'b', 1], + ['lettuce-1', -4, 70, 20, -20, 'f', 1], ['tomato', 102, 64, 17, 18, 'f', 1], ['pickle', 72, 102, 11, 8, 'f', 0], ['sesame-1', 30, -4, 3, 0, 'f', 0] + ], + 'chicken-sm': [ + ['bacon', 98, 10, 20, 24, 'b', 1, 1], ['crumb-1', 6, 4, 8, 0, 'b', 0], ['crumb-2', 88, -4, 7, 30, 'b', 0], + ['lettuce-2', -6, 70, 20, -24, 'f', 1], ['tomato', 104, 64, 15, 18, 'f', 1], ['crumb-3', 26, 104, 8, 10, 'f', 0], ['crumb-4', 66, 104, 8, 60, 'f', 0] + ], + 'wrap-sm': [ + ['jalapeno-2', 6, 6, 11, -20, 'b', 1], ['onion-2', 96, 6, 13, 20, 'b', 1], + ['lettuce-3', -8, 70, 20, -18, 'f', 1], ['tomato', 104, 64, 15, 22, 'f', 1], ['crumb-5', 28, 104, 8, 0, 'f', 0], ['jalapeno-1', 74, 104, 9, 40, 'f', 0] + ], + wings: [ + ['crumb-6', 4, 30, 8, 0, 'b', 0], ['crumb-7', 96, 18, 7, 40, 'b', 1], ['chili', 100, 72, 18, 20, 'b', 0], ['jalapeno-1', -4, 62, 11, -30, 'b', 1], + ['crumb-1', 12, 4, 9, 10, 'f', 1], ['crumb-2', 32, -8, 7, 50, 'f', 1], ['crumb-3', 58, -10, 8, 90, 'f', 1], ['crumb-4', 84, 2, 8, 120, 'f', 1], + ['crumb-5', 104, 40, 7, 0, 'f', 0], ['crumb-8', -4, 88, 8, 70, 'f', 0], ['jalapeno-2', 88, 102, 11, -10, 'f', 1], ['crumb-2', 46, 104, 6, 30, 'f', 0, 1] + ] + }; + var mobileBits = window.matchMedia('(max-width: 820px)').matches; + var blasts = $$('[data-blast]').map(function (box) { + var set = PRESETS[box.getAttribute('data-blast')]; + if (!set) return null; + var lazy = box.getAttribute('data-blast-mode') !== 'hero'; + var holder = document.createElement('span'); + holder.className = 'blast__bits'; + holder.setAttribute('aria-hidden', 'true'); + var bits = []; + set.forEach(function (b) { + if (mobileBits && !b[6]) return; + var el = document.createElement('span'); + el.className = 'bit bit--' + b[5]; + el.style.left = b[1] + '%'; el.style.top = b[2] + '%'; el.style.width = b[3] + '%'; + var inner = document.createElement('span'); inner.className = 'bit__in'; + var img = document.createElement('img'); + img.alt = ''; img.decoding = 'async'; img.draggable = false; + if (lazy) img.loading = 'lazy'; + img.style.rotate = b[4] + 'deg'; + if (b[7]) img.style.scale = '-1 1'; + img.onerror = function () { el.remove(); }; + // Größe als Fläche: lange, schmale Zutaten (Salatblatt, Bacon) wirken so gleich groß wie runde + img.onload = function () { + var ratio = img.naturalWidth / img.naturalHeight; + el.style.width = (b[3] * Math.sqrt(ratio)).toFixed(2) + '%'; + }; + img.src = BITS + b[0] + '.webp'; + inner.appendChild(img); el.appendChild(inner); holder.appendChild(el); + bits.push({ el: el, inner: inner, img: img, x: b[1], y: b[2], layer: b[5] }); + }); + box.appendChild(holder); + return { box: box, bits: bits, hero: !lazy }; + }).filter(Boolean); + + /* ---------- Funken (Buckets) ---------- */ + if (!reduce) { + $$('[data-sparks]').forEach(function (wrap) { + for (var i = 0; i < 22; i++) { + var sp = document.createElement('i'); + sp.style.left = (Math.random() * 100).toFixed(1) + '%'; + sp.style.setProperty('--sz', (2 + Math.random() * 3.5).toFixed(1) + 'px'); + sp.style.setProperty('--d', (4 + Math.random() * 5).toFixed(2) + 's'); + sp.style.setProperty('--dl', (-Math.random() * 9).toFixed(2) + 's'); + sp.style.setProperty('--dx', ((Math.random() - .5) * 140).toFixed(0) + 'px'); + sp.style.setProperty('--h', (300 + Math.random() * 600).toFixed(0) + 'px'); + wrap.appendChild(sp); + } + }); + } + + /* ---------- 3D-Neigung der Karten (nur Maus) ---------- */ + if (!reduce && window.matchMedia('(hover: hover) and (pointer: fine)').matches) { + $$('[data-tilt]').forEach(function (card) { + card.addEventListener('pointermove', function (e) { + var r = card.getBoundingClientRect(); + var nx = (e.clientX - r.left) / r.width - .5, ny = (e.clientY - r.top) / r.height - .5; + card.classList.add('is-tilting'); + card.style.setProperty('--ty', (nx * 14).toFixed(2) + 'deg'); + card.style.setProperty('--tx', (-ny * 12).toFixed(2) + 'deg'); + }); + card.addEventListener('pointerleave', function () { + card.classList.remove('is-tilting'); + card.style.setProperty('--tx', '0deg'); card.style.setProperty('--ty', '0deg'); + }); + }); + } + /* ---------- Route (Take away) ---------- */ var route = $('[data-route]'); var routeState = null; @@ -252,7 +349,7 @@ if (hero) { var chars = []; $$('[data-hero-big] .part', hero).forEach(function (p) { chars = chars.concat(splitChars(p)); }); - var burgerImg = $('.hero__burger img', hero); + var burgerImg = $('.hero__burger .blast__food', hero); var tl = gsap.timeline({ delay: .05 }); tl.set($$('[data-intro]', hero), { opacity: 1 }) .fromTo('.hero__eyebrow', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: .5, ease: 'power3.out' }, 0) @@ -324,6 +421,39 @@ gsap.fromTo(el, { '--s': 0 }, { '--s': 1, duration: .7, ease: 'back.out(3)', scrollTrigger: { trigger: el, start: 'top 88%', once: true } }); }); + /* ---- Zutaten: schweben, beim Laden aus dem Essen platzen, beim Scrollen wegfliegen ---- */ + blasts.forEach(function (bl) { + var vec = function (b) { + var w = bl.box.offsetWidth, h = bl.box.offsetHeight; + return { x: (b.x - 50) / 100 * w, y: (b.y - 50) / 100 * h }; + }; + bl.bits.forEach(function (b, i) { + gsap.to(b.img, { y: rand(-16, -8), rotation: rand(-10, 10), duration: rand(1.8, 3.2), yoyo: true, repeat: -1, ease: 'sine.inOut', delay: rand(0, 1.5) }); + var spin = rand(120, 300) * (i % 2 ? 1 : -1); + var grow = b.layer === 'b' ? 1.05 : 1.35; + if (bl.hero) { + gsap.from(b.inner, { x: function () { return -vec(b).x; }, y: function () { return -vec(b).y; }, scale: .2, opacity: 0, rotation: -spin / 2, duration: 1.2, ease: 'back.out(1.3)', delay: .55 + i * .035 }); + gsap.to(b.el, { + x: function () { return vec(b).x * 1.7; }, y: function () { return vec(b).y * 1.7 - 80; }, + rotation: spin, scale: grow, ease: 'power1.in', + scrollTrigger: { trigger: bl.box.closest('section') || bl.box, start: 'top top', end: 'bottom top', scrub: .6, invalidateOnRefresh: true } + }); + } else { + var tl = gsap.timeline({ scrollTrigger: { trigger: bl.box, start: 'top 95%', end: 'bottom 5%', scrub: .7, invalidateOnRefresh: true } }); + tl.fromTo(b.el, { x: function () { return -vec(b).x * .6; }, y: function () { return -vec(b).y * .6; }, scale: .4, opacity: 0, rotation: -spin / 3 }, + { x: 0, y: 0, scale: 1, opacity: 1, rotation: 0, duration: .42, ease: 'power2.out' }) + .to(b.el, { duration: .12 }) + .to(b.el, { x: function () { return vec(b).x * 1.3; }, y: function () { return vec(b).y * 1.3 - 40; }, scale: grow, rotation: spin, duration: .46, ease: 'power2.in' }); + } + }); + }); + + /* ---- Feuerwirbel dreht sich langsam mit ---- */ + $$('[data-swirl]').forEach(function (sw) { + var sec = sw.closest('section') || sw.parentNode; + gsap.fromTo(sw, { rotation: -12 }, { rotation: 28, ease: 'none', scrollTrigger: { trigger: sec, start: 'top bottom', end: 'bottom top', scrub: true } }); + }); + /* ---- Parallax Fotoband ---- */ $$('[data-parallax]').forEach(function (img) { gsap.fromTo(img, { yPercent: -7 }, { yPercent: 7, ease: 'none', scrollTrigger: { trigger: img.parentNode, start: 'top bottom', end: 'bottom top', scrub: true } }); diff --git a/datenschutz.html b/datenschutz.html index 2bf7333..7f3ce23 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -76,7 +76,7 @@
Rechtliches -

Datenschutz

+

Datenschutz