Redesign: kräftige Farben, Feuer-Formen, Texturen, 3D-Schrift und explodierende Zutaten
- Hero, Speisekarte-Kopf und Hunger-Abschnitt auf rotem Feuerwirbel mit Spotlight, Rasterpunkten und Körnung - Flammen-Übergänge (animiert), gerissene Papierkanten, Papier-Textur für Karten - 3D-Extrusion für Headlines, Buttons/Sticker mit Tiefe und Glanz, 3D-Neigung der Karten - Champions als Plakat-Karten, Wings im Crunch-Time-Stil, Buckets mit Glut und Funken - Zutaten (Wikimedia Commons, freigestellt) fliegen um Burger/Wings und explodieren beim Scrollen - Bildnachweise der Zutaten im Impressum Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
da134cd0bb
commit
12d8f41fd8
33 files changed
+640
-224
No files matched your search
+367
-132
@@ -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; }
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet"><path d="M140 940 C103 940 49 912 29 900 C9 888 23 878 22 867 C22 856 23 846 27 835 C31 824 38 813 45 802 C52 791 62 780 69 769 C75 758 83 748 85 737 C88 726 87 715 84 704 C82 693 74 682 70 671 C66 661 61 650 61 639 C62 628 67 606 73 606 C78 606 86 628 95 639 C105 650 119 661 132 671 C145 682 159 693 172 704 C184 715 197 726 206 737 C216 748 224 758 230 769 C236 780 239 791 242 802 C244 813 245 824 247 835 C248 846 249 856 250 867 C250 878 269 888 251 900 C233 912 177 940 140 940Z"/><path d="M200 931 C171 931 129 913 114 900 C99 887 109 870 107 855 C106 840 105 825 107 810 C108 795 112 780 116 765 C121 750 128 735 133 720 C139 705 146 690 149 675 C151 660 152 645 150 630 C148 615 142 600 136 585 C131 570 122 555 117 540 C113 525 103 495 108 495 C112 495 131 525 144 540 C157 555 172 570 184 585 C196 600 208 615 218 630 C227 645 236 660 242 675 C249 690 254 705 258 720 C263 735 265 750 269 765 C272 780 274 795 277 810 C279 825 282 840 284 855 C285 870 300 887 286 900 C272 913 229 931 200 931Z"/><path d="M260 932 C230 932 186 914 171 900 C156 886 169 864 169 846 C170 827 171 809 172 791 C173 773 175 755 176 737 C177 718 179 700 180 682 C181 664 182 646 182 628 C183 609 183 591 184 573 C185 555 186 537 189 519 C191 500 195 482 200 464 C204 446 209 410 214 410 C218 410 223 446 227 464 C231 482 234 500 238 519 C243 537 247 555 254 573 C261 591 270 609 279 628 C288 646 300 664 309 682 C318 700 327 718 334 737 C340 755 345 773 348 791 C351 809 352 827 352 846 C352 864 364 886 349 900 C334 914 290 932 260 932Z"/><path d="M320 931 C292 931 249 915 235 900 C220 885 232 861 231 841 C229 821 228 802 228 782 C227 762 227 742 229 723 C230 703 233 683 236 664 C240 644 245 624 248 605 C252 585 256 565 258 545 C259 526 260 506 259 486 C258 467 256 447 253 427 C250 408 237 368 242 368 C246 368 269 408 279 427 C290 447 299 467 307 486 C314 506 319 526 325 545 C331 565 335 585 341 605 C347 624 354 644 360 664 C367 683 374 703 380 723 C386 742 392 762 397 782 C401 802 404 821 406 841 C407 861 420 885 405 900 C391 915 348 931 320 931Z"/><path d="M380 933 C350 933 304 917 289 900 C274 883 289 852 290 828 C291 805 293 781 295 757 C297 733 299 709 301 685 C303 662 305 638 307 614 C310 590 313 566 316 542 C320 519 325 495 331 471 C337 447 344 423 352 399 C360 376 371 352 380 328 C389 304 402 256 406 256 C411 256 408 304 408 328 C407 352 403 376 402 399 C401 423 400 447 402 471 C404 495 409 519 415 542 C421 566 431 590 439 614 C446 638 455 662 461 685 C467 709 472 733 474 757 C477 781 476 805 476 828 C475 852 487 883 471 900 C455 917 410 933 380 933Z"/><path d="M440 931 C412 931 370 916 355 900 C340 884 351 855 352 832 C352 809 353 787 357 764 C360 742 366 719 372 696 C378 674 386 651 393 628 C400 606 408 583 413 561 C418 538 422 515 424 493 C426 470 426 447 427 425 C429 402 429 380 433 357 C436 334 445 289 449 289 C454 289 455 334 459 357 C463 380 469 402 475 425 C480 447 486 470 491 493 C496 515 501 538 506 561 C510 583 514 606 517 628 C519 651 521 674 522 696 C524 719 524 742 525 764 C525 787 526 809 526 832 C526 855 539 884 525 900 C511 916 468 931 440 931Z"/><path d="M500 942 C461 942 405 923 384 900 C364 877 379 836 377 805 C375 773 373 741 374 709 C375 678 379 646 385 614 C391 582 401 551 411 519 C421 487 435 455 444 424 C453 392 462 360 465 328 C469 297 468 265 465 233 C463 201 455 170 449 138 C443 106 425 43 431 43 C437 43 468 106 485 138 C501 170 518 201 530 233 C542 265 549 297 556 328 C563 360 566 392 570 424 C573 455 576 487 579 519 C582 551 585 582 589 614 C593 646 599 678 603 709 C607 741 612 773 614 805 C616 836 634 877 616 900 C597 923 539 942 500 942Z"/><path d="M560 933 C529 933 483 919 468 900 C452 881 466 847 468 821 C470 794 473 768 477 742 C482 715 488 689 494 663 C500 636 507 610 514 583 C521 557 528 531 535 504 C542 478 548 452 555 425 C562 399 569 372 578 346 C587 320 597 293 609 267 C621 241 645 188 649 188 C654 188 641 241 638 267 C634 293 631 320 629 346 C627 372 627 399 628 425 C629 452 632 478 636 504 C639 531 645 557 648 583 C652 610 655 636 657 663 C659 689 660 715 660 742 C660 768 658 794 657 821 C656 847 668 881 652 900 C636 919 591 933 560 933Z"/><path d="M620 934 C588 934 541 918 525 900 C508 882 520 851 520 826 C520 802 520 777 523 752 C527 728 532 703 539 679 C546 654 556 629 564 605 C572 580 583 556 589 531 C596 506 601 482 604 457 C607 432 606 408 606 383 C606 359 604 334 606 309 C607 285 610 236 615 236 C620 236 628 285 635 309 C643 334 652 359 659 383 C667 408 673 432 679 457 C685 482 689 506 693 531 C697 556 700 580 703 605 C705 629 706 654 708 679 C710 703 711 728 712 752 C713 777 715 802 715 826 C716 851 731 882 715 900 C700 918 652 934 620 934Z"/><path d="M680 934 C648 934 600 914 584 900 C569 886 586 866 587 849 C588 832 591 815 593 798 C595 781 596 764 599 747 C601 730 603 713 608 695 C612 678 617 661 625 644 C632 627 642 610 653 593 C664 576 678 559 691 542 C705 525 721 508 733 491 C746Line truncated
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 260" preserveAspectRatio="none"><path d="M-40 261 C-59 261 -87 246 -97 240 C-107 234 -101 229 -101 223 C-102 217 -102 211 -100 206 C-99 200 -96 194 -93 188 C-90 183 -86 177 -81 171 C-77 165 -72 160 -68 154 C-64 148 -61 142 -58 137 C-55 131 -53 125 -51 120 C-48 114 -46 108 -43 102 C-40 97 -35 85 -32 85 C-29 85 -27 97 -25 102 C-23 108 -21 114 -19 120 C-17 125 -15 131 -13 137 C-10 142 -7 148 -4 154 C-1 160 4 165 7 171 C10 177 14 183 16 188 C19 194 20 200 21 206 C22 211 22 217 21 223 C21 229 27 234 17 240 C7 246 -21 261 -40 261Z"/><path d="M55 267 C30 267 -7 247 -21 240 C-35 233 -27 230 -29 225 C-30 220 -33 215 -32 211 C-31 206 -29 201 -24 196 C-20 191 -12 186 -4 181 C4 176 15 171 23 166 C31 161 39 156 44 152 C49 147 51 142 51 137 C52 132 49 127 47 122 C45 117 35 107 39 107 C42 107 61 117 70 122 C79 127 88 132 94 137 C99 142 102 147 104 152 C106 156 107 161 108 166 C110 171 112 176 114 181 C116 186 118 191 121 196 C124 201 128 206 130 211 C132 215 134 220 135 225 C135 230 145 233 131 240 C118 247 81 267 55 267Z"/><path d="M131 265 C108 265 74 246 62 240 C49 234 55 234 54 231 C54 229 54 226 57 223 C60 220 65 217 71 214 C77 211 85 209 91 206 C97 203 104 200 108 197 C111 194 112 191 112 189 C112 186 108 183 107 180 C106 177 104 174 106 171 C108 169 115 163 118 163 C122 163 123 169 127 171 C132 174 140 177 146 180 C153 183 160 186 167 189 C174 191 180 194 186 197 C191 200 196 203 199 206 C202 209 203 211 204 214 C205 217 205 220 205 223 C205 226 204 229 204 231 C203 234 213 234 201 240 C189 246 154 265 131 265Z"/><path d="M192 269 C165 269 125 248 110 240 C96 232 106 228 106 222 C106 216 108 210 110 204 C112 198 116 192 120 186 C124 180 129 174 134 168 C139 162 144 157 149 151 C154 145 159 139 164 133 C169 127 173 121 180 115 C186 109 194 103 202 97 C210 91 224 79 228 79 C233 79 228 91 227 97 C226 103 225 109 225 115 C225 121 225 127 228 133 C231 139 236 145 241 151 C247 157 255 162 261 168 C266 174 273 180 276 186 C280 192 283 198 283 204 C284 210 283 216 281 222 C280 228 289 232 274 240 C259 248 219 269 192 269Z"/><path d="M266 264 C244 264 211 246 199 240 C187 234 194 234 193 231 C192 228 192 225 194 222 C196 219 200 215 205 212 C209 209 216 206 222 203 C228 200 236 197 241 194 C246 191 250 188 253 185 C256 182 256 179 257 176 C258 172 259 169 261 166 C263 163 267 157 270 157 C274 157 277 163 282 166 C286 169 290 172 294 176 C299 179 302 182 306 185 C309 188 313 191 316 194 C320 197 323 200 326 203 C329 206 331 209 333 212 C335 215 336 219 337 222 C337 225 337 228 337 231 C336 234 345 234 333 240 C321 246 288 264 266 264Z"/><path d="M362 260 C344 260 316 247 306 240 C296 233 303 226 302 219 C302 213 301 206 302 199 C303 192 305 185 307 178 C309 172 313 165 316 158 C320 151 325 144 329 137 C333 131 337 124 340 117 C343 110 345 103 347 96 C350 89 352 83 354 76 C356 69 357 55 360 55 C363 55 368 69 371 76 C374 83 376 89 379 96 C381 103 382 110 384 117 C386 124 389 131 392 137 C395 144 400 151 403 158 C407 165 411 172 414 178 C417 185 420 192 421 199 C423 206 423 213 422 219 C422 226 428 233 418 240 C408 247 381 260 362 260Z"/><path d="M443 261 C424 261 396 245 386 240 C376 235 384 235 383 232 C382 229 382 226 382 224 C382 221 382 218 384 216 C386 213 388 210 392 208 C396 205 402 202 407 199 C413 197 421 194 428 191 C434 189 441 186 447 183 C453 180 459 178 463 175 C467 172 467 167 470 167 C473 167 479 172 481 175 C483 178 481 180 480 183 C478 186 474 189 473 191 C472 194 471 197 473 199 C474 202 478 205 481 208 C485 210 491 213 495 216 C499 218 503 221 505 224 C507 226 508 229 507 232 C507 235 512 235 501 240 C491 245 463 261 443 261Z"/><path d="M512 269 C485 269 446 248 431 240 C416 232 424 227 422 220 C421 213 420 207 421 200 C423 193 428 187 434 180 C441 173 450 166 460 160 C469 153 481 146 489 140 C497 133 504 126 508 120 C512 113 512 106 511 100 C511 93 507 86 506 80 C505 73 501 59 505 59 C509 59 523 73 531 80 C540 86 550 93 556 100 C563 106 568 113 572 120 C576 126 578 133 580 140 C582 146 583 153 585 160 C586 166 587 173 589 180 C590 187 592 193 593 200 C594 207 596 213 596 220 C596 227 607 232 593 240 C579 248 539 269 512 269Z"/><path d="M604 260 C586 260 558 246 548 240 C538 234 545 231 544 226 C543 221 541 216 542 212 C542 207 543 202 546 197 C549 193 554 188 560 183 C566 178 575 174 582 169 C589 164 598 159 604 155 C610 150 615 145 618 140 C621 136 623 131 623 126 C623 121 616 112 619 112 C622 112 635 121 640 126 C645 131 648 136 650 140 C651 145 649 150 648 155 C647 159 645 164 645 169 C645 174 645 178 646 183 C648 188 650 193 653 197 C655 202 659 207 660 212 C662 216 664 221 664 226 C664 231 670 234 660 240 C650 246 623 260 604 260Z"/><path d="M704 263 C682 263 651 246 639 240 C628 234 635 232 634 227 C633 223 632 219 633 215 C634 210 636 206 639 202 C643 198 648 193 653 189 C658 185 665 181 670 177 C675 172 681 168 684 164 C688 160 689 155 691 151 C692 147 693 143 693 138 C694 134 692 126 696 126 C699 126 708 134 713 138 C719 143 723 147 727 15Line truncated
|
||||
|
After Width: | Height: | Size: 10 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 260" preserveAspectRatio="none"><path d="M-40 258 C-56 258 -80 245 -89 240 C-97 235 -90 232 -89 229 C-89 225 -86 221 -85 217 C-83 214 -81 210 -80 206 C-79 202 -78 198 -78 195 C-78 191 -78 187 -78 183 C-77 179 -78 176 -75 172 C-73 168 -69 164 -64 161 C-58 157 -49 153 -40 149 C-31 145 -14 138 -11 138 C-9 138 -21 145 -25 149 C-29 153 -34 157 -36 161 C-38 164 -39 168 -37 172 C-35 176 -29 179 -23 183 C-18 187 -9 191 -3 195 C3 198 9 202 13 206 C17 210 18 214 18 217 C19 221 17 225 15 229 C13 232 18 235 9 240 C-1 245 -24 258 -40 258Z"/><path d="M19 255 C5 255 -15 245 -23 240 C-31 235 -26 229 -27 223 C-28 217 -29 211 -29 206 C-28 200 -27 194 -26 188 C-25 183 -22 177 -20 171 C-18 165 -15 160 -13 154 C-12 148 -10 142 -10 137 C-10 131 -10 125 -11 119 C-12 114 -13 108 -14 102 C-14 96 -18 85 -16 85 C-13 85 -5 96 -1 102 C4 108 9 114 13 119 C17 125 20 131 23 137 C27 142 31 148 34 154 C38 160 42 165 46 171 C49 177 52 183 55 188 C58 194 60 200 62 206 C63 211 64 217 64 223 C64 229 69 235 62 240 C55 245 34 255 19 255Z"/><path d="M69 258 C52 258 27 247 18 240 C9 233 16 225 16 218 C16 210 16 203 16 195 C16 188 16 180 16 173 C16 165 16 158 16 150 C16 143 17 135 18 128 C19 120 20 113 23 105 C25 98 28 90 32 83 C36 75 41 68 45 60 C49 53 52 38 55 38 C58 38 60 53 61 60 C61 68 60 75 60 83 C61 90 60 98 63 105 C65 113 70 120 75 128 C80 135 88 143 95 150 C101 158 108 165 113 173 C118 180 122 188 124 195 C126 203 126 210 125 218 C125 225 129 233 120 240 C111 247 86 258 69 258Z"/><path d="M149 260 C131 260 104 246 95 240 C85 234 93 230 92 225 C91 219 89 214 89 209 C89 204 88 199 90 194 C92 189 95 184 101 178 C107 173 116 168 125 163 C134 158 146 153 155 148 C163 142 173 137 179 132 C185 127 189 122 191 117 C192 112 185 101 187 101 C190 101 204 112 208 117 C211 122 211 127 209 132 C208 137 201 142 197 148 C194 153 188 158 186 163 C184 168 184 173 186 178 C187 184 191 189 194 194 C197 199 202 204 205 209 C207 214 209 219 209 225 C209 230 214 234 204 240 C194 246 168 260 149 260Z"/><path d="M206 256 C191 256 169 244 162 240 C154 236 161 233 160 229 C160 226 160 222 160 218 C160 215 160 211 161 208 C161 204 161 200 162 197 C163 193 165 190 168 186 C170 182 174 179 178 175 C182 172 187 168 192 164 C197 161 203 157 207 154 C212 150 215 143 217 143 C220 143 221 150 221 154 C221 157 218 161 217 164 C215 168 213 172 213 175 C213 179 215 182 218 186 C221 190 226 193 231 197 C236 200 242 204 246 208 C250 211 253 215 255 218 C256 222 256 226 256 229 C255 233 259 236 251 240 C242 244 221 256 206 256Z"/><path d="M273 260 C255 260 228 246 217 240 C207 234 212 230 210 225 C208 220 206 215 207 210 C208 205 210 200 215 195 C220 190 228 185 235 180 C243 175 253 170 260 165 C266 160 272 155 275 150 C277 145 276 140 273 135 C271 130 264 125 260 120 C256 115 244 105 247 105 C250 105 268 115 277 120 C287 125 297 130 304 135 C311 140 316 145 319 150 C322 155 322 160 322 165 C323 170 322 175 322 180 C322 185 321 190 322 195 C323 200 324 205 326 210 C327 215 329 220 330 225 C331 230 339 234 329 240 C320 246 292 260 273 260Z"/><path d="M327 260 C308 260 280 246 270 240 C260 234 266 229 265 224 C265 219 264 213 264 208 C265 203 267 198 269 192 C271 187 275 182 279 176 C283 171 288 166 292 160 C296 155 301 150 303 145 C306 139 307 134 309 129 C310 123 311 118 311 113 C312 107 310 97 313 97 C316 97 324 107 329 113 C333 118 337 123 340 129 C344 134 345 139 348 145 C351 150 353 155 356 160 C360 166 364 171 367 176 C371 182 375 187 378 192 C381 198 384 203 385 208 C387 213 388 219 387 224 C387 229 394 234 384 240 C374 246 346 260 327 260Z"/><path d="M384 261 C364 261 335 247 325 240 C314 233 320 226 319 220 C318 213 318 206 318 199 C319 192 321 186 323 179 C326 172 330 165 333 158 C337 152 343 145 346 138 C350 131 353 125 355 118 C357 111 357 104 358 97 C358 91 358 84 358 77 C358 70 356 57 359 57 C362 57 371 70 377 77 C382 84 387 91 391 97 C395 104 398 111 402 118 C405 125 409 131 413 138 C417 145 422 152 426 158 C430 165 434 172 437 179 C440 186 443 192 445 199 C446 206 447 213 447 220 C447 226 454 233 444 240 C433 247 404 261 384 261Z"/><path d="M462 261 C443 261 414 246 404 240 C394 234 400 231 401 226 C402 222 405 217 408 213 C411 208 416 204 420 199 C424 195 428 190 431 186 C433 181 434 176 435 172 C436 167 434 163 435 158 C435 154 435 149 438 145 C442 140 448 136 457 131 C466 127 488 118 491 118 C494 118 478 127 475 131 C472 136 470 140 471 145 C472 149 475 154 480 158 C485 163 494 167 500 172 C507 176 515 181 520 186 C526 190 529 195 531 199 C533 204 532 208 531 213 C530 217 527 222 525 226 C524 231 531 234 520 240 C509 246 481 261 462 261Z"/><path d="M535 256 C521 256 499 245 491 240 C483 235 487 229 486 223 C485 217 485 212 486 206 C487 201 489 195 491 189 C493 184 496 178 498 172 C500 167 503 161 504 155 C505 150 504 144 503 138 C502 133 499 127 498 122 C496 116 494 110 494 105 C494 99 494 88 497 88 C499 88 504 99 508 105 C512 110 518 116 523 122 C528 127 533 133 538 138 C543 144 549 150 554 155 C559 161 Line truncated
|
||||
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1300 -1300 2600 2600"><path d="M169 -2 C172 1 181 9 184 16 C188 22 189 29 190 35 C192 42 193 49 193 56 C193 63 193 70 192 77 C192 84 188 90 190 99 C191 108 199 121 201 131 C202 141 204 154 199 159 C193 164 172 157 165 161 C158 166 159 177 157 187 C154 196 157 215 150 219 C143 223 125 211 115 210 C105 208 98 210 90 211 C82 213 76 215 69 221 C63 226 58 238 51 245 C44 252 36 264 28 263 C20 262 10 242 2 236 C-6 230 -13 229 -20 227 C-28 224 -35 224 -42 222 C-49 219 -56 216 -63 213 C-70 211 -77 209 -84 207 C-91 205 -98 203 -105 200 C-112 197 -122 192 -126 191 C-129 189 -129 189 -126 191 C-122 192 -112 197 -105 200 C-98 203 -91 205 -84 207 C-77 209 -69 210 -62 210 C-55 210 -47 209 -40 208 C-32 207 -25 206 -18 205 C-12 203 -5 202 2 200 C8 198 15 196 21 193 C27 191 33 188 39 185 C44 182 50 179 55 176 C60 172 65 169 70 165 C75 161 80 158 84 154 C89 150 93 146 97 142 C101 137 104 133 108 129 C112 124 115 120 118 115 C121 111 124 106 127 102 C130 97 132 93 135 88 C137 83 139 78 142 74 C144 69 146 64 147 59 C149 54 151 49 152 44 C154 39 155 34 157 29 C158 24 159 19 161 14 C163 9 168 0 169 -2 C171 -5 167 -5 169 -2Z"/><path d="M121 124 C121 127 121 139 119 145 C118 151 114 156 111 162 C108 167 104 170 101 177 C98 184 97 195 94 205 C92 215 91 234 86 237 C80 240 67 225 59 222 C51 219 45 218 39 219 C32 219 26 223 20 224 C14 225 7 227 1 227 C-5 228 -12 229 -19 229 C-25 229 -32 228 -38 228 C-45 227 -51 225 -58 225 C-65 225 -71 224 -79 226 C-88 229 -101 241 -108 241 C-116 241 -119 230 -126 226 C-133 223 -143 225 -148 219 C-153 213 -151 199 -153 190 C-155 181 -157 173 -160 166 C-162 160 -167 155 -171 150 C-175 145 -179 140 -184 136 C-188 131 -193 126 -197 121 C-201 116 -207 107 -209 105 C-211 102 -211 102 -209 105 C-207 107 -201 116 -197 121 C-193 126 -188 131 -184 136 C-179 140 -174 144 -168 148 C-163 151 -156 154 -150 157 C-144 159 -138 162 -133 164 C-127 167 -121 169 -115 170 C-109 172 -103 174 -97 175 C-92 176 -86 177 -80 178 C-74 179 -69 179 -63 179 C-57 180 -52 180 -46 180 C-41 180 -35 179 -30 179 C-25 179 -20 178 -14 177 C-9 176 -4 175 1 174 C6 173 11 172 15 171 C20 169 25 168 29 166 C34 165 39 163 43 161 C47 159 52 158 56 156 C60 154 65 152 69 149 C73 147 77 145 81 143 C85 140 89 138 93 136 C97 133 101 131 106 129 C110 127 118 125 121 124 C123 123 121 120 121 124Z"/><path d="M-18 177 C-21 179 -31 188 -37 192 C-44 195 -50 196 -57 197 C-64 199 -71 199 -78 199 C-85 199 -92 198 -98 197 C-105 196 -112 195 -119 193 C-125 191 -132 188 -139 185 C-145 182 -151 179 -157 175 C-163 171 -169 167 -175 162 C-180 157 -186 152 -191 147 C-196 142 -200 136 -205 130 C-209 124 -213 118 -217 112 C-220 106 -223 99 -226 92 C-229 85 -230 78 -234 72 C-238 65 -244 59 -251 53 C-259 46 -279 40 -280 33 C-281 25 -264 15 -257 7 C-250 -1 -244 -8 -240 -16 C-236 -23 -237 -30 -235 -37 C-232 -44 -229 -50 -227 -57 C-224 -63 -223 -70 -221 -77 C-219 -84 -218 -91 -216 -98 C-214 -105 -210 -115 -209 -118 C-207 -122 -207 -122 -209 -118 C-210 -115 -214 -105 -216 -98 C-218 -91 -220 -84 -221 -77 C-222 -70 -223 -63 -223 -56 C-222 -49 -220 -41 -218 -34 C-217 -27 -216 -20 -214 -14 C-212 -7 -210 -1 -208 5 C-205 11 -203 17 -200 23 C-197 29 -195 35 -191 40 C-188 45 -185 51 -182 56 C-179 60 -175 65 -171 70 C-168 74 -164 79 -160 83 C-157 87 -153 91 -149 95 C-145 99 -141 102 -137 106 C-133 109 -129 112 -124 115 C-120 118 -116 121 -112 124 C-108 127 -103 130 -99 132 C-95 135 -90 137 -86 140 C-82 142 -77 144 -73 146 C-69 149 -64 151 -60 153 C-55 155 -51 157 -46 159 C-41 161 -37 162 -32 165 C-27 168 -20 175 -18 177 C-16 179 -15 174 -18 177Z"/><path d="M-159 92 C-163 90 -178 86 -186 82 C-193 77 -199 71 -204 64 C-209 58 -214 51 -218 43 C-223 36 -226 28 -229 20 C-232 12 -234 3 -236 -6 C-238 -14 -239 -23 -239 -32 C-239 -41 -239 -50 -238 -59 C-237 -68 -234 -76 -234 -86 C-235 -96 -236 -106 -242 -120 C-248 -135 -274 -163 -272 -174 C-270 -185 -246 -185 -231 -187 C-216 -189 -195 -182 -182 -184 C-170 -186 -166 -194 -159 -199 C-151 -204 -143 -210 -135 -215 C-128 -219 -119 -224 -111 -227 C-102 -231 -94 -234 -85 -236 C-76 -239 -67 -241 -58 -242 C-49 -243 -40 -244 -31 -244 C-22 -244 -13 -242 -4 -241 C5 -241 14 -241 23 -241 C31 -241 40 -241 49 -240 C58 -239 72 -236 76 -236 C80 -235 80 -235 76 -236 C72 -236 58 -239 49 -240 C40 -241 31 -241 23 -241 C14 -240 5 -239 -4 -237 C-12 -235 -21 -230 -29 -226 C-36 -223 -44 -219 -51 -215 C-59 -210 -66 -206 -72 -201 C-79 -196 -85 -191 -91 -186 C-97 -181 -102 -175 -107 -170 C-112 -164 -117 -158 -121 -153 C-126 -147 -130 -141 -134 -135 C-137 -129 -141 -122 -144 -116 C-147 -110 -149 -104 -152 -97 C-154 -91 -156 -85 -158 -79 C-160 -72 -162 -66 -163 -60 C-164 -53 -165 -47 -166 -41 C-167 -35 -167 -29 -167 -22 C-168 -16 -168 -10 -168 -4 C-168 2 -167 8 -167 14 C-166 20 -166 26 -165 33 C-164 39 -163 45 -162 51 C-161 57 -159 63 -159 70 C-158 76 -159 88 -159 92 C-159 95 -154 93 -159 92Z"/><path d="M-158 -66 C-160 -70 -164 -80 -166 -86 C-167 -93 -166 -99 -165 -105 C-164 -111 -163 -117 -161 -122 C-160 -128 -157 -134 -15Line truncated
|
||||
|
After Width: | Height: | Size: 58 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none"><path d="M0 40V9.9L9.4 9.2L18.8 10.0L32.2 17.7L40.2 9.9L47.6 10.3L61.5 3.9L69.9 21.2L84.3 2.9L95.9 17.1L102.9 9.6L118.2 7.5L126.5 7.7L141.2 7.1L150.7 15.8L157.5 22.6L163.0 19.3L171.1 16.5L179.8 4.0L189.4 19.4L197.4 21.4L206.0 24.3L212.1 12.1L225.5 12.3L234.1 16.3L239.6 24.1L255.1 25.3L260.3 25.4L273.8 25.0L285.6 4.9L292.8 10.5L302.0 5.3L307.1 11.1L320.7 13.2L326.7 6.2L334.0 9.0L340.9 10.7L346.3 12.5L362.3 17.5L375.8 25.8L386.1 15.4L391.5 12.5L406.3 7.0L411.6 12.4L418.9 23.7L425.5 24.7L436.7 6.0L451.6 22.2L464.8 9.7L472.1 11.0L487.3 19.8L501.1 22.7L511.9 20.3L519.8 11.6L525.6 11.6L538.0 24.2L544.4 8.7L550.1 19.4L561.3 24.7L568.7 24.6L573.9 3.2L587.8 23.8L598.8 4.0L611.2 24.1L624.7 17.5L630.0 18.7L640.4 8.1L646.9 21.8L657.7 23.1L671.8 17.8L681.0 13.6L688.5 25.4L694.6 19.2L709.3 15.8L723.8 9.2L738.5 13.4L752.7 22.4L759.5 3.8L766.1 14.1L777.1 9.1L782.2 17.8L792.5 16.7L798.4 23.3L807.3 25.7L819.2 19.0L827.6 6.7L842.6 23.6L856.3 16.0L862.8 14.5L875.1 9.5L881.7 3.8L896.6 18.4L905.5 9.7L914.9 3.8L927.1 13.4L932.4 25.1L946.5 10.1L962.0 18.5L972.4 24.9L985.8 3.2L998.0 21.4L1009.8 5.0L1025.0 18.8L1039.8 13.6L1047.4 19.3L1063.3 6.0L1072.7 4.8L1082.3 11.3L1093.2 19.1L1102.2 8.2L1108.9 25.5L1124.8 8.0L1133.2 12.6L1140.7 10.9L1154.2 12.3L1162.5 3.6L1176.2 17.8L1191.8 17.4L1198.5 8.6L1200.0 9.9V40Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
+131
-1
@@ -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 } });
|
||||
|
||||
+2
-1
@@ -76,7 +76,7 @@
|
||||
<main id="main" class="legal">
|
||||
<div class="wrap">
|
||||
<span class="kicker">Rechtliches</span>
|
||||
<h1 class="display stroke">Datenschutz</h1>
|
||||
<h1 class="display x3d">Datenschutz</h1>
|
||||
<div class="legal__body">
|
||||
<p class="draft-box">Entwurf: Die gelb markierten Angaben ergänzen wir vor der Veröffentlichung. Der Text wird vor dem Livegang rechtlich geprüft.</p>
|
||||
|
||||
@@ -112,6 +112,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="footer on-dark" data-nav-dark>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<div class="footer__grid">
|
||||
<div class="footer__brand">
|
||||
|
||||
+14
-1
@@ -76,7 +76,7 @@
|
||||
<main id="main" class="legal">
|
||||
<div class="wrap">
|
||||
<span class="kicker">Rechtliches</span>
|
||||
<h1 class="display stroke">Impressum</h1>
|
||||
<h1 class="display x3d">Impressum</h1>
|
||||
<div class="legal__body">
|
||||
<p class="draft-box">Entwurf: Die gelb markierten Angaben ergänzen wir vor der Veröffentlichung mit den Daten des Betreibers.</p>
|
||||
|
||||
@@ -102,6 +102,18 @@
|
||||
|
||||
<h2>Bildnachweis</h2>
|
||||
<p>Speisenfotos und Logo: Chickago Boys. <span class="fill">[Rechte bestätigen]</span></p>
|
||||
<p>Fliegende Zutaten (freigestellt, Farben angepasst) aus Wikimedia Commons:</p>
|
||||
<ul class="credits">
|
||||
<li>Salatblätter: Tiia Monto, <a href="https://commons.wikimedia.org/wiki/File:Cosmopolitan_salad.png" target="_blank" rel="noopener">„Cosmopolitan salad“</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC BY-SA 4.0</a></li>
|
||||
<li>Tomatenscheibe: Lee Ann Ratledge, <a href="https://commons.wikimedia.org/wiki/File:Half_of_a_sliced_tomato_on_a_blue_background.jpg" target="_blank" rel="noopener">„Half of a sliced tomato on a blue background“</a>, <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC BY 4.0</a></li>
|
||||
<li>Zwiebelscheiben: Amada44, <a href="https://commons.wikimedia.org/wiki/File:Red_onion_cross_section_03.jpg" target="_blank" rel="noopener">„Red onion cross section 03“</a> und <a href="https://commons.wikimedia.org/wiki/File:Red_onion_cross_section_04.jpg" target="_blank" rel="noopener">„04“</a>, <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank" rel="noopener">CC BY-SA 3.0</a></li>
|
||||
<li>Bacon: Bill Benzon, <a href="https://commons.wikimedia.org/wiki/File:Bacon_(54616346792).jpg" target="_blank" rel="noopener">„Bacon“</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC BY-SA 4.0</a></li>
|
||||
<li>Jalapeño: Epp, <a href="https://commons.wikimedia.org/wiki/File:Jalapeno_Estonia_3.jpg" target="_blank" rel="noopener">„Jalapeno Estonia 3“</a>, <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank" rel="noopener">CC BY-SA 3.0</a></li>
|
||||
<li>Chili: André Karwath aka Aka, <a href="https://commons.wikimedia.org/wiki/File:Large_Cayenne.jpg" target="_blank" rel="noopener">„Large Cayenne“</a>, <a href="https://creativecommons.org/licenses/by-sa/2.5/" target="_blank" rel="noopener">CC BY-SA 2.5</a></li>
|
||||
<li>Sesam: Sanjay ach, <a href="https://commons.wikimedia.org/wiki/File:Sa_white_sesame_seeds.jpg" target="_blank" rel="noopener">„Sa white sesame seeds“</a>, <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank" rel="noopener">CC BY-SA 3.0</a></li>
|
||||
<li>Gurke: Sir Beluga, <a href="https://commons.wikimedia.org/wiki/File:Sliced-pickle.jpg" target="_blank" rel="noopener">„Sliced-pickle“</a>, CC0; Panade-Stücke: Evan-Amos, <a href="https://commons.wikimedia.org/wiki/File:Fried-Chicken-Set.jpg" target="_blank" rel="noopener">„Fried-Chicken-Set“</a>, CC0</li>
|
||||
</ul>
|
||||
<p>Die bearbeiteten Zutaten-Bilder stehen unter derselben Lizenz wie das jeweilige Original.</p>
|
||||
|
||||
<h2>Website</h2>
|
||||
<p>Konzept, Gestaltung und Umsetzung: <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></p>
|
||||
@@ -110,6 +122,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="footer on-dark" data-nav-dark>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<div class="footer__grid">
|
||||
<div class="footer__brand">
|
||||
|
||||
+83
-55
@@ -108,31 +108,41 @@
|
||||
|
||||
<main id="main">
|
||||
<!-- ============ HERO ============ -->
|
||||
<section class="hero bg-cream" id="top" aria-labelledby="hero-title">
|
||||
<section class="hero bg-red on-red" id="top" data-nav-dark aria-labelledby="hero-title">
|
||||
<div class="fx" aria-hidden="true">
|
||||
<div class="fx__spot"></div>
|
||||
<div class="fx__swirl" data-swirl></div>
|
||||
<div class="fx__dots"></div>
|
||||
<div class="fx__vignette"></div>
|
||||
<div class="fx__grain"></div>
|
||||
</div>
|
||||
<div class="hero__stage">
|
||||
<h1 class="hero__title" id="hero-title">
|
||||
<span class="hero__eyebrow" data-intro><span>Fried Chicken & Burger</span> <span>in Kaiserslautern</span></span>
|
||||
<span class="hero__big" data-hero-big><span class="part">Knock</span><span class="part">out</span></span>
|
||||
<span class="hero__big x3d" data-hero-big><span class="part">Knock</span><span class="part">out</span></span>
|
||||
</h1>
|
||||
<div class="hero__burger" data-intro data-float>
|
||||
<img class="shot" src="assets/img/menu/us-burger.webp" width="853" height="616" alt="US Burger von Chickago Boys mit Cheddar, Spiegelei und Bacon" fetchpriority="high">
|
||||
<div class="hero__burger blast" data-intro data-float data-blast="burger" data-blast-mode="hero">
|
||||
<span class="hero__glow" aria-hidden="true"></span>
|
||||
<img class="shot blast__food" src="assets/img/menu/us-burger.webp" width="853" height="616" alt="US Burger von Chickago Boys mit Cheddar, Spiegelei und Bacon" fetchpriority="high">
|
||||
</div>
|
||||
<div class="hero__wm" data-intro aria-hidden="true"><div class="wm-fill"><span class="wm-mask wm-mask--block"></span></div></div>
|
||||
<span class="sticker hero__st1" data-intro data-sticker>Knusprig<br>paniert</span>
|
||||
<span class="sticker sticker--red hero__st2" data-intro data-sticker>Mild oder<br>scharf?</span>
|
||||
<span class="sticker sticker--ink hero__st2" data-intro data-sticker>Mild oder<br>scharf?</span>
|
||||
<img class="hero__rooster die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264" data-intro data-sticker>
|
||||
</div>
|
||||
<div class="hero__bottom">
|
||||
<p class="lead" data-intro>Crispy Tenders, Wings mit Punch und Burger, die dich <strong>umhauen</strong>. Frisch aus der Küche in der Merkurstraße 13 – vor Ort, zum Abholen oder geliefert.</p>
|
||||
<div class="hero__cta" data-intro>
|
||||
<span class="open-badge" data-open-badge>Öffnungszeiten: täglich 12–22 Uhr</span>
|
||||
<a class="btn" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
|
||||
<a class="btn btn--yellow" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
|
||||
<a class="btn btn--ghost" href="speisekarte.html">Speisekarte</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flames flames--in" aria-hidden="true" style="--flame-front: var(--cream)"><i></i><i></i><i></i></div>
|
||||
</section>
|
||||
|
||||
<div class="ticker-clip" aria-hidden="true">
|
||||
<div class="ticker ticker--back"><div class="ticker__track"><span>Crispy</span><span>Juicy</span><span>Spicy</span><span>Knockout</span><span>Crispy</span><span>Juicy</span><span>Spicy</span><span>Knockout</span><span>Crispy</span><span>Juicy</span><span>Spicy</span><span>Knockout</span><span>Crispy</span><span>Juicy</span><span>Spicy</span><span>Knockout</span></div></div>
|
||||
<div class="ticker">
|
||||
<div class="ticker__track">
|
||||
<span>Chicken Wings</span><span>Crispy Tenders</span><span>Beef Burger</span><span>Chicken Burger</span><span>Wraps</span><span>Cheesy Fries</span><span>Buckets</span><span>Merkurstraße 13</span>
|
||||
@@ -143,70 +153,78 @@
|
||||
|
||||
<!-- ============ CHAMPIONS ============ -->
|
||||
<section class="section bg-cream champs" aria-labelledby="champs-title">
|
||||
<div class="fx" aria-hidden="true"><div class="fx__mottle"></div><div class="fx__dots"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<span class="kicker" data-reveal>Die Favoriten</span>
|
||||
<h2 class="display h2 stroke" id="champs-title" data-pop>Champions der Karte</h2>
|
||||
<h2 class="display h2 x3d" id="champs-title" data-pop>Champions der Karte</h2>
|
||||
<p class="lead" data-reveal>Knusprig, saftig, ordentlich belegt: drei Gerichte, mit denen du nichts falsch machst.</p>
|
||||
<a class="btn" href="speisekarte.html" data-reveal>Ganze Karte ansehen <svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
|
||||
|
||||
<div class="champs__cards">
|
||||
<a class="photo-card" href="speisekarte.html#beef-burger" data-reveal>
|
||||
<div class="photo-card__img"><img src="assets/img/foto-us-burger.webp" width="900" height="900" loading="lazy" alt="US Burger mit Cheddar, Ei, Bacon und BBQ-Soße auf einem Holzbrett"></div>
|
||||
<span class="price photo-card__price">13,50 €</span>
|
||||
<span class="photo-card__label"><span class="sticker">US Burger</span></span>
|
||||
<a class="champ champ--red" href="speisekarte.html#beef-burger" data-reveal data-tilt>
|
||||
<span class="champ__bg" aria-hidden="true"><span class="fx__swirl"></span><span class="fx__spot"></span><span class="fx__grain"></span></span>
|
||||
<span class="champ__kicker">Beef Burger</span>
|
||||
<span class="champ__name puffy">US<br>Burger</span>
|
||||
<span class="champ__food blast" data-blast="burger-sm"><img class="blast__food" src="assets/img/menu/us-burger.webp" width="853" height="616" loading="lazy" alt="US Burger mit Cheddar, Ei, Bacon und BBQ-Soße"></span>
|
||||
<span class="champ__foot"><span class="price champ__price">13,50 €</span><span class="champ__go">Zur Karte <svg aria-hidden="true"><use href="#i-arrow"/></svg></span></span>
|
||||
</a>
|
||||
<a class="photo-card" href="speisekarte.html#chicken-burger" data-reveal>
|
||||
<div class="photo-card__img"><img src="assets/img/foto-chicken-honey-mustard.webp" width="900" height="900" loading="lazy" alt="Chicken Burger Home Style mit Honey-Mustard-Soße und Bacon"></div>
|
||||
<span class="price photo-card__price">12,50 €</span>
|
||||
<span class="photo-card__label"><span class="sticker sticker--red">Honey Mustard Bacon</span></span>
|
||||
<a class="champ champ--orange" href="speisekarte.html#chicken-burger" data-reveal data-tilt>
|
||||
<span class="champ__bg" aria-hidden="true"><span class="champ__rays"></span><span class="fx__dots"></span><span class="fx__grain"></span></span>
|
||||
<span class="champ__kicker">Chicken Burger</span>
|
||||
<span class="champ__name puffy">Honey<br>Mustard</span>
|
||||
<span class="champ__food blast" data-blast="chicken-sm"><img class="blast__food" src="assets/img/menu/chicken-home-style-honey-mustard-bacon.webp" width="874" height="637" loading="lazy" alt="Chicken Burger Home Style mit Honey-Mustard-Soße und Bacon"></span>
|
||||
<span class="champ__foot"><span class="price champ__price">12,50 €</span><span class="champ__go">Zur Karte <svg aria-hidden="true"><use href="#i-arrow"/></svg></span></span>
|
||||
</a>
|
||||
<a class="photo-card" href="speisekarte.html#wraps" data-reveal>
|
||||
<div class="photo-card__img"><img src="assets/img/foto-chicken-wrap.webp" width="900" height="900" loading="lazy" alt="Chicken Wrap Chickago-Boys mit zwei Crispy-Filets, aufgeschnitten"></div>
|
||||
<span class="price photo-card__price">9,50 €</span>
|
||||
<span class="photo-card__label"><span class="sticker">Chickago Wrap</span></span>
|
||||
<a class="champ champ--ink" href="speisekarte.html#wraps" data-reveal data-tilt>
|
||||
<span class="champ__bg" aria-hidden="true"><span class="champ__embers"></span><span class="fx__grain"></span></span>
|
||||
<span class="champ__kicker">Wrap</span>
|
||||
<span class="champ__name puffy">Chickago<br>Wrap</span>
|
||||
<span class="champ__food blast" data-blast="wrap-sm"><img class="blast__food" src="assets/img/menu/chicken-wrap-chickago-boys.webp" width="812" height="546" loading="lazy" alt="Chicken Wrap Chickago-Boys mit zwei Crispy-Filets, aufgeschnitten"></span>
|
||||
<span class="champ__foot"><span class="price champ__price">9,50 €</span><span class="champ__go">Zur Karte <svg aria-hidden="true"><use href="#i-arrow"/></svg></span></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ WINGS ============ -->
|
||||
<section class="section bg-red on-red wings" id="wings" aria-labelledby="wings-title">
|
||||
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 70C160 18 330 20 520 62s380 70 560 30 280-66 360-42v72H0Z"/></svg></div>
|
||||
<section class="section bg-orange on-red wings" id="wings" aria-labelledby="wings-title">
|
||||
<div class="flames" aria-hidden="true" style="--flame-front: var(--orange)"><i></i><i></i><i></i></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__dots"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<div class="wings__head">
|
||||
<div>
|
||||
<span class="kicker kicker--yellow" data-reveal>Round 1</span>
|
||||
<h2 class="display h2 stroke" id="wings-title" data-pop>Wings mit Punch</h2>
|
||||
<p class="lead wings__lead" data-reveal><em>How many Wings can you handle?</em><br>Knusprig frittiert und in einer von vier Saucen geschwenkt – oder klassisch mit Sauce nach Wahl. Jede Portion gibt’s mild oder scharf.</p>
|
||||
</div>
|
||||
<div class="wings__hero" data-reveal>
|
||||
<img src="assets/img/cut-chicken-wings.webp" width="1000" height="813" loading="lazy" alt="Ein Berg knuspriger Chicken Wings">
|
||||
<div class="wings__stage">
|
||||
<span class="kicker kicker--ink" data-reveal>Round 1</span>
|
||||
<h2 class="wings__big puffy" id="wings-title" data-pop>Wings mit Punch</h2>
|
||||
<div class="wings__hero blast" data-blast="wings" data-reveal>
|
||||
<img class="blast__food" src="assets/img/cut-chicken-wings.webp" width="1000" height="813" loading="lazy" alt="Ein Berg knuspriger Chicken Wings">
|
||||
<span class="burst" data-sticker><span>K.O.<br>Crunch</span></span>
|
||||
<img class="rooster-st die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264" data-sticker>
|
||||
</div>
|
||||
<div class="wings__info" data-reveal>
|
||||
<p class="wings__claim puffy">How many Wings can you handle?</p>
|
||||
<p class="lead wings__lead">Knusprig frittiert und in einer von vier Saucen geschwenkt – oder klassisch mit Sauce nach Wahl. Jede Portion gibt’s mild oder scharf.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sauce-grid">
|
||||
<article class="sauce" data-reveal>
|
||||
<div class="sauce__img"><img class="shot" src="assets/img/menu/buffalo-red-hot-wings.webp" width="916" height="535" loading="lazy" alt="Buffalo Red Hot Wings in der Steingutschale"></div>
|
||||
<article class="sauce paper" data-reveal data-tilt>
|
||||
<div class="sauce__img" style="--sauce:#e8380c"><img class="shot" src="assets/img/menu/buffalo-red-hot-wings.webp" width="916" height="535" loading="lazy" alt="Buffalo Red Hot Wings in der Steingutschale"></div>
|
||||
<h3>Buffalo Red Hot</h3>
|
||||
<p>Der Klassiker mit Feuer.</p>
|
||||
<span class="price">10 Stück · 14,00 €</span>
|
||||
</article>
|
||||
<article class="sauce" data-reveal>
|
||||
<div class="sauce__img"><img class="shot" src="assets/img/menu/chipotle-honey-bbq-wings.webp" width="916" height="491" loading="lazy" alt="Chipotle Honey BBQ Wings in der Steingutschale"></div>
|
||||
<article class="sauce paper" data-reveal data-tilt>
|
||||
<div class="sauce__img" style="--sauce:#8a3a12"><img class="shot" src="assets/img/menu/chipotle-honey-bbq-wings.webp" width="916" height="491" loading="lazy" alt="Chipotle Honey BBQ Wings in der Steingutschale"></div>
|
||||
<h3>Chipotle Honey BBQ</h3>
|
||||
<p>Rauchig, süß, klebrig gut.</p>
|
||||
<span class="price">10 Stück · 14,00 €</span>
|
||||
</article>
|
||||
<article class="sauce" data-reveal>
|
||||
<div class="sauce__img"><img class="shot" src="assets/img/menu/teriyaki-wings.webp" width="916" height="591" loading="lazy" alt="Teriyaki Wings in der Steingutschale"></div>
|
||||
<article class="sauce paper" data-reveal data-tilt>
|
||||
<div class="sauce__img" style="--sauce:#4a1c0c"><img class="shot" src="assets/img/menu/teriyaki-wings.webp" width="916" height="591" loading="lazy" alt="Teriyaki Wings in der Steingutschale"></div>
|
||||
<h3>Teriyaki</h3>
|
||||
<p>Glasiert mit Teriyaki-Sauce.</p>
|
||||
<span class="price">10 Stück · 14,00 €</span>
|
||||
</article>
|
||||
<article class="sauce" data-reveal>
|
||||
<div class="sauce__img"><img class="shot" src="assets/img/menu/sweet-chili-wings.webp" width="916" height="528" loading="lazy" alt="Sweet Chili Wings in der Steingutschale"></div>
|
||||
<article class="sauce paper" data-reveal data-tilt>
|
||||
<div class="sauce__img" style="--sauce:#e3241a"><img class="shot" src="assets/img/menu/sweet-chili-wings.webp" width="916" height="528" loading="lazy" alt="Sweet Chili Wings in der Steingutschale"></div>
|
||||
<h3>Sweet Chili</h3>
|
||||
<p>Süß-scharf geschwenkt.</p>
|
||||
<span class="price">10 Stück · 14,00 €</span>
|
||||
@@ -229,23 +247,25 @@
|
||||
<div class="band" aria-hidden="true">
|
||||
<div class="wave wave--top"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 0h1440v58c-150 40-330 62-540 30S470 20 300 44 70 96 0 80Z"/></svg></div>
|
||||
<img src="assets/img/foto-menu-tenders.webp" width="1400" height="1400" loading="lazy" alt="" data-parallax>
|
||||
<span class="band__shade"></span>
|
||||
<span class="sticker band__tag" data-sticker>Crispy Tenders<br>ab 9,50 €</span>
|
||||
<div class="wave wave--bottom"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 0h1440v64c-170-40-360-52-560-12S430 104 250 70 60 30 0 48Z"/></svg></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ BUCKETS ============ -->
|
||||
<section class="section bg-ink on-dark buckets" data-nav-dark id="buckets" aria-labelledby="buckets-title">
|
||||
<div class="flames" aria-hidden="true" style="--flame-front: var(--ink)"><i></i><i></i><i></i></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__embers"></div><div class="fx__sparks" data-sparks></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<div class="buckets__head">
|
||||
<div>
|
||||
<span class="kicker kicker--yellow" data-reveal>Main Event</span>
|
||||
<h2 class="display h2 stroke" id="buckets-title" data-pop>Fight Night? Bucket Time.</h2>
|
||||
<h2 class="display h2 x3d" id="buckets-title" data-pop>Fight Night? Bucket Time.</h2>
|
||||
</div>
|
||||
<p class="lead" data-reveal>Für Zocker-Nacht, Betze-Abend oder die ganze Crew: Wings, Filets, Pommes und Cola in einem Bucket. Wings und Filets jeweils mild oder scharf.</p>
|
||||
</div>
|
||||
|
||||
<div class="fight-card-row">
|
||||
<article class="fight-card" data-reveal>
|
||||
<article class="fight-card paper" data-reveal data-tilt>
|
||||
<span class="fight-card__class">Mittelgewicht</span>
|
||||
<h3>Bucket</h3>
|
||||
<ul>
|
||||
@@ -257,7 +277,7 @@
|
||||
</div>
|
||||
</article>
|
||||
<span class="vs" aria-hidden="true" data-sticker>VS</span>
|
||||
<article class="fight-card" data-reveal>
|
||||
<article class="fight-card paper" data-reveal data-tilt>
|
||||
<span class="fight-card__class">Schwergewicht</span>
|
||||
<h3>Party Bucket</h3>
|
||||
<ul>
|
||||
@@ -275,17 +295,18 @@
|
||||
|
||||
<!-- ============ TAKE AWAY ============ -->
|
||||
<section class="section bg-yellow takeaway" id="bestellen" aria-labelledby="takeaway-title">
|
||||
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 60c200-50 380-50 600-8s420 62 600 22 200-38 240-30v76H0Z"/></svg></div>
|
||||
<div class="torn" aria-hidden="true"></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__dots"></div><div class="fx__mottle"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<span class="kicker kicker--ink" data-reveal>Take away</span>
|
||||
<h2 class="display h2 stroke" id="takeaway-title" data-pop>Hol’s dir. Oder lass kommen.</h2>
|
||||
<h2 class="display h2 stroke x3d" id="takeaway-title" data-pop>Hol’s dir. Oder lass kommen.</h2>
|
||||
<p class="takeaway__lead lead" data-reveal>Drei Wege zu deinem Chicken – alle starten in der Merkurstraße 13.</p>
|
||||
|
||||
<div class="route" data-route>
|
||||
<svg class="route__svg" aria-hidden="true" preserveAspectRatio="none"><path d=""/></svg>
|
||||
<img class="route__rider die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264">
|
||||
<div class="stops">
|
||||
<article class="stop" data-reveal>
|
||||
<article class="stop paper" data-reveal>
|
||||
<div class="stop__num">01</div>
|
||||
<h3>Vor Ort essen</h3>
|
||||
<p>Restaurant & Bar mit Plätzen drinnen und draußen. Einfach vorbeikommen – mit größerer Gruppe am besten vorher anrufen.</p>
|
||||
@@ -294,7 +315,7 @@
|
||||
<a href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="stop" data-reveal>
|
||||
<article class="stop paper" data-reveal>
|
||||
<div class="stop__num">02</div>
|
||||
<h3>Abholen</h3>
|
||||
<p>Telefonisch bestellen oder bei Lieferando „Abholung“ wählen – und heiß mitnehmen.</p>
|
||||
@@ -303,7 +324,7 @@
|
||||
<a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="stop" data-reveal>
|
||||
<article class="stop paper" data-reveal>
|
||||
<div class="stop__num">03</div>
|
||||
<h3>Liefern lassen</h3>
|
||||
<p>Keine Lust rauszugehen? Bestell bequem über Lieferando oder Uber Eats und lass es dir bringen.</p>
|
||||
@@ -319,11 +340,12 @@
|
||||
|
||||
<!-- ============ VISIT ============ -->
|
||||
<section class="section bg-cream visit" id="besuch" aria-labelledby="visit-title">
|
||||
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 50c180 50 400 60 620 20s420-62 600-30 190 30 220 26v54H0Z"/></svg></div>
|
||||
<div class="wave wave--top wave--deep" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 50c180 50 400 60 620 20s420-62 600-30 190 30 220 26v54H0Z"/></svg></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__mottle"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap visit__grid">
|
||||
<div>
|
||||
<span class="kicker" data-reveal>Ring frei</span>
|
||||
<h2 class="display h2 stroke" id="visit-title" data-pop>Komm vorbei</h2>
|
||||
<h2 class="display h2 x3d" id="visit-title" data-pop>Komm vorbei</h2>
|
||||
<p class="lead" data-reveal>Bar & Restaurant mitten in Kaiserslautern: Wings, Burger und kalte Drinks – drinnen oder draußen.</p>
|
||||
<div class="rating" data-reveal>
|
||||
<span class="rating__score">4,4</span>
|
||||
@@ -332,13 +354,13 @@
|
||||
<div class="rating__meta">aus 1.620 Bewertungen auf <a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a><br><small>Stand: 30.09.2026 · Bewertungen erhebt und prüft Lieferando.</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visit__deco" data-reveal>
|
||||
<img src="assets/img/cut-cheese-burger.webp" width="900" height="656" loading="lazy" alt="Cheese Burger mit Cheddar und karamellisierten Zwiebeln">
|
||||
<div class="visit__deco blast" data-reveal data-blast="burger">
|
||||
<img class="blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" loading="lazy" alt="Steakhouse Burger mit Pepper-Jack-Käse, Bacon und karamellisierten Zwiebeln">
|
||||
<span class="sticker sticker--ink" data-sticker>Bar &<br>Restaurant</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info-card" data-reveal>
|
||||
<div class="info-card paper" data-reveal>
|
||||
<h3>Adresse</h3>
|
||||
<address>Chickago Boys<br>Merkurstraße 13<br>67663 Kaiserslautern</address>
|
||||
<div class="row">
|
||||
@@ -346,7 +368,7 @@
|
||||
<a class="btn btn--ghost" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>0631 3107985</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card" data-reveal>
|
||||
<div class="info-card paper" data-reveal>
|
||||
<h3>Öffnungszeiten</h3>
|
||||
<span class="open-badge" data-open-badge>täglich 12–22 Uhr</span>
|
||||
<table class="hours" data-hours>
|
||||
@@ -369,20 +391,26 @@
|
||||
|
||||
<!-- ============ CTA ============ -->
|
||||
<section class="section bg-red on-red cta" aria-labelledby="cta-title">
|
||||
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 64c220-56 420-56 640-6s400 58 580 18 200-36 220-30v74H0Z"/></svg></div>
|
||||
<div class="flames" aria-hidden="true" style="--flame-front: var(--red)"><i></i><i></i><i></i></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__swirl" data-swirl></div><div class="fx__dots"></div><div class="fx__vignette"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<h2 class="display h2 stroke" id="cta-title" data-pop>Hunger?</h2>
|
||||
<h2 class="display h2 x3d" id="cta-title" data-pop>Hunger?</h2>
|
||||
<div class="cta__fire">
|
||||
<span class="cta__burst" aria-hidden="true"></span>
|
||||
<img class="cta__rooster die-cut" src="assets/img/rooster.svg" width="179" height="264" alt="" data-sticker>
|
||||
</div>
|
||||
<p class="lead" data-reveal>Dann ab in den Ring: jetzt online bestellen oder direkt bei uns anrufen.</p>
|
||||
<div class="cta__buttons" data-reveal>
|
||||
<a class="btn btn--yellow" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
|
||||
<a class="btn btn--ghost" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>0631 3107985</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="torn torn--in" aria-hidden="true"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer on-dark" data-nav-dark>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<div class="footer__grid">
|
||||
<div class="footer__brand">
|
||||
|
||||
+38
-34
@@ -74,14 +74,16 @@
|
||||
</nav>
|
||||
|
||||
<main id="main">
|
||||
<section class="page-hero bg-ink on-dark" data-nav-dark aria-labelledby="page-title">
|
||||
<section class="page-hero bg-red on-red" data-nav-dark aria-labelledby="page-title">
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__swirl" data-swirl></div><div class="fx__dots"></div><div class="fx__vignette"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<span class="kicker kicker--yellow">Speisekarte</span>
|
||||
<h1 class="display stroke" id="page-title" data-hero-big>Die Karte</h1>
|
||||
<h1 class="display x3d" id="page-title" data-hero-big>Die Karte</h1>
|
||||
<p class="lead">Wings, Tenders, Burger, Wraps und Sides – alles mild oder scharf, zum Mitnehmen, geliefert oder direkt bei uns.</p>
|
||||
</div>
|
||||
<div class="page-hero__img"><img class="shot" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
|
||||
<span class="sticker sticker--red page-hero__st" data-sticker>Mild oder<br>scharf?</span>
|
||||
<div class="page-hero__img blast" data-blast="burger" data-blast-mode="hero"><span class="hero__glow" aria-hidden="true"></span><img class="shot blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
|
||||
<span class="sticker sticker--ink page-hero__st" data-sticker>Mild oder<br>scharf?</span>
|
||||
<div class="flames flames--in" aria-hidden="true" style="--flame-front: var(--cream)"><i></i><i></i><i></i></div>
|
||||
</section>
|
||||
|
||||
<nav class="cat-nav" aria-label="Kategorien der Speisekarte">
|
||||
@@ -103,36 +105,36 @@
|
||||
<!-- CHICKEN -->
|
||||
<section class="menu-cat" id="chicken" aria-labelledby="h-chicken">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-chicken" data-pop>Chicken</h2>
|
||||
<h2 class="display x3d" id="h-chicken" data-pop>Chicken</h2>
|
||||
<p>Alle Chicken-Gerichte bekommst du im Schärfegrad deiner Wahl: <strong>mild oder scharf</strong> – ohne Aufpreis.</p>
|
||||
</div>
|
||||
<div class="dish-grid dish-grid--4">
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chicken Wings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chicken-wings.webp" width="916" height="366" loading="lazy" alt="Zehn knusprige Chicken Wings"></div>
|
||||
<div class="dish__body"><p>Knusprig, mit Sauce nach Wahl.</p><div class="variants"><span>6 Stück · 8,50 €</span><span>10 Stück · 11,00 €</span><span>20 Stück · 22,00 €</span></div></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Buffalo Red Hot Wings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/buffalo-red-hot-wings.webp" width="916" height="535" loading="lazy" alt="Buffalo Red Hot Wings in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>10 Stück, in Buffalo-Red-Hot-Sauce.</p><span class="price">14,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chipotle Honey BBQ Wings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chipotle-honey-bbq-wings.webp" width="916" height="491" loading="lazy" alt="Chipotle Honey BBQ Wings in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>10 Stück, in Chipotle-Honey-BBQ-Sauce.</p><span class="price">14,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Teriyaki Wings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/teriyaki-wings.webp" width="916" height="591" loading="lazy" alt="Teriyaki Wings in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>10 Stück, in Teriyaki-Sauce.</p><span class="price">14,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Sweet Chili Wings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/sweet-chili-wings.webp" width="916" height="528" loading="lazy" alt="Sweet Chili Wings in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>10 Stück, in Sweet-Chili-Sauce.</p><span class="price">14,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Crispy-Chicken Tenders</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/crispy-chicken-tenders-5-stueck.webp" width="911" height="378" loading="lazy" alt="Fünf knusprig panierte Crispy-Chicken Tenders"></div>
|
||||
<div class="dish__body"><p>Knusprig panierte Hähnchenfilets.</p><div class="variants"><span>5 Stück · 9,50 €</span><span>10 Stück · 17,00 €</span></div></div>
|
||||
@@ -154,11 +156,11 @@
|
||||
<!-- CHICKEN BURGER -->
|
||||
<section class="menu-cat" id="chicken-burger" aria-labelledby="h-cburger">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-cburger" data-pop>Chicken Burger</h2>
|
||||
<h2 class="display x3d" id="h-cburger" data-pop>Chicken Burger</h2>
|
||||
<p>Alle Chicken Burger mit Hähnchen-Patty, Cheddar, Tomaten und Salat – im Schärfegrad deiner Wahl.</p>
|
||||
</div>
|
||||
<div class="cat-split">
|
||||
<article class="dish dish--special" data-reveal>
|
||||
<article class="dish dish--special" data-reveal data-tilt>
|
||||
<h3 class="dish__name"><span class="dish__script dish__script--long">Chicken Home Style</span> Honey Mustard Bacon</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/chicken-home-style-honey-mustard-bacon.webp" width="874" height="637" loading="lazy" alt="Chicken Burger Home Style mit Honey Mustard und Bacon"></div>
|
||||
<div class="dish__body"><p>Cheddar, Bacon, Tomaten, Zwiebeln, Salat, Honey-Mustard-Soße.</p><span class="price">12,50 €</span></div>
|
||||
@@ -177,26 +179,26 @@
|
||||
<!-- BEEF BURGER -->
|
||||
<section class="menu-cat" id="beef-burger" aria-labelledby="h-bburger">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-bburger" data-pop>Beef Burger</h2>
|
||||
<h2 class="display x3d" id="h-bburger" data-pop>Beef Burger</h2>
|
||||
<p>Alle Burger mit Rindfleisch-Patty, Cheddar, Tomaten, Salat, sauren Gurken und Zwiebeln.</p>
|
||||
</div>
|
||||
<div class="dish-grid dish-grid--4">
|
||||
<article class="dish dish--special" data-reveal>
|
||||
<article class="dish dish--special" data-reveal data-tilt>
|
||||
<h3 class="dish__name"><span class="dish__script dish__script--the" aria-hidden="true">The</span> US Burger</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/us-burger.webp" width="853" height="616" loading="lazy" alt="US Burger mit Ei und Bacon"></div>
|
||||
<div class="dish__body"><p>Cheddar, Ei, Bacon, karamellisierte Zwiebeln, BBQ-Soße.</p><span class="price">13,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish dish--special" data-reveal>
|
||||
<article class="dish dish--special" data-reveal data-tilt>
|
||||
<h3 class="dish__name"><span class="dish__script">Steakhouse</span> Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" loading="lazy" alt="Steakhouse Burger"></div>
|
||||
<div class="dish__body"><p>Pepper-Jack-Käse, Bacon, karamellisierte Zwiebeln, Steakhouse-Soße.</p><span class="price">13,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Cheese Burger</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img src="assets/img/cut-cheese-burger.webp" width="900" height="656" loading="lazy" alt="Cheese Burger"></div>
|
||||
<div class="dish__body"><p>Cheddar, karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Hamburger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/hamburger.webp" width="824" height="499" loading="lazy" alt="Hamburger"></div>
|
||||
<div class="dish__body"><p>Karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p><span class="price">11,50 €</span></div>
|
||||
@@ -215,7 +217,7 @@
|
||||
<!-- MENÜS -->
|
||||
<section class="menu-cat" id="menues" aria-labelledby="h-menues">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-menues" data-pop>Menüs</h2>
|
||||
<h2 class="display x3d" id="h-menues" data-pop>Menüs</h2>
|
||||
<p>Mit Pommes und Coleslaw – mild oder scharf.</p>
|
||||
</div>
|
||||
<div class="dish-list">
|
||||
@@ -229,11 +231,11 @@
|
||||
<!-- WRAPS -->
|
||||
<section class="menu-cat" id="wraps" aria-labelledby="h-wraps">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-wraps" data-pop>Wraps</h2>
|
||||
<h2 class="display x3d" id="h-wraps" data-pop>Wraps</h2>
|
||||
<p>In der Weizen-Tortilla, mit knusprigem Crispy-Filet.</p>
|
||||
</div>
|
||||
<div class="cat-split">
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chicken Wrap Chickago-Boys</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/chicken-wrap-chickago-boys.webp" width="812" height="546" loading="lazy" alt="Chicken Wrap Chickago-Boys, aufgeschnitten"></div>
|
||||
<div class="dish__body"><p>2 knusprige Crispy-Filets, Cheddar, Tomaten, Salat, hausgemachte Sauce.</p><span class="price">9,50 €</span></div>
|
||||
@@ -247,7 +249,7 @@
|
||||
<!-- SALATE -->
|
||||
<section class="menu-cat" id="salate" aria-labelledby="h-salate">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-salate" data-pop>Salate</h2>
|
||||
<h2 class="display x3d" id="h-salate" data-pop>Salate</h2>
|
||||
<p>Alle Salate mit Tomaten, Gurken und Croutons. Dressing: Caesar, Balsamico oder ohne.</p>
|
||||
</div>
|
||||
<div class="dish-list">
|
||||
@@ -260,41 +262,41 @@
|
||||
<!-- BEILAGEN -->
|
||||
<section class="menu-cat" id="beilagen" aria-labelledby="h-beilagen">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-beilagen" data-pop>Beilagen</h2>
|
||||
<h2 class="display x3d" id="h-beilagen" data-pop>Beilagen</h2>
|
||||
<p>Der perfekte Sidekick für Wings und Burger.</p>
|
||||
</div>
|
||||
<div class="dish-grid dish-grid--4">
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Jalapeños Chili Cheese Fries</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/jalapenos-chili-cheese-fries.webp" width="916" height="839" loading="lazy" alt="Jalapeños Chili Cheese Fries"></div>
|
||||
<div class="dish__body"><p>Pommes mit Chili-Käse-Sauce und Jalapeños.</p><span class="price">7,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Cheesy Bacon Fries</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/cheesy-bacon-fries.webp" width="916" height="609" loading="lazy" alt="Cheesy Bacon Fries"></div>
|
||||
<div class="dish__body"><p>Pommes mit Käse und Bacon.</p><span class="price">7,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Pommes frites</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/pommes-frites.webp" width="916" height="578" loading="lazy" alt="Pommes frites in der Steingutschale"></div>
|
||||
<div class="dish__body"><span class="price">4,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Süßkartoffel-Pommes</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/suesskartoffel-pommes.webp" width="916" height="516" loading="lazy" alt="Süßkartoffel-Pommes in der Steingutschale"></div>
|
||||
<div class="dish__body"><span class="price">5,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Onion Rings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/onion-rings.webp" width="916" height="410" loading="lazy" alt="Knusprige Onion Rings"></div>
|
||||
<div class="dish__body"><span class="price">6,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Mozzarella Sticks</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/mozzarella-sticks.webp" width="850" height="419" loading="lazy" alt="Knusprige Mozzarella Sticks"></div>
|
||||
<div class="dish__body"><span class="price">7,00 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Krautsalat</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/krautsalat.webp" width="820" height="569" loading="lazy" alt="Krautsalat aus Weiß- und Rotkohl im Schälchen"></div>
|
||||
<div class="dish__body"><p>Weißkohl, Rotkohl.</p><span class="price">4,00 €</span></div>
|
||||
@@ -305,7 +307,7 @@
|
||||
<!-- SAUCEN -->
|
||||
<section class="menu-cat" id="saucen" aria-labelledby="h-saucen">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-saucen" data-pop>Saucen & Dips</h2>
|
||||
<h2 class="display x3d" id="h-saucen" data-pop>Saucen & Dips</h2>
|
||||
<p>Zum Dippen, Tunken und Nachlegen.</p>
|
||||
</div>
|
||||
<div class="sauce-chips" data-reveal>
|
||||
@@ -316,7 +318,7 @@
|
||||
<!-- GETRÄNKE -->
|
||||
<section class="menu-cat" id="getraenke" aria-labelledby="h-getraenke">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-getraenke" data-pop>Getränke</h2>
|
||||
<h2 class="display x3d" id="h-getraenke" data-pop>Getränke</h2>
|
||||
<p>Kalt, groß und zum Teilen. Bier, Wein und Cocktails gibt’s bei uns an der Bar.</p>
|
||||
</div>
|
||||
<div class="dish-list">
|
||||
@@ -334,7 +336,7 @@
|
||||
<!-- DESSERT -->
|
||||
<section class="menu-cat" id="dessert" aria-labelledby="h-dessert">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display stroke" id="h-dessert" data-pop>Dessert</h2>
|
||||
<h2 class="display x3d" id="h-dessert" data-pop>Dessert</h2>
|
||||
<p>Für den süßen Knockout zum Schluss.</p>
|
||||
</div>
|
||||
<div class="dish-list">
|
||||
@@ -343,6 +345,7 @@
|
||||
</section>
|
||||
|
||||
<aside class="only-here" data-reveal>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__embers"></div><div class="fx__grain"></div></div>
|
||||
<img class="die-cut" src="assets/img/rooster.svg" width="179" height="264" alt="">
|
||||
<div>
|
||||
<h2>Mehr im Restaurant</h2>
|
||||
@@ -351,7 +354,7 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="legal-note" data-reveal>
|
||||
<div class="legal-note paper" data-reveal>
|
||||
<h2>Allergene & Zusatzstoffe</h2>
|
||||
<p>Informationen zu Allergenen und kennzeichnungspflichtigen Zusatzstoffen bekommst du jederzeit bei uns im Restaurant oder telefonisch unter <a href="tel:+496313107985">0631 3107985</a>. Alle Preise in Euro inklusive gesetzlicher Mehrwertsteuer. Stand: 09/2026.</p>
|
||||
</div>
|
||||
@@ -359,6 +362,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="footer on-dark" data-nav-dark>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<div class="footer__grid">
|
||||
<div class="footer__brand">
|
||||
|
||||
Reference in new issue
Block a user