diff --git a/assets/css/style.css b/assets/css/style.css index d8622b2..dd375b2 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -278,9 +278,12 @@ p:last-child { margin-bottom: 0; } left: 50%; top: var(--swirl-y, 50%); width: var(--swirl-size, min(1500px, 115vw)); aspect-ratio: 1; 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; + -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 98%); + -webkit-mask-composite: source-in; + mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 98%); + mask-composite: intersect; } +@media (max-width: 820px) { .fx > .fx__swirl, .cat-bg .fx__swirl { --swirl-size: 175vw; } } .fx__spot { inset: 0; background: radial-gradient(var(--spot-size, 60% 55%) at var(--spot-x, 50%) var(--spot-y, 45%), var(--spot, rgba(255, 90, 40, .55)), transparent 70%); } .fx__vignette { inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vignette, rgba(40, 0, 0, .45))); } .fx__grain { inset: 0; background: var(--grain) 0 0 / 240px; opacity: var(--grain-o, .22); mix-blend-mode: var(--grain-mode, overlay); } @@ -297,10 +300,9 @@ p:last-child { margin-bottom: 0; } .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; + background-size: 100% 100%, 240px; } /* ============ Flammen-Übergänge ============ @@ -878,7 +880,7 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); } .cat-bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--cat-bg); } .cat-bg .flames { --fh: clamp(60px, 8vw, 130px); } .cat-bg .fx { overflow: hidden; } -.cat-bg .torn--in { color: var(--cream); } +.cat-bg .torn--in { color: var(--cream); background-image: var(--grain-soft); background-size: 240px; } .menu-cat--red { --cat-bg: var(--red); --spot: rgba(255, 140, 50, .45); --spot-y: 60%; --swirl: rgba(100, 3, 1, .4); --dot: rgba(70, 0, 0, .9); --dots-o: .16; --grain-o: .3; color: var(--cream); } .menu-cat--yellow { --cat-bg: var(--yellow); --spot: rgba(255, 255, 220, .5); --dot: rgba(229, 19, 11, .8); --dots-o: .12; --grain-o: .2; } .menu-cat--ink { --cat-bg: var(--ink); --spot: rgba(255, 80, 20, .3); --spot-y: 100%; --spot-size: 90% 70%; --swirl: rgba(150, 25, 5, .28); --grain-o: .35; color: var(--cream); } @@ -891,8 +893,8 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); } .menu-cat--red .item, .menu-cat--ink .item { border-color: rgba(251, 238, 214, .2); } .menu-cat--red .item p, .menu-cat--ink .item p { opacity: .9; } .menu-cat--red .menu-extra span, .menu-cat--ink .menu-extra span { background: rgba(0, 0, 0, .22); } -.menu-cat--red .dish--special { box-shadow: 0 6px 0 var(--oxblood), 0 0 0 3px var(--cream), 0 26px 40px -8px rgba(60, 0, 0, .55); } -.menu-cat--yellow .dish { box-shadow: 0 6px 0 #c98c00, 0 22px 36px -8px rgba(120, 70, 0, .35); } +.menu-cat--red .dish--special, .menu-cat--red .dish--special:hover { box-shadow: 0 26px 40px -10px rgba(60, 0, 0, .55); outline: 3px solid var(--cream); outline-offset: -3px; } +.menu-cat--yellow .dish { box-shadow: 0 2px 6px rgba(120, 70, 0, .15), 0 22px 36px -10px rgba(120, 70, 0, .38); } .page-end { position: relative; height: clamp(26px, 3vw, 44px); margin-top: clamp(3rem, 6vw, 5rem); } .menu-cat__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); } .menu-cat__head .display { font-size: clamp(3rem, 8.6vw, 8rem); color: var(--red); --ext: var(--oxblood); } @@ -915,13 +917,13 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); } var(--white); border-radius: var(--radius); overflow: hidden; - box-shadow: 0 6px 0 #e3cfae, 0 22px 36px -8px rgba(110, 50, 10, .3); + box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 22px 36px -10px rgba(110, 50, 10, .32); --tx: 0deg; --ty: 0deg; 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.is-tilting { transition: transform .15s ease-out, box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95); } -.dish:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 6px 0 #e3cfae, 0 34px 50px -10px rgba(110, 50, 10, .4); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; } +.dish:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 34px 50px -12px rgba(110, 50, 10, .4); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; } .dish__name { 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; @@ -956,8 +958,8 @@ body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); } radial-gradient(120% 90% at 50% 40%, #cc160d 0%, var(--bg) 50%, #9a0604 100%); box-shadow: 0 14px 32px rgba(140, 10, 6, .28); } -.dish--special:hover { box-shadow: 0 6px 0 var(--oxblood), 0 34px 50px -10px rgba(140, 10, 6, .45); background-position: 0 0, 0 0; } -.dish--special { box-shadow: 0 6px 0 var(--oxblood), 0 22px 36px -8px rgba(140, 10, 6, .4); } +.dish--special { box-shadow: 0 2px 6px rgba(140, 10, 6, .2), 0 22px 36px -10px rgba(140, 10, 6, .42); } +.dish--special:hover { box-shadow: 0 2px 6px rgba(140, 10, 6, .2), 0 34px 50px -12px rgba(140, 10, 6, .5); background-position: 0 0, 0 0; } .dish--special::before { content: ""; position: absolute; left: 50%; top: 55%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: rgba(100, 3, 1, .4); -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; pointer-events: none; } .dish--special::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; }