/* * menu-themes.css — 37 stili grafici per il menù pubblico. * * Gli stili NON cambiano i dati né il markup: agiscono solo sulla * presentazione, attivati dalla classe `menu-style--` sul . * Ogni tema ridefinisce le variabili colore/font usate da menu-public.css * (così la maggior parte del reskin è automatica) e aggiunge qualche * decorazione specifica (solo CSS, nessun elemento aggiuntivo nel DOM). * * L'elenco/ordine ufficiale degli stili è in menu_styles() (includes/functions.php); * i font sono caricati per-stile da menu.php (Google Fonts). * In coda al file: i 19 stili dei pacchetti "Essenziali & Leggibili" e "Premium & Curati". */ /* ===================================================================== * MINIMAL WHITE — bianco puro, font di sistema, monocromatico nero. * Replica della demo demo-01-minimal-white: bordi hairline, titoli bold * con numerazione 01/02, badge squadrati, bottoni neri. Nessun colore brand. * ===================================================================== */ body.menu-style--minimal { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #0a0a0a; --c-text-muted: #555555; --c-text-subtle: #999999; --c-border: #e0e0e0; --f-body: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --f-display: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* accento monocromatico nero come nella demo (ignora il colore brand) */ --menu-primary: #0a0a0a; --menu-secondary: #0a0a0a; } /* Header: bordo nero spesso, titolo leggero, tagline in maiuscolo */ body.menu-style--minimal .menu-hero { border-bottom: 2px solid var(--c-text); text-align: left; } body.menu-style--minimal .menu-hero__logo { margin-left: 0; margin-right: 0; } body.menu-style--minimal .menu-hero__name { font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; } body.menu-style--minimal .menu-hero__desc { font-style: normal; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; color: var(--c-text-muted); } /* Tab categorie: maiuscolo, spaziato, sottolineatura nera */ body.menu-style--minimal .menu-cats { box-shadow: none; } body.menu-style--minimal .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; } /* Sezioni: divisori hairline + numerazione 01, 02, … sopra il titolo */ body.menu-style--minimal .menu-body { counter-reset: menu-sec; } body.menu-style--minimal .menu-section { counter-increment: menu-sec; padding: 2.5rem 1rem; border-bottom: 1px solid var(--c-border); } body.menu-style--minimal .menu-section:last-child { border-bottom: none; } body.menu-style--minimal .menu-section__title { display: block; border-bottom: none; padding-bottom: 0; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; } body.menu-style--minimal .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero); display: block; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.2em; color: var(--c-text-subtle); margin-bottom: 0.35rem; } body.menu-style--minimal .menu-section__desc { font-style: italic; } /* Piatti: nome semibold, prezzo nero medio */ body.menu-style--minimal .dish-card__name { font-weight: 600; } body.menu-style--minimal .dish-card__price-current { color: var(--c-text); font-weight: 500; } /* Badge dieta: squadrati, contorno sottile, monocromatici */ body.menu-style--minimal .dish-badge { border-radius: 0; border: 1px solid var(--c-border); background: transparent; color: var(--c-text-muted); } /* Footer: bordo nero, WhatsApp nero squadrato, social/chiama squadrati */ body.menu-style--minimal .menu-footer__info { border-top: 2px solid var(--c-text); } body.menu-style--minimal .menu-footer__wa { background: var(--c-text); color: #fff; border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; box-shadow: none; } body.menu-style--minimal .menu-footer__wa:hover { background: #000; transform: none; box-shadow: none; } body.menu-style--minimal .menu-footer__call { border-radius: 0; } body.menu-style--minimal .menu-footer__social a { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; } /* Ricerca e filtri coerenti con l'estetica squadrata */ body.menu-style--minimal .menu-search__input, body.menu-style--minimal .menu-filter-btn { border-radius: 0; } /* ===================================================================== * ELEGANTE — lusso nero & oro, serif Cormorant. * ===================================================================== */ body.menu-style--elegante { --c-bg: #0e0d0b; --c-surface: #161410; --c-text: #f0ead8; --c-text-muted: #a89b7a; --c-text-subtle: #5a5040; --c-border: rgba(212,168,67,0.14); --menu-primary: #d4a843; --menu-secondary: #e8c97a; --f-body: 'Cormorant Garamond', Georgia, serif; --f-display: 'Cormorant SC', Georgia, serif; } body.menu-style--elegante .menu-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(212,168,67,0.3); } body.menu-style--elegante .menu-hero::before, body.menu-style--elegante .menu-hero::after { content: ''; position: absolute; width: 64px; height: 64px; border: 1px solid rgba(212,168,67,0.45); pointer-events: none; } body.menu-style--elegante .menu-hero::before { top: 14px; left: 14px; border-right: none; border-bottom: none; } body.menu-style--elegante .menu-hero::after { bottom: 14px; right: 14px; border-left: none; border-top: none; } body.menu-style--elegante .menu-hero__name { color: var(--c-text); font-weight: 300; letter-spacing: 0.09em; text-transform: uppercase; } body.menu-style--elegante .menu-hero__desc { font-style: italic; color: var(--c-text-muted); } body.menu-style--elegante .menu-hero__logo { border-color: rgba(212,168,67,0.4); } body.menu-style--elegante .menu-cats { box-shadow: none; } body.menu-style--elegante .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; font-family: var(--f-display); } body.menu-style--elegante .menu-section__title { display: block; text-align: center; border-bottom: none; font-weight: 300; font-size: 1.45rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text); } body.menu-style--elegante .menu-section__title::after { content: '\2767'; /* ❧ */ display: block; color: var(--menu-primary); font-size: 0.95rem; margin-top: 0.45rem; } body.menu-style--elegante .menu-section__desc { text-align: center; font-style: italic; } body.menu-style--elegante .dish-card__name { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.05em; font-size: 1.05rem; } body.menu-style--elegante .dish-card__desc { font-style: italic; } body.menu-style--elegante .dish-card__price-current { font-family: var(--f-display); } body.menu-style--elegante .menu-search__input:focus { background: var(--c-surface); } body.menu-style--elegante .menu-filter-btn.active, body.menu-style--elegante .menu-filter-btn[aria-pressed="true"] { color: #0e0d0b; } body.menu-style--elegante .menu-footer__name { font-family: var(--f-display); letter-spacing: 0.12em; font-weight: 300; } /* ===================================================================== * TRATTORIA — tradizione italiana, quadretti, tricolore, Pacifico. * ===================================================================== */ body.menu-style--trattoria { --c-bg: #fff9f0; --c-surface: #ffffff; --c-text: #2c1a0e; --c-text-muted: #6b4226; --c-text-subtle: #a06030; --c-border: #e8d0a8; --menu-primary: #c0392b; --menu-secondary: #1e6b3c; --f-body: 'Lato', system-ui, sans-serif; --f-display: 'Pacifico', cursive; } body.menu-style--trattoria .menu-hero { position: relative; border-bottom: none; color: #fff; padding: 2.5rem 1.5rem 2.75rem; background-color: #c0392b; /* Scrim scuro radiale (1° layer) sopra la tovaglia a quadretti: attenua il pattern al centro, dove sta il testo, mantenendolo visibile ai bordi. */ background-image: radial-gradient(120% 105% at 50% 42%, rgba(0,0,0,0.45), rgba(0,0,0,0.14) 55%, transparent 80%), linear-gradient(45deg, rgba(255,255,255,0.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.18) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.18) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.18) 75%); background-size: 100% 100%, 22px 22px, 22px 22px, 22px 22px, 22px 22px; background-position: center, 0 0, 0 11px, 11px -11px, -11px 0; } /* Nastro tricolore in cima all'header */ body.menu-style--trattoria .menu-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); z-index: 1; } body.menu-style--trattoria .menu-hero__name { font-family: 'Pacifico', cursive; font-weight: 400; color: #fff; letter-spacing: 0; line-height: 1.1; /* Nome molto più grande + ombra a più livelli: si stacca netto dal fondo */ font-size: clamp(2.1rem, 8.5vw, 3rem); text-shadow: 2px 2px 0 #96281b, 3px 3px 0 rgba(0,0,0,0.25), 5px 6px 14px rgba(0,0,0,0.5); } body.menu-style--trattoria .menu-hero__desc { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.05rem; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.55); } body.menu-style--trattoria .menu-hero__logo { border-color: rgba(255,255,255,0.8); position: relative; } body.menu-style--trattoria .menu-cats { background: #1e6b3c; border-bottom: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } body.menu-style--trattoria .menu-cats__tab { color: rgba(255,255,255,0.82); text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; } body.menu-style--trattoria .menu-cats__tab:hover { color: #fff; } body.menu-style--trattoria .menu-cats__tab--active { color: #fff; border-bottom-color: #f5c518; } /* Sezioni come schede: header su fondo panna, piatti su bianco, tratteggi */ body.menu-style--trattoria .menu-section { background: #fff3e0; border: 1px solid var(--c-border); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin: 1.25rem 1rem; padding: 0; overflow: hidden; scroll-margin-top: 64px; } body.menu-style--trattoria .menu-section__title { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 1.5rem; color: #96281b; border-bottom: none; display: block; margin: 0; padding: 1.1rem 1.25rem 0.85rem; } body.menu-style--trattoria .menu-section__desc { margin: -0.55rem 0 0; padding: 0 1.25rem 0.9rem; font-style: italic; color: var(--c-text-subtle); } body.menu-style--trattoria .menu-section__dishes { margin: 0; background: #fff; border-top: 2px dashed var(--c-border); padding: 0.25rem 1.25rem; } body.menu-style--trattoria .dish-card { border-bottom: 1px dashed var(--c-border); padding: 0.9rem 0; } body.menu-style--trattoria .dish-card:last-child { border-bottom: none; } /* Righe alternate a tinta panna, a tutta larghezza della scheda */ body.menu-style--trattoria .dish-card:nth-child(even) { background: rgba(245,230,200,0.28); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; } body.menu-style--trattoria .dish-card__name { font-weight: 700; } body.menu-style--trattoria .dish-card__desc { font-style: italic; font-size: 0.9rem; } body.menu-style--trattoria .dish-card__allergens { font-size: 0.8rem; } body.menu-style--trattoria .dish-card__price-current { color: #c0392b; font-weight: 700; } body.menu-style--trattoria .menu-footer__info { background: #2c1a0e; border-top: 4px solid #96281b; color: #fff9f0; } body.menu-style--trattoria .menu-footer__name { font-family: 'Pacifico', cursive; font-weight: 400; color: #f5e6c8; } body.menu-style--trattoria .menu-footer__address { color: rgba(245,230,200,0.75); } body.menu-style--trattoria .menu-footer__call { color: #fff9f0; border-color: rgba(245,230,200,0.3); } body.menu-style--trattoria .menu-footer__social a { color: rgba(245,230,200,0.65); border-color: rgba(245,230,200,0.25); } body.menu-style--trattoria .menu-footer__credit { background: #2c1a0e; color: rgba(245,230,200,0.5); } /* ===================================================================== * MEDITERRANEO — blu Santorini + oro, serif Cormorant, greca. * ===================================================================== */ body.menu-style--mediterraneo { --c-bg: #f0f8fd; --c-surface: #ffffff; --c-text: #0a1f2e; --c-text-muted: #2a4a60; --c-text-subtle: #6a8aa0; --c-border: rgba(0,95,140,0.12); --menu-primary: #005f8c; --menu-secondary: #c9a84c; --f-body: 'Cormorant Garamond', Georgia, serif; --f-display: 'Cormorant SC', Georgia, serif; } body.menu-style--mediterraneo .menu-hero { position: relative; overflow: hidden; background: #005f8c; border-bottom: none; } body.menu-style--mediterraneo .menu-hero::before { content: '\2726 \2726 \2726'; /* ✦ ✦ ✦ */ display: block; color: #c9a84c; letter-spacing: 0.5em; font-size: 0.7rem; margin-bottom: 0.8rem; } body.menu-style--mediterraneo .menu-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, #c9a84c 0 3px, transparent 3px 9px); opacity: 0.7; } body.menu-style--mediterraneo .menu-hero__name { color: #fff; font-weight: 600; letter-spacing: 0.06em; } body.menu-style--mediterraneo .menu-hero__desc { color: rgba(255,255,255,0.78); font-style: italic; } body.menu-style--mediterraneo .menu-hero__logo { border-color: rgba(255,255,255,0.6); } body.menu-style--mediterraneo .menu-cats { background: #003f60; border-bottom: none; } body.menu-style--mediterraneo .menu-cats__tab { color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.16em; font-family: var(--f-display); } body.menu-style--mediterraneo .menu-cats__tab:hover { color: #c9a84c; } body.menu-style--mediterraneo .menu-cats__tab--active { color: #c9a84c; border-bottom-color: #c9a84c; } body.menu-style--mediterraneo .menu-section__title { display: block; text-align: center; border-bottom: none; color: #005f8c; font-weight: 600; font-size: 1.45rem; letter-spacing: 0.1em; } body.menu-style--mediterraneo .menu-section__title::after { content: '\2726'; /* ✦ */ display: block; color: #c9a84c; font-size: 0.85rem; margin-top: 0.4rem; } body.menu-style--mediterraneo .menu-section__desc { text-align: center; font-style: italic; } body.menu-style--mediterraneo .dish-card__name { font-weight: 600; color: #003f60; } body.menu-style--mediterraneo .dish-card__desc { font-style: italic; } body.menu-style--mediterraneo .dish-card__price-current { color: #005f8c; font-family: var(--f-display); } body.menu-style--mediterraneo .menu-footer__info { position: relative; background: #003f60; border-top: none; color: #fff; } body.menu-style--mediterraneo .menu-footer__info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #c9a84c, #00a8cc, #c9a84c); } body.menu-style--mediterraneo .menu-footer__name { color: #c9a84c; font-family: var(--f-display); letter-spacing: 0.1em; } body.menu-style--mediterraneo .menu-footer__address { color: rgba(255,255,255,0.65); } body.menu-style--mediterraneo .menu-footer__call { color: #fff; border-color: rgba(255,255,255,0.3); } body.menu-style--mediterraneo .menu-footer__social a { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.2); } body.menu-style--mediterraneo .menu-footer__credit { background: #003f60; color: rgba(255,255,255,0.4); } /* ===================================================================== * LEGGIBILITÀ — elegante & mediterraneo usano Cormorant Garamond, che a * parità di px rende più piccolo/sottile di un sans: qui alziamo le * dimensioni dei testi di lettura per renderli comodi anche su mobile. * ===================================================================== */ body.menu-style--elegante .menu-hero__desc, body.menu-style--mediterraneo .menu-hero__desc { font-size: 1.05rem; } body.menu-style--elegante .menu-section__desc, body.menu-style--mediterraneo .menu-section__desc { font-size: 1rem; } body.menu-style--elegante .dish-card__name, body.menu-style--mediterraneo .dish-card__name { font-size: 1.25rem; } body.menu-style--elegante .dish-card__desc, body.menu-style--mediterraneo .dish-card__desc { font-size: 1rem; line-height: 1.5; } body.menu-style--elegante .dish-card__price-current, body.menu-style--mediterraneo .dish-card__price-current { font-size: 1.2rem; } body.menu-style--elegante .dish-card__allergens, body.menu-style--mediterraneo .dish-card__allergens { font-size: 0.85rem; } body.menu-style--elegante .menu-cats__tab, body.menu-style--mediterraneo .menu-cats__tab { font-size: 0.8rem; } body.menu-style--elegante .menu-footer__address, body.menu-style--mediterraneo .menu-footer__address { font-size: 1rem; } /* ===================================================================== * MODERNO — gradienti vivaci, Manrope, angoli arrotondati. * ===================================================================== */ body.menu-style--moderno { --c-bg: #f0e6ff; --c-surface: #ffffff; --c-text: #1a0a2e; --c-text-muted: #6b5b8a; --c-text-subtle: #9a8ab5; --c-border: #f0eaf8; --menu-primary: #8338ec; --menu-secondary: #ff006e; --f-body: 'Manrope', system-ui, sans-serif; --f-display: 'Manrope', system-ui, sans-serif; } body.menu-style--moderno .menu-hero { position: relative; overflow: hidden; border-bottom: none; background: linear-gradient(135deg, #ff006e 0%, #8338ec 40%, #3a86ff 100%); } body.menu-style--moderno .menu-hero::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,0.1); top: -90px; right: -70px; } body.menu-style--moderno .menu-hero::after { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.08); bottom: -60px; left: -40px; } body.menu-style--moderno .menu-hero__name { color: #fff; font-weight: 800; letter-spacing: -0.03em; position: relative; } body.menu-style--moderno .menu-hero__desc { color: rgba(255,255,255,0.85); font-style: normal; position: relative; } body.menu-style--moderno .menu-hero__logo { border-color: rgba(255,255,255,0.5); } body.menu-style--moderno .menu-cats { background: #fff; border-bottom: none; box-shadow: 0 2px 20px rgba(131,56,236,0.15); } body.menu-style--moderno .menu-cats__tab { color: #6b5b8a; font-weight: 700; } body.menu-style--moderno .menu-cats__tab:hover { color: #8338ec; } body.menu-style--moderno .menu-cats__tab--active { color: #8338ec; border-bottom-color: #8338ec; } body.menu-style--moderno .menu-section { padding: 1.5rem 1rem 0; } body.menu-style--moderno .menu-section__dishes { background: #fff; border-radius: 1.25rem; padding: 0.25rem 1.25rem; box-shadow: 0 6px 24px rgba(131,56,236,0.08); } body.menu-style--moderno .menu-section__title { border-bottom: none; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, #ff006e, #8338ec); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body.menu-style--moderno .dish-card { border-bottom: 1px solid #f0eaf8; } body.menu-style--moderno .dish-card__name { font-weight: 700; } body.menu-style--moderno .dish-card__price-current { color: #8338ec; font-weight: 800; } body.menu-style--moderno .menu-footer { padding: 0 1rem; } body.menu-style--moderno .menu-footer__info { background: linear-gradient(135deg, #1a0a2e, #3a0a5e); border-top: none; border-radius: 1.5rem; color: #fff; } body.menu-style--moderno .menu-footer__name { color: #fff; font-weight: 800; } body.menu-style--moderno .menu-footer__address { color: rgba(255,255,255,0.6); } body.menu-style--moderno .menu-footer__call { color: #fff; border-color: rgba(255,255,255,0.3); } body.menu-style--moderno .menu-footer__social a { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.2); } body.menu-style--moderno .menu-footer__credit { background: transparent; color: var(--c-text-subtle); } /* ===================================================================== * RIFINITURE MOBILE PER-TEMA * ===================================================================== */ /* Tab categorie: spaziatura tra lettere più contenuta sui temi serif (uppercase + letter-spacing largo rende le tab molto larghe). */ body.menu-style--mediterraneo .menu-cats__tab { letter-spacing: 0.12em; } body.menu-style--elegante .menu-cats__tab { letter-spacing: 0.14em; } /* Schermi molto stretti: riduci le spaziature ampie per evitare affollamento */ @media (max-width: 360px) { body.menu-style--elegante .menu-hero__name, body.menu-style--mediterraneo .menu-hero__name { letter-spacing: 0.04em; } body.menu-style--elegante .menu-section__title { letter-spacing: 0.08em; } body.menu-style--mediterraneo .menu-section__title { letter-spacing: 0.06em; } body.menu-style--elegante .menu-cats__tab, body.menu-style--mediterraneo .menu-cats__tab { letter-spacing: 0.08em; padding-left: 0.85rem; padding-right: 0.85rem; } body.menu-style--moderno .menu-section__dishes { padding-left: 1rem; padding-right: 1rem; } } /* Pillole dei filtri leggermente più ariose sui temi scuri (miglior contrasto) */ body.menu-style--elegante .menu-filter-btn { border-color: rgba(212,168,67,0.3); } /* ===================================================================== * MODERN MINIMALIST — Inter, bianco caldo, numeri di sezione grandi in * grigio, accento terracotta del brand. Editoriale e pulito (demo-07). * ===================================================================== */ body.menu-style--minimalist { --c-bg: #ffffff; --c-surface: #faf9f8; --c-text: #18181a; --c-text-muted: #87868a; --c-text-subtle: #b6b5b8; --c-border: #ececea; --f-body: 'Inter', -apple-system, system-ui, sans-serif; --f-display: 'Inter', -apple-system, system-ui, sans-serif; /* l'accento resta il colore brand del ristorante (default terracotta) */ } body.menu-style--minimalist .menu-hero { border-bottom: 1px solid var(--c-border); text-align: left; } body.menu-style--minimalist .menu-hero__logo { margin-left: 0; margin-right: 0; } body.menu-style--minimalist .menu-hero__name { color: var(--c-text); font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; } body.menu-style--minimalist .menu-hero__desc { font-style: normal; } body.menu-style--minimalist .menu-cats { box-shadow: none; } body.menu-style--minimalist .menu-cats__tab { text-transform: lowercase; letter-spacing: 0.01em; } /* Numero di sezione grande in grigio, a fianco del titolo (baseline) */ body.menu-style--minimalist .menu-body { counter-reset: mm-sec; } body.menu-style--minimalist .menu-section { counter-increment: mm-sec; } body.menu-style--minimalist .menu-section__title { display: flex; align-items: baseline; gap: 0.6rem; border-bottom: none; padding-bottom: 0; font-weight: 600; font-size: 1.4rem; letter-spacing: -0.025em; } body.menu-style--minimalist .menu-section__title::before { content: counter(mm-sec, decimal-leading-zero); font-size: 2.4rem; font-weight: 700; line-height: 0.8; letter-spacing: -0.04em; color: var(--c-border); flex-shrink: 0; } body.menu-style--minimalist .dish-card__name { font-weight: 600; } body.menu-style--minimalist .dish-card__price-current { color: var(--c-text); font-weight: 600; } body.menu-style--minimalist .menu-footer__info { border-top: 1px solid var(--c-border); } /* ===================================================================== * GLASSMORPHISM — Poppins, gradiente pastello vivace + card in vetro * smerigliato (backdrop blur), blob fluttuanti animati (demo-10). * ===================================================================== */ body.menu-style--glass { --c-bg: transparent; --c-surface: rgba(255,255,255,0.20); --c-text: #1a0a30; --c-text-muted: rgba(26,10,48,0.62); --c-text-subtle: rgba(26,10,48,0.50); --c-border: rgba(255,255,255,0.40); --menu-primary: #d0195a; --menu-secondary: #a18cd1; --f-body: 'Poppins', system-ui, sans-serif; --f-display: 'Poppins', system-ui, sans-serif; position: relative; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 20%, #a18cd1 45%, #fbc2eb 65%, #a6c1ee 85%, #84fab0 100%); background-attachment: fixed; } /* Blob fluttuanti dietro al contenuto */ body.menu-style--glass::before, body.menu-style--glass::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } body.menu-style--glass::before { width: 500px; height: 500px; top: -100px; right: -100px; background: radial-gradient(circle, rgba(255,150,200,0.4), transparent 70%); animation: glassBlob1 12s ease-in-out infinite; } body.menu-style--glass::after { width: 400px; height: 400px; bottom: -80px; left: -80px; background: radial-gradient(circle, rgba(120,180,255,0.35), transparent 70%); animation: glassBlob2 15s ease-in-out infinite; } @keyframes glassBlob1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-30px, 40px) scale(1.1); } 66% { transform: translate(20px, -20px) scale(0.95); } } @keyframes glassBlob2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.05); } 66% { transform: translate(-20px, 30px) scale(0.9); } } @media (prefers-reduced-motion: reduce) { body.menu-style--glass::before, body.menu-style--glass::after { animation: none; } } /* Il contenuto sta sopra i blob */ body.menu-style--glass .menu-wrap { position: relative; z-index: 1; } /* Header: card in vetro */ body.menu-style--glass .menu-hero { margin: 1rem 1rem 0; border: 1px solid var(--c-border); border-radius: 26px; background: rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5); } body.menu-style--glass .menu-hero__name { color: var(--c-text); font-weight: 700; letter-spacing: -0.03em; } body.menu-style--glass .menu-hero__desc { color: var(--c-text-muted); font-style: normal; } /* Nav: pillola in vetro */ body.menu-style--glass .menu-cats { margin: 1rem 1rem 0; border: 1px solid rgba(255,255,255,0.45); border-radius: 100px; background: rgba(255,255,255,0.30); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 4px; } body.menu-style--glass .menu-cats__tab { border-bottom: none; border-radius: 100px; color: var(--c-text); opacity: 0.72; min-height: 38px; } body.menu-style--glass .menu-cats__tab:hover { color: var(--c-text); background: rgba(255,255,255,0.45); opacity: 1; } body.menu-style--glass .menu-cats__tab--active { color: var(--c-text); background: rgba(255,255,255,0.60); border-bottom: none; opacity: 1; } /* Toolbar: campi in vetro */ body.menu-style--glass .menu-search__input { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.6); color: var(--c-text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body.menu-style--glass .menu-search__input::placeholder { color: var(--c-text-muted); } body.menu-style--glass .menu-filter-btn { background: rgba(255,255,255,0.30); border-color: rgba(255,255,255,0.55); color: var(--c-text); } body.menu-style--glass .menu-filter-btn.active, body.menu-style--glass .menu-filter-btn[aria-pressed="true"] { background: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.8); color: var(--c-text); } /* Sezioni: card in vetro */ body.menu-style--glass .menu-section { margin: 1.25rem 1rem; padding: 0; border: 1px solid var(--c-border); border-radius: 26px; background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4); overflow: hidden; scroll-margin-top: 72px; } body.menu-style--glass .menu-section__title { border-bottom: none; display: block; color: var(--c-text); font-weight: 700; letter-spacing: -0.02em; margin: 0; padding: 1.25rem 1.5rem 0.85rem; } body.menu-style--glass .menu-section__desc { color: var(--c-text-muted); margin: -0.55rem 0 0; padding: 0 1.5rem 0.9rem; } body.menu-style--glass .menu-section__dishes { padding: 0.25rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.30); } body.menu-style--glass .dish-card { border-bottom: 1px solid rgba(255,255,255,0.22); padding: 1rem 0; } body.menu-style--glass .dish-card:last-child { border-bottom: none; } body.menu-style--glass .dish-card__name { color: var(--c-text); font-weight: 600; } body.menu-style--glass .dish-card__desc { color: var(--c-text-muted); } body.menu-style--glass .dish-card__allergens { color: var(--c-text-subtle); } body.menu-style--glass .dish-card__price-current { color: var(--c-text); font-weight: 700; } /* Footer: card in vetro */ body.menu-style--glass .menu-footer { margin: 0 1rem 1.5rem; } body.menu-style--glass .menu-footer__info { border: 1px solid var(--c-border); border-radius: 26px; background: rgba(255,255,255,0.20); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 8px 32px rgba(0,0,0,0.15); color: var(--c-text); } body.menu-style--glass .menu-footer__name { color: var(--c-text); } body.menu-style--glass .menu-footer__address { color: var(--c-text-muted); } body.menu-style--glass .menu-footer__wa { background: rgba(37,211,102,0.25); border: 1.5px solid rgba(37,211,102,0.5); color: #065f46; box-shadow: none; } body.menu-style--glass .menu-footer__wa:hover { background: rgba(37,211,102,0.4); color: #065f46; transform: translateY(-1px); } body.menu-style--glass .menu-footer__call { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.6); color: var(--c-text); } body.menu-style--glass .menu-footer__social a { color: var(--c-text-muted); border-color: rgba(255,255,255,0.5); } body.menu-style--glass .menu-footer__credit { background: transparent; color: var(--c-text-subtle); } /* === ACCORDION — Inter, editoriale monocromatico: sezioni a scheda bordata, * header categoria in evidenza (bg grigio + hairline), accento nero. * L'accordion è JS: si replica solo l'aspetto statico delle schede/righe. === */ body.menu-style--accordion { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #111111; --c-text-muted: #444444; --c-text-subtle: #888888; --c-border: #e8e8e8; --menu-primary: #111111; --menu-secondary: #888888; --f-body: 'Inter', system-ui, sans-serif; --f-display: 'Inter', system-ui, sans-serif; background: #ffffff; -webkit-font-smoothing: antialiased; } body.menu-style--accordion .menu-hero { text-align: left; padding: 36px 24px 28px; border-bottom: 2px solid var(--c-text); } body.menu-style--accordion .menu-hero__name { font-family: var(--f-display); font-size: clamp(28px, 7vw, 38px); font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--c-text); } body.menu-style--accordion .menu-hero__desc { font-size: 15px; color: var(--c-text-muted); margin-top: 6px; } body.menu-style--accordion .menu-cats { background: var(--c-bg); border-bottom: 1px solid var(--c-border); } body.menu-style--accordion .menu-cats__tab { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--c-text-subtle); border-bottom: 2px solid transparent; white-space: nowrap; } body.menu-style--accordion .menu-cats__tab:hover { color: var(--c-text); border-bottom-color: #d0d0d0; } body.menu-style--accordion .menu-cats__tab--active { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-text); } body.menu-style--accordion .menu-search__input { background: #f8f8f8; border: 1.5px solid var(--c-border); border-radius: 8px; padding: 10px 14px; font-family: var(--f-body); font-size: 14px; color: var(--c-text); } body.menu-style--accordion .menu-search__input:focus { border-color: var(--c-text); outline: none; } body.menu-style--accordion .menu-filter-btn { font-size: 12px; font-weight: 600; color: var(--c-text-muted); background: #f8f8f8; border: 1.5px solid var(--c-border); border-radius: 6px; padding: 6px 12px; } body.menu-style--accordion .menu-filter-btn[aria-pressed="true"] { background: var(--c-text); color: #ffffff; border-color: var(--c-text); } body.menu-style--accordion .menu-section { border: 1.5px solid #d0d0d0; border-radius: 8px; margin: 16px 24px 8px; padding: 0; overflow: hidden; background: var(--c-surface); box-shadow: 0 4px 20px rgba(0,0,0,0.07); } body.menu-style--accordion .menu-section__title { display: block; border: none; margin: 0; padding: 16px 20px; background: #f8f8f8; border-bottom: 1px solid var(--c-border); font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--c-text); } body.menu-style--accordion .menu-section__desc { padding: 10px 20px 0; margin: 0; font-size: 12px; color: var(--c-text-subtle); } body.menu-style--accordion .menu-section__dishes { padding: 8px 0; } body.menu-style--accordion .dish-card { padding: 14px 20px; border-bottom: 1px solid var(--c-border); align-items: flex-start; } body.menu-style--accordion .dish-card:last-child { border-bottom: none; } body.menu-style--accordion .dish-card:hover { background: #f8f8f8; } body.menu-style--accordion .dish-card__name { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; color: var(--c-text); } body.menu-style--accordion .dish-card__desc { font-size: 12px; color: var(--c-text-subtle); line-height: 1.5; margin-top: 3px; } body.menu-style--accordion .dish-badge { font-size: 10px; background: #edf7f1; padding: 2px 6px; border-radius: 4px; } body.menu-style--accordion .dish-card__allergens { font-size: 10px; font-weight: 600; color: var(--c-text-subtle); background: #f8f8f8; border-radius: 4px; padding: 2px 7px; display: inline-block; margin-top: 6px; } body.menu-style--accordion .dish-card__price { text-align: right; min-width: 60px; } body.menu-style--accordion .dish-card__price-current { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--c-text); } body.menu-style--accordion .dish-card__price-old { display: block; font-size: 11px; text-decoration: line-through; color: #c0392b; margin-bottom: 1px; } body.menu-style--accordion .menu-footer { margin-top: 32px; } body.menu-style--accordion .menu-footer__info { padding: 36px 24px; border-top: 2px solid var(--c-text); } body.menu-style--accordion .menu-footer__name { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.3px; color: var(--c-text); } body.menu-style--accordion .menu-footer__address { font-size: 14px; color: var(--c-text-muted); } body.menu-style--accordion .menu-footer__wa { background: #111111; color: #ffffff; border-radius: 8px; padding: 15px; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; } body.menu-style--accordion .menu-footer__wa:hover { opacity: 0.85; } body.menu-style--accordion .menu-footer__call { border: 1.5px solid #d0d0d0; border-radius: 6px; color: var(--c-text-muted); font-weight: 600; padding: 6px 14px; } body.menu-style--accordion .menu-footer__social a { font-size: 12px; font-weight: 600; padding: 6px 14px; border: 1.5px solid #d0d0d0; border-radius: 6px; color: var(--c-text-muted); } body.menu-style--accordion .menu-footer__social a:hover { background: var(--c-text); color: #ffffff; border-color: var(--c-text); } body.menu-style--accordion .menu-footer__credit { background: var(--c-bg); color: var(--c-text-subtle); } /* === ACQUERELLO (watercolor) — Great Vibes + Crimson Text, pastelli sfumati su fondo a macchie === */ body.menu-style--watercolor { --c-bg: transparent; --c-surface: #fdfaf6; --c-text: #3a2a1e; --c-text-muted: #6a5044; --c-text-subtle: #9a8070; --c-border: rgba(200,180,160,0.3); --menu-primary: #d4a843; --menu-secondary: #c8b8e0; --f-body: 'Crimson Text', Georgia, serif; --f-display: 'Great Vibes', cursive; background: #f0ece6; background-image: radial-gradient(ellipse at 30% 0%, rgba(247,197,168,0.4) 0%, transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(200,184,224,0.3) 0%, transparent 50%), radial-gradient(ellipse at 85% 30%, rgba(184,212,192,0.28) 0%, transparent 45%), radial-gradient(ellipse at 10% 60%, rgba(247,197,168,0.22) 0%, transparent 45%); background-attachment: fixed; } body.menu-style--watercolor .menu-hero { text-align: center; padding: 3rem 2rem 2.25rem; border-bottom: none; background: radial-gradient(ellipse at 50% 100%, rgba(247,197,168,0.35) 0%, rgba(247,197,168,0.12) 45%, transparent 75%), var(--c-surface); } body.menu-style--watercolor .menu-hero__logo { border-radius: 50%; border: 2px solid var(--c-border); } body.menu-style--watercolor .menu-hero__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 11vw, 4.5rem); line-height: 1.0; color: var(--c-text); position: relative; } body.menu-style--watercolor .menu-hero__name::after { content: ''; display: block; height: 8px; margin: -2px auto 0; width: 70%; background: radial-gradient(ellipse, rgba(212,168,67,0.45) 0%, rgba(212,168,67,0.2) 60%, transparent 100%); border-radius: 50%; } body.menu-style--watercolor .menu-hero__desc { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.05rem; letter-spacing: 1px; color: var(--c-text-muted); margin-top: 0.6rem; } body.menu-style--watercolor .menu-cats { background: rgba(253,250,246,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); } body.menu-style--watercolor .menu-cats__tab { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 0.98rem; color: var(--c-text-muted); border-bottom: 2.5px solid transparent; } body.menu-style--watercolor .menu-cats__tab:hover { color: var(--c-text); } body.menu-style--watercolor .menu-cats__tab--active { color: var(--c-text); border-bottom-color: transparent; background: radial-gradient(ellipse at 50% 100%, rgba(200,184,224,0.5) 0%, transparent 70%); } body.menu-style--watercolor .menu-search__input { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; border-radius: 30px; border: 1px solid var(--c-border); background: rgba(253,250,246,0.7); } body.menu-style--watercolor .menu-filter-btn { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; border-radius: 20px; border: 1px solid var(--c-border); color: var(--c-text-muted); background: rgba(184,212,192,0.15); } body.menu-style--watercolor .menu-filter-btn[aria-pressed="true"] { color: var(--c-text); border-color: rgba(212,168,67,0.4); background: rgba(240,216,144,0.35); } body.menu-style--watercolor .menu-section { padding: 2.25rem 1.75rem 0.75rem; background: linear-gradient(180deg, rgba(247,197,168,0.06) 0%, transparent 100%); } body.menu-style--watercolor .menu-section:nth-of-type(2) { background: linear-gradient(180deg, rgba(184,212,192,0.06) 0%, transparent 100%); } body.menu-style--watercolor .menu-section:nth-of-type(3) { background: linear-gradient(180deg, rgba(247,197,168,0.05) 0%, transparent 100%); } body.menu-style--watercolor .menu-section:nth-of-type(4) { background: linear-gradient(180deg, rgba(200,184,224,0.06) 0%, transparent 100%); } body.menu-style--watercolor .menu-section:nth-of-type(5) { background: linear-gradient(180deg, rgba(212,168,67,0.05) 0%, transparent 100%); } body.menu-style--watercolor .menu-section__title { display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.1; color: var(--c-text); border-bottom: none; position: relative; } body.menu-style--watercolor .menu-section__title::after { content: ''; display: block; height: 6px; margin: 0 auto; width: 80%; border-radius: 50%; background: radial-gradient(ellipse, rgba(200,184,224,0.7) 0%, transparent 70%); } body.menu-style--watercolor .menu-section__desc { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 0.9rem; letter-spacing: 1px; color: var(--c-text-subtle); margin-top: 0.25rem; } body.menu-style--watercolor .dish-card { padding: 0.9rem 0; border-bottom: 1px solid var(--c-border); } body.menu-style--watercolor .dish-card__name { font-family: var(--f-body); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--c-text); } body.menu-style--watercolor .dish-badge { font-size: 0.9rem; padding: 2px 8px; border-radius: 20px; border: 1px solid rgba(58,112,80,0.3); background: rgba(184,212,192,0.25); } body.menu-style--watercolor .dish-card__desc { font-family: var(--f-body); font-style: italic; font-size: 0.92rem; line-height: 1.6; color: var(--c-text-muted); margin-top: 0.25rem; } body.menu-style--watercolor .dish-card__allergens { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 0.72rem; letter-spacing: 0.3px; color: var(--c-text-subtle); margin-top: 0.5rem; } body.menu-style--watercolor .dish-card__price-current { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.15rem; color: var(--c-text-muted); white-space: nowrap; } body.menu-style--watercolor .dish-card__price-old { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.85rem; text-decoration: line-through; color: var(--c-text-subtle); } body.menu-style--watercolor .menu-footer { margin: 2.5rem 1.75rem 0; padding: 2rem 1.5rem; text-align: center; border: 1px solid var(--c-border); border-radius: 4px; background: radial-gradient(ellipse at 30% 20%, rgba(247,197,168,0.2) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(200,184,224,0.2) 0%, transparent 50%), var(--c-surface); } body.menu-style--watercolor .menu-footer__info { border-top: none; } body.menu-style--watercolor .menu-footer__name { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; color: var(--c-text); } body.menu-style--watercolor .menu-footer__address { font-family: var(--f-body); font-style: italic; font-size: 0.88rem; line-height: 1.7; color: var(--c-text-subtle); } body.menu-style--watercolor .menu-footer__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } body.menu-style--watercolor .menu-footer__wa { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; border-radius: 30px; padding: 9px 20px; background: rgba(184,212,192,0.3); border: 1px solid rgba(42,96,64,0.3); color: #2a6040; } body.menu-style--watercolor .menu-footer__call { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; border-radius: 30px; padding: 9px 20px; background: rgba(247,197,168,0.3); border: 1px solid rgba(180,100,60,0.3); color: #8a4020; } body.menu-style--watercolor .menu-footer__social a { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 0.88rem; color: var(--c-text-subtle); border: none; padding: 0; } body.menu-style--watercolor .menu-footer__social a:hover { color: var(--c-text-muted); } body.menu-style--watercolor .menu-footer__credit { font-family: var(--f-body); font-style: italic; font-size: 0.82rem; color: var(--c-text-subtle); background: transparent; } /* === COMIC / FUMETTO — Bangers + Comic Neue, pop art giallo/rosso/blu, contorni neri, halftone, badge prezzo === */ body.menu-style--comic { --c-bg: transparent; --c-surface: #FFFFFF; --c-text: #111111; --c-text-muted: #444444; --c-text-subtle: #888888; --c-border: #111111; --menu-primary: #E8231A; --menu-secondary: #1A3FF5; --f-body: 'Comic Neue', cursive, system-ui, sans-serif; --f-display: 'Bangers', 'Comic Neue', cursive, sans-serif; background-color: #FFD700; background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1.5px, transparent 1.5px); background-size: 14px 14px; color: var(--c-text); } body.menu-style--comic .menu-wrap { max-width: 640px; margin: 0 auto; background: #FFFFFF; border-left: 4px solid #111; border-right: 4px solid #111; } body.menu-style--comic .menu-hero { background: #FFD700; border-bottom: 4px solid #111; padding: 1.5rem 1rem 1.25rem; position: relative; overflow: hidden; text-align: center; } body.menu-style--comic .menu-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1.5px, transparent 1.5px); background-size: 12px 12px; pointer-events: none; } body.menu-style--comic .menu-hero__logo { position: relative; z-index: 1; border: 3px solid #111; background: #fff; box-shadow: 3px 3px 0 rgba(0,0,0,0.3); } body.menu-style--comic .menu-hero__name { position: relative; z-index: 1; font-family: var(--f-display); font-size: clamp(2.8rem, 10vw, 4.2rem); color: #111; line-height: 0.95; letter-spacing: 2px; text-shadow: 4px 4px 0 rgba(0,0,0,0.15), -2px -2px 0 #E8231A; -webkit-text-stroke: 2px #111; paint-order: stroke fill; } body.menu-style--comic .menu-hero__desc { position: relative; z-index: 1; font-family: var(--f-display); font-size: 1.3rem; color: #1A3FF5; letter-spacing: 2px; margin-top: 0.4rem; -webkit-text-stroke: 1px #111; paint-order: stroke fill; } body.menu-style--comic .menu-cats { background: #1A3FF5; border-bottom: 4px solid #111; } body.menu-style--comic .menu-cats__tab { color: #FFFFFF; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 1.5px; border-right: 3px solid rgba(255,255,255,0.2); border-bottom: none; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); transition: background 0.15s, color 0.15s; } body.menu-style--comic .menu-cats__tab:hover { background: rgba(255,255,255,0.15); color: #FFD700; } body.menu-style--comic .menu-cats__tab--active { background: #FFD700; color: #111; border-bottom: none; text-shadow: none; } body.menu-style--comic .menu-toolbar { background: #FFFFFF; } body.menu-style--comic .menu-search__input { border: 2.5px solid #111; border-radius: 0; font-family: var(--f-body); font-weight: 700; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); } body.menu-style--comic .menu-search__input:focus { outline: none; border-color: #E8231A; } body.menu-style--comic .menu-filter-btn { font-family: var(--f-display); letter-spacing: 0.5px; border: 2px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); } body.menu-style--comic .menu-filter-btn[aria-pressed="true"] { background: #FFD700; color: #111; } body.menu-style--comic .menu-section { padding: 0 0 1rem; border-bottom: 4px solid #111; } body.menu-style--comic .menu-section:last-of-type { border-bottom: none; } body.menu-style--comic .menu-section__title { display: block; background: #111; color: #FFD700; font-family: var(--f-display); font-size: clamp(1.8rem, 6vw, 2.4rem); letter-spacing: 3px; line-height: 1; padding: 0.65rem 1.25rem; border: none; border-bottom: 3px solid #111; position: relative; overflow: hidden; } body.menu-style--comic .menu-section__title::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(255,255,255,0.05) 8px, rgba(255,255,255,0.05) 10px); pointer-events: none; } body.menu-style--comic .menu-section__desc { background: #111; color: rgba(255,215,0,0.7); font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; padding: 0 1.25rem 0.65rem; margin: 0; border-bottom: 3px solid #111; } body.menu-style--comic .menu-section__dishes { padding: 0; } body.menu-style--comic .dish-card { padding: 0.9rem 1rem; border-bottom: 2px solid #111; border-left: 5px solid #E8231A; background: #FFFFFF; } body.menu-style--comic .dish-card:nth-child(even) { background: #FAFAFA; } body.menu-style--comic .dish-card:last-child { border-bottom: none; } body.menu-style--comic .dish-card__name { font-family: var(--f-display); font-size: clamp(1.2rem, 4vw, 1.45rem); color: #111; letter-spacing: 1px; line-height: 1.1; } body.menu-style--comic .dish-badge { border: 2px solid #111; border-radius: 0; background: #BFFF60; padding: 1px 6px; font-size: 0.8rem; vertical-align: middle; } body.menu-style--comic .dish-card__desc { font-family: var(--f-body); font-size: 0.88rem; color: #444; font-style: italic; line-height: 1.5; margin-top: 0.25rem; } body.menu-style--comic .dish-card__allergens { font-family: var(--f-body); font-size: 0.7rem; font-style: italic; font-weight: 700; color: #555; background: #EEE; border: 2px dashed #111; display: inline-block; padding: 2px 7px; margin-top: 0.4rem; } body.menu-style--comic .dish-card__price { align-items: flex-end; } body.menu-style--comic .dish-card__price-current { display: inline-block; background: #FFD700; color: #111; font-family: var(--f-display); font-size: 1.2rem; letter-spacing: 1px; padding: 3px 10px; border: 2.5px solid #111; box-shadow: 2px 2px 0 rgba(0,0,0,0.3); white-space: nowrap; } body.menu-style--comic .dish-card__price-old { display: block; text-align: right; font-family: var(--f-body); font-size: 0.8rem; color: #888; text-decoration: line-through; margin-bottom: 2px; } body.menu-style--comic .menu-footer { background: #111; color: #FFFFFF; text-align: center; border-top: 4px solid #111; position: relative; overflow: hidden; } body.menu-style--comic .menu-footer::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px); background-size: 12px 12px; pointer-events: none; } body.menu-style--comic .menu-footer__info { border-top: none; position: relative; z-index: 1; } body.menu-style--comic .menu-footer__name { font-family: var(--f-display); font-size: 1.6rem; color: #FFFFFF; letter-spacing: 2px; } body.menu-style--comic .menu-footer__address { font-family: var(--f-body); font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.7; } body.menu-style--comic .menu-footer__actions { justify-content: center; gap: 10px; } body.menu-style--comic .menu-footer__wa { background: #25D366; color: #FFFFFF; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 1px; border: 3px solid #FFFFFF; border-radius: 0; box-shadow: 3px 3px 0 rgba(255,255,255,0.3); padding: 10px 20px; } body.menu-style--comic .menu-footer__call { background: #1A3FF5; color: #FFFFFF; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 1px; border: 3px solid #FFFFFF; border-radius: 0; box-shadow: 3px 3px 0 rgba(255,255,255,0.3); padding: 10px 20px; } body.menu-style--comic .menu-footer__wa:active, body.menu-style--comic .menu-footer__call:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(255,255,255,0.3); } body.menu-style--comic .menu-footer__social { justify-content: center; gap: 14px; position: relative; z-index: 1; } body.menu-style--comic .menu-footer__social a { font-family: var(--f-display); font-size: 1rem; color: #FFD700; letter-spacing: 1px; border: none; border-bottom: 2px solid transparent; background: transparent; padding: 0 0 2px; border-radius: 0; } body.menu-style--comic .menu-footer__social a:hover { border-bottom-color: #FFD700; } body.menu-style--comic .menu-footer__credit { background: #111; color: rgba(255,255,255,0.5); font-family: var(--f-body); position: relative; z-index: 1; } /* === SCANDINAVO — Nunito, crema+bianco, accenti salvia/cipria, card morbide, footer scuro === */ body.menu-style--scandinavian { --c-bg: #f9f5f0; --c-surface: #ffffff; --c-text: #2a2420; --c-text-muted: #5a5250; --c-text-subtle: #9a9290; --c-border: #f0ebe3; --menu-primary: #8aab80; --menu-secondary: #d4998c; --f-body: 'Nunito', system-ui, sans-serif; --f-display: 'Nunito', system-ui, sans-serif; background: #f9f5f0; line-height: 1.65; } body.menu-style--scandinavian .menu-hero { background: var(--c-surface); border-radius: 0 0 32px 32px; border-bottom: none; box-shadow: 0 4px 20px rgba(42,36,32,0.10); padding: 2.5rem 2rem 2rem; overflow: hidden; position: relative; } body.menu-style--scandinavian .menu-hero::before { content: ''; position: absolute; top: -20px; right: -20px; width: 120px; height: 120px; background: #c2d4bc; border-radius: 50%; opacity: 0.35; } body.menu-style--scandinavian .menu-hero::after { content: ''; position: absolute; bottom: -30px; left: -15px; width: 90px; height: 90px; background: #f0d5d0; border-radius: 50%; opacity: 0.5; } body.menu-style--scandinavian .menu-hero__logo { position: relative; z-index: 1; border-radius: 50%; box-shadow: 0 4px 16px rgba(138,171,128,0.30); } body.menu-style--scandinavian .menu-hero__name { position: relative; z-index: 1; font-weight: 700; color: var(--c-text); line-height: 1.15; } body.menu-style--scandinavian .menu-hero__desc { position: relative; z-index: 1; color: var(--c-text-subtle); font-weight: 400; } body.menu-style--scandinavian .menu-cats { background: var(--c-bg); border-bottom: none; padding: 0.9rem 1rem; } body.menu-style--scandinavian .menu-cats__tab { border: none; border-radius: 50px; background: var(--c-surface); color: var(--c-text-muted); font-weight: 600; font-size: 0.82rem; padding: 0.5rem 1.05rem; box-shadow: 0 2px 8px rgba(42,36,32,0.07); transition: all 0.25s; } body.menu-style--scandinavian .menu-cats__tab:hover { background: #c2d4bc; color: #4a6e44; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(138,171,128,0.35); } body.menu-style--scandinavian .menu-cats__tab--active { background: var(--menu-primary); color: #ffffff; box-shadow: 0 3px 12px rgba(138,171,128,0.40); } body.menu-style--scandinavian .menu-section__title { border-bottom: none; color: var(--c-text); font-weight: 700; } body.menu-style--scandinavian .menu-section__desc { color: var(--c-text-subtle); font-size: 0.8rem; } body.menu-style--scandinavian .menu-section__dishes { display: flex; flex-direction: column; gap: 0.75rem; } body.menu-style--scandinavian .dish-card { background: var(--c-surface); border: none; border-bottom: none; border-radius: 20px; padding: 1.1rem 1.25rem; box-shadow: 0 2px 8px rgba(42,36,32,0.07); transition: box-shadow 0.25s, transform 0.25s; } body.menu-style--scandinavian .dish-card:hover { box-shadow: 0 4px 20px rgba(42,36,32,0.10); transform: translateY(-1px); } body.menu-style--scandinavian .dish-card__name { color: var(--c-text); font-weight: 700; font-size: 0.98rem; } body.menu-style--scandinavian .dish-card__desc { color: var(--c-text-subtle); font-size: 0.8rem; line-height: 1.55; } body.menu-style--scandinavian .dish-card__allergens { color: var(--c-text-muted); font-size: 0.72rem; } body.menu-style--scandinavian .dish-badge { background: #e6f2e3; border-radius: 50px; padding: 0.1rem 0.5rem; } body.menu-style--scandinavian .dish-card__price-current { color: #4a6e44; font-weight: 700; } body.menu-style--scandinavian .dish-card__price-old { color: var(--c-text-subtle); font-weight: 400; } body.menu-style--scandinavian .menu-footer { background: #2a2420; color: #f9f5f0; border-radius: 32px 32px 0 0; margin-top: 2rem; } body.menu-style--scandinavian .menu-footer__info { border-top: none; text-align: center; } body.menu-style--scandinavian .menu-footer__name { color: #f9f5f0; font-weight: 700; } body.menu-style--scandinavian .menu-footer__address { color: rgba(249,245,240,0.60); font-size: 0.8rem; } body.menu-style--scandinavian .menu-footer__wa { background: var(--menu-primary); color: #ffffff; border-radius: 50px; font-weight: 700; box-shadow: 0 4px 16px rgba(138,171,128,0.35); } body.menu-style--scandinavian .menu-footer__call { background: transparent; color: rgba(249,245,240,0.75); border: 1px solid rgba(249,245,240,0.20); border-radius: 50px; font-weight: 600; } body.menu-style--scandinavian .menu-footer__social a { color: rgba(249,245,240,0.50); border: 1px solid rgba(249,245,240,0.15); border-radius: 50px; font-weight: 600; font-size: 0.72rem; } body.menu-style--scandinavian .menu-footer__social a:hover { color: #f9f5f0; border-color: rgba(249,245,240,0.40); background: rgba(249,245,240,0.07); } body.menu-style--scandinavian .menu-footer__credit { background: #2a2420; color: rgba(249,245,240,0.35); } /* === RUSTICO LEGNO — Merriweather serif, texture legno + pergamena, accenti ottone, bordi tratteggiati === */ body.menu-style--rustic { --c-bg: transparent; --c-surface: #f0e0c0; --c-text: #1a0d04; --c-text-muted: #3d2010; --c-text-subtle: #7a5030; --c-border: rgba(155,106,62,0.25); --menu-primary: #b8860b; --menu-secondary: #6b3f1e; --f-body: 'Merriweather', Georgia, serif; --f-display: 'Merriweather', Georgia, serif; background-color: #9b6a3e; background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px), linear-gradient(175deg, #a06030 0%, #8a5028 15%, #c0804a 30%, #7a4020 45%, #b07040 60%, #6a3818 75%, #9a6038 90%, #8a5028 100%); background-attachment: fixed; font-weight: 300; line-height: 1.7; } body.menu-style--rustic .menu-body { background: #f0e0c0; } body.menu-style--rustic .menu-hero { background: #3d1f08; background-image: repeating-linear-gradient(88deg, transparent, transparent 5px, rgba(255,255,255,0.015) 5px, rgba(255,255,255,0.015) 6px), linear-gradient(180deg, #2a1005 0%, #3d1f08 40%, #2a1005 100%); border-bottom: 3px solid var(--menu-primary); box-shadow: 0 4px 20px rgba(0,0,0,0.5); padding: 2.5rem 2rem 2rem; } body.menu-style--rustic .menu-hero__logo { border: 2px solid #d4a017; box-shadow: 0 2px 10px rgba(0,0,0,0.5); } body.menu-style--rustic .menu-hero__name { font-family: var(--f-display); font-weight: 700; color: #f5e8d0; letter-spacing: 0.03em; line-height: 1.2; text-shadow: 2px 3px 8px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.08); } body.menu-style--rustic .menu-hero__desc { font-style: italic; font-weight: 300; color: rgba(245,232,208,0.7); } body.menu-style--rustic .menu-cats { background: #2a2a2a; background-image: linear-gradient(180deg, #3a3a3a, #2a2a2a); border-bottom: 2px solid var(--menu-primary); box-shadow: 0 3px 12px rgba(0,0,0,0.4); } body.menu-style--rustic .menu-cats__tab { font-family: 'Merriweather Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,232,208,0.6); border-bottom: 2.5px solid transparent; } body.menu-style--rustic .menu-cats__tab:hover { color: #d4a017; } body.menu-style--rustic .menu-cats__tab--active { color: #d4a017; border-bottom-color: #d4a017; } body.menu-style--rustic .menu-toolbar { background: #f0e0c0; } body.menu-style--rustic .menu-search__input { background: #f5e8d0; border: 1px solid rgba(155,106,62,0.35); color: var(--c-text); font-family: 'Merriweather Sans', sans-serif; } body.menu-style--rustic .menu-search__input:focus { border-color: var(--menu-primary); outline-color: var(--menu-primary); } body.menu-style--rustic .menu-filter-btn { background: #f5e8d0; border: 1px solid rgba(155,106,62,0.35); color: var(--c-text-subtle); font-family: 'Merriweather Sans', sans-serif; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; } body.menu-style--rustic .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: #d4a017; color: #3d1f08; } body.menu-style--rustic .menu-section { background: #f0e0c0; border: 1px solid rgba(155,106,62,0.2); box-shadow: 2px 3px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.4) inset; padding: 1.25rem 1.25rem 0.5rem; margin: 2.5rem 0.25rem 0; } body.menu-style--rustic .menu-section__title { display: block; border-bottom: none; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: #6b3f1e; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; } body.menu-style--rustic .menu-section__desc { font-size: 0.8rem; font-style: italic; color: var(--c-text-subtle); text-align: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px dashed rgba(155,106,62,0.4); } body.menu-style--rustic .dish-card { border-bottom: 1px dashed rgba(155,106,62,0.35); padding: 1.25rem 0; } body.menu-style--rustic .dish-card:last-child { border-bottom: none; } body.menu-style--rustic .dish-card__name { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; color: #6b3f1e; line-height: 1.35; } body.menu-style--rustic .dish-card__desc { font-size: 0.8rem; font-style: italic; color: var(--c-text-muted); line-height: 1.6; } body.menu-style--rustic .dish-card__allergens { font-family: 'Merriweather Sans', sans-serif; font-size: 0.68rem; color: var(--c-text-subtle); } body.menu-style--rustic .dish-badge { background: rgba(155,106,62,0.12); border: 1px solid rgba(155,106,62,0.3); border-radius: 2px; padding: 0.1rem 0.35rem; } body.menu-style--rustic .dish-card__price-current { font-family: 'Merriweather Sans', sans-serif; font-weight: 700; color: var(--menu-primary); } body.menu-style--rustic .dish-card__price-old { font-family: var(--f-display); font-weight: 400; text-decoration: line-through; color: var(--c-text-subtle); } body.menu-style--rustic .menu-footer { background: #3d1f08; background-image: linear-gradient(180deg, #2a1005 0%, #3d1f08 60%, #2a1005 100%); color: #f5e8d0; } body.menu-style--rustic .menu-footer__info { border-top: 3px solid var(--menu-primary); } body.menu-style--rustic .menu-footer__name { font-family: var(--f-display); font-weight: 700; color: #f5e8d0; text-align: center; text-shadow: 1px 2px 6px rgba(0,0,0,0.5); } body.menu-style--rustic .menu-footer__address { font-family: 'Merriweather Sans', sans-serif; font-size: 0.8rem; color: rgba(245,232,208,0.6); text-align: center; } body.menu-style--rustic .menu-footer__wa { background: var(--menu-primary); color: #3d1f08; font-family: 'Merriweather Sans', sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid #d4a017; box-shadow: 0 3px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); } body.menu-style--rustic .menu-footer__wa:hover { background: #d4a017; } body.menu-style--rustic .menu-footer__call { color: rgba(245,232,208,0.85); border: 1px solid rgba(184,134,11,0.5); font-family: 'Merriweather Sans', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; } body.menu-style--rustic .menu-footer__social a { color: rgba(245,232,208,0.5); border: 1px solid rgba(184,134,11,0.4); font-family: 'Merriweather Sans', sans-serif; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; } body.menu-style--rustic .menu-footer__social a:hover { color: #d4a017; border-color: #d4a017; } body.menu-style--rustic .menu-footer__credit { background: #2a1005; color: rgba(245,232,208,0.4); font-family: 'Merriweather Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; } /* === NEON CYBERPUNK — Space Mono, fondo scuro a griglia, glow neon ciano/magenta, prezzi giallo fluo === */ body.menu-style--neon { --c-bg: transparent; --c-surface: #12121f; --c-text: #e0e0f0; --c-text-muted: #7070a0; --c-text-subtle: #5a5a85; --c-border: #1e1e3a; --menu-primary: #00f0ff; --menu-secondary: #ff006e; --f-body: 'Space Mono', 'Courier New', monospace; --f-display: 'Space Mono', 'Courier New', monospace; background-color: #0a0a0f; background-image: linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px); background-size: 40px 40px; background-attachment: fixed; color: var(--c-text); letter-spacing: 0.02em; } body.menu-style--neon::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px); pointer-events: none; z-index: 1000; } body.menu-style--neon .menu-hero { border-bottom: 1px solid var(--menu-primary); box-shadow: 0 2px 24px rgba(0,240,255,0.18); padding: 3rem 1rem 2rem; } body.menu-style--neon .menu-hero__logo { filter: drop-shadow(0 0 10px rgba(0,240,255,0.5)); } body.menu-style--neon .menu-hero__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--menu-primary); text-shadow: 0 0 7px var(--menu-primary), 0 0 20px var(--menu-primary), 0 0 40px rgba(0,240,255,0.4); } body.menu-style--neon .menu-hero__desc { color: var(--menu-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; text-shadow: 0 0 10px rgba(255,0,110,0.6); } body.menu-style--neon .menu-cats { background: rgba(10,10,15,0.95); border-bottom: 1px solid var(--menu-primary); box-shadow: 0 2px 20px rgba(0,240,255,0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body.menu-style--neon .menu-cats__tab { font-family: var(--f-body); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); border-bottom: 2.5px solid transparent; transition: all 0.2s; } body.menu-style--neon .menu-cats__tab::before { content: '> '; color: var(--menu-secondary); } body.menu-style--neon .menu-cats__tab:hover { color: var(--menu-primary); text-shadow: 0 0 8px var(--menu-primary); } body.menu-style--neon .menu-cats__tab--active { color: var(--menu-primary); border-bottom-color: var(--menu-primary); text-shadow: 0 0 8px var(--menu-primary); } body.menu-style--neon .menu-search__input { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); font-family: var(--f-body); text-transform: uppercase; letter-spacing: 0.05em; } body.menu-style--neon .menu-search__input::placeholder { color: var(--c-text-subtle); } body.menu-style--neon .menu-search__input:focus { border-color: var(--menu-primary); box-shadow: 0 0 12px rgba(0,240,255,0.35); outline: none; } body.menu-style--neon .menu-filter-btn { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-muted); font-family: var(--f-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } body.menu-style--neon .menu-filter-btn[aria-pressed="true"] { color: var(--menu-primary); border-color: var(--menu-primary); text-shadow: 0 0 6px var(--menu-primary); box-shadow: 0 0 10px rgba(0,240,255,0.2); } body.menu-style--neon .menu-body { counter-reset: neonsec; } body.menu-style--neon .menu-section { counter-increment: neonsec; } body.menu-style--neon .menu-section__title { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--menu-secondary); border-bottom: none; text-shadow: 0 0 12px var(--menu-secondary), 0 0 30px rgba(191,95,255,0.3); } body.menu-style--neon .menu-section__title::before { content: '// MODULE_' counter(neonsec, decimal-leading-zero); display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: var(--menu-primary); text-shadow: 0 0 8px var(--menu-primary); margin-bottom: 4px; } body.menu-style--neon .menu-section__desc { color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; } body.menu-style--neon .dish-card { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--menu-primary); border-bottom: 1px solid var(--c-border); padding: 1rem; margin-bottom: 0.5rem; transition: all 0.2s; } body.menu-style--neon .dish-card:hover { background: #1a1a2e; border-left-color: var(--menu-secondary); box-shadow: 0 0 20px rgba(255,0,110,0.1), inset 0 0 20px rgba(0,240,255,0.03); } body.menu-style--neon .dish-card__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text); } body.menu-style--neon .dish-card__desc { color: var(--c-text-muted); font-size: 0.8rem; line-height: 1.5; } body.menu-style--neon .dish-card__allergens { color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.65rem; border: 1px solid #2a2a4a; padding: 2px 6px; display: inline-block; margin-top: 4px; } body.menu-style--neon .dish-badge { filter: drop-shadow(0 0 6px rgba(0,255,136,0.6)); } body.menu-style--neon .dish-card__price-current { font-family: var(--f-display); font-weight: 700; color: #f5e642; text-shadow: 0 0 8px rgba(245,230,66,0.6); } body.menu-style--neon .dish-card__price-old { text-decoration: line-through; color: var(--c-text-muted); font-size: 0.8rem; } body.menu-style--neon .menu-footer { border-top: 1px solid var(--c-border); } body.menu-style--neon .menu-footer__info { border-top: 3px solid var(--menu-primary); } body.menu-style--neon .menu-footer__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--menu-primary); text-shadow: 0 0 10px var(--menu-primary); } body.menu-style--neon .menu-footer__address { color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; } body.menu-style--neon .menu-footer__wa { color: #0a0a0f; background: #00ff88; border: 2px solid #00ff88; font-family: var(--f-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 0 15px rgba(0,255,136,0.4); } body.menu-style--neon .menu-footer__wa:hover { background: transparent; color: #00ff88; box-shadow: 0 0 25px rgba(0,255,136,0.6); } body.menu-style--neon .menu-footer__call { color: var(--menu-primary); background: transparent; border: 2px solid var(--menu-primary); font-family: var(--f-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 0 10px rgba(0,240,255,0.2); } body.menu-style--neon .menu-footer__call:hover { background: var(--menu-primary); color: #0a0a0f; box-shadow: 0 0 25px rgba(0,240,255,0.5); } body.menu-style--neon .menu-footer__social a { color: #bf5fff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.65rem; text-shadow: 0 0 8px #bf5fff; } body.menu-style--neon .menu-footer__social a:hover { color: var(--menu-secondary); text-shadow: 0 0 12px var(--menu-secondary); } body.menu-style--neon .menu-footer__credit { background: transparent; color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem; } /* === BRUTALIST — Arial, bianco/nero/giallo, bordi spessi 5px, uppercase, prezzi in box giallo === */ body.menu-style--brutalist { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #000000; --c-text-muted: #333333; --c-text-subtle: #555555; --c-border: #000000; --menu-primary: #000000; --menu-secondary: #ffff00; --f-body: Arial, Helvetica, sans-serif; --f-display: Arial, Helvetica, sans-serif; background: #ffffff; font-size: 14px; } body.menu-style--brutalist .menu-wrap { border-left: 5px solid #000; border-right: 5px solid #000; } body.menu-style--brutalist .menu-hero { background: #ffff00; border-bottom: 5px solid #000; padding: 1.25rem 1.25rem 1.5rem; text-align: left; } body.menu-style--brutalist .menu-hero__logo { border: 4px solid #000; border-radius: 0; filter: grayscale(1) contrast(1.2); } body.menu-style--brutalist .menu-hero__name { color: #000; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(40px, 11vw, 60px); } body.menu-style--brutalist .menu-hero__desc { display: inline-block; margin-top: 0.75rem; color: #ffff00; background: #000; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; } body.menu-style--brutalist .menu-cats { background: #000; border-bottom: 5px solid #000; } body.menu-style--brutalist .menu-cats__tab { color: #fff; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 16px; border-right: 3px solid #333; border-bottom: none; border-radius: 0; white-space: nowrap; transition: background 0.1s, color 0.1s; } body.menu-style--brutalist .menu-cats__tab:hover { background: #ffff00; color: #000; } body.menu-style--brutalist .menu-cats__tab--active { background: #ffff00; color: #000; border-bottom: none; } body.menu-style--brutalist .menu-toolbar { border-bottom: 5px solid #000; background: #fff; } body.menu-style--brutalist .menu-search__input { border: 3px solid #000; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } body.menu-style--brutalist .menu-search__input:focus { border-color: #000; box-shadow: 4px 4px 0 #ffff00; outline: none; } body.menu-style--brutalist .menu-filter-btn { border: 3px solid #000; border-radius: 0; font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #000; background: #fff; } body.menu-style--brutalist .menu-filter-btn[aria-pressed="true"] { background: #ffff00; color: #000; } body.menu-style--brutalist .menu-body { counter-reset: brut-sec; } body.menu-style--brutalist .menu-section { border-bottom: 5px solid #000; padding: 0; } body.menu-style--brutalist .menu-section__title { counter-increment: brut-sec; display: flex; align-items: center; gap: 16px; border-bottom: 4px solid #000; border-top: none; padding: 20px 20px 16px; margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; color: #000; } body.menu-style--brutalist .menu-section__title::before { content: counter(brut-sec, decimal-leading-zero); background: #000; color: #ffff00; font-size: 40px; font-weight: 900; line-height: 1; padding: 8px 16px; flex-shrink: 0; } body.menu-style--brutalist .menu-section__desc { padding: 12px 20px 0; margin: 0; color: var(--c-text-subtle); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; } body.menu-style--brutalist .menu-section__dishes { padding: 0; } body.menu-style--brutalist .dish-card { padding: 16px 20px; border-bottom: 2px solid #000; gap: 12px; } body.menu-style--brutalist .dish-card:nth-child(even) { background: #f5f5f5; } body.menu-style--brutalist .dish-card:last-child { border-bottom: none; } body.menu-style--brutalist .dish-card__name { font-family: var(--f-display); font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2; color: #000; } body.menu-style--brutalist .dish-badge { border: 2px solid #000; background: #b3ffd9; border-radius: 0; padding: 0 3px; } body.menu-style--brutalist .dish-card__desc { font-size: 12px; color: #333; line-height: 1.4; } body.menu-style--brutalist .dish-card__allergens { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: #000; border: 2px solid #999; display: inline-block; padding: 2px 5px; margin-top: 4px; } body.menu-style--brutalist .dish-card__price { align-items: flex-start; } body.menu-style--brutalist .dish-card__price-current { font-family: var(--f-display); font-size: 18px; font-weight: 900; color: #000; background: #ffff00; border: 3px solid #000; border-radius: 0; padding: 0 6px; line-height: 1.4; white-space: nowrap; } body.menu-style--brutalist .dish-card__price-old { text-decoration: line-through; font-size: 13px; font-weight: 400; color: #888; } body.menu-style--brutalist .menu-footer { background: #000; color: #fff; border-top: 5px solid #000; } body.menu-style--brutalist .menu-footer__info { border-top: none; padding: 0; } body.menu-style--brutalist .menu-footer__name { background: #ffff00; color: #000; font-family: var(--f-display); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; padding: 14px 20px; border-bottom: 5px solid #000; margin: 0; } body.menu-style--brutalist .menu-footer__address { color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding: 20px 20px 0; margin: 0; } body.menu-style--brutalist .menu-footer__actions { padding: 20px; gap: 0; border: 3px solid #ffff00; margin: 20px; } body.menu-style--brutalist .menu-footer__wa { background: #ffff00; color: #000; border-radius: 0; border: none; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 20px; flex: 1; text-align: center; } body.menu-style--brutalist .menu-footer__wa:hover { background: #fff; } body.menu-style--brutalist .menu-footer__call { background: #000; color: #ffff00; border-radius: 0; border: none; border-left: 3px solid #ffff00; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 20px; flex: 1; text-align: center; } body.menu-style--brutalist .menu-footer__call:hover { background: #222; } body.menu-style--brutalist .menu-footer__social { border: 2px solid #333; gap: 0; margin: 0 20px 20px; } body.menu-style--brutalist .menu-footer__social a { color: #fff; background: #000; border: none; border-right: 2px solid #333; border-radius: 0; font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 12px; flex: 1; text-align: center; } body.menu-style--brutalist .menu-footer__social a:last-child { border-right: none; } body.menu-style--brutalist .menu-footer__social a:hover { background: #222; } body.menu-style--brutalist .menu-footer__credit { background: #ffff00; color: #000; border-top: 5px solid #000; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; padding: 14px; } /* === BAUHAUS — Montserrat 900 uppercase, primari (rosso/blu/giallo) + nero, bordi spessi, forme geometriche === */ body.menu-style--bauhaus { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #000000; --c-text-muted: #555555; --c-text-subtle: #777777; --c-border: #000000; --menu-primary: #ff0000; --menu-secondary: #0000ff; --f-body: 'Montserrat', 'Futura', 'Century Gothic', Arial, sans-serif; --f-display: 'Montserrat', 'Futura', 'Century Gothic', Arial, sans-serif; background: #ffffff; } body.menu-style--bauhaus .menu-hero { position: relative; overflow: hidden; text-align: left; padding: 2.5rem 1.5rem 2rem; border-bottom: 6px solid #000000; background: #ffffff; } body.menu-style--bauhaus .menu-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 180px; border-radius: 50%; background: #ffff00; transform: translate(40px, -40px); z-index: 0; } body.menu-style--bauhaus .menu-hero::after { content: ""; position: absolute; bottom: 0; left: 0; width: 80px; height: 80px; background: #ff0000; z-index: 0; } body.menu-style--bauhaus .menu-hero > * { position: relative; z-index: 2; } body.menu-style--bauhaus .menu-hero__logo { border: 4px solid #000000; border-radius: 0; } body.menu-style--bauhaus .menu-hero__name { font-family: var(--f-display); font-size: clamp(2rem, 8.5vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: #000000; } body.menu-style--bauhaus .menu-hero__desc { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #555555; margin-top: 0.5rem; } body.menu-style--bauhaus .menu-cats { background: #ffffff; border-top: 2px solid #000000; border-bottom: 4px solid #000000; } body.menu-style--bauhaus .menu-cats__tab { padding: 0.7rem 0.9rem; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #000000; border-right: 2px solid #000000; border-bottom: none; white-space: nowrap; } body.menu-style--bauhaus .menu-cats__tab:hover { background: #0000ff; color: #ffffff; } body.menu-style--bauhaus .menu-cats__tab--active { background: #ff0000; color: #ffffff; border-bottom: none; } body.menu-style--bauhaus .menu-toolbar { border-bottom: 4px solid #000000; } body.menu-style--bauhaus .menu-search__input { border: 3px solid #000000; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } body.menu-style--bauhaus .menu-search__input:focus { border-color: #ff0000; outline: none; } body.menu-style--bauhaus .menu-filter-btn { border: 2px solid #000000; border-radius: 0; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: #000000; } body.menu-style--bauhaus .menu-filter-btn[aria-pressed="true"] { background: #ffff00; color: #000000; border-color: #000000; } body.menu-style--bauhaus .menu-body { counter-reset: sec; } body.menu-style--bauhaus .menu-section { padding: 0; border-bottom: 4px solid #000000; counter-increment: sec; } body.menu-style--bauhaus .menu-section__title { display: flex; align-items: center; gap: 0.9rem; margin: 0; padding: 1.1rem 1.25rem; font-family: var(--f-display); font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #000000; border: none; border-bottom: 3px solid #000000; border-left: 8px solid #ff0000; } body.menu-style--bauhaus .menu-section:nth-child(2n) .menu-section__title { border-left-color: #0000ff; } body.menu-style--bauhaus .menu-section:nth-child(3n) .menu-section__title { border-left-color: #ffff00; } body.menu-style--bauhaus .menu-section__title::before { content: counter(sec, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; font-size: 0.9rem; font-weight: 900; color: #ffffff; background: #000000; flex-shrink: 0; } body.menu-style--bauhaus .menu-section__desc { margin: 0; padding: 0.6rem 1.25rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #777777; border-bottom: 1px solid #e0e0e0; } body.menu-style--bauhaus .dish-card { padding: 1rem 1.25rem; border-bottom: 1px solid #e0e0e0; gap: 1rem; } body.menu-style--bauhaus .dish-card:last-child { border-bottom: none; } body.menu-style--bauhaus .dish-card__name { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #000000; } body.menu-style--bauhaus .dish-card__desc { font-size: 0.78rem; font-weight: 400; color: #555555; line-height: 1.4; } body.menu-style--bauhaus .dish-badge { border: 1.5px solid #000000; border-radius: 0; padding: 0 0.2rem; } body.menu-style--bauhaus .dish-card__allergens { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #666666; } body.menu-style--bauhaus .dish-card__price { align-items: center; justify-content: center; min-width: 72px; padding: 0.5rem 0.75rem; background: #fafafa; border-left: 2px solid #000000; } body.menu-style--bauhaus .dish-card__price-current { font-size: 1.05rem; font-weight: 900; color: #000000; } body.menu-style--bauhaus .dish-card__price-old { font-size: 0.65rem; font-weight: 400; color: #aaaaaa; text-decoration: line-through; } body.menu-style--bauhaus .dish-card:has(.dish-card__price-old) .dish-card__price-current { color: #ff0000; } body.menu-style--bauhaus .menu-footer { background: #ffffff; } body.menu-style--bauhaus .menu-footer__info { position: relative; padding: 3rem 1.5rem 1.75rem; border-bottom: 4px solid #000000; background: linear-gradient(90deg, #ff0000 0 25%, #ffff00 25% 62.5%, #0000ff 62.5% 87.5%, #000000 87.5% 100%) top / 100% 12px no-repeat; } body.menu-style--bauhaus .menu-footer__name { font-family: var(--f-display); font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #000000; } body.menu-style--bauhaus .menu-footer__address { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #555555; } body.menu-style--bauhaus .menu-footer__wa, body.menu-style--bauhaus .menu-footer__call { border: 3px solid #000000; border-radius: 0; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } body.menu-style--bauhaus .menu-footer__wa { background: #ffff00; color: #000000; } body.menu-style--bauhaus .menu-footer__call { background: #0000ff; color: #ffffff; } body.menu-style--bauhaus .menu-footer__social a { border: 3px solid #000000; border-radius: 0; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #000000; } body.menu-style--bauhaus .menu-footer__social a:hover { background: #ff0000; color: #ffffff; } body.menu-style--bauhaus .menu-footer__credit { background: #ffffff; border-top: 4px solid #000000; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #000000; } /* === VINTAGE POSTCARD — cartolina seppia, Special Elite + Pinyon Script, carta invecchiata, bordi doppi === */ body.menu-style--vintage { --c-bg: transparent; --c-surface: #f9f0dc; --c-text: #2c1810; --c-text-muted: #5c3a1e; --c-text-subtle: #8b5e3c; --c-border: rgba(196,145,62,0.35); --menu-primary: #8b2020; --menu-secondary: #1a3d6b; --f-body: 'Special Elite', 'Courier New', cursive; --f-display: 'Pinyon Script', 'Segoe Script', cursive; background-color: #d4b896; background-image: repeating-linear-gradient(45deg, rgba(139,105,20,0.05) 0px, rgba(139,105,20,0.05) 1px, transparent 1px, transparent 8px), repeating-linear-gradient(-45deg, rgba(139,105,20,0.05) 0px, rgba(139,105,20,0.05) 1px, transparent 1px, transparent 8px); background-attachment: fixed; color: var(--c-text); } body.menu-style--vintage .menu-wrap { background-color: #f5e6c8; background-image: radial-gradient(ellipse at 20% 10%, rgba(255,245,210,0.6) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(180,140,80,0.3) 0%, transparent 40%); box-shadow: 0 6px 30px rgba(44,24,16,0.28); } body.menu-style--vintage .menu-hero { padding: 2rem 1.5rem 1.5rem; border-bottom: 3px double var(--menu-primary); background: transparent; } body.menu-style--vintage .menu-hero__logo { border: 3px solid var(--menu-primary); padding: 4px; background: #f9f0dc; box-shadow: 2px 2px 6px rgba(0,0,0,0.15); } body.menu-style--vintage .menu-hero__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 10vw, 4rem); line-height: 1; color: var(--c-text); text-shadow: 1px 2px 4px rgba(44,24,16,0.15); } body.menu-style--vintage .menu-hero__desc { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 0.95rem; color: var(--c-text-muted); margin-top: 0.4rem; } body.menu-style--vintage .menu-cats { background: #f9f0dc; border-bottom: 2px double var(--menu-secondary); box-shadow: 0 2px 8px rgba(139,105,20,0.12); } body.menu-style--vintage .menu-cats__tab { color: var(--c-text-muted); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; border-right: 1px solid rgba(196,145,62,0.3); border-bottom: 2.5px solid transparent; transition: background 0.2s, color 0.2s; } body.menu-style--vintage .menu-cats__tab:hover { background: rgba(196,145,62,0.1); color: var(--c-text); } body.menu-style--vintage .menu-cats__tab--active { color: var(--menu-primary); border-bottom-color: var(--menu-primary); } body.menu-style--vintage .menu-search__input { background: #f9f0dc; border: 1px solid rgba(196,145,62,0.6); color: var(--c-text); font-family: var(--f-body); } body.menu-style--vintage .menu-search__input::placeholder { color: var(--c-text-subtle); } body.menu-style--vintage .menu-filter-btn { background: transparent; border: 1px solid rgba(196,145,62,0.6); color: var(--c-text-muted); font-size: 0.7rem; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 0; } body.menu-style--vintage .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #f9f0dc; } body.menu-style--vintage .menu-section { padding: 1.75rem 1.5rem 0.5rem; text-align: center; } body.menu-style--vintage .menu-section__title { display: inline-block; font-family: var(--f-body); font-size: 1.1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--c-text); border: 2px dashed rgba(196,145,62,0.6); padding: 6px 20px; } body.menu-style--vintage .menu-section__title::before { content: '✦ '; color: var(--menu-secondary); font-size: 0.7rem; } body.menu-style--vintage .menu-section__title::after { content: ' ✦'; color: var(--menu-secondary); font-size: 0.7rem; } body.menu-style--vintage .menu-section__desc { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 0.8rem; color: #a07830; margin-top: 0.4rem; } body.menu-style--vintage .dish-card { text-align: left; padding: 0.65rem 0; border-bottom: 1px dashed rgba(196,145,62,0.35); } body.menu-style--vintage .dish-card:last-child { border-bottom: none; } body.menu-style--vintage .dish-card__name { font-family: var(--f-body); font-size: 1rem; line-height: 1.3; color: var(--c-text); } body.menu-style--vintage .dish-card__desc { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 0.82rem; line-height: 1.5; color: var(--c-text-subtle); } body.menu-style--vintage .dish-card__allergens { font-size: 0.65rem; letter-spacing: 0.5px; text-transform: uppercase; color: #a07830; } body.menu-style--vintage .dish-badge { border: 1px solid rgba(26,92,42,0.4); padding: 1px 5px; font-size: 0.7rem; } body.menu-style--vintage .dish-card__price-current { font-family: var(--f-body); font-size: 1rem; font-weight: 400; color: var(--menu-primary); white-space: nowrap; } body.menu-style--vintage .dish-card__price-old { font-size: 0.8rem; text-decoration: line-through; color: #d4b07a; } body.menu-style--vintage .menu-footer { margin: 2.5rem 1.5rem 0; } body.menu-style--vintage .menu-footer__info { padding: 1.5rem; border: 3px double var(--menu-primary); background: #f9f0dc; text-align: center; } body.menu-style--vintage .menu-footer__info::before { content: '✦ SOUVENIR ✦'; display: block; font-size: 0.65rem; letter-spacing: 4px; text-transform: uppercase; color: #a07830; margin-bottom: 0.75rem; } body.menu-style--vintage .menu-footer__name { font-family: var(--f-display); font-weight: 400; font-size: 2rem; color: var(--c-text); } body.menu-style--vintage .menu-footer__address { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 0.8rem; color: var(--c-text-subtle); margin: 0.4rem 0 1rem; } body.menu-style--vintage .menu-footer__wa { background: transparent; border: 2px solid #1a5c2a; color: #1a5c2a; border-radius: 0; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; transition: background 0.2s, color 0.2s; } body.menu-style--vintage .menu-footer__wa:hover { background: #1a5c2a; color: #f9f0dc; } body.menu-style--vintage .menu-footer__call { background: transparent; border: 2px solid var(--menu-primary); color: var(--menu-primary); border-radius: 0; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; transition: background 0.2s, color 0.2s; } body.menu-style--vintage .menu-footer__call:hover { background: var(--menu-primary); color: #f9f0dc; } body.menu-style--vintage .menu-footer__social a { border: none; background: transparent; color: #a07830; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; } body.menu-style--vintage .menu-footer__social a:hover { color: var(--c-text); } body.menu-style--vintage .menu-footer__credit { background: transparent; font-family: 'IM Fell English', Georgia, serif; font-style: italic; color: var(--c-text-subtle); } /* === LAVAGNA (Chalkboard) — Caveat/Kalam manoscritti, lavagna nera, gesso bianco/giallo, tratteggi === */ body.menu-style--chalkboard { --c-bg: transparent; --c-surface: #1a1a1a; --c-text: #f0ece0; --c-text-muted: rgba(240,236,224,0.55); --c-text-subtle: rgba(240,236,224,0.4); --c-border: rgba(240,236,224,0.12); --menu-primary: #f5e67a; --menu-secondary: #7dc97d; --f-body: 'Kalam', cursive, system-ui, sans-serif; --f-display: 'Caveat', cursive, system-ui, sans-serif; background-color: #1a1a1a; background-attachment: fixed; } body.menu-style--chalkboard .menu-hero { background: #1a1a1a; border-bottom: 3px dashed rgba(240,236,224,0.4); padding: 2.25rem 1.5rem 1.75rem; } body.menu-style--chalkboard .menu-hero__logo { filter: grayscale(1) brightness(1.4) contrast(0.9); opacity: 0.9; } body.menu-style--chalkboard .menu-hero__name { font-family: var(--f-display); font-weight: 700; color: #f0ece0; letter-spacing: 1px; text-shadow: 1px 1px 0 rgba(240,236,224,0.15), -1px -1px 0 rgba(240,236,224,0.05), 2px 2px 8px rgba(0,0,0,0.8); } body.menu-style--chalkboard .menu-hero__desc { font-family: var(--f-body); font-style: italic; color: rgba(240,236,224,0.65); } body.menu-style--chalkboard .menu-cats { background: #111111; border-bottom: 2px dashed rgba(240,236,224,0.2); } body.menu-style--chalkboard .menu-cats__tab { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; color: rgba(240,236,224,0.6); border-right: 1px dashed rgba(240,236,224,0.12); border-bottom: 2.5px solid transparent; } body.menu-style--chalkboard .menu-cats__tab:hover { color: #f5e67a; } body.menu-style--chalkboard .menu-cats__tab--active { color: #f5e67a; border-bottom-color: #f5e67a; text-shadow: 0 0 8px rgba(245,230,122,0.4); } body.menu-style--chalkboard .menu-search__input { background: rgba(255,255,255,0.03); border: 2px dashed rgba(240,236,224,0.25); border-radius: 4px; color: #f0ece0; font-family: var(--f-body); } body.menu-style--chalkboard .menu-search__input::placeholder { color: rgba(240,236,224,0.4); } body.menu-style--chalkboard .menu-search__input:focus { border-color: #f5e67a; outline: none; } body.menu-style--chalkboard .menu-filter-btn { background: rgba(255,255,255,0.03); border: 2px dashed rgba(240,236,224,0.35); border-radius: 4px; color: #f0ece0; font-family: var(--f-display); font-weight: 700; } body.menu-style--chalkboard .menu-filter-btn[aria-pressed="true"] { border-color: #7dc97d; color: #7dc97d; background: rgba(125,201,125,0.08); } body.menu-style--chalkboard .menu-section__title { font-family: var(--f-display); font-weight: 700; color: #f5e67a; text-shadow: 0 0 12px rgba(245,230,122,0.3), 1px 1px 0 rgba(0,0,0,0.5); border-bottom: 3px solid transparent; padding-bottom: 4px; background: linear-gradient(90deg, transparent, rgba(245,230,122,0.7) 20%, rgba(245,230,122,0.9) 50%, rgba(245,230,122,0.7) 80%, transparent) bottom / 100% 3px no-repeat; } body.menu-style--chalkboard .menu-section__desc { font-family: var(--f-body); font-style: italic; color: rgba(240,236,224,0.4); } body.menu-style--chalkboard .dish-card { border-bottom: 1px dashed rgba(240,236,224,0.12); } body.menu-style--chalkboard .dish-card__name { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: #f0ece0; } body.menu-style--chalkboard .dish-card__desc { font-family: var(--f-body); font-style: italic; color: rgba(240,236,224,0.55); } body.menu-style--chalkboard .dish-card__allergens { font-family: var(--f-body); color: rgba(240,236,224,0.4); font-size: 0.72rem; } body.menu-style--chalkboard .dish-badge { border: 1.5px solid rgba(125,201,125,0.5); background: rgba(125,201,125,0.08); border-radius: 2px; padding: 2px 6px; } body.menu-style--chalkboard .dish-card__price-old { color: rgba(240,236,224,0.35); text-decoration: line-through; } body.menu-style--chalkboard .dish-card__price-current { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; color: #f5e67a; text-shadow: 0 0 8px rgba(245,230,122,0.4); } body.menu-style--chalkboard .menu-footer { background: #1a1a1a; } body.menu-style--chalkboard .menu-footer__info { border-top: 3px dashed rgba(240,236,224,0.5); } body.menu-style--chalkboard .menu-footer__name { font-family: var(--f-display); font-weight: 700; color: #f0ece0; } body.menu-style--chalkboard .menu-footer__address { font-family: var(--f-body); font-style: italic; color: rgba(240,236,224,0.5); } body.menu-style--chalkboard .menu-footer__wa { background: rgba(125,201,125,0.07); border: 2px dashed rgba(125,201,125,0.6); border-radius: 4px; color: #7dc97d; font-family: var(--f-display); font-weight: 700; } body.menu-style--chalkboard .menu-footer__call { background: rgba(255,255,255,0.03); border: 2px dashed rgba(240,236,224,0.45); border-radius: 4px; color: #f0ece0; font-family: var(--f-display); font-weight: 700; } body.menu-style--chalkboard .menu-footer__call:hover { border-color: #7dc97d; color: #7dc97d; } body.menu-style--chalkboard .menu-footer__social a { font-family: var(--f-display); color: rgba(240,236,224,0.4); letter-spacing: 1px; border: none; background: transparent; padding: 0; } body.menu-style--chalkboard .menu-footer__social a:hover { color: #f5e67a; } body.menu-style--chalkboard .menu-footer__credit { background: transparent; font-family: var(--f-body); color: rgba(240,236,224,0.3); } /* === QUADERNO A MANO (handwritten) — foglio a righe (Caveat/Kalam), margine rosso, inchiostro blu, evidenziatore giallo === */ body.menu-style--handwritten { --c-bg: transparent; --c-surface: #faf8f2; --c-text: #1c2d4a; --c-text-muted: #3a4d6a; --c-text-subtle: #7a8fa8; --c-border: rgba(0,0,0,0.08); --menu-primary: #2a5080; --menu-secondary: #cc4040; --f-body: 'Caveat', 'Comic Sans MS', cursive; --f-display: 'Kalam', 'Comic Sans MS', cursive; background: #e8e0d4; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 20px); background-attachment: fixed; } body.menu-style--handwritten .menu-wrap { background: var(--c-surface); background-image: linear-gradient(90deg, transparent 55px, #e8c0c0 55px, #e8c0c0 56px, transparent 56px), repeating-linear-gradient(180deg, transparent 0px, transparent 31px, #c8d8e8 31px, #c8d8e8 32px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); } body.menu-style--handwritten .menu-hero { padding: 24px 24px 18px 68px; border-bottom: 2px solid #e8c0c0; text-align: left; background: transparent; } body.menu-style--handwritten .menu-hero__logo { border-radius: 6px; transform: rotate(-2deg); box-shadow: 2px 2px 6px rgba(0,0,0,0.12); } body.menu-style--handwritten .menu-hero__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.1; color: var(--menu-primary); text-decoration: underline; text-decoration-color: #cc4040; text-decoration-style: wavy; text-underline-offset: 6px; } body.menu-style--handwritten .menu-hero__desc { font-family: var(--f-body); font-size: 1.15rem; font-style: italic; color: var(--c-text-muted); margin-top: 8px; } body.menu-style--handwritten .menu-cats { background: #f0ece0; border-bottom: 1.5px solid #c8d8e8; padding-left: 56px; } body.menu-style--handwritten .menu-cats__tab { font-family: var(--f-body); font-size: 1.05rem; font-weight: 600; color: var(--menu-primary); padding: 9px 14px; border-right: 1px dashed rgba(0,0,0,0.12); border-bottom: 2.5px solid transparent; } body.menu-style--handwritten .menu-cats__tab:hover { color: #cc4040; } body.menu-style--handwritten .menu-cats__tab--active { color: #cc4040; border-bottom-color: #cc4040; } body.menu-style--handwritten .menu-toolbar { padding-left: 68px; } body.menu-style--handwritten .menu-search__input { font-family: var(--f-body); font-size: 1.05rem; background: rgba(255,255,255,0.5); border: 1px dashed rgba(0,0,0,0.2); border-radius: 4px; color: var(--c-text); } body.menu-style--handwritten .menu-search__input:focus { border-color: var(--menu-primary); border-style: solid; } body.menu-style--handwritten .menu-filter-btn { font-family: var(--f-body); font-size: 0.95rem; border: 1.5px solid rgba(42,80,128,0.25); border-radius: 3px; background: rgba(42,80,128,0.06); color: var(--menu-primary); } body.menu-style--handwritten .menu-filter-btn[aria-pressed="true"] { background: rgba(255,230,100,0.45); border-color: rgba(220,190,50,0.5); color: var(--c-text); } body.menu-style--handwritten .menu-section { padding: 24px 24px 8px 68px; } body.menu-style--handwritten .menu-section__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--menu-primary); display: inline; border-bottom: none; padding: 0 4px; background: linear-gradient(transparent 60%, rgba(255,230,100,0.45) 60%); } body.menu-style--handwritten .menu-section__desc { font-family: var(--f-body); font-size: 1rem; font-style: italic; color: #8a7a6a; margin-top: 6px; } body.menu-style--handwritten .dish-card { padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,0.1); } body.menu-style--handwritten .dish-card:last-child { border-bottom: none; } body.menu-style--handwritten .dish-card__name { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; color: var(--c-text); line-height: 1.3; text-decoration: underline; text-decoration-color: rgba(42,80,128,0.3); text-decoration-style: dotted; text-underline-offset: 3px; } body.menu-style--handwritten .dish-badge { text-decoration: none; font-size: 0.9rem; } body.menu-style--handwritten .dish-card__desc { font-family: var(--f-body); font-size: 1.02rem; color: var(--c-text-subtle); line-height: 1.4; margin-top: 3px; padding-left: 6px; border-left: 2px solid rgba(0,0,0,0.08); } body.menu-style--handwritten .dish-card__allergens { font-family: var(--f-body); font-size: 0.9rem; color: #8a7a6a; border: 1px dashed rgba(0,0,0,0.18); border-radius: 3px; padding: 1px 8px; display: inline-block; margin-top: 6px; } body.menu-style--handwritten .dish-card__price-current { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: #2a6040; background: linear-gradient(transparent 55%, rgba(100,200,130,0.2) 55%); padding: 0 2px; white-space: nowrap; } body.menu-style--handwritten .dish-card__price-old { font-family: var(--f-body); font-size: 0.95rem; color: #8a7a6a; text-decoration: line-through; } body.menu-style--handwritten .menu-footer { padding-left: 68px; padding-right: 24px; } body.menu-style--handwritten .menu-footer__info { border: 2px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); padding: 24px 20px; text-align: center; transform: rotate(-0.3deg); } body.menu-style--handwritten .menu-footer__name { font-family: var(--f-display); font-weight: 700; font-size: 1.8rem; color: var(--menu-primary); text-decoration: underline; text-decoration-color: #cc4040; text-decoration-style: wavy; text-underline-offset: 5px; } body.menu-style--handwritten .menu-footer__address { font-family: var(--f-body); font-size: 1rem; font-style: italic; color: #8a7a6a; margin: 6px 0 16px; } body.menu-style--handwritten .menu-footer__wa { font-family: var(--f-display); font-weight: 700; font-size: 1rem; background: transparent; border: 2px solid #2a6040; border-radius: 4px; color: #2a6040; transform: rotate(-0.5deg); } body.menu-style--handwritten .menu-footer__wa:hover { background: rgba(42,96,64,0.08); } body.menu-style--handwritten .menu-footer__call { font-family: var(--f-display); font-weight: 700; font-size: 1rem; background: transparent; border: 2px solid var(--menu-primary); border-radius: 4px; color: var(--menu-primary); transform: rotate(-0.5deg); } body.menu-style--handwritten .menu-footer__call:hover { background: rgba(42,80,128,0.08); } body.menu-style--handwritten .menu-footer__social a { font-family: var(--f-body); font-size: 1rem; color: #8a7a6a; border: none; text-decoration: underline; text-decoration-color: #8a7a6a; text-decoration-style: dotted; } body.menu-style--handwritten .menu-footer__social a:hover { color: var(--menu-primary); } body.menu-style--handwritten .menu-footer__credit { font-family: var(--f-body); font-size: 0.95rem; color: var(--c-text-subtle); background: transparent; } /* ##################################################################### * NUOVI STILI (pacchetti "Essenziali & Leggibili" + "Premium & Curati") * 19 temi aggiunti — stessa struttura del menu, solo presentazione. * ##################################################################### */ /* ===================================================================== * EDITORIALE — rivista serif, carta crema, accento terracotta. * Replica di demo-31-editoriale-serif: molta aria, filetti sottili tra i * piatti, numeri di sezione discreti, titoli serif Fraunces, corpo Inter. * Solo presentazione: nessuna modifica al markup o al layout (main 640px). * ===================================================================== */ body.menu-style--editoriale { --c-bg: #faf7f2; --c-surface: #f3eee6; --c-text: #23201b; --c-text-muted: #6b6558; --c-text-subtle: #8a8172; --c-border: #e4ddd0; --menu-primary: #b5533a; --menu-secondary: #c96b4f; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'Fraunces', Georgia, 'Times New Roman', serif; } /* Hero: pannello caldo, filetto sottile invece del bordo spesso, nome serif */ body.menu-style--editoriale .menu-hero { border-bottom: 1px solid var(--c-border); padding: 3rem 1.5rem 2.25rem; } body.menu-style--editoriale .menu-hero__logo { border-color: var(--c-border); } body.menu-style--editoriale .menu-hero__name { color: var(--c-text); font-weight: 500; letter-spacing: -0.01em; line-height: 1.04; } body.menu-style--editoriale .menu-hero__desc { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--c-text-muted); } /* Nav categorie: etichette maiuscole spaziate, pill discreta sull'attiva */ body.menu-style--editoriale .menu-cats { background: rgba(250,247,242,0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--c-border); box-shadow: none; } body.menu-style--editoriale .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; border-bottom: none; } body.menu-style--editoriale .menu-cats__tab--active { color: var(--menu-primary); background: var(--c-surface); border-radius: 100px; } /* Sezioni: numerazione serif discreta sopra il titolo, molta aria */ body.menu-style--editoriale .menu-body { counter-reset: menu-sec; } body.menu-style--editoriale .menu-section { counter-increment: menu-sec; padding-top: 2.75rem; } body.menu-style--editoriale .menu-section__title { display: block; border-bottom: none; padding-bottom: 0; font-weight: 500; font-size: 1.9rem; letter-spacing: -0.01em; line-height: 1.1; } body.menu-style--editoriale .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero); display: block; font-family: var(--f-display); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.05em; color: var(--menu-primary); margin-bottom: 0.35rem; } body.menu-style--editoriale .menu-section__desc { font-family: var(--f-display); font-style: italic; font-size: 1rem; } /* Piatti: filetto sottile (default), nome serif, prezzo tabular */ body.menu-style--editoriale .dish-card { padding: 1.35rem 0; } body.menu-style--editoriale .dish-card__name { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.005em; } body.menu-style--editoriale .dish-card__price-current { color: var(--c-text); font-weight: 500; font-variant-numeric: tabular-nums; } body.menu-style--editoriale .dish-card__price-old { font-variant-numeric: tabular-nums; } /* Prezzo scontato: solo quando esiste il prezzo barrato passa a terracotta */ body.menu-style--editoriale .dish-card__price:has(.dish-card__price-old) .dish-card__price-current { color: var(--menu-primary); font-weight: 600; } /* Badge dieta: pill morbida, tono su tono con la palette editoriale */ body.menu-style--editoriale .dish-badge { border-radius: 100px; font-weight: 500; letter-spacing: 0.02em; } body.menu-style--editoriale .dish-badge--veg { background: #eef3ec; color: #4a7a52; } body.menu-style--editoriale .dish-badge--vegan { background: #e9f2ed; color: #3f7a63; } body.menu-style--editoriale .dish-badge--gf { background: #f6efe0; color: #a9762a; } body.menu-style--editoriale .dish-card__allergens { color: var(--c-text-subtle); } /* Toolbar coerente con i filetti chiari */ body.menu-style--editoriale .menu-search__input:focus { background: #fff; } /* Footer: pannello crema, nome serif, contatti discreti */ body.menu-style--editoriale .menu-footer__info { border-top: 1px solid var(--c-border); } body.menu-style--editoriale .menu-footer__name { font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; } body.menu-style--editoriale .menu-footer__wa { background: #25543c; box-shadow: none; } body.menu-style--editoriale .menu-footer__wa:hover { background: #1f4732; box-shadow: none; } body.menu-style--editoriale .menu-footer__social a { text-transform: uppercase; letter-spacing: 0.06em; border-radius: 0; border: none; border-bottom: 1px solid var(--c-border); padding: 0.15rem 0.1rem 0.2rem; } body.menu-style--editoriale .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } /* ===================================================================== * SWISS — rigore tipografico svizzero, bianco, hairline 1px, rosso-arancio. * Replica di demo-32-swiss-grid: Inter ovunque, etichette maiuscole spaziate, * numeri di sezione, prezzi tabular-nums, filetti neri strutturali. * Solo presentazione: nessuna modifica al markup o al layout (main 640px). * ===================================================================== */ body.menu-style--swiss { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #111111; --c-text-muted: #666666; --c-text-subtle: #999999; --c-border: #e2e2e2; --menu-primary: #e23b2e; --menu-secondary: #111111; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'Inter', system-ui, -apple-system, sans-serif; } body.menu-style--swiss { font-variant-numeric: tabular-nums; } /* Hero: allineato a sinistra, filetto nero strutturale, eyebrow rosso */ body.menu-style--swiss .menu-hero { background: var(--c-surface); border-bottom: 2px solid var(--c-text); text-align: left; padding: 2.5rem 1.5rem 1.75rem; } body.menu-style--swiss .menu-hero__logo { margin-left: 0; margin-right: 0; border-radius: 0; } body.menu-style--swiss .menu-hero__name { color: var(--c-text); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; } body.menu-style--swiss .menu-hero__desc { font-style: normal; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; color: var(--menu-primary); } /* Nav categorie: etichette maiuscole, hairline nero, attiva rossa */ body.menu-style--swiss .menu-cats { border-bottom: 1px solid var(--c-text); box-shadow: none; } body.menu-style--swiss .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 600; border-bottom: 2px solid transparent; } body.menu-style--swiss .menu-cats__tab--active { color: var(--menu-primary); border-bottom-color: var(--menu-primary); } /* Sezioni: numero rosso + titolo bold su filetto nero pieno */ body.menu-style--swiss .menu-body { counter-reset: menu-sec; } body.menu-style--swiss .menu-section { padding-top: 2.5rem; } body.menu-style--swiss .menu-section { counter-increment: menu-sec; } body.menu-style--swiss .menu-section__title { display: block; font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; padding-bottom: 0.85rem; border-bottom: 2px solid var(--c-text); } body.menu-style--swiss .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero); display: inline-block; margin-right: 0.6rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--menu-primary); vertical-align: middle; } body.menu-style--swiss .menu-section__desc { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 600; color: var(--c-text-muted); } /* Piatti: hairline 1px, nome semibold serrato, prezzo tabular */ body.menu-style--swiss .dish-card__name { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; } body.menu-style--swiss .dish-card__price-current { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; } body.menu-style--swiss .dish-card__price-old { font-variant-numeric: tabular-nums; } /* Prezzo scontato: solo con prezzo barrato presente vira al rosso-arancio */ body.menu-style--swiss .dish-card__price:has(.dish-card__price-old) .dish-card__price-current { color: var(--menu-primary); font-weight: 700; } /* Badge dieta: squadrati, maiuscoli, spaziati */ body.menu-style--swiss .dish-badge { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; font-weight: 600; } body.menu-style--swiss .dish-badge--veg { background: #e9f4ec; color: #1f7a43; } body.menu-style--swiss .dish-badge--vegan { background: #e7f2ee; color: #0f6b57; } body.menu-style--swiss .dish-badge--gf { background: #f6efdd; color: #9a6b00; } /* Toolbar squadrata, coerente col rigore svizzero */ body.menu-style--swiss .menu-search__input, body.menu-style--swiss .menu-filter-btn { border-radius: 2px; } /* Footer: filetto nero, WA nero squadrato, chiama rosso, social maiuscoli */ body.menu-style--swiss .menu-footer__info { border-top: 2px solid var(--c-text); } body.menu-style--swiss .menu-footer__name { font-weight: 700; letter-spacing: -0.01em; } body.menu-style--swiss .menu-footer__wa { background: var(--c-text); color: #fff; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; box-shadow: none; } body.menu-style--swiss .menu-footer__wa:hover { background: #000; transform: none; box-shadow: none; } body.menu-style--swiss .menu-footer__call { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; } body.menu-style--swiss .menu-footer__social a { border-radius: 0; border: none; border-bottom: 1px solid var(--c-text); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.15rem 0.1rem 0.2rem; } body.menu-style--swiss .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } /* ===================================================================== * SOFT CARDS — schede arrotondate, ombre delicate, verde salvia. * Replica di demo-33-soft-cards: ogni piatto è una card bianca con angoli * morbidi e ombra soffusa, spaziatura generosa, nav a pill, Inter ovunque. * Solo presentazione: nessuna modifica al markup o al layout (main 640px). * ===================================================================== */ body.menu-style--softcards { --c-bg: #f5f6f4; --c-surface: #ffffff; --c-text: #22271f; --c-text-muted: #5c6358; --c-text-subtle: #8a9083; --c-border: #e6e8e3; --menu-primary: #5f7a5a; --menu-secondary: #4e6749; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'Inter', system-ui, -apple-system, sans-serif; } /* Hero: pannello bianco morbido, senza filetto duro, testo salvia */ body.menu-style--softcards .menu-hero { border-bottom: 1px solid var(--c-border); padding: 3rem 1.5rem 2rem; } body.menu-style--softcards .menu-hero__name { color: var(--c-text); font-weight: 700; letter-spacing: -0.02em; } body.menu-style--softcards .menu-hero__desc { font-style: normal; color: var(--c-text-muted); } /* Nav categorie: pill a scheda con bordo tenue */ body.menu-style--softcards .menu-cats { background: rgba(245,246,244,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); box-shadow: none; gap: 0.5rem; padding: 0.5rem 0.75rem; } body.menu-style--softcards .menu-cats__tab { min-height: 38px; font-size: 0.8125rem; font-weight: 600; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px; border-bottom: 1px solid var(--c-border); padding: 0.35rem 0.9rem; } body.menu-style--softcards .menu-cats__tab:hover { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--softcards .menu-cats__tab--active { color: #fff; background: var(--menu-primary); border-color: var(--menu-primary); } /* Sezioni: numero salvia, titolo bold, spaziatura ariosa */ body.menu-style--softcards .menu-section { padding-top: 2.5rem; } body.menu-style--softcards .menu-section__title { display: block; border-bottom: none; padding-bottom: 0; font-weight: 700; font-size: 1.45rem; letter-spacing: -0.01em; } body.menu-style--softcards .menu-section__desc { color: var(--c-text-muted); } /* Piatti come schede morbide: la lista guadagna respiro, la card l'ombra */ body.menu-style--softcards .menu-section__dishes { gap: 1rem; margin-top: 1.25rem; } body.menu-style--softcards .dish-card { background: var(--c-surface); border: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(34,39,31,0.04), 0 6px 20px rgba(34,39,31,0.06); padding: 1.25rem 1.35rem; } body.menu-style--softcards .dish-card:last-child { border-bottom: 1px solid var(--c-border); } body.menu-style--softcards .dish-card__name { font-weight: 600; font-size: 1.05rem; } body.menu-style--softcards .dish-card__price-current { color: var(--c-text); font-weight: 700; } /* Prezzo scontato: solo con prezzo barrato presente vira al salvia */ body.menu-style--softcards .dish-card__price:has(.dish-card__price-old) .dish-card__price-current { color: var(--menu-primary); } /* Badge dieta: pill morbide, dieta in salvia, allergeni neutri */ body.menu-style--softcards .dish-badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; padding: 0.2rem 0.55rem; } body.menu-style--softcards .dish-badge--veg, body.menu-style--softcards .dish-badge--vegan, body.menu-style--softcards .dish-badge--gf { background: #eaf0e8; color: #3f5a3b; } body.menu-style--softcards .dish-card__allergens { color: var(--c-text-subtle); } /* Toolbar: campo e filtri morbidi coerenti con le card */ body.menu-style--softcards .menu-search__input:focus { background: var(--c-surface); } /* Footer: nome bold, WA salvia, chiama outline morbido */ body.menu-style--softcards .menu-footer__info { border-top: 1px solid var(--c-border); } body.menu-style--softcards .menu-footer__name { font-weight: 700; } body.menu-style--softcards .menu-footer__wa { background: var(--menu-primary); box-shadow: 0 3px 12px rgba(95,122,90,0.28); } body.menu-style--softcards .menu-footer__wa:hover { background: var(--menu-secondary); box-shadow: 0 5px 16px rgba(95,122,90,0.36); } body.menu-style--softcards .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } /* ===================================================================== * DARK ELEGANT — chiave `darkelegant` * Reskin del menù pubblico ispirato a demo-34-dark-elegant. * Tema scuro lussuoso: carboncino #16140f, crema #efe8dc, oro #cfa964. * Display: Cormorant Garamond · Body: Inter (font caricati a parte). * Solo CSS: nessun elemento aggiunto al DOM, layout invariato. * ===================================================================== */ body.menu-style--darkelegant { --c-bg: #16140f; --c-surface: #1d1b15; --c-text: #efe8dc; --c-text-muted: #a89f8d; --c-text-subtle: #6b6250; --c-border: rgba(207,169,100,0.22); --menu-primary: #cfa964; --menu-secondary: #dcb974; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-display: 'Cormorant Garamond', Georgia, serif; } /* HERO — centrato, nome oro serif, divisore dorato sottile */ body.menu-style--darkelegant .menu-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: 3.25rem 1.5rem 2rem; } body.menu-style--darkelegant .menu-hero__logo { border-color: rgba(207,169,100,0.4); } body.menu-style--darkelegant .menu-hero__name { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.01em; color: var(--menu-primary); } body.menu-style--darkelegant .menu-hero__desc { font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--c-text-muted); } /* piccolo filetto dorato sotto la tagline (pseudo-elemento, niente DOM) */ body.menu-style--darkelegant .menu-hero__desc::after { content: ""; display: block; width: 60px; height: 1px; background: var(--menu-primary); opacity: 0.6; margin: 1rem auto 0; } /* NAV STICKY — vetro scuro, tab maiuscole spaziate */ body.menu-style--darkelegant .menu-cats { background: rgba(22,20,15,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); box-shadow: none; } body.menu-style--darkelegant .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem; color: var(--c-text-muted); } body.menu-style--darkelegant .menu-cats__tab:hover { color: var(--menu-primary); } body.menu-style--darkelegant .menu-cats__tab--active { color: var(--menu-primary); border-bottom-color: var(--menu-primary); } /* TOOLBAR — search e filtri su fondo scuro */ body.menu-style--darkelegant .menu-search__input { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } body.menu-style--darkelegant .menu-search__input:focus { background: var(--c-surface); border-color: var(--menu-primary); box-shadow: 0 0 0 3px rgba(207,169,100,0.18); } body.menu-style--darkelegant .menu-filter-btn { border-color: var(--c-border); color: var(--c-text-muted); } body.menu-style--darkelegant .menu-filter-btn:hover { border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--darkelegant .menu-filter-btn.active, body.menu-style--darkelegant .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #16140f; } /* SEZIONI — titolo serif oro centrato, divisore dorato */ body.menu-style--darkelegant .menu-section__title { display: block; text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; letter-spacing: 0.02em; color: var(--menu-primary); border-bottom: none; padding-bottom: 0; } body.menu-style--darkelegant .menu-section__title::after { content: ""; display: block; width: 44px; height: 1px; background: var(--c-border); margin: 0.55rem auto 0; } body.menu-style--darkelegant .menu-section__desc { text-align: center; font-style: italic; color: var(--c-text-muted); } /* PIATTI — nome serif crema, prezzo serif oro, divisori dorati tenui */ body.menu-style--darkelegant .dish-card { border-bottom-color: var(--c-border); } body.menu-style--darkelegant .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; color: var(--c-text); } body.menu-style--darkelegant .dish-card__desc { color: var(--c-text-muted); } body.menu-style--darkelegant .dish-card__price-current { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: var(--menu-primary); } body.menu-style--darkelegant .dish-card__price-old { color: var(--c-text-subtle); } /* BADGE dieta — contorno dorato su fondo oro trasparente */ body.menu-style--darkelegant .dish-badge { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; background: rgba(207,169,100,0.14); color: var(--menu-primary); border: 1px solid var(--c-border); } body.menu-style--darkelegant .dish-badge--veg, body.menu-style--darkelegant .dish-badge--vegan, body.menu-style--darkelegant .dish-badge--gf { background: rgba(207,169,100,0.14); color: var(--menu-primary); } /* FOOTER — fondo scuro, bordo oro, WhatsApp dorato pieno */ body.menu-style--darkelegant .menu-footer__info { background: var(--c-bg); border-top: 1px solid var(--c-border); } body.menu-style--darkelegant .menu-footer__name { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--menu-primary); } body.menu-style--darkelegant .menu-footer__address { color: var(--c-text-muted); } body.menu-style--darkelegant .menu-footer__wa { background: var(--menu-primary); color: #16140f; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; border-radius: 2px; box-shadow: none; } body.menu-style--darkelegant .menu-footer__wa:hover { background: var(--menu-secondary); color: #16140f; transform: none; box-shadow: none; } body.menu-style--darkelegant .menu-footer__call { color: var(--menu-primary); border-color: var(--c-border); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } body.menu-style--darkelegant .menu-footer__call:hover { border-color: var(--menu-primary); background: var(--c-surface); color: var(--menu-primary); } body.menu-style--darkelegant .menu-footer__social a { color: var(--c-text-muted); border-color: var(--c-border); text-transform: uppercase; letter-spacing: 0.06em; } body.menu-style--darkelegant .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--darkelegant .menu-footer__credit { color: var(--c-text-subtle); } /* ===================================================================== * WARM MINIMAL — chiave `warmminimal` * Reskin del menù pubblico ispirato a demo-35-warm-minimal. * Crema #fff8f2, accento terracotta #c45d3e, testo #2a211c. * Amichevole e pulito: angoli morbidi, pill, badge arrotondati. * Font: Inter (caricato a parte). Solo CSS, layout invariato. * ===================================================================== */ body.menu-style--warmminimal { --c-bg: #fff8f2; --c-surface: #fffdfb; --c-text: #2a211c; --c-text-muted: #8a7a6f; --c-text-subtle: #a99a8e; --c-border: #efe2d7; --menu-primary: #c45d3e; --menu-secondary: #d67a5c; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* HERO — nome terracotta bold, sottile bordo caldo */ body.menu-style--warmminimal .menu-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: 2.5rem 1.5rem 1.75rem; } body.menu-style--warmminimal .menu-hero__logo { border-color: var(--c-border); } body.menu-style--warmminimal .menu-hero__name { font-weight: 700; letter-spacing: -0.02em; color: var(--menu-primary); } body.menu-style--warmminimal .menu-hero__desc { font-style: normal; font-weight: 500; color: var(--c-text-muted); } /* NAV STICKY — vetro crema, tab a pillola terracotta soft */ body.menu-style--warmminimal .menu-cats { background: rgba(255,248,242,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); box-shadow: none; padding: 0.35rem 0.25rem; gap: 0.5rem; } body.menu-style--warmminimal .menu-cats__tab { border-bottom: none; border-radius: 9999px; background: #f6e2d9; color: var(--menu-primary); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.75rem; font-weight: 600; min-height: 38px; padding: 0.4rem 0.9rem; } body.menu-style--warmminimal .menu-cats__tab:hover { background: var(--menu-primary); color: #fff; } body.menu-style--warmminimal .menu-cats__tab--active { background: var(--menu-primary); color: #fff; border-bottom: none; } /* TOOLBAR — search e filtri morbidi */ body.menu-style--warmminimal .menu-search__input { background: var(--c-surface); border-color: var(--c-border); } body.menu-style--warmminimal .menu-search__input:focus { border-color: var(--menu-primary); box-shadow: 0 0 0 3px rgba(196,93,62,0.15); background: #fff; } body.menu-style--warmminimal .menu-filter-btn { background: #f6e2d9; border-color: transparent; color: var(--menu-primary); font-weight: 600; } body.menu-style--warmminimal .menu-filter-btn:hover { border-color: transparent; background: #f0d2c5; color: var(--menu-primary); } body.menu-style--warmminimal .menu-filter-btn.active, body.menu-style--warmminimal .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #fff; } /* SEZIONI — titolo bold, numerazione/etichetta caldi */ body.menu-style--warmminimal .menu-section__title { border-bottom: none; padding-bottom: 0; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--c-text); } body.menu-style--warmminimal .menu-section__desc { color: var(--c-text-muted); } /* PIATTI — nome semibold, prezzo terracotta */ body.menu-style--warmminimal .dish-card__name { font-weight: 600; color: var(--c-text); } body.menu-style--warmminimal .dish-card__desc { color: var(--c-text-muted); } body.menu-style--warmminimal .dish-card__price-current { color: var(--c-text); background: #f6e2d9; padding: 0.1rem 0.55rem; border-radius: 9999px; font-weight: 700; } body.menu-style--warmminimal .dish-card__price-old { color: var(--c-text-muted); } /* quando c'è uno sconto, il prezzo attuale resta in evidenza terracotta */ body.menu-style--warmminimal .dish-card__price-current { color: var(--menu-primary); } /* BADGE dieta — pill arrotondate, palette calda e amichevole */ body.menu-style--warmminimal .dish-badge { border-radius: 9999px; padding: 0.2rem 0.55rem; font-size: 0.68rem; } body.menu-style--warmminimal .dish-badge--veg { background: #eaf1e6; color: #5a7d52; } body.menu-style--warmminimal .dish-badge--vegan { background: #e4f0ea; color: #3f7d63; } body.menu-style--warmminimal .dish-badge--gf { background: #f7edda; color: #b07d2f; } /* FOOTER — nome terracotta, WhatsApp e chiama morbidi */ body.menu-style--warmminimal .menu-footer__info { background: var(--c-surface); border-top: 1px solid var(--c-border); } body.menu-style--warmminimal .menu-footer__name { font-weight: 700; color: var(--menu-primary); } body.menu-style--warmminimal .menu-footer__address { color: var(--c-text-muted); } body.menu-style--warmminimal .menu-footer__call { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--warmminimal .menu-footer__call:hover { border-color: var(--menu-primary); background: #f6e2d9; color: var(--menu-primary); } body.menu-style--warmminimal .menu-footer__social a { color: var(--c-text-muted); border-color: var(--c-border); } body.menu-style--warmminimal .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--warmminimal .menu-footer__credit { color: var(--c-text-subtle); } /* ===================================================================== * CLASSICO — chiave `classico` * Reskin del menù pubblico ispirato a demo-37-dotted-classic. * Pergamena #fbf7ef, accento vino #7a2f2f, testo #2b2620. * Display: Cormorant Garamond · Body: Nunito Sans (font caricati a parte). * Effetto "leader dots" tra nome piatto e prezzo: ottenuto con un filler * puntinato (pseudo-elemento ::after del .dish-card, che diventa flex item * fra .dish-card__info e .dish-card__price). Solo CSS, nessun DOM aggiunto. * ===================================================================== */ body.menu-style--classico { --c-bg: #fbf7ef; --c-surface: #fffdf8; --c-text: #2b2620; --c-text-muted: #7c7264; --c-text-subtle: #a99d89; --c-border: #d9cfbe; --menu-primary: #7a2f2f; --menu-secondary: #9a4a4a; --f-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-display: 'Cormorant Garamond', Georgia, serif; } /* HERO — nome serif elegante, tagline vino corsiva, filetto */ body.menu-style--classico .menu-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: 3rem 1.5rem 2rem; } body.menu-style--classico .menu-hero__logo { border-color: var(--c-border); } body.menu-style--classico .menu-hero__name { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.01em; color: var(--c-text); } body.menu-style--classico .menu-hero__desc { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--menu-primary); } body.menu-style--classico .menu-hero__desc::after { content: ""; display: block; width: 60px; height: 1px; background: var(--menu-primary); opacity: 0.55; margin: 1.1rem auto 0; } /* NAV STICKY — vetro pergamena, tab a pillola maiuscole */ body.menu-style--classico .menu-cats { background: rgba(251,247,239,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); box-shadow: none; } body.menu-style--classico .menu-cats__tab { border-bottom: none; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 700; color: var(--c-text-muted); } body.menu-style--classico .menu-cats__tab:hover { color: var(--menu-primary); background: var(--c-surface); } body.menu-style--classico .menu-cats__tab--active { color: var(--menu-primary); background: var(--c-surface); border-bottom: none; } /* TOOLBAR */ body.menu-style--classico .menu-search__input { background: var(--c-surface); border-color: var(--c-border); } body.menu-style--classico .menu-search__input:focus { border-color: var(--menu-primary); box-shadow: 0 0 0 3px rgba(122,47,47,0.14); background: #fff; } body.menu-style--classico .menu-filter-btn { border-color: var(--c-border); color: var(--c-text-muted); font-weight: 700; } body.menu-style--classico .menu-filter-btn:hover { border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--classico .menu-filter-btn.active, body.menu-style--classico .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #fff; } /* SEZIONI — titolo serif ampio, sottotitolo corsivo, arioso */ body.menu-style--classico .menu-section__title { font-family: var(--f-display); font-weight: 600; font-size: 2rem; letter-spacing: 0.01em; color: var(--c-text); border-bottom: none; padding-bottom: 0; } body.menu-style--classico .menu-section__desc { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--c-text-muted); } /* --------------------------------------------------------------------- * PIATTI con LEADER DOTS * Nel markup reale .dish-card è flex row con figli fratelli: * .dish-card__info (flex:1) | .dish-card__price * Riordino i due figli e inserisco fra loro un filler puntinato creato * come pseudo-elemento ::after del .dish-card (che, essendo la card un * flex container, diventa a sua volta un flex item). Con align baseline * la linea di puntini corre dal nome fino al prezzo, stile menù classico. * ------------------------------------------------------------------- */ body.menu-style--classico .dish-card { align-items: baseline; border-bottom-color: var(--c-border); } /* info: non si espande più a tutta larghezza, lascia spazio ai puntini */ body.menu-style--classico .dish-card__info { flex: 0 1 auto; order: 0; } /* filler puntinato fra info e prezzo */ body.menu-style--classico .dish-card::after { content: ""; order: 1; flex: 1 1 auto; align-self: baseline; min-width: 1.5rem; height: 0.7rem; margin: 0 0.55rem 0.28rem; border-bottom: 2px dotted var(--c-border); } body.menu-style--classico .dish-card__price { order: 2; padding-top: 0; } body.menu-style--classico .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--c-text); } body.menu-style--classico .dish-card__desc { color: var(--c-text-muted); } body.menu-style--classico .dish-card__allergens { color: var(--c-text-subtle); } body.menu-style--classico .dish-card__price-current { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; color: var(--menu-primary); } body.menu-style--classico .dish-card__price-old { color: var(--c-text-muted); font-size: 0.95rem; } /* BADGE dieta — pill morbide, palette classica tenue */ body.menu-style--classico .dish-badge { border-radius: 9999px; padding: 0.2rem 0.55rem; font-size: 0.7rem; text-transform: lowercase; background: #f1ece1; color: #7c6f5b; } body.menu-style--classico .dish-badge--veg { background: #e8f0e3; color: #3f5a35; } body.menu-style--classico .dish-badge--vegan { background: #e2efe8; color: #2f5a44; } body.menu-style--classico .dish-badge--gf { background: #eef0f6; color: #3c4667; } /* FOOTER — nome serif, WhatsApp vino pieno, chiama in outline vino */ body.menu-style--classico .menu-footer__info { background: var(--c-surface); border-top: 1px solid var(--c-border); } body.menu-style--classico .menu-footer__name { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; color: var(--c-text); } body.menu-style--classico .menu-footer__address { color: var(--c-text-muted); } body.menu-style--classico .menu-footer__wa { background: var(--menu-primary); color: #fff; box-shadow: none; } body.menu-style--classico .menu-footer__wa:hover { background: var(--menu-secondary); color: #fff; transform: none; box-shadow: none; } body.menu-style--classico .menu-footer__call { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--classico .menu-footer__call:hover { border-color: var(--menu-primary); background: var(--c-bg); color: var(--menu-primary); } body.menu-style--classico .menu-footer__social a { color: var(--c-text-muted); border-color: var(--c-border); font-weight: 700; } body.menu-style--classico .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--classico .menu-footer__credit { color: var(--c-text-subtle); } /* ===================================================================== * BIG TYPE — bianco puro, accento blu, tipografia grande e gerarchia * guidata dalla dimensione. Numeri di sezione grandi in blu, niente * riquadri: solo testo e sottili divisori. Font Inter (fino a 800). * Replica di demo-38-big-type sul markup fisso del menù pubblico. * ===================================================================== */ body.menu-style--bigtype { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #14181f; --c-text-muted: #6b7280; --c-text-subtle: #9aa0aa; --c-border: #e8eaee; --menu-primary: #2f5fd0; --menu-secondary: #2f5fd0; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -0.01em; } /* HERO — allineato a sinistra, nome enorme in nero, tagline discreta */ body.menu-style--bigtype .menu-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); text-align: left; padding: 3rem 1.5rem 2rem; } body.menu-style--bigtype .menu-hero__logo { margin-left: 0; margin-right: 0; border-color: var(--c-border); } body.menu-style--bigtype .menu-hero__name { color: var(--c-text); font-weight: 800; font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.02; letter-spacing: -0.03em; } body.menu-style--bigtype .menu-hero__desc { font-style: normal; color: var(--c-text-muted); font-size: 1.05rem; font-weight: 500; margin-top: 0.6rem; } /* NAV categorie — pill leggere, testo semibold, attiva in blu su alone */ body.menu-style--bigtype .menu-cats { box-shadow: none; border-bottom: 1px solid var(--c-border); } body.menu-style--bigtype .menu-cats__tab { font-weight: 600; font-size: 0.9rem; border-bottom: none; border-radius: 8px; margin: 0.3rem 0.1rem; padding: 0.4rem 0.8rem; min-height: 40px; } body.menu-style--bigtype .menu-cats__tab:hover { color: var(--menu-primary); background: #f4f6fc; } body.menu-style--bigtype .menu-cats__tab--active { color: var(--menu-primary); background: #eef2fc; font-weight: 700; } /* TOOLBAR — ricerca e filtri sobri, focus/attivo in blu */ body.menu-style--bigtype .menu-search__input:focus { border-color: var(--menu-primary); background: #fff; } body.menu-style--bigtype .menu-filter-btn { font-weight: 600; } body.menu-style--bigtype .menu-filter-btn:hover { border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--bigtype .menu-filter-btn.active, body.menu-style--bigtype .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #fff; } /* SEZIONI — numero grande in blu sopra il titolo, titolo grande in nero */ body.menu-style--bigtype .menu-body { counter-reset: menu-sec; } body.menu-style--bigtype .menu-section { counter-increment: menu-sec; padding: 3rem 1.25rem 0.5rem; } body.menu-style--bigtype .menu-section__title { display: block; border-bottom: none; padding-bottom: 0; font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--c-text); } body.menu-style--bigtype .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero); display: block; font-size: clamp(2.6rem, 12vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--menu-primary); margin-bottom: 0.3rem; } body.menu-style--bigtype .menu-section__desc { color: var(--c-text-muted); font-size: 1.05rem; font-weight: 500; } /* PIATTI — nome grande, prezzo grande, descrizione ariosa, niente box */ body.menu-style--bigtype .dish-card { padding: 1.6rem 0; border-bottom: 1px solid var(--c-border); } body.menu-style--bigtype .dish-card__name { font-size: 1.4rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } body.menu-style--bigtype .dish-card__desc { color: var(--c-text-muted); font-size: 1rem; margin-top: 0.4rem; } body.menu-style--bigtype .dish-card__price-current { color: var(--menu-primary); font-size: 1.3rem; font-weight: 700; } body.menu-style--bigtype .dish-card__price-old { font-size: 1rem; font-weight: 600; } /* BADGE — pill morbide, coerenti con la palette blu/verde tenue */ body.menu-style--bigtype .dish-badge { font-size: 0.72rem; padding: 0.22rem 0.6rem; } body.menu-style--bigtype .dish-badge--veg { background: #e7f2e8; color: #2f6b3d; } body.menu-style--bigtype .dish-badge--vegan { background: #e3f1ec; color: #1f6b52; } body.menu-style--bigtype .dish-badge--gf { background: #e9eefb; color: #2f4fb0; } /* FOOTER — nome grande in nero, WhatsApp blu squadrato-morbido */ body.menu-style--bigtype .menu-footer__info { background: var(--c-bg); border-top: 1px solid var(--c-border); } body.menu-style--bigtype .menu-footer__name { font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--c-text); } body.menu-style--bigtype .menu-footer__wa { background: var(--menu-primary); color: #fff; border-radius: 10px; font-weight: 700; box-shadow: none; } body.menu-style--bigtype .menu-footer__wa:hover { background: #2650b8; transform: none; box-shadow: none; } body.menu-style--bigtype .menu-footer__call { border-radius: 10px; color: var(--menu-primary); border-color: var(--menu-primary); font-weight: 700; } body.menu-style--bigtype .menu-footer__call:hover { border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--bigtype .menu-footer__social a { border-radius: 8px; font-weight: 600; } /* ===================================================================== * APP CHIPS — estetica app pulita, accento menta. Nav categorie come * chip pill scorrevoli (attiva riempita di menta), badge/tag a chip * arrotondati, separatori sottili. Font Inter. * Replica di demo-39-app-chips sul markup fisso del menù pubblico. * ===================================================================== */ body.menu-style--appchips { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #10241d; --c-text-muted: #5b6d67; --c-text-subtle: #93a29c; --c-border: #eceef0; --menu-primary: #10b981; --menu-secondary: #10b981; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'Inter', system-ui, -apple-system, sans-serif; } /* HERO — centrato, nome semibold compatto, tagline tenue */ body.menu-style--appchips .menu-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: 2.6rem 1.5rem 1.6rem; } body.menu-style--appchips .menu-hero__logo { border-color: var(--c-border); } body.menu-style--appchips .menu-hero__name { color: var(--c-text); font-weight: 700; font-size: clamp(1.6rem, 6.5vw, 1.9rem); letter-spacing: -0.02em; } body.menu-style--appchips .menu-hero__desc { font-style: normal; color: var(--c-text-muted); font-size: 0.95rem; margin-top: 0.35rem; } /* NAV categorie — chip pill piene, scorrevoli; attiva menta piena */ body.menu-style--appchips .menu-cats { box-shadow: none; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--c-border); gap: 0.5rem; padding: 0.75rem 1rem; } body.menu-style--appchips .menu-cats__tab { border-bottom: none; border-radius: 999px; background: #f3f5f6; color: var(--c-text); font-weight: 600; font-size: 0.85rem; padding: 0.5rem 0.95rem; min-height: 40px; } body.menu-style--appchips .menu-cats__tab:hover { color: var(--c-text); background: #e7f7f1; } body.menu-style--appchips .menu-cats__tab--active { background: var(--menu-primary); color: #fff; font-weight: 600; } /* TOOLBAR — ricerca pill, filtri a chip menta */ body.menu-style--appchips .menu-search__input:focus { border-color: var(--menu-primary); background: #fff; } body.menu-style--appchips .menu-filter-btn { background: #f3f5f6; border-color: transparent; color: var(--c-text); font-weight: 600; } body.menu-style--appchips .menu-filter-btn:hover { border-color: transparent; background: #e7f7f1; color: var(--c-text); } body.menu-style--appchips .menu-filter-btn.active, body.menu-style--appchips .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #fff; } /* SEZIONI — numero categoria in menta maiuscolo, titolo semibold */ body.menu-style--appchips .menu-body { counter-reset: menu-sec; } body.menu-style--appchips .menu-section { counter-increment: menu-sec; padding: 2rem 1rem 0.5rem; } body.menu-style--appchips .menu-section__title { display: block; border-bottom: none; padding-bottom: 0; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--c-text); } body.menu-style--appchips .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--menu-primary); margin-bottom: 0.15rem; } body.menu-style--appchips .menu-section__desc { color: var(--c-text-muted); font-size: 0.9rem; } /* PIATTI — righe pulite, separatori sottili */ body.menu-style--appchips .dish-card { padding: 1.05rem 0; border-bottom: 1px solid var(--c-border); } body.menu-style--appchips .dish-card__name { font-size: 1.05rem; font-weight: 600; } body.menu-style--appchips .dish-card__desc { color: var(--c-text-muted); font-size: 0.9rem; } body.menu-style--appchips .dish-card__price-current { color: var(--c-text); font-weight: 700; background: #e7f7f1; padding: 0.05rem 0.45rem; border-radius: 8px; } body.menu-style--appchips .dish-card__price-old { color: var(--c-text-muted); font-weight: 500; } /* BADGE — chip morbide arrotondate, famiglia verde/menta + neutro */ body.menu-style--appchips .dish-badge { border-radius: 999px; font-size: 0.7rem; padding: 0.22rem 0.55rem; } body.menu-style--appchips .dish-badge--veg { background: #eaf7ef; color: #1f7a4d; } body.menu-style--appchips .dish-badge--vegan { background: #e6f6ee; color: #0f7a54; } body.menu-style--appchips .dish-badge--gf { background: #eef4fb; color: #2b6cb0; } /* FOOTER — bottoni pill, WhatsApp menta, chiama a chip grigia */ body.menu-style--appchips .menu-footer__info { background: var(--c-bg); border-top: 1px solid var(--c-border); } body.menu-style--appchips .menu-footer__name { font-weight: 700; font-size: 1.2rem; color: var(--c-text); } body.menu-style--appchips .menu-footer__wa { background: var(--menu-primary); color: #fff; box-shadow: none; } body.menu-style--appchips .menu-footer__wa:hover { background: #0ea273; transform: none; box-shadow: none; } body.menu-style--appchips .menu-footer__call { background: #f3f5f6; border-color: transparent; color: var(--c-text); } body.menu-style--appchips .menu-footer__call:hover { border-color: transparent; background: #e7f7f1; color: var(--c-text); } body.menu-style--appchips .menu-footer__social a:hover { color: var(--menu-primary); border-color: var(--menu-primary); } /* ===================================================================== * MONO LUXE — solo bianco e nero con un grigio hairline. Nessun colore. * Etichette maiuscole con ampio letter-spacing, righe hairline, molto * spazio bianco, allergeni in grigio discreto. Display Cormorant, body * Inter. Replica di demo-40-mono-luxe sul markup fisso del menù pubblico. * ===================================================================== */ body.menu-style--monoluxe { --c-bg: #ffffff; --c-surface: #ffffff; --c-text: #0a0a0a; --c-text-muted: #3a3a3a; --c-text-subtle: #9a9a9a; --c-border: #e4e4e4; --menu-primary: #0a0a0a; --menu-secondary: #0a0a0a; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'Cormorant', Georgia, serif; font-weight: 400; line-height: 1.6; } /* HERO — centrato, nome serif elegante, tagline maiuscola spaziata, filo nero pieno come separatore */ body.menu-style--monoluxe .menu-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-text); padding: 3.4rem 1.5rem 2.2rem; } body.menu-style--monoluxe .menu-hero__logo { border-color: var(--c-text); filter: grayscale(1); } body.menu-style--monoluxe .menu-hero__name { font-family: var(--f-display); color: var(--c-text); font-weight: 500; font-size: clamp(2.1rem, 8vw, 2.7rem); letter-spacing: 0.01em; line-height: 1.1; } body.menu-style--monoluxe .menu-hero__desc { font-style: normal; text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.68rem; font-weight: 500; color: var(--c-text-subtle); margin-top: 0.9rem; } /* NAV categorie — maiuscolo, molto spaziato, sottolineatura nera attiva */ body.menu-style--monoluxe .menu-cats { box-shadow: none; background: var(--c-bg); border-bottom: 1px solid var(--c-text); gap: 1rem; padding: 0.35rem 1.25rem; } body.menu-style--monoluxe .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.66rem; font-weight: 500; color: var(--c-text-subtle); border-bottom: 1px solid transparent; padding: 0.5rem 0.2rem; } body.menu-style--monoluxe .menu-cats__tab:hover { color: var(--c-text); } body.menu-style--monoluxe .menu-cats__tab--active { color: var(--c-text); border-bottom-color: var(--c-text); font-weight: 500; } /* TOOLBAR — squadrata, monocromatica, attivo nero pieno */ body.menu-style--monoluxe .menu-search__input { border-radius: 0; border-color: var(--c-border); } body.menu-style--monoluxe .menu-search__input:focus { border-color: var(--c-text); box-shadow: none; background: #fff; } body.menu-style--monoluxe .menu-filter-btn { border-radius: 0; border-color: var(--c-border); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; font-weight: 500; } body.menu-style--monoluxe .menu-filter-btn:hover { border-color: var(--c-text); color: var(--c-text); } body.menu-style--monoluxe .menu-filter-btn.active, body.menu-style--monoluxe .menu-filter-btn[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); color: #fff; } /* SEZIONI — centrate, numero maiuscolo grigio, titolo serif, molto respiro */ body.menu-style--monoluxe .menu-body { counter-reset: menu-sec; } body.menu-style--monoluxe .menu-section { counter-increment: menu-sec; padding: 3.4rem 1.25rem 0.5rem; } body.menu-style--monoluxe .menu-section__title { display: block; text-align: center; border-bottom: none; padding-bottom: 0; font-family: var(--f-display); font-weight: 500; font-size: 2rem; letter-spacing: 0.01em; color: var(--c-text); } body.menu-style--monoluxe .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero); display: block; font-family: var(--f-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-text-subtle); margin-bottom: 0.7rem; } body.menu-style--monoluxe .menu-section__desc { text-align: center; color: var(--c-text-subtle); font-size: 0.8rem; letter-spacing: 0.06em; } /* PIATTI — nome serif, descrizione grigio scuro leggera, hairline soft */ body.menu-style--monoluxe .dish-card { padding: 1.5rem 0; border-bottom: 1px solid var(--c-border); } body.menu-style--monoluxe .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.005em; } body.menu-style--monoluxe .dish-card__desc { color: var(--c-text-muted); font-weight: 300; font-size: 0.9rem; } body.menu-style--monoluxe .dish-card__price-current { color: var(--c-text); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.03em; } body.menu-style--monoluxe .dish-card__price-old { color: var(--c-text-subtle); font-weight: 400; } /* ALLERGENI — grigio discreto, maiuscolo spaziato */ body.menu-style--monoluxe .dish-card__allergens { color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.64rem; } /* BADGE — nessun colore: contorno hairline, testo nero, squadrato */ body.menu-style--monoluxe .dish-badge { border-radius: 0; background: transparent; border: 1px solid var(--c-border); color: var(--c-text); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } body.menu-style--monoluxe .dish-badge--veg, body.menu-style--monoluxe .dish-badge--vegan, body.menu-style--monoluxe .dish-badge--gf { background: transparent; color: var(--c-text); } /* FOOTER — filo nero, nome serif, WhatsApp nero pieno squadrato */ body.menu-style--monoluxe .menu-footer__info { background: var(--c-bg); border-top: 1px solid var(--c-text); } body.menu-style--monoluxe .menu-footer__name { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; color: var(--c-text); } body.menu-style--monoluxe .menu-footer__address { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--c-text-muted); } body.menu-style--monoluxe .menu-footer__wa { background: var(--c-text); color: #fff; border-radius: 0; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; font-weight: 500; box-shadow: none; } body.menu-style--monoluxe .menu-footer__wa:hover { background: #000; transform: none; box-shadow: none; } body.menu-style--monoluxe .menu-footer__call { border-radius: 0; border-color: var(--c-text); color: var(--c-text); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; font-weight: 500; } body.menu-style--monoluxe .menu-footer__call:hover { border-color: var(--c-text); background: var(--c-bg); color: var(--c-text); } body.menu-style--monoluxe .menu-footer__social a { border-radius: 0; border-color: var(--c-border); color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; } body.menu-style--monoluxe .menu-footer__social a:hover { color: var(--c-text); border-color: var(--c-text); } /* ===================================================================== * FINE DINING — chiave `finedining` * Reskin del menù pubblico ispirato a demo-41-fine-dining. * Lusso sobrio: crema, verde bottiglia, oro. Serif Cormorant Garamond * per i display, Jost per il corpo. Filetti/ornamenti dorati sottili * sui titoli di sezione + numerazione romana raffinata. * Solo CSS: nessuna modifica al markup o al layout (main resta 640px). * ===================================================================== */ body.menu-style--finedining { --c-bg: #f6f1e7; --c-surface: #efe7d6; --c-text: #233127; --c-text-muted: #6d7669; --c-text-subtle: #8a8676; --c-border: rgba(31,61,47,0.16); --menu-primary: #1f3d2f; --menu-secondary: #c9a24b; --f-body: 'Jost', system-ui, sans-serif; --f-display: 'Cormorant Garamond', Georgia, serif; } /* Sfondo pagina leggermente caldo dietro il main centrato */ body.menu-style--finedining { background: radial-gradient(120% 60% at 50% 0%, #efe6d2 0%, #e6dcc4 45%, #dfd4b9 100%); } /* ---------- HERO: verde bottiglia con cornice dorata ---------- */ body.menu-style--finedining .menu-hero { position: relative; overflow: hidden; color: var(--c-bg); border-bottom: 1px solid rgba(201,162,75,0.4); background: radial-gradient(140% 120% at 50% -10%, #2c4f3e 0%, #1f3d2f 55%, #172e23 100%); } /* Doppia cornice sottile dorata */ body.menu-style--finedining .menu-hero::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201,162,75,0.38); border-radius: 6px; pointer-events: none; } body.menu-style--finedining .menu-hero::after { content: ""; position: absolute; inset: 19px; border: 1px solid rgba(201,162,75,0.18); border-radius: 3px; pointer-events: none; } body.menu-style--finedining .menu-hero__logo { border: 1.5px solid #c9a24b; box-shadow: 0 0 0 6px rgba(201,162,75,0.10), inset 0 0 22px rgba(201,162,75,0.14); position: relative; z-index: 2; } body.menu-style--finedining .menu-hero__name { position: relative; z-index: 2; color: var(--c-bg); font-weight: 600; letter-spacing: 0.02em; line-height: 1.05; } /* Fioritura dorata sotto il nome */ body.menu-style--finedining .menu-hero__name::after { content: "\2766"; /* ❦ */ display: block; margin: 0.5rem auto 0; color: #c9a24b; font-size: 1.1rem; line-height: 1; } body.menu-style--finedining .menu-hero__desc { position: relative; z-index: 2; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: rgba(246,241,231,0.9); } /* ---------- NAV categorie sticky: pill su crema ---------- */ body.menu-style--finedining .menu-cats { background: rgba(246,241,231,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); box-shadow: 0 6px 18px -14px rgba(31,61,47,0.6); gap: 0.5rem; padding: 0.35rem 0.75rem; } body.menu-style--finedining .menu-cats__tab { border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--menu-primary); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; font-weight: 500; min-height: 38px; margin: 0.35rem 0; } body.menu-style--finedining .menu-cats__tab:hover { background: var(--menu-primary); color: #d8bd82; } body.menu-style--finedining .menu-cats__tab--active { background: var(--menu-primary); border-color: var(--menu-primary); color: #d8bd82; } /* ---------- TOOLBAR: ricerca e filtri coerenti ---------- */ body.menu-style--finedining .menu-search__input { border-color: var(--c-border); background: #fff; } body.menu-style--finedining .menu-search__input:focus { border-color: #c9a24b; box-shadow: 0 0 0 3px rgba(201,162,75,0.18); } body.menu-style--finedining .menu-filter-btn { border-color: var(--c-border); color: var(--c-text-muted); } body.menu-style--finedining .menu-filter-btn:hover { border-color: #c9a24b; color: var(--menu-primary); } body.menu-style--finedining .menu-filter-btn.active, body.menu-style--finedining .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: #d8bd82; } /* ---------- SEZIONI: titoli centrati, numero romano, filetto ---------- */ body.menu-style--finedining .menu-body { counter-reset: menu-sec; } body.menu-style--finedining .menu-section { counter-increment: menu-sec; } body.menu-style--finedining .menu-section__title { display: block; text-align: center; border-bottom: none; padding-bottom: 0; font-family: var(--f-display); font-weight: 600; font-size: 2rem; letter-spacing: 0.02em; color: var(--menu-primary); } /* Numero romano raffinato sopra al titolo */ body.menu-style--finedining .menu-section__title::before { content: "\2014\00A0" counter(menu-sec, upper-roman) "\00A0\2014"; display: block; font-family: var(--f-display); font-style: italic; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.3em; color: #c9a24b; margin-bottom: 0.15rem; } /* Filetto dorato con rombo centrale sotto al titolo */ body.menu-style--finedining .menu-section__title::after { content: ""; display: block; width: 130px; height: 5px; margin: 0.7rem auto 0; background: linear-gradient(90deg, transparent, #d8bd82 45%, transparent 46%), linear-gradient(90deg, transparent 54%, #d8bd82 55%, transparent); position: relative; } body.menu-style--finedining .menu-section__desc { text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--c-text-muted); } /* ---------- PIATTI: nome serif, prezzo verde, filetto punteggiato ---------- */ body.menu-style--finedining .dish-card { border-bottom: 1px solid var(--c-border); } body.menu-style--finedining .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--c-text); } body.menu-style--finedining .dish-card__desc { font-weight: 300; color: var(--c-text-muted); } body.menu-style--finedining .dish-card__allergens { font-style: italic; color: var(--c-text-subtle); } body.menu-style--finedining .dish-card__price-current { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; color: var(--menu-primary); } body.menu-style--finedining .dish-card__price-old { font-family: var(--f-display); color: var(--c-text-muted); } /* Badge dieta: sobri, contorno sottile, palette naturale */ body.menu-style--finedining .dish-badge { border-radius: 999px; border: 1px solid transparent; text-transform: lowercase; font-weight: 500; letter-spacing: 0.05em; padding: 0.15rem 0.55rem; } body.menu-style--finedining .dish-badge--veg { background: #e6efe2; color: #4b7a4e; border-color: rgba(75,122,78,0.28); } body.menu-style--finedining .dish-badge--vegan { background: #e0efe6; color: #3f7e5e; border-color: rgba(63,126,94,0.3); } body.menu-style--finedining .dish-badge--gf { background: #f3ecd8; color: #a6802f; border-color: rgba(166,128,47,0.3); } /* ---------- FOOTER: verde bottiglia, oro, monogramma ---------- */ body.menu-style--finedining .menu-footer__info { color: var(--c-bg); border-top: 1px solid rgba(201,162,75,0.4); background: radial-gradient(140% 120% at 50% 120%, #2c4f3e 0%, #1f3d2f 60%, #16291f 100%); } body.menu-style--finedining .menu-footer__name { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; letter-spacing: 0.03em; color: var(--c-bg); } body.menu-style--finedining .menu-footer__address { color: rgba(246,241,231,0.78); letter-spacing: 0.04em; } body.menu-style--finedining .menu-footer__wa { background: #c9a24b; color: #2c220a; box-shadow: none; } body.menu-style--finedining .menu-footer__wa:hover { background: #d8bd82; color: #2c220a; } body.menu-style--finedining .menu-footer__call { background: transparent; color: #d8bd82; border: 1px solid rgba(201,162,75,0.5); } body.menu-style--finedining .menu-footer__call:hover { border-color: #c9a24b; background: rgba(201,162,75,0.1); color: #d8bd82; } body.menu-style--finedining .menu-footer__social a { color: #d8bd82; border: 1px solid rgba(201,162,75,0.4); } body.menu-style--finedining .menu-footer__social a:hover { background: #c9a24b; border-color: #c9a24b; color: #2c220a; } body.menu-style--finedining .menu-footer__credit { font-family: var(--f-display); font-style: italic; color: var(--c-text-subtle); } /* ===================================================================== * GRADIENTE CALDO — chiave `gradientcaldo` * Reskin del menù pubblico ispirato a demo-42-warm-gradient. * Moderno e invitante: hero con gradiente pesca → terracotta, sfondo * chiaro, `.dish-card` bianche che "galleggiano" con ombra morbida e * angoli arrotondati. Font unico Manrope. * Solo CSS: nessuna modifica al markup o al layout (main resta 640px). * ===================================================================== */ body.menu-style--gradientcaldo { --c-bg: #fffaf6; --c-surface: #ffffff; --c-text: #3a2318; --c-text-muted: #7a5c4d; --c-text-subtle: #9a8577; --c-border: #f0e2d8; --menu-primary: #d9673f; --menu-secondary: #b84e2a; --f-body: 'Manrope', system-ui, sans-serif; --f-display: 'Manrope', system-ui, sans-serif; } /* Sfondo pagina caldo chiaro dietro il main centrato */ body.menu-style--gradientcaldo { background: radial-gradient(90% 60% at 50% 0%, #fbeee6 0%, #f3ece7 60%, #ece5e0 100%); } /* ---------- HERO: gradiente caldo pesca → terracotta ---------- */ body.menu-style--gradientcaldo .menu-hero { position: relative; overflow: hidden; border-bottom: none; color: #4a2313; background: radial-gradient(120% 90% at 15% 0%, #ffe6d0 0%, transparent 55%), linear-gradient(155deg, #ffd9c0 0%, #f2a072 42%, #d9673f 100%); } /* Blob morbidi sfocati agli angoli */ body.menu-style--gradientcaldo .menu-hero::before { content: ""; position: absolute; width: 180px; height: 180px; top: -50px; right: -40px; background: #ffede0; border-radius: 50%; filter: blur(6px); opacity: 0.35; pointer-events: none; } body.menu-style--gradientcaldo .menu-hero::after { content: ""; position: absolute; width: 130px; height: 130px; bottom: -30px; left: -40px; background: #c14e28; border-radius: 50%; filter: blur(6px); opacity: 0.28; pointer-events: none; } body.menu-style--gradientcaldo .menu-hero__logo { position: relative; z-index: 2; border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 10px 24px -12px rgba(120,60,35,0.5); } body.menu-style--gradientcaldo .menu-hero__name { position: relative; z-index: 2; color: #4a2313; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } body.menu-style--gradientcaldo .menu-hero__desc { position: relative; z-index: 2; font-style: normal; font-weight: 500; color: #5a2c18; } /* ---------- NAV categorie sticky: pill bianche galleggianti ---------- */ body.menu-style--gradientcaldo .menu-cats { background: rgba(255,250,246,0.9); backdrop-filter: blur(12px); border-bottom: none; box-shadow: 0 8px 20px -16px rgba(180,80,40,0.7); gap: 0.55rem; padding: 0.4rem 0.9rem; } body.menu-style--gradientcaldo .menu-cats__tab { border: none; border-radius: 999px; background: #fff; color: var(--menu-secondary); font-weight: 700; font-size: 0.78rem; min-height: 38px; margin: 0.4rem 0; box-shadow: 0 6px 20px -10px rgba(180,80,40,0.28); } body.menu-style--gradientcaldo .menu-cats__tab:hover { background: linear-gradient(135deg, #f2a072, #d9673f); color: #fff; } body.menu-style--gradientcaldo .menu-cats__tab--active { background: linear-gradient(135deg, #f2a072, #d9673f); color: #fff; border-bottom-color: transparent; } /* ---------- TOOLBAR: ricerca e filtri ---------- */ body.menu-style--gradientcaldo .menu-search__input { border-color: var(--c-border); background: #fff; box-shadow: 0 6px 20px -12px rgba(180,80,40,0.25); } body.menu-style--gradientcaldo .menu-search__input:focus { border-color: var(--menu-primary); box-shadow: 0 0 0 3px rgba(217,103,63,0.18); } body.menu-style--gradientcaldo .menu-filter-btn { border-color: var(--c-border); color: var(--c-text-muted); font-weight: 600; } body.menu-style--gradientcaldo .menu-filter-btn:hover { border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--gradientcaldo .menu-filter-btn.active, body.menu-style--gradientcaldo .menu-filter-btn[aria-pressed="true"] { background: linear-gradient(135deg, #f2a072, #d9673f); border-color: transparent; color: #fff; } /* ---------- SEZIONI: titolo bold, numero terracotta ---------- */ body.menu-style--gradientcaldo .menu-body { counter-reset: menu-sec; } body.menu-style--gradientcaldo .menu-section { counter-increment: menu-sec; } body.menu-style--gradientcaldo .menu-section__title { display: block; border-bottom: none; padding-bottom: 0; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--c-text); } body.menu-style--gradientcaldo .menu-section__title::before { content: counter(menu-sec, decimal-leading-zero) " \2014 "; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--menu-primary); display: block; margin-bottom: 0.15rem; } body.menu-style--gradientcaldo .menu-section__desc { font-weight: 500; color: var(--c-text-muted); } /* ---------- DISH CARD: bianche, arrotondate, galleggianti ---------- */ body.menu-style--gradientcaldo .menu-section__dishes { gap: 0.9rem; } body.menu-style--gradientcaldo .dish-card { background: var(--c-surface); border: 1px solid rgba(240,226,216,0.7); border-bottom: 1px solid rgba(240,226,216,0.7); border-radius: 22px; padding: 1.05rem 1.1rem; box-shadow: 0 22px 45px -24px rgba(180,80,40,0.5); transition: transform 0.2s; } body.menu-style--gradientcaldo .dish-card:hover { transform: translateY(-2px); } body.menu-style--gradientcaldo .dish-card:last-child { border-bottom: 1px solid rgba(240,226,216,0.7); } body.menu-style--gradientcaldo .dish-card--unavailable { box-shadow: 0 14px 30px -22px rgba(180,80,40,0.4); } body.menu-style--gradientcaldo .dish-card__name { font-weight: 800; letter-spacing: -0.01em; color: var(--c-text); } body.menu-style--gradientcaldo .dish-card__desc { font-weight: 500; color: var(--c-text-muted); } /* Prezzo come "chip" a gradiente caldo */ body.menu-style--gradientcaldo .dish-card__price-current { color: #fff; font-weight: 800; background: linear-gradient(135deg, #f2a072, #d9673f); padding: 0.3rem 0.65rem; border-radius: 12px; box-shadow: 0 6px 20px -10px rgba(180,80,40,0.5); } body.menu-style--gradientcaldo .dish-card__price-old { font-weight: 600; color: var(--c-text-muted); } /* Badge dieta: pill piene, palette calda coerente */ body.menu-style--gradientcaldo .dish-badge { border-radius: 999px; font-weight: 700; padding: 0.2rem 0.6rem; } body.menu-style--gradientcaldo .dish-badge--veg { background: #e7f6ec; color: #2f8f5b; } body.menu-style--gradientcaldo .dish-badge--vegan { background: #e2f6ef; color: #1f9e77; } body.menu-style--gradientcaldo .dish-badge--gf { background: #fdf1de; color: #c98a2b; } /* ---------- FOOTER: gradiente terracotta ---------- */ body.menu-style--gradientcaldo .menu-footer__info { color: #fff; border-top: none; background: radial-gradient(110% 80% at 80% 0%, #f2a072 0%, transparent 55%), linear-gradient(160deg, #e07a4e 0%, #d9673f 45%, #b84e2a 100%); } body.menu-style--gradientcaldo .menu-footer__name { font-weight: 800; letter-spacing: -0.02em; color: #fff; } body.menu-style--gradientcaldo .menu-footer__address { color: rgba(255,255,255,0.9); font-weight: 500; } body.menu-style--gradientcaldo .menu-footer__wa { background: #fff; color: #128c4b; border-radius: 14px; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.4); } body.menu-style--gradientcaldo .menu-footer__wa:hover { background: #f5fff9; color: #128c4b; } body.menu-style--gradientcaldo .menu-footer__call { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 14px; } body.menu-style--gradientcaldo .menu-footer__call:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.7); color: #fff; } body.menu-style--gradientcaldo .menu-footer__social a { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); color: #fff; } body.menu-style--gradientcaldo .menu-footer__social a:hover { background: #fff; border-color: #fff; color: var(--menu-secondary); } body.menu-style--gradientcaldo .menu-footer__credit { color: var(--c-text-subtle); } /* ===================================================================== * MIDNIGHT GOLD — chiave `midnight` * Reskin del menù pubblico ispirato a demo-43-midnight-gold. * Tema SCURO ad alto contrasto: blu notte/nero, oro, testo crema. * Serif Cormorant Garamond per i display, Jost per il corpo. Numeri di * sezione in badge/cerchi dorati (via ::before su .menu-section__title) * e filetti dorati sotto ai titoli. * Solo CSS: nessuna modifica al markup o al layout (main resta 640px). * ===================================================================== */ body.menu-style--midnight { --c-bg: #0f1720; --c-surface: #16222f; --c-text: #f2ede1; --c-text-muted: #c8c3b6; --c-text-subtle: #8a9199; --c-border: rgba(212,175,87,0.22); --menu-primary: #d4af57; --menu-secondary: #e8c979; --f-body: 'Jost', system-ui, sans-serif; --f-display: 'Cormorant Garamond', Georgia, serif; } /* Sfondo pagina notturno dietro il main centrato */ body.menu-style--midnight { background: radial-gradient(circle at 50% 0%, #141c26 0%, #0a0f15 60%); color: var(--c-text); } /* ---------- HERO: notte con alone e cerchi dorati ---------- */ body.menu-style--midnight .menu-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-border); background: radial-gradient(120% 80% at 50% -10%, rgba(212,175,87,0.14), transparent 60%), linear-gradient(180deg, #101b26 0%, #0f1720 100%); } /* Grandi cerchi dorati sottili agli angoli */ body.menu-style--midnight .menu-hero::before { content: ""; position: absolute; width: 220px; height: 220px; top: -120px; left: -90px; border: 1px solid rgba(212,175,87,0.12); border-radius: 50%; pointer-events: none; } body.menu-style--midnight .menu-hero::after { content: ""; position: absolute; width: 220px; height: 220px; bottom: -140px; right: -100px; border: 1px solid rgba(212,175,87,0.12); border-radius: 50%; pointer-events: none; } body.menu-style--midnight .menu-hero__logo { position: relative; z-index: 2; border: 1.5px solid var(--menu-primary); box-shadow: 0 0 0 5px rgba(212,175,87,0.08), inset 0 0 14px rgba(212,175,87,0.1); } body.menu-style--midnight .menu-hero__name { position: relative; z-index: 2; font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em; color: var(--c-text); } /* Filetto dorato con rombo centrale sotto al nome */ body.menu-style--midnight .menu-hero__name::after { content: ""; display: block; width: 120px; height: 5px; margin: 0.75rem auto 0; background: linear-gradient(90deg, transparent, var(--menu-primary) 45%, transparent 46%), linear-gradient(90deg, transparent 54%, var(--menu-primary) 55%, transparent); } body.menu-style--midnight .menu-hero__desc { position: relative; z-index: 2; font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--c-text-muted); } /* ---------- NAV categorie sticky: pill scure bordo oro ---------- */ body.menu-style--midnight .menu-cats { background: rgba(15,23,32,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); box-shadow: none; gap: 0.5rem; padding: 0.35rem 0.9rem; } body.menu-style--midnight .menu-cats__tab { border: 1px solid var(--c-border); border-radius: 30px; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; min-height: 38px; margin: 0.35rem 0; } body.menu-style--midnight .menu-cats__tab:hover { color: var(--menu-primary); border-color: var(--menu-primary); } body.menu-style--midnight .menu-cats__tab--active { background: var(--menu-primary); border-color: var(--menu-primary); color: var(--c-bg); } /* ---------- TOOLBAR: ricerca e filtri scuri ---------- */ body.menu-style--midnight .menu-search__input { border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); } body.menu-style--midnight .menu-search__input:focus { border-color: var(--menu-primary); box-shadow: 0 0 0 3px rgba(212,175,87,0.18); background: var(--c-surface); } body.menu-style--midnight .menu-filter-btn { border-color: var(--c-border); color: var(--c-text-muted); } body.menu-style--midnight .menu-filter-btn:hover { border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--midnight .menu-filter-btn.active, body.menu-style--midnight .menu-filter-btn[aria-pressed="true"] { background: var(--menu-primary); border-color: var(--menu-primary); color: var(--c-bg); } /* ---------- SEZIONI: badge circolare dorato numerato + filetto ---------- */ body.menu-style--midnight .menu-body { counter-reset: menu-sec; } body.menu-style--midnight .menu-section { counter-increment: menu-sec; } body.menu-style--midnight .menu-section__title { display: block; text-align: center; border-bottom: none; padding-bottom: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.9rem; letter-spacing: 0.03em; color: var(--c-text); } /* Numero di sezione dentro un badge/cerchio dorato sopra al titolo */ body.menu-style--midnight .menu-section__title::before { content: counter(menu-sec); display: flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; margin: 0 auto 0.85rem; border-radius: 50%; border: 1px solid var(--menu-primary); font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; color: var(--menu-primary); background: radial-gradient(circle at 50% 30%, rgba(212,175,87,0.16), transparent 70%); box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 0 12px rgba(212,175,87,0.08); } /* Filetto dorato con rombo centrale sotto al titolo */ body.menu-style--midnight .menu-section__title::after { content: ""; display: block; width: 100px; height: 5px; margin: 0.65rem auto 0; background: linear-gradient(90deg, transparent, #a9863b 45%, transparent 46%), linear-gradient(90deg, transparent 54%, #a9863b 55%, transparent); } body.menu-style--midnight .menu-section__desc { text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--c-text-muted); } /* ---------- PIATTI: nome serif crema, prezzo oro ---------- */ body.menu-style--midnight .dish-card { border-bottom: 1px solid rgba(212,175,87,0.12); } body.menu-style--midnight .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: var(--c-text); } body.menu-style--midnight .dish-card__desc { font-weight: 300; color: var(--c-text-muted); } body.menu-style--midnight .dish-card__allergens { color: var(--c-text-subtle); } body.menu-style--midnight .dish-card__price-current { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; color: var(--menu-primary); } /* Prezzo scontato come pill dorata piena, alto contrasto */ body.menu-style--midnight .dish-card__price-old { color: var(--c-text-subtle); } /* Badge dieta: contorno sottile su fondo scuro, palette tenue */ body.menu-style--midnight .dish-badge { border-radius: 20px; border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; padding: 0.2rem 0.5rem; } body.menu-style--midnight .dish-badge--veg { background: rgba(143,191,127,0.16); color: #8fbf7f; } body.menu-style--midnight .dish-badge--vegan { background: rgba(127,201,168,0.16); color: #7fc9a8; } body.menu-style--midnight .dish-badge--gf { background: rgba(224,181,106,0.16); color: #e0b56a; } /* ---------- FOOTER: notte profonda, oro ---------- */ body.menu-style--midnight .menu-footer__info { border-top: 1px solid var(--c-border); background: linear-gradient(180deg, #0f1720 0%, #0b131b 100%); } body.menu-style--midnight .menu-footer__name { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; color: var(--c-text); } body.menu-style--midnight .menu-footer__address { color: var(--c-text-subtle); letter-spacing: 0.04em; } body.menu-style--midnight .menu-footer__wa { background: var(--menu-primary); color: var(--c-bg); box-shadow: none; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; } body.menu-style--midnight .menu-footer__wa:hover { background: var(--menu-secondary); color: var(--c-bg); } body.menu-style--midnight .menu-footer__call { background: transparent; color: var(--menu-primary); border: 1px solid var(--menu-primary); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; } body.menu-style--midnight .menu-footer__call:hover { background: rgba(212,175,87,0.1); border-color: var(--menu-primary); color: var(--menu-primary); } body.menu-style--midnight .menu-footer__social a { color: var(--c-text-muted); border: 1px solid var(--c-border); } body.menu-style--midnight .menu-footer__social a:hover { background: var(--menu-primary); border-color: var(--menu-primary); color: var(--c-bg); } body.menu-style--midnight .menu-footer__credit { color: var(--c-text-subtle); background: #080d12; } /* ===================================================================== * BOTANICA — naturale e arioso, crema + salvia, serif Fraunces. * Reskin del menù pubblico (markup FISSO): solo colori, tipografia e * decori botanici delicati via SVG inline. Nessuna modifica al layout. * Demo di riferimento: demo-44-botanica. * ===================================================================== */ body.menu-style--botanica { --c-bg: #f5f3ec; --c-surface: #fbfaf5; --c-text: #2c342a; --c-text-muted: #5a6357; --c-text-subtle: #8a917f; --c-border: rgba(111,143,106,0.24); --menu-primary: #6f8f6a; --menu-secondary: #4f6b4b; --f-body: 'Karla', system-ui, -apple-system, sans-serif; --f-display: 'Fraunces', Georgia, serif; } /* Hero: carta chiara con lieve alone salvia, nome serif in inchiostro, sottotitolo corsivo. Decoro mai invadente. */ body.menu-style--botanica .menu-hero { background: radial-gradient(120% 70% at 50% 0%, rgba(111,143,106,0.10), transparent 65%), linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%); border-bottom: 1px solid var(--c-border); } body.menu-style--botanica .menu-hero__logo { border-color: rgba(111,143,106,0.4); } body.menu-style--botanica .menu-hero__name { color: var(--c-text); font-weight: 500; letter-spacing: 0.01em; } /* Piccola foglia/rametto sotto il nome, come flourish centrale */ body.menu-style--botanica .menu-hero__name::after { content: ''; display: block; width: 18px; height: 18px; margin: 0.55rem auto 0; background: url("data:image/svg+xml,") no-repeat center / contain; } body.menu-style--botanica .menu-hero__desc { font-family: var(--f-display); font-style: italic; color: var(--c-text-muted); font-size: 1rem; } /* Nav categorie: etichette maiuscole spaziate, sottolineatura salvia */ body.menu-style--botanica .menu-cats { background: rgba(245,243,236,0.92); backdrop-filter: blur(10px); box-shadow: none; border-bottom: 1px solid var(--c-border); } body.menu-style--botanica .menu-cats__tab { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; } /* Toolbar coerente: ricerca su carta chiara */ body.menu-style--botanica .menu-search__input { background: var(--c-surface); } body.menu-style--botanica .menu-search__input:focus { background: #fff; } /* Sezioni: titolo serif con foglia delicata accanto, filetto leggero */ body.menu-style--botanica .menu-section__title { font-family: var(--f-display); font-weight: 500; color: var(--c-text); letter-spacing: 0.01em; border-bottom: 1px solid var(--c-border); padding-bottom: 0.4rem; } body.menu-style--botanica .menu-section__title::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4rem; vertical-align: -0.14em; background: url("data:image/svg+xml,") no-repeat center / contain; } body.menu-style--botanica .menu-section__desc { font-family: var(--f-display); font-style: italic; color: var(--c-text-muted); } /* Piatti: nome serif, prezzo serif salvia scura */ body.menu-style--botanica .dish-card__name { font-family: var(--f-display); font-weight: 500; letter-spacing: 0.01em; } body.menu-style--botanica .dish-card__desc { font-weight: 300; } body.menu-style--botanica .dish-card__price-current { font-family: var(--f-display); color: var(--menu-secondary); } /* Badge dieta: pillole tenui, tinte naturali */ body.menu-style--botanica .dish-badge { border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } body.menu-style--botanica .dish-badge--veg { background: rgba(111,159,95,0.15); color: #4d7a3e; } body.menu-style--botanica .dish-badge--vegan { background: rgba(79,165,131,0.15); color: #327a5d; } body.menu-style--botanica .dish-badge--gf { background: rgba(199,154,78,0.15); color: #9a7326; } /* Footer: sfumatura crema, nome serif, azioni salvia */ body.menu-style--botanica .menu-footer__info { background: linear-gradient(180deg, var(--c-bg) 0%, #efece1 100%); border-top: 1px solid var(--c-border); } body.menu-style--botanica .menu-footer__name { font-family: var(--f-display); font-weight: 500; letter-spacing: 0.01em; } body.menu-style--botanica .menu-footer__wa { background: var(--menu-primary); box-shadow: 0 3px 12px rgba(111,143,106,0.3); } body.menu-style--botanica .menu-footer__wa:hover { background: var(--menu-secondary); box-shadow: 0 5px 16px rgba(111,143,106,0.4); } /* ===================================================================== * COVER — copertina editoriale, crema + nero + rosso, Playfair Display. * Reskin del menù pubblico (markup FISSO): masthead d'impatto, filetti * editoriali attorno al nome, numeri di sezione grandi. Solo CSS. * Demo di riferimento: demo-45-editorial-cover. * ===================================================================== */ body.menu-style--cover { --c-bg: #f7f4ee; --c-surface: #f7f4ee; --c-text: #111111; --c-text-muted: #6b665e; --c-text-subtle: #9a958c; --c-border: rgba(17,17,17,0.14); --menu-primary: #cc2b1d; --menu-secondary: #111111; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'Playfair Display', Georgia, serif; } /* Hero da copertina: masthead nero enorme, filetti sopra/sotto il nome */ body.menu-style--cover .menu-hero { background: var(--c-surface); border-bottom: 2px solid var(--c-text); padding-top: 1.5rem; } body.menu-style--cover .menu-hero__logo { border-color: var(--c-text); } body.menu-style--cover .menu-hero__name { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 13vw, 4.2rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; color: var(--c-text); } /* Filetti editoriali sopra e sotto il masthead */ body.menu-style--cover .menu-hero__name::before, body.menu-style--cover .menu-hero__name::after { content: ''; display: block; height: 1px; background: var(--c-text); max-width: 220px; margin: 0 auto; } body.menu-style--cover .menu-hero__name::before { margin-bottom: 0.7rem; } body.menu-style--cover .menu-hero__name::after { margin-top: 0.7rem; } body.menu-style--cover .menu-hero__desc { font-family: var(--f-display); font-style: italic; color: var(--c-text-muted); font-size: 1rem; } /* Nav categorie: barra nera con filetto rosso, etichette maiuscole */ body.menu-style--cover .menu-cats { background: var(--c-text); border-bottom: 2px solid var(--menu-primary); box-shadow: none; } body.menu-style--cover .menu-cats__tab { color: #e9e5db; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 600; border-bottom: none; } body.menu-style--cover .menu-cats__tab:hover { color: #fff; } body.menu-style--cover .menu-cats__tab--active { color: #fff; border-bottom-color: var(--menu-primary); } /* Sezioni: numeri di sezione grandi e sbiaditi + kicker rosso */ body.menu-style--cover .menu-body { counter-reset: cover-sec; } body.menu-style--cover .menu-section { counter-increment: cover-sec; position: relative; overflow: hidden; } body.menu-style--cover .menu-section__title { display: block; font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--c-text); border-bottom: none; padding-bottom: 0; } /* Kicker: filetto rosso sopra il titolo */ body.menu-style--cover .menu-section__title::before { content: ''; display: block; width: 26px; height: 2px; background: var(--menu-primary); margin-bottom: 0.5rem; } /* Numero di sezione grande, sfumato, in alto a destra */ body.menu-style--cover .menu-section__title::after { content: counter(cover-sec, decimal-leading-zero); position: absolute; top: 0.6rem; right: 1rem; font-family: var(--f-display); font-weight: 900; font-size: 4rem; line-height: 0.8; letter-spacing: -0.03em; color: var(--c-text); opacity: 0.10; pointer-events: none; } body.menu-style--cover .menu-section__desc { font-family: var(--f-display); font-style: italic; color: var(--c-text-muted); } /* Piatti: nome e prezzo serif, badge editoriali con contorno */ body.menu-style--cover .dish-card__name { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; } body.menu-style--cover .dish-card__price-current { font-family: var(--f-display); font-weight: 700; color: var(--c-text); } body.menu-style--cover .dish-badge { border-radius: 20px; border: 1px solid var(--c-border); text-transform: uppercase; letter-spacing: 0.05em; background: #f3f1ec; color: #7a756c; } body.menu-style--cover .dish-badge--veg { background: #e7efe4; color: #3f6b3c; border-color: rgba(63,107,60,0.22); } body.menu-style--cover .dish-badge--vegan { background: #e3efe7; color: #2f7a52; border-color: rgba(47,122,82,0.22); } body.menu-style--cover .dish-badge--gf { background: #f1ebe0; color: #9a7326; border-color: rgba(154,115,38,0.22); } /* Footer: fondo nero editoriale, masthead rosso, azioni a contrasto */ body.menu-style--cover .menu-footer__info { background: var(--c-text); border-top: 2px solid var(--menu-primary); color: #f7f4ee; } body.menu-style--cover .menu-footer__name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; color: #f7f4ee; } body.menu-style--cover .menu-footer__address { color: #d8d3c8; } body.menu-style--cover .menu-footer__call { background: #f7f4ee; color: var(--c-text); border-color: #f7f4ee; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; } body.menu-style--cover .menu-footer__call:hover { background: #fff; border-color: #fff; color: var(--c-text); } body.menu-style--cover .menu-footer__wa { border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; } body.menu-style--cover .menu-footer__social a { color: #f7f4ee; border-color: rgba(247,244,238,0.28); } body.menu-style--cover .menu-footer__social a:hover { color: #fff; border-color: var(--menu-primary); } /* ===================================================================== * IOS — soft iOS, grigio #f2f2f7 + blu #0a84ff, card bianche. * Reskin del menù pubblico (markup FISSO): grouped list nativa iOS, * nav categorie come segmented control. Solo CSS, layout invariato. * Demo di riferimento: demo-46-soft-ios. * ===================================================================== */ body.menu-style--ios { --c-bg: #f2f2f7; --c-surface: #ffffff; --c-text: #1c1c1e; --c-text-muted: #8a8a8e; --c-text-subtle: #aeaeb2; --c-border: rgba(60,60,67,0.12); --menu-primary: #0a84ff; --menu-secondary: #0768d4; --f-body: 'Inter', -apple-system, system-ui, sans-serif; --f-display: 'Inter', -apple-system, system-ui, sans-serif; } /* Hero: gradiente blu, testo bianco, angoli inferiori arrotondati */ body.menu-style--ios .menu-hero { background: radial-gradient(120% 90% at 80% -10%, rgba(10,132,255,0.30), transparent 60%), radial-gradient(120% 90% at 0% 0%, rgba(90,200,250,0.22), transparent 55%), linear-gradient(180deg, #0a84ff 0%, #0768d4 100%); color: #fff; border-bottom: none; border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; } body.menu-style--ios .menu-hero__logo { border-color: rgba(255,255,255,0.5); } body.menu-style--ios .menu-hero__name { color: #fff; font-weight: 800; letter-spacing: -0.03em; } body.menu-style--ios .menu-hero__desc { color: rgba(255,255,255,0.9); font-style: normal; font-weight: 500; } /* Nav categorie: segmented control iOS (pillole, attivo bianco con ombra) */ body.menu-style--ios .menu-cats { background: rgba(242,242,247,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--c-border); box-shadow: none; padding: 0.5rem 0.75rem; gap: 0.15rem; } body.menu-style--ios .menu-cats__tab { min-height: 34px; padding: 0.45rem 0.9rem; border-bottom: none; border-radius: 9px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-text); } body.menu-style--ios .menu-cats__tab:hover { color: var(--c-text); } body.menu-style--ios .menu-cats__tab--active { background: #fff; color: var(--menu-primary); border-bottom: none; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.06); } /* Toolbar: ricerca e filtri con angoli morbidi iOS */ body.menu-style--ios .menu-search__input { border-radius: 12px; border-width: 0.5px; background: #fff; } body.menu-style--ios .menu-filter-btn { border-radius: 10px; border-width: 0.5px; } /* Titoli sezione: header di gruppo, niente filetto */ body.menu-style--ios .menu-section__title { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--c-text); border-bottom: none; padding-bottom: 0; padding-left: 0.35rem; } body.menu-style--ios .menu-section__desc { color: var(--c-text-muted); font-weight: 500; padding-left: 0.35rem; } /* Grouped list: .menu-section__dishes come card bianca con ombra sottile */ body.menu-style--ios .menu-section__dishes { background: var(--c-surface); border-radius: 15px; padding: 0 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.05); } /* Righe: separatori tenui e rientrati, come una lista raggruppata */ body.menu-style--ios .dish-card { padding: 0.85rem 0; border-bottom: 0.5px solid var(--c-border); } body.menu-style--ios .dish-card__name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; } body.menu-style--ios .dish-card__desc { color: var(--c-text-muted); font-weight: 400; } body.menu-style--ios .dish-card__price-current { color: var(--c-text); font-weight: 700; } /* Badge dieta: angoli morbidi, tinte iOS */ body.menu-style--ios .dish-badge { border-radius: 8px; font-weight: 600; letter-spacing: -0.01em; } body.menu-style--ios .dish-badge--veg { background: #e5f6ea; color: #248a3d; } body.menu-style--ios .dish-badge--vegan { background: #dff3ec; color: #059d76; } body.menu-style--ios .dish-badge--gf { background: #fbf0dd; color: #b26b00; } /* Footer: card bianca morbida, azioni con angoli e ombre iOS */ body.menu-style--ios .menu-footer__info { background: var(--c-surface); border-top: none; border-radius: 18px; margin: 0.5rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 22px rgba(0,0,0,0.06); } body.menu-style--ios .menu-footer__name { font-weight: 800; letter-spacing: -0.02em; } body.menu-style--ios .menu-footer__wa { border-radius: 13px; box-shadow: 0 5px 14px rgba(37,211,102,0.32); } body.menu-style--ios .menu-footer__call { border-radius: 13px; background: var(--menu-primary); color: #fff; border-color: var(--menu-primary); box-shadow: 0 5px 14px rgba(10,132,255,0.32); } body.menu-style--ios .menu-footer__call:hover { background: var(--menu-secondary); border-color: var(--menu-secondary); color: #fff; } body.menu-style--ios .menu-footer__social a { border-radius: 12px; background: rgba(118,118,128,0.12); border: none; color: var(--c-text); } body.menu-style--ios .menu-footer__social a:hover { color: var(--menu-primary); } /* ===================================================================== * SEAL — terracotta artigianale (demo-47-terracotta-seal) * Display: Fraunces · Body: Manrope * Palette: crema #fbf3ec · terracotta #c45d3e · bruno #3a2a20 * Solo CSS: nessun @import, decori via pseudo-elementi / SVG inline. * ===================================================================== */ body.menu-style--seal { --c-bg: #fbf3ec; --c-surface: #fefaf5; --c-text: #3a2a20; --c-text-muted: #6f5c4e; --c-text-subtle: #a08b78; --c-border: #e6d6c6; --menu-primary: #c45d3e; --menu-secondary: #a84a2e; --f-body: 'Manrope', system-ui, sans-serif; --f-display: 'Fraunces', Georgia, serif; } /* ---------- HERO: fascia terracotta con "granella" chiara ---------- */ body.menu-style--seal .menu-hero { position: relative; overflow: hidden; border-bottom: none; background: radial-gradient(circle at 12% 20%, rgba(255,255,255,.10) 0 2px, transparent 3px), radial-gradient(circle at 82% 68%, rgba(255,255,255,.08) 0 2px, transparent 3px), linear-gradient(180deg, #c45d3e 0%, #b34e30 100%); background-size: 120px 120px, 140px 140px, auto; color: #fdf1e7; } body.menu-style--seal .menu-hero__logo { border-color: rgba(253,241,231,.55); } body.menu-style--seal .menu-hero__name { color: #fdf1e7; font-weight: 500; letter-spacing: .01em; } body.menu-style--seal .menu-hero__desc { color: #ffe6d0; font-style: italic; font-family: var(--f-display); } /* ---------- NAV categorie: chip crema, attiva terracotta ---------- */ body.menu-style--seal .menu-cats { box-shadow: 0 4px 14px -8px rgba(58,42,32,.35); } body.menu-style--seal .menu-cats__tab { text-transform: uppercase; letter-spacing: .06em; font-size: 0.72rem; font-weight: 600; } body.menu-style--seal .menu-cats__tab--active { border-bottom-color: var(--menu-primary); } /* ---------- Ricerca / filtri ---------- */ body.menu-style--seal .menu-search__input:focus { background: var(--c-surface); } body.menu-style--seal .menu-filter-btn { text-transform: lowercase; letter-spacing: .02em; } /* ---------- Sezioni: intestazione centrata con fleuron a stella ---------- */ body.menu-style--seal .menu-section__title { display: block; text-align: center; border-bottom: none; padding-bottom: 0; font-weight: 500; font-size: 1.65rem; letter-spacing: .01em; color: var(--c-text); } body.menu-style--seal .menu-section__title::after { content: ''; display: block; width: 150px; max-width: 60%; height: 14px; margin: 0.55rem auto 0; color: var(--menu-primary); /* stella a 8 punte affiancata da due filetti sfumati */ background: linear-gradient(90deg, transparent, currentColor) left center / 40% 1px no-repeat, linear-gradient(270deg, transparent, currentColor) right center / 40% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l1.8 5.2L14 7l-5.2 1.8L7 14l-1.8-5.2L0 7l5.2-1.8z' fill='%23c45d3e'/%3E%3C/svg%3E") center center / 14px 14px no-repeat; } body.menu-style--seal .menu-section__desc { text-align: center; font-style: italic; font-family: var(--f-display); color: var(--c-text-muted); } /* ---------- Piatto: card crema con accento terracotta ---------- */ body.menu-style--seal .menu-section__dishes { gap: 0.9rem; } body.menu-style--seal .dish-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 1rem 1.1rem 1rem 1.25rem; box-shadow: 0 4px 14px -8px rgba(58,42,32,.35); } body.menu-style--seal .dish-card::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--menu-primary), transparent); opacity: .55; } body.menu-style--seal .dish-card__name { font-family: var(--f-display); font-weight: 500; letter-spacing: .005em; } body.menu-style--seal .dish-card__desc { color: var(--c-text-muted); } body.menu-style--seal .dish-card__price-current { font-family: var(--f-display); font-weight: 600; color: var(--menu-secondary); } body.menu-style--seal .dish-card__price-old { font-style: normal; color: var(--c-text-muted); } /* ---------- Badge dieta: chip terracotta/verde soft con pallino ---------- */ body.menu-style--seal .dish-badge { text-transform: lowercase; letter-spacing: .03em; padding: 0.18rem 0.55rem; gap: 0.3rem; border: 1px solid transparent; } body.menu-style--seal .dish-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; } body.menu-style--seal .dish-badge--veg { background: #eef2e6; color: #5f7d52; border-color: #d9e2c9; } body.menu-style--seal .dish-badge--vegan { background: #e6f0e7; color: #3f7a55; border-color: #cfe4d3; } body.menu-style--seal .dish-badge--gf { background: #f6ecd7; color: #b07d2a; border-color: #ecdcb8; } body.menu-style--seal .dish-card__allergens { color: var(--c-text-subtle); } /* ---------- Footer: scuro bruno con filo terracotta/oro ---------- */ body.menu-style--seal .menu-footer__info { position: relative; background: linear-gradient(180deg, #3a2a20, #2c2018); border-top: none; color: #e9ddd2; } body.menu-style--seal .menu-footer__info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--menu-primary), #c99a5b, var(--menu-primary)); } body.menu-style--seal .menu-footer__name { font-family: var(--f-display); font-weight: 500; color: #fdf1e7; } body.menu-style--seal .menu-footer__address { color: #cdbcae; } body.menu-style--seal .menu-footer__call { color: #e9ddd2; border-color: rgba(255,255,255,.22); } body.menu-style--seal .menu-footer__call:hover { background: rgba(255,255,255,.06); border-color: var(--menu-primary); color: #fff; } body.menu-style--seal .menu-footer__social a { color: #e9ddd2; border-color: rgba(255,255,255,.18); } body.menu-style--seal .menu-footer__social a:hover { color: #fff; border-color: var(--menu-primary); } body.menu-style--seal .menu-footer__credit a { color: var(--c-text-muted); } /* ===================================================================== * MARMO — eleganza silenziosa (demo-48-marble-minimal) * Display: Cormorant Garamond · Body: Jost * Palette: grigio #f4f4f6 · taupe #a89b86 · inchiostro #2b2b2e * Marmo appena percettibile via gradienti larghissimi, bassissimo contrasto. * ===================================================================== */ body.menu-style--marmo { --c-bg: #f4f4f6; --c-surface: #fbfbfc; --c-text: #2b2b2e; --c-text-muted: #6b6b70; --c-text-subtle: #a89b86; --c-border: #e4e2e0; --menu-primary: #8a7d68; /* taupe-deep */ --menu-secondary: #a89b86; /* taupe */ --f-body: 'Jost', system-ui, sans-serif; --f-display: 'Cormorant Garamond', Georgia, serif; } /* Venatura di marmo appena accennata sull'intera colonna del menù */ body.menu-style--marmo main { background: radial-gradient(120% 80% at 15% 6%, rgba(255,255,255,.55) 0%, transparent 45%), radial-gradient(130% 90% at 88% 26%, rgba(168,155,134,.05) 0%, transparent 50%), radial-gradient(100% 70% at 50% 100%, rgba(168,155,134,.045) 0%, transparent 55%), linear-gradient(115deg, #f6f6f8 0%, #f2f1f3 40%, #f4f3f4 70%, #f1f0f2 100%); } /* ---------- HERO: solo tipografia, filetto sottile ---------- */ body.menu-style--marmo .menu-hero { background: transparent; border-bottom: 1px solid var(--c-border); padding-bottom: 2rem; } body.menu-style--marmo .menu-hero__logo { border-color: var(--c-text-subtle); } body.menu-style--marmo .menu-hero__name { color: var(--c-text); font-weight: 500; letter-spacing: .01em; line-height: 1.05; } body.menu-style--marmo .menu-hero__desc { font-family: var(--f-display); font-style: italic; color: var(--c-text-muted); font-size: 1rem; } /* ---------- NAV categorie: maiuscoletto spaziato, filetto taupe ---------- */ body.menu-style--marmo .menu-cats { background: rgba(244,244,246,.9); box-shadow: none; border-bottom: 1px solid var(--c-border); } body.menu-style--marmo .menu-cats__tab { text-transform: uppercase; letter-spacing: .14em; font-size: 0.68rem; font-weight: 500; } body.menu-style--marmo .menu-cats__tab--active { color: var(--c-text); border-bottom-color: var(--menu-primary); } /* ---------- Ricerca / filtri: minimali, angoli appena morbidi ---------- */ body.menu-style--marmo .menu-search__input, body.menu-style--marmo .menu-filter-btn { border-radius: 3px; } body.menu-style--marmo .menu-filter-btn { text-transform: uppercase; letter-spacing: .1em; font-size: 0.7rem; } /* ---------- Sezioni: titolo serif centrato + rombo taupe ---------- */ body.menu-style--marmo .menu-section__title { display: block; text-align: center; border-bottom: none; padding-bottom: 0; font-family: var(--f-display); font-weight: 500; font-size: 1.95rem; letter-spacing: .03em; color: var(--c-text); } body.menu-style--marmo .menu-section__title::after { content: ''; display: block; width: 6px; height: 6px; margin: 0.9rem auto 0; background: var(--menu-secondary); transform: rotate(45deg); opacity: .7; } body.menu-style--marmo .menu-section__desc { text-align: center; text-transform: uppercase; letter-spacing: .24em; font-size: 0.62rem; color: var(--menu-primary); } /* ---------- Piatto: filetti finissimi, molta aria ---------- */ body.menu-style--marmo .dish-card { padding: 1.15rem 0; border-bottom: 1px solid #eceae8; } body.menu-style--marmo .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .01em; } body.menu-style--marmo .dish-card__desc { font-weight: 300; color: var(--c-text-muted); } body.menu-style--marmo .dish-card__price-current { font-weight: 500; color: var(--c-text); border-bottom: 1.5px solid var(--menu-secondary); padding-bottom: 1px; } body.menu-style--marmo .dish-card__price-old { font-weight: 300; color: #b3aca0; } /* ---------- Badge dieta: quadrati, minuscoli, maiuscoletto ---------- */ body.menu-style--marmo .dish-badge { border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 0.58rem; padding: 0.2rem 0.45rem; gap: 0.3rem; border: 1px solid transparent; } body.menu-style--marmo .dish-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } body.menu-style--marmo .dish-badge--veg { background: #eef1ec; color: #6f8768; border-color: #dbe2d6; } body.menu-style--marmo .dish-badge--vegan { background: #e9f0ea; color: #4f7a5e; border-color: #d4e2d7; } body.menu-style--marmo .dish-badge--gf { background: #f3ede0; color: #a98a4e; border-color: #e6dcc4; } body.menu-style--marmo .dish-card__allergens { color: var(--c-text-muted); letter-spacing: .04em; } /* ---------- Footer: grigio caldo, filetti taupe ---------- */ body.menu-style--marmo .menu-footer__info { background: #ecebee; border-top: 1px solid var(--c-border); color: var(--c-text); } body.menu-style--marmo .menu-footer__name { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; letter-spacing: .02em; } body.menu-style--marmo .menu-footer__address { font-weight: 300; color: var(--c-text-muted); } body.menu-style--marmo .menu-footer__wa { background: var(--c-text); color: #f4f4f6; border-radius: 3px; text-transform: uppercase; letter-spacing: .16em; font-size: 0.72rem; box-shadow: none; } body.menu-style--marmo .menu-footer__wa:hover { background: #000; transform: none; box-shadow: none; color: #f4f4f6; } body.menu-style--marmo .menu-footer__call { border-radius: 3px; text-transform: uppercase; letter-spacing: .16em; font-size: 0.7rem; border-color: var(--menu-secondary); } body.menu-style--marmo .menu-footer__social a { border-radius: 3px; color: var(--menu-primary); } body.menu-style--marmo .menu-footer__social a:hover { color: var(--c-text); border-color: var(--menu-secondary); } /* ===================================================================== * PASTEL — allegro ed elegante (demo-49-vibrant-pastel) * Display: Fraunces · Body: Nunito * Palette: bianco caldo #fff5f0 · corallo #ff6b6b · teal #2bb3a3 * Intestazioni di sezione su fondo pastello soft, card morbide arrotondate. * ===================================================================== */ body.menu-style--pastel { --c-bg: #fff5f0; --c-surface: #ffffff; --c-text: #3a2e2a; --c-text-muted: #7c6f68; --c-text-subtle: #a99a92; --c-border: #f2dfd6; --menu-primary: #ff6b6b; /* corallo */ --menu-secondary: #2bb3a3; /* teal */ --f-body: 'Nunito', system-ui, sans-serif; --f-display: 'Fraunces', Georgia, serif; } /* ---------- HERO: sfondo pastello sfumato ---------- */ body.menu-style--pastel .menu-hero { border-bottom: none; background: radial-gradient(circle at 20% 0%, rgba(255,143,107,.30), transparent 45%), radial-gradient(circle at 85% 15%, rgba(43,179,163,.22), transparent 45%), linear-gradient(160deg, #fff8f4, #fff1ea); } body.menu-style--pastel .menu-hero__logo { border-color: #ffffff; } body.menu-style--pastel .menu-hero__name { font-weight: 600; letter-spacing: -0.01em; color: var(--menu-primary); } body.menu-style--pastel .menu-hero__desc { font-style: normal; font-weight: 700; color: var(--c-text-muted); } /* ---------- NAV categorie: pill bianche, attiva corallo ---------- */ body.menu-style--pastel .menu-cats { background: rgba(255,245,240,.92); border-bottom: 1px solid var(--c-border); box-shadow: none; } body.menu-style--pastel .menu-cats__tab { font-weight: 800; font-size: 0.8rem; } body.menu-style--pastel .menu-cats__tab--active { color: var(--menu-primary); border-bottom-color: var(--menu-primary); } /* ---------- Ricerca / filtri: tondi e morbidi ---------- */ body.menu-style--pastel .menu-filter-btn { font-weight: 800; } /* ---------- Sezioni: titolo su fondo pastello arrotondato ---------- */ body.menu-style--pastel .menu-section__title { display: block; border-bottom: none; padding: 0.6rem 1rem; border-radius: 18px; font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; box-shadow: 0 4px 14px -8px rgba(180,90,70,.35); /* fondo pastello di default (antipasti — pesca) */ background: #ffe0d6; color: #c9502f; } /* Alternanza pastello coordinata per sezione */ body.menu-style--pastel .menu-section:nth-of-type(5n+1) .menu-section__title { background: #ffe0d6; color: #c9502f; } body.menu-style--pastel .menu-section:nth-of-type(5n+2) .menu-section__title { background: #e6f3d9; color: #4e7a2c; } body.menu-style--pastel .menu-section:nth-of-type(5n+3) .menu-section__title { background: #ffe3ea; color: #c23a6a; } body.menu-style--pastel .menu-section:nth-of-type(5n+4) .menu-section__title { background: #efe3ff; color: #6a4fbf; } body.menu-style--pastel .menu-section:nth-of-type(5n+5) .menu-section__title { background: #d9f2ee; color: #1f8377; } body.menu-style--pastel .menu-section__desc { font-weight: 700; color: var(--c-text-muted); margin-top: 0.6rem; } /* ---------- Piatto: card bianca morbida e arrotondata ---------- */ body.menu-style--pastel .menu-section__dishes { gap: 0.85rem; } body.menu-style--pastel .dish-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; padding: 1rem 1.05rem; box-shadow: 0 4px 14px -8px rgba(180,90,70,.35); } body.menu-style--pastel .dish-card__name { font-weight: 800; letter-spacing: -0.01em; } body.menu-style--pastel .dish-card__desc { font-weight: 600; color: var(--c-text-muted); } body.menu-style--pastel .dish-card__price-current { font-weight: 900; color: var(--menu-primary); } body.menu-style--pastel .dish-card__price-old { font-weight: 700; color: var(--c-text-muted); text-decoration-color: var(--menu-primary); } /* ---------- Badge dieta: pill piene, allegre ---------- */ body.menu-style--pastel .dish-badge { font-weight: 800; padding: 0.2rem 0.6rem; gap: 0.3rem; } body.menu-style--pastel .dish-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } body.menu-style--pastel .dish-badge--veg { background: #e4f4d8; color: #3f7a1f; } body.menu-style--pastel .dish-badge--vegan { background: #d4f0e0; color: #1f7a52; } body.menu-style--pastel .dish-badge--gf { background: #fdeecb; color: #9a6a12; } body.menu-style--pastel .dish-card__allergens { color: var(--c-text-subtle); } /* ---------- Footer: pastello caldo, bottoni pieni ---------- */ body.menu-style--pastel .menu-footer__info { background: linear-gradient(160deg, #fff8f4, #ffeee7); border-top: 1px solid var(--c-border); color: var(--c-text); } body.menu-style--pastel .menu-footer__name { font-family: var(--f-display); font-weight: 600; color: var(--c-text); } body.menu-style--pastel .menu-footer__address { font-weight: 700; color: var(--c-text-muted); } body.menu-style--pastel .menu-footer__wa { background: var(--menu-secondary); border-radius: 14px; font-weight: 800; box-shadow: 0 4px 14px -8px rgba(43,179,163,.6); } body.menu-style--pastel .menu-footer__wa:hover { background: #229b8d; color: #fff; } body.menu-style--pastel .menu-footer__call { background: var(--menu-primary); border-color: var(--menu-primary); color: #fff; border-radius: 14px; font-weight: 800; } body.menu-style--pastel .menu-footer__call:hover { background: #f25555; border-color: #f25555; color: #fff; } body.menu-style--pastel .menu-footer__social a { border-radius: 14px; font-weight: 800; color: var(--c-text); } body.menu-style--pastel .menu-footer__social a:hover { color: var(--menu-secondary); border-color: var(--menu-secondary); } /* ===================================================================== * LETTERPRESS — inchiostro su carta (demo-50-ink-paper) * Display: Playfair Display · Body: EB Garamond * Palette: carta calda #f3ead9 · inchiostro #232019 · oxblood #7c3a2d * Ornamenti tipografici (filetti, fleuron ✦), lieve effetto "impresso", * leader dots tra nome piatto e prezzo. Solo CSS. * ===================================================================== */ body.menu-style--letterpress { --c-bg: #f3ead9; --c-surface: #f7efe1; --c-text: #232019; --c-text-muted: #5c5346; --c-text-subtle: #8a7c66; --c-border: #d7c8ab; --menu-primary: #7c3a2d; /* oxblood */ --menu-secondary: #9a7b3f; /* gold */ --f-body: 'EB Garamond', Georgia, serif; --f-display: 'Playfair Display', Georgia, serif; } /* Grana di carta appena percettibile su tutta la colonna */ body.menu-style--letterpress main { background-image: repeating-linear-gradient(0deg, rgba(35,32,25,.012) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(35,32,25,.012) 0 1px, transparent 1px 3px); } /* ---------- HERO: titolo impresso, filetto oxblood ---------- */ body.menu-style--letterpress .menu-hero { border-bottom: 2px solid var(--c-text); background: var(--c-surface); } body.menu-style--letterpress .menu-hero__logo { border-color: var(--c-text); } body.menu-style--letterpress .menu-hero__name { color: var(--c-text); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 1px rgba(35,32,25,.10); } body.menu-style--letterpress .menu-hero__desc { font-family: var(--f-display); font-style: italic; color: var(--menu-primary); font-size: 1rem; } /* Fleuron sotto il nome del locale */ body.menu-style--letterpress .menu-hero__name::after { content: '\2726'; /* ✦ */ display: block; color: var(--menu-primary); font-size: 0.8rem; letter-spacing: .3em; margin-top: 0.5rem; text-shadow: none; } /* ---------- NAV categorie: maiuscoletto serif, filo inchiostro ---------- */ body.menu-style--letterpress .menu-cats { background: rgba(243,234,217,.94); border-bottom: 1px solid var(--c-text); box-shadow: 0 3px 0 -1px var(--c-text), 0 4px 10px -6px rgba(35,32,25,.4); } body.menu-style--letterpress .menu-cats__tab { font-family: var(--f-body); text-transform: uppercase; letter-spacing: .14em; font-size: 0.78rem; font-weight: 600; color: var(--c-text); } body.menu-style--letterpress .menu-cats__tab--active { color: var(--menu-primary); border-bottom-color: var(--menu-primary); } /* ---------- Ricerca / filtri: squadrati, tipografici ---------- */ body.menu-style--letterpress .menu-search__input, body.menu-style--letterpress .menu-filter-btn { border-radius: 2px; } body.menu-style--letterpress .menu-filter-btn { text-transform: uppercase; letter-spacing: .1em; font-size: 0.72rem; } /* ---------- Sezioni: titolo impresso tra fleuron ---------- */ body.menu-style--letterpress .menu-section__title { display: block; text-align: center; border-bottom: none; padding-bottom: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text); text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 1px rgba(35,32,25,.10); } body.menu-style--letterpress .menu-section__title::before { content: '\2014\00A0\2726\00A0\2014'; /* — ✦ — */ display: block; color: var(--menu-primary); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 0.4rem; text-shadow: none; } body.menu-style--letterpress .menu-section__desc { text-align: center; font-style: italic; font-size: 0.95rem; color: var(--c-text-muted); } /* ---------- Piatto: filetto sottile, leader dots verso il prezzo ---------- */ body.menu-style--letterpress .dish-card { padding: 1rem 0; border-bottom: 1px solid var(--c-border); } body.menu-style--letterpress .dish-card__name { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; } /* leader dots: fila di puntini che segue il nome verso destra */ body.menu-style--letterpress .dish-card__name::after { content: ''; flex: 1 1 auto; min-width: 14px; align-self: flex-end; margin-bottom: 0.35rem; border-bottom: 1.5px dotted var(--c-border); } body.menu-style--letterpress .dish-card__desc { font-style: italic; font-size: 0.9rem; color: var(--c-text-muted); } body.menu-style--letterpress .dish-card__price-current { font-family: var(--f-display); font-weight: 700; color: var(--menu-primary); } body.menu-style--letterpress .dish-card__price-old { color: var(--c-text-muted); text-decoration-color: var(--menu-primary); } /* ---------- Badge dieta: etichette impresse, maiuscoletto ---------- */ body.menu-style--letterpress .dish-badge { font-family: var(--f-body); border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.5rem; } body.menu-style--letterpress .dish-badge--veg { background: #e2ecd4; color: #4a6a2c; box-shadow: inset 0 0 0 1px #c3d6a6; } body.menu-style--letterpress .dish-badge--vegan { background: #d7e8dd; color: #2f6146; box-shadow: inset 0 0 0 1px #b0d0bd; } body.menu-style--letterpress .dish-badge--gf { background: #efe1c2; color: #8a6a2a; box-shadow: inset 0 0 0 1px #d8c491; } body.menu-style--letterpress .dish-card__allergens { color: var(--c-text-muted); font-style: italic; } /* ---------- Footer: inchiostro pieno, oro tipografico ---------- */ body.menu-style--letterpress .menu-footer__info { position: relative; background: var(--c-text); border-top: none; color: var(--c-bg); } body.menu-style--letterpress .menu-footer__info::before { content: '\2726\00A0\2766\00A0\2726'; /* ✦ ❦ ✦ */ display: block; color: var(--menu-secondary); font-size: 1rem; letter-spacing: .4em; margin-bottom: 0.85rem; } body.menu-style--letterpress .menu-footer__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-bg); } body.menu-style--letterpress .menu-footer__address { font-style: italic; color: #cdbfa5; } body.menu-style--letterpress .menu-footer__wa { background: var(--menu-primary); color: var(--c-bg); border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; font-size: 0.78rem; box-shadow: inset 0 0 0 1px #a5584a; } body.menu-style--letterpress .menu-footer__wa:hover { background: #6a3025; color: var(--c-bg); transform: none; box-shadow: inset 0 0 0 1px #a5584a; } body.menu-style--letterpress .menu-footer__call { background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg); border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; font-size: 0.75rem; } body.menu-style--letterpress .menu-footer__call:hover { background: #e6d9bd; border-color: #e6d9bd; color: var(--c-text); } body.menu-style--letterpress .menu-footer__social a { border-radius: 50%; color: var(--c-bg); border-color: #4a4238; } body.menu-style--letterpress .menu-footer__social a:hover { color: var(--menu-secondary); border-color: var(--menu-secondary); }