/* ============================================================ Foodiego — Shared Design System Three switchable themes: trattoria · retro · notte ============================================================ */ /* ---------- Fonts ---------- */ /* Fonts werden im jeder Seite per geladen (schnellere Ladekette) */ /* ---------- Theme: Trattoria (default) ---------- */ :root, [data-theme="trattoria"] { --bg: #ffffff; /* Foodiego cream */ --bg-tint: #f0f1f3; --surface: #ffffff; /* paper */ --surface-2: #f0f1f3; --ink: #13201a; /* forest ink */ --ink-soft: #54625b; --muted: #8b958f; --line: #e4dcc9; --line-strong: #d6ccb4; --primary: #0d1f17; /* forest */ --primary-700: #11291d; --primary-ink: #ffffff; --primary-tint: #dfeccd; --accent: #ff6a3d; /* tang */ --accent-700: #e84e20; --accent-ink: #ffffff; --accent-tint: #ffe3d8; --gold: #c6f04a; /* lime */ --gold-700: #a4d62b; --gold-tint: #eaf7c9; --hair: color-mix(in srgb, var(--gold) 52%, var(--line)); /* lime hairline */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Hanken Grotesque', system-ui, sans-serif; --display-tracking: -.008em; --display-weight: 400; --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(13,31,23,.04),0 6px 18px -12px rgba(13,31,23,.16); --shadow: 0 2px 6px rgba(13,31,23,.04),0 22px 48px -26px rgba(13,31,23,.22); --shadow-lg: 0 4px 12px rgba(13,31,23,.05),0 40px 80px -34px rgba(13,31,23,.30); --hero-grain: .03; } /* ---------- Theme: Retro ---------- */ [data-theme="retro"] { --bg: #ffd83b; --bg-tint: #ffce1f; --surface: #fffcef; --surface-2: #fff3c4; --ink: #1d2a23; --ink-soft: #3c4a3f; --muted: #6f6a4d; --line: #e9cf63; --line-strong: #d9b53a; --primary: #0f7a4d; --primary-700: #0a5836; --primary-ink: #051a11; --primary-tint: #d8f0e0; --accent: #e23b22; --accent-700: #b32815; --accent-ink: #051a11; --accent-tint: #ffe0d6; --gold: #b8860b; --gold-tint: #fbecbf; --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesque', system-ui, sans-serif; --display-tracking: -.02em; --display-weight: 800; --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 2px 0 rgba(29,42,35,.12); --shadow: 0 4px 0 rgba(29,42,35,.16), 0 12px 28px -14px rgba(29,42,35,.4); --shadow-lg: 0 8px 0 rgba(29,42,35,.18), 0 32px 60px -24px rgba(29,42,35,.45); --hero-grain: .05; } /* ---------- Theme: Notte (dark) ---------- */ [data-theme="notte"] { --bg: #181410; --bg-tint: #221c16; --surface: #24201a; --surface-2: #2e2820; --ink: #f4ece0; --ink-soft: #c9bda9; --muted: #968a78; --line: #3a3328; --line-strong: #4a4032; --primary: #4caf7d; --primary-700: #3c9568; --primary-ink: #10231a; --primary-tint: #213029; --accent: #e8624a; --accent-700: #c94632; --accent-ink: #20100c; --accent-tint: #36231d; --gold: #e7b94e; --gold-tint: #322a18; --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Hanken Grotesque', system-ui, sans-serif; --display-tracking: 0; --display-weight: 400; --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 16px 40px -16px rgba(0,0,0,.7); --shadow-lg: 0 36px 70px -24px rgba(0,0,0,.8); --hero-grain: .06; } /* ---------- Reset & base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 70%, var(--primary)); outline-offset: 2px; } /* Visible keyboard focus for all other interactive elements (UX a11y #28/#41) */ a:focus-visible, .icon-btn:focus-visible, .cart-btn:focus-visible, .nav-burger:focus-visible, .lang-toggle button:focus-visible, .to-top:focus-visible, .call-fab:focus-visible, .faq-q:focus-visible, [tabindex]:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 72%, var(--primary)); outline-offset: 2px; border-radius: 8px; } /* Skip to main content — first focusable element (UX a11y #45) */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 3000; transform: translateY(-160%); transition: transform .18s ease; background: var(--primary); color: var(--primary-ink, #fff); padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; box-shadow: var(--shadow); } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--gold); outline-offset: 2px; } ::selection { background: var(--accent); color: var(--accent-ink); } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.05; color: var(--ink); text-wrap: balance; } .serif { font-family: var(--font-display); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 860px; } section { position: relative; } .section-pad { padding: clamp(40px, 5vw, 76px) 0; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 30px; height: 2px; background: linear-gradient(90deg, var(--gold-700, var(--gold)), color-mix(in srgb, var(--gold) 30%, transparent)); border-radius: 2px; } .section-head { max-width: 660px; margin-bottom: 48px; } .section-head h2 { font-size: clamp(34px, 5.2vw, 56px); margin: 16px 0 14px; letter-spacing: -.015em; } .section-head h2 .hl { color: var(--accent); font-style: italic; } .section-head p { color: var(--ink-soft); font-size: 18px; line-height: 1.55; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--gold-700, var(--gold)); border-radius: 2px; } .lead { font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-soft); line-height: 1.55; } /* Full-width tinted band — adds editorial section rhythm on any page */ .tint-band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tint-band + .tint-band { border-top: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 15.5px; letter-spacing: .02em; padding: 15px 28px; border-radius: var(--radius-pill); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .2s ease, color .2s, border-color .2s; white-space: nowrap; line-height: 1; } .btn svg { width: 19px; height: 19px; } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .btn:active { transform: translateY(0) scale(.97); } .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, #fff), var(--accent)); color: var(--accent-ink); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.22); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 66%, transparent), inset 0 1px 0 rgba(255,255,255,.22); } .btn-green { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary)); color: var(--primary-ink); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .btn-green:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--gold); transform: translateY(-2px); } .btn-light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn-sm { padding: 11px 18px; font-size: 13.5px; } .btn-block { width: 100%; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); transition: box-shadow .2s; } .site-header.scrolled { box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; gap: 22px; height: 76px; } .nav-logo { display: flex; align-items: center; gap: 12px; margin-right: auto; } .nav-logo .mark { width: 46px; height: 46px; flex: none; } .nav-logo .word { display: flex; flex-direction: column; line-height: 1; } .nav-logo .word b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 21px; letter-spacing: .02em; } .nav-logo .word span { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 9px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; color: var(--ink-soft); transition: color .15s, background .15s; } .nav-links a:hover { color: var(--ink); background: var(--surface-2); } .nav-links a.active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); } .nav-actions { display: flex; align-items: center; gap: 10px; } .lang-toggle { display: flex; background: var(--surface-2); border-radius: var(--radius-pill); padding: 3px; } .lang-toggle button { padding: 6px 11px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; } .lang-toggle button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .cart-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary)); color: var(--primary-ink); padding: 11px 17px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14.5px; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .16s, box-shadow .16s; } .cart-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .cart-btn svg { width: 18px; height: 18px; } .cart-count { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); } .nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; } .nav-burger svg { width: 24px; height: 24px; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); transition: color .15s, background .15s, border-color .15s; flex: none; } .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); } .icon-btn svg { width: 19px; height: 19px; } @media (max-width: 560px) { #shareBtn { display: none; } } /* ---------- Live opening status ---------- */ .open-status { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s, background .2s; } .open-status:hover { border-color: var(--hair, var(--line-strong)); } .open-status .os-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; } .open-status.open .os-dot { background: #1f9d57; animation: osPulse 2.4s ease-out infinite; } .open-status.closed .os-dot { background: var(--accent); } .open-status .os-text { display: flex; flex-direction: column; line-height: 1.12; } .open-status .os-text b { font-family: var(--font-body); font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--ink); } .open-status .os-text span { font-size: 10.5px; color: var(--muted); letter-spacing: .02em; } @keyframes osPulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,87,.5); } 70% { box-shadow: 0 0 0 7px rgba(31,157,87,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,87,0); } } @media (max-width: 1140px) { .nav-actions .open-status { display: none; } } .mobile-menu .open-status { width: 100%; margin: 4px 0 10px; } .site-footer .open-status { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); margin-bottom: 16px; } .site-footer .open-status .os-text b { color: #fff; } .site-footer .open-status .os-text span { color: color-mix(in srgb, var(--bg) 55%, white); } @media (prefers-reduced-motion: reduce) { .open-status.open .os-dot { animation: none; } } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: color-mix(in srgb, var(--bg) 88%, white); margin-top: 0; border-top: 2px solid var(--gold-700, var(--gold)); } [data-theme="notte"] .site-footer { background: #100d0a; } .site-footer a { color: inherit; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 70px 0 40px; } .footer-brand .mark { width: 52px; height: 52px; margin-bottom: 16px; } .footer-brand p { color: color-mix(in srgb, var(--bg) 60%, white); font-size: 15px; max-width: 280px; } .footer-col h4 { font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, white); margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a, .footer-col li { font-size: 15px; color: color-mix(in srgb, var(--bg) 82%, white); } .footer-col a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: color-mix(in srgb, var(--bg) 50%, white); } /* ---------- Footer newsletter ---------- */ .news-form { display: flex; gap: 8px; margin-top: 18px; max-width: 300px; } .news-form input { flex: 1; min-width: 0; padding: 11px 15px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff; font-size: 14px; } .news-form input::placeholder { color: color-mix(in srgb, var(--bg) 55%, white); } .news-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .news-form .btn-sm { flex: none; } .news-ok { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--gold); } .news-ok svg { width: 17px; height: 17px; } /* ---------- Scroll-to-top ---------- */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 190; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: var(--accent); } .to-top svg { width: 22px; height: 22px; transform: rotate(-90deg); } @media (max-width: 640px) { .to-top { bottom: 92px; right: 14px; } } /* ---------- Scroll progress + call FAB + cart bump + confetti ---------- */ .scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 250; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; } .call-fab { position: fixed; left: 14px; bottom: 92px; z-index: 190; width: 52px; height: 52px; border-radius: 50%; display: none; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary)); color: #fff; box-shadow: var(--shadow-lg); } .call-fab svg { width: 22px; height: 22px; } @media (max-width: 640px) { .call-fab { display: grid; } } [data-cart-count].bump { animation: cartBump .42s ease; } @keyframes cartBump { 30% { transform: scale(1.45); } } .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 620; overflow: hidden; } .confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: confFall 1.9s ease-in forwards; } @keyframes confFall { to { transform: translate(var(--x), 106vh) rotate(560deg); opacity: .15; } } .btn.danger { color: var(--accent); border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .confetti { display: none; } } /* ---------- Footer payment badges + PWA install + saved cart ---------- */ .pay-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 22px; font-size: 13px; color: color-mix(in srgb, var(--bg) 55%, white); } .pay-badges span { letter-spacing: .1em; text-transform: uppercase; font-weight: 800; font-size: 11px; } .pay-badges b { font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.18); color: color-mix(in srgb, var(--bg) 82%, white); } .footer-bottom [data-open-consent] { color: inherit; text-decoration: underline; } .footer-bottom [data-open-consent]:hover { color: var(--gold); } /* Dark theme (notte): footer text must stay light regardless of --bg */ [data-theme="notte"] .site-footer { color: rgba(255,255,255,.85); } [data-theme="notte"] .footer-brand p { color: rgba(255,255,255,.6); } [data-theme="notte"] .footer-col h4 { color: rgba(255,255,255,.55); } [data-theme="notte"] .footer-col a, [data-theme="notte"] .footer-col li { color: rgba(255,255,255,.82); } [data-theme="notte"] .footer-bottom { color: rgba(255,255,255,.55); } [data-theme="notte"] .pay-badges { color: rgba(255,255,255,.55); } [data-theme="notte"] .pay-badges b { color: rgba(255,255,255,.82); } [data-theme="notte"] .footer-col a:hover, [data-theme="notte"] .footer-bottom [data-open-consent]:hover { color: var(--gold); } .pwa-install { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 600; display: none; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); } .cart-save { display: flex; gap: 8px; } .cart-save .btn { flex: 1; } /* ---------- Cards / chips ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); padding: 7px 13px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; } .chip svg { width: 15px; height: 15px; color: var(--primary); } .pill-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; } .pill-pop { background: var(--accent-tint); color: var(--accent-700); } .pill-veg { background: var(--primary-tint); color: var(--primary-700); } [data-theme="notte"] .pill-veg { color: var(--primary); } [data-theme="notte"] .pill-pop { color: var(--accent); } /* ---------- Placeholder image blocks ---------- */ .ph { position: relative; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); } .ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 55%), radial-gradient(120% 120% at 90% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%); opacity: .8; } .ph .ph-ico { position: relative; z-index: 1; width: 38%; max-width: 90px; opacity: .5; } .ph-label { position: absolute; bottom: 10px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 3px 8px; border-radius: 6px; } /* ---------- Grain / texture util ---------- */ .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--hero-grain); mix-blend-mode: multiply; } [data-theme="notte"] .grain::before { mix-blend-mode: screen; } /* ---------- Toast / mini-feedback ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 13px 22px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-lg); z-index: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: 10px; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast svg { width: 18px; height: 18px; color: var(--primary); } /* ---------- Mobile menu drawer ---------- */ .mobile-menu { position: fixed; inset: 0; z-index: 300; display: none; } .mobile-menu.open { display: block; } .mobile-menu .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); } .mobile-menu .panel { position: absolute; top: 0; right: 0; width: min(320px, 84vw); height: 100%; background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-lg); } .mobile-menu .panel a { padding: 14px 14px; border-radius: 12px; font-weight: 600; font-size: 17px; } .mobile-menu .panel a:hover { background: var(--surface-2); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ---------- Glassmorphism (toggle in Tweaks) ---------- */ html[data-glass="on"] .site-header { background: color-mix(in srgb, var(--surface) 52%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-bottom-color: color-mix(in srgb, #fff 24%, var(--line)); } html[data-glass="on"] .cat-nav { background: color-mix(in srgb, var(--surface) 48%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom-color: color-mix(in srgb, #fff 22%, var(--line)); } html[data-glass="on"] .cart-card, html[data-glass="on"] .cz-card, html[data-glass="on"] .mcart-bar, html[data-glass="on"] .mobile-menu .panel, html[data-glass="on"] .summary .cart-card, html[data-glass="on"] .panel-card { background: color-mix(in srgb, var(--surface) 58%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid color-mix(in srgb, #fff 28%, var(--line)); box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--ink) 38%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent); } html[data-glass="on"] .cz-scrim { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* keep frosted chrome readable when not yet scrolled */ html[data-glass="on"] .site-header.scrolled { box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--ink) 30%, transparent); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 1024px) { .nav-links { display: none; } .nav-burger { display: flex; } .lang-toggle { display: none; } } @media (max-width: 560px) { body { font-size: 16px; } .wrap { padding: 0 18px; } .footer-grid { grid-template-columns: 1fr; } .nav-logo .word span { display: none; } .nav { gap: 12px; } .nav-actions { gap: 8px; } .pay-badges { justify-content: center; } } @media (max-width: 480px) { .cart-btn span[data-i18n="cart.title"] { display: none; } .cart-btn { padding: 11px 14px; } .icon-btn { width: 38px; height: 38px; } .nav-logo .mark { width: 40px; height: 40px; } .nav-logo .word b { font-size: 19px; } } @media (pointer: coarse) { .stepper button { width: 40px; height: 40px; } .nav-burger { width: 46px; height: 46px; } .icon-btn { width: 44px; height: 44px; } .nav-links a { padding-top: 11px; padding-bottom: 11px; } .btn-sm { padding: 12px 18px; } .mode-toggle button { padding: 11px 16px; } .footer-col a, .footer-col li { padding: 2px 0; } } /* ---------- Safe-area insets (notched / home-indicator phones) ---------- */ @supports (padding: max(0px)) { @media (max-width: 820px) { .mobile-menu .panel { padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); } .to-top { right: max(14px, env(safe-area-inset-right)); } .call-fab { left: max(14px, env(safe-area-inset-left)); } .cookie-bar { bottom: max(16px, env(safe-area-inset-bottom)); } .pwa-install { bottom: max(18px, env(safe-area-inset-bottom)); } .toast { bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); } } } /* ---------- Tweaks panel ---------- */ .tw-panel { position: fixed; right: 20px; bottom: 20px; z-index: 700; width: 300px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.45); display: none; font-family: var(--font-body); overflow: hidden; } .tw-panel.open { display: block; animation: twIn .22s cubic-bezier(.2,.8,.2,1); } @keyframes twIn { from { opacity: 0; transform: translateY(12px) scale(.98); } } .tw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .tw-head b { font-size: 14px; font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; } .tw-head b svg { width: 16px; height: 16px; color: var(--accent); } .tw-head .tw-x { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); } .tw-head .tw-x:hover { background: var(--surface); color: var(--ink); } .tw-head .tw-x svg { width: 17px; height: 17px; } .tw-body { padding: 14px 16px 18px; max-height: min(70vh, 560px); overflow: auto; } .tw-sec { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 9px; } .tw-sec:first-child { margin-top: 2px; } .tw-seg { display: flex; gap: 6px; flex-wrap: wrap; } .tw-seg button { flex: 1; min-width: 0; padding: 9px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); font-weight: 700; font-size: 12.5px; color: var(--ink-soft); transition: all .14s; white-space: nowrap; } .tw-seg button:hover { border-color: var(--line-strong); } .tw-seg button.on { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-700); } [data-theme="notte"] .tw-seg button.on { color: var(--primary); } .tw-swatches { display: flex; gap: 8px; } .tw-sw { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line); cursor: pointer; position: relative; transition: transform .12s; } .tw-sw:hover { transform: scale(1.08); } .tw-sw.on { border-color: var(--ink); } .tw-sw.on::after { content: ""; position: absolute; inset: 0; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--surface); } .tw-theme-row { display: flex; flex-direction: column; gap: 6px; } .tw-theme { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; transition: all .14s; } .tw-theme:hover { border-color: var(--line-strong); } .tw-theme.on { border-color: var(--primary); background: var(--primary-tint); } .tw-theme .dot { width: 26px; height: 26px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); } .tw-theme .tt { display: flex; flex-direction: column; line-height: 1.2; } .tw-theme .tt b { font-size: 13.5px; } .tw-theme .tt span { font-size: 11.5px; color: var(--muted); } /* ---------- Cookie / consent banner ---------- */ .cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 650; max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform .45s cubic-bezier(.16,1,.3,1); } .cookie-bar.show { transform: none; } .cookie-bar .cb-inner { display: flex; align-items: center; gap: 18px; padding: 16px 20px; flex-wrap: wrap; } .cookie-bar p { font-size: 14px; color: var(--ink-soft); flex: 1; min-width: 240px; margin: 0; line-height: 1.5; } .cookie-bar a { color: var(--primary); text-decoration: underline; } .cookie-bar .cb-actions { display: flex; gap: 10px; } /* ---------- Modern platform upgrades ---------- */ /* Native form controls, scrollbars & UA widgets follow the active theme */ :root, [data-theme="trattoria"], [data-theme="retro"] { color-scheme: light; } [data-theme="notte"] { color-scheme: dark; } body { accent-color: var(--primary); caret-color: var(--accent); } p, li { text-wrap: pretty; } /* Smooth cross-document page transitions (progressive enhancement, zero JS) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ---------- 3D depth polish ---------- */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { /* Specular glare that follows the cursor on tilt cards (set via --gx/--gy in motion.js) */ [data-tilt] { position: relative; } [data-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 35%), rgba(255,255,255,.25), transparent 65%); opacity: 0; transition: opacity .25s ease; mix-blend-mode: soft-light; } [data-tilt]:hover::after { opacity: 1; } /* Light sweep across primary actions */ .btn-primary, .btn-green { position: relative; overflow: hidden; } .btn-primary::after, .btn-green::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 34%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg) translateX(-180%); } .btn-primary:hover::after, .btn-green:hover::after { transform: skewX(-20deg) translateX(420%); transition: transform .65s ease; } } /* ============================================================ Global polish pass v1 — site-wide refinements Additive only: no structural or color-system changes. Lifts every page that loads this stylesheet at once. ============================================================ */ /* 1) Anchor jumps & :target clear the sticky header instead of hiding under it (FAQ, Speisekarte categories, legal sub-sections, footer links). */ html { scroll-padding-top: 96px; } :target { scroll-margin-top: 100px; } /* 2) Long unbreakable strings (URLs, e-mails, IDs) never force horizontal scroll — a common mobile overflow source on contact/legal pages. */ p, li, dd, dt, td, th, .lead, blockquote, address { overflow-wrap: break-word; } /* 3) In-copy links get a refined underline rhythm (chrome/buttons untouched). */ .wrap-narrow p a:not(.btn):not(.chip), .legal a:not(.btn), .prose a:not(.btn), .rich a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); transition: text-decoration-color .15s, color .15s; } .wrap-narrow p a:not(.btn):not(.chip):hover, .legal a:not(.btn):hover, .prose a:not(.btn):hover, .rich a:not(.btn):hover { text-decoration-color: var(--accent); } /* 4) Consistent, slightly springier lift for every generic card on hover. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .card { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .2s; } a.card:hover, .card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow); } } /* 5) Respect high-contrast users: firmer hairlines & full-strength nav text. */ @media (prefers-contrast: more) { :root { --line: color-mix(in srgb, var(--ink) 22%, transparent); --line-strong: color-mix(in srgb, var(--ink) 36%, transparent); } .nav-links a, .footer-col a, .footer-col li { color: var(--ink); } [data-theme="notte"] .footer-col a, [data-theme="notte"] .footer-col li { color: rgba(255,255,255,.92); } } /* 6) Tasteful: prevent orphan single words on short headings & leads. */ h1, h2, .lead { text-wrap: balance; } /* 7) Larger, comfier tap targets for inline icon links on touch (a11y 44px). */ @media (pointer: coarse) { .footer-bottom a, .cookie-bar a { padding: 2px 2px; } }