/* ============================================================================ menu-digitale-v2 — design system "Organic" (port fedele del prototipo Claude Design "La Lampara", variante v1 a chip pillola) ---------------------------------------------------------------------------- Prefisso classi: md-. L'accent viene sovrascritto a runtime da theme.primary_color del menu (main.js). Dark mode: classe .md-dark sul , che ridefinisce i token neutri. ========================================================================== */ /* Font: Roboto FISSO per tutti i menu (come il template 5 storico), caricato esplicitamente — gli iPhone non hanno Roboto di sistema e il fallback cambierebbe le metriche (e gli allineamenti ottici) da device a device. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap'); :root{ --accent:#C67139; --on-accent:#fff; --bg:#f9f4ed; --bg-outer:#f5ead8; --card:#fdfaf5; --card2:#eee7db; --ink:#201e1d; --ink2:#7d7466; --line:#ddd3c1; --scrim:rgba(32,30,29,.5); --shadow:0 1px 4px rgba(32,30,29,.06); --stripes:repeating-linear-gradient(45deg,#eee7db 0 10px,#f9f4ed 10px 20px); --stripes-cover:repeating-linear-gradient(45deg,#474238 0 16px,#57503f 16px 32px); --radius-lg:16px; --radius-md:12px; /* banda categoria aperta: scuro TINTO dell'accent del locale (mai nero pieno) — con l'accent terracotta viene un bruno ramato, con un accent blu un blu notte. Testo/icona chiari fissi, il fondo resta scuro anche in dark mode */ --band-open:color-mix(in oklab, var(--accent) 35%, #241f1a); --band-ink:#F7F1E8; --band-accent:color-mix(in oklab, var(--accent) 55%, #fff); --font-heading:'Roboto',system-ui,sans-serif; --font-body:'Roboto',system-ui,sans-serif; } .md-dark{ --bg:#2e2b25; --bg-outer:#201e1d; --card:#3a352d; --card2:#474238; --ink:#f9f4ed; --ink2:#a19786; --line:#474238; --scrim:rgba(0,0,0,.62); --shadow:0 2px 14px rgba(0,0,0,.35); --stripes:repeating-linear-gradient(45deg,#3a352d 0 10px,#474238 10px 20px); /* in dark il fondo circostante è già scuro: banda un filo più satura e profonda per staccare da --card2 */ --band-open:color-mix(in oklab, var(--accent) 42%, #15100c); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:var(--bg-outer);font-family:var(--font-body);-webkit-font-smoothing:antialiased;transition:background .3s ease} /* touch-action:manipulation: niente double-tap zoom sui tap rapidi (es. "+" ripetuto), il pinch-to-zoom resta disponibile */ button{font-family:var(--font-body);cursor:pointer;touch-action:manipulation} a{color:var(--accent);touch-action:manipulation} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} @keyframes md-pop1{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}} @keyframes md-pop2{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}} @keyframes md-fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes md-fadeIn{from{opacity:0}to{opacity:1}} @keyframes md-spin{to{transform:rotate(360deg)}} /* la barra comanda è centrata con translateX(-50%): il keyframe deve ripeterlo, altrimenti durante l'animazione il transform di base viene sovrascritto e la barra "salta" (bug del prototipo originale) */ @keyframes md-barUp{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} /* colonna app */ .md-wrap{min-height:100vh;max-width:560px;margin:0 auto;background:var(--bg);color:var(--ink);padding-bottom:110px;box-shadow:0 0 0 1px var(--line);transition:background .3s ease,color .3s ease} .md-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:14px;color:var(--ink2)} .md-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:md-spin .8s linear infinite} /* ---------- splash ---------- */ .md-splash{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:linear-gradient(rgba(16,22,24,.5),rgba(16,22,24,.78)),var(--stripes-cover);background-size:cover;background-position:center;opacity:1;transition:opacity .45s ease} .md-splash.fade{opacity:0} .md-splash__bar{position:absolute;top:14px;right:14px} .md-splash__inner{text-align:center;padding:0 24px;animation:md-fadeUp .6s ease} .md-splash__logo{max-width:min(300px,70vw);max-height:160px;object-fit:contain;border-radius:12px} .md-splash__name{font-family:var(--font-heading);font-weight:700;font-size:40px;color:#fff;line-height:1.05} .md-splash__sub{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.28em;color:rgba(255,255,255,.75);text-transform:uppercase} .md-splash__cta{display:inline-block;margin-top:36px;background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;padding:15px 34px;font-size:16px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:filter .15s} .md-splash__cta:hover{filter:brightness(1.08)} .md-splash__made{position:absolute;bottom:22px;display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.65)} .md-splash__made .md-bpos{background:rgba(255,255,255,.14);border:none} .md-splash__made .md-bpos b{color:#fff} /* badge "made with bPOS" (splash + footer) */ .md-bpos{display:inline-flex;align-items:center;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:3px 7px;text-decoration:none} .md-bpos i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:4px;background:var(--accent);color:#fff;font-weight:800;font-size:10px;font-style:normal} .md-bpos b{font-weight:700;color:var(--ink);font-size:12px} /* ---------- copertina ---------- */ .md-cover{position:relative;height:172px;overflow:hidden;border-radius:0 0 var(--radius-lg) var(--radius-lg);background-image:linear-gradient(rgba(20,28,30,.38),rgba(20,28,30,.6)),var(--stripes-cover);background-size:cover;background-position:center} .md-cover__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:8px} .md-cover__logo{max-height:100px;max-width:60%;object-fit:contain;border-radius:10px} .md-cover__name{font-family:var(--font-heading);font-weight:700;font-size:26px;color:#fff;text-align:center;padding:0 70px} .md-cover__sub{font-size:10px;font-weight:600;letter-spacing:.26em;color:rgba(255,255,255,.75);margin-top:3px;text-transform:uppercase} .md-cover__bar{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center} .md-cover__right{display:flex;gap:8px;align-items:center} .md-iconbtn{position:relative;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center} .md-langseg{display:flex;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:3px} .md-langseg button{border:none;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;background:transparent;color:#fff} .md-langseg button.on{background:#fff;color:#201e1d} /* variante pill (3+ lingue): bandiera + codice della corrente, tap -> picker */ .md-langseg--pill{border:none;cursor:pointer} .md-langseg--pill .on{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#201e1d;border-radius:999px;padding:4px 12px 4px 9px} .md-langseg--pill i{font-style:normal;font-size:15px;line-height:1.4} .md-langseg--pill b{font-size:12px;font-weight:700;letter-spacing:.02em} /* righe del picker lingua: riusa .md-chrow, badge col codice */ .md-chrow--lang{width:100%;font-family:var(--font-body);cursor:pointer;text-align:left} .md-chrow--lang .md-chrow__ico{background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:17px} .md-chrow--lang.on{border-color:var(--accent)} .md-chrow--lang.on .md-chrow__ico{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* icona carrello disegnata in CSS (come il prototipo) */ .md-carticon{position:relative;width:16px;height:13px;display:inline-block;margin-top:4px} .md-carticon i{position:absolute;top:-6px;left:3px;width:10px;height:9px;border:2px solid #fff;border-bottom:none;border-radius:6px 6px 0 0} .md-carticon b{position:absolute;inset:0;border:2px solid #fff;border-radius:3px 3px 5px 5px} .md-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px} /* ---------- barra chip categorie (sticky + scrollspy) ---------- */ .md-chipbar{position:sticky;top:0;z-index:30;background:linear-gradient(var(--bg) 72%,transparent);padding:12px 0 16px} .md-chipbar__scroll{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none} .md-chipbar__scroll::-webkit-scrollbar{display:none} .md-chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--shadow);transition:background .2s ease,color .2s ease,border-color .2s ease} .md-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* ---------- sezione e categorie a bande ---------- */ .md-sect{padding:2px 16px 18px} .md-sect__head{display:flex;align-items:baseline;gap:10px;padding:0 2px} .md-sect__title{font-family:var(--font-heading);font-weight:700;font-size:21px} .md-sect__sub{font-size:12.5px;color:var(--ink2);font-weight:500} .md-cats{margin-top:12px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)} .md-band{background:var(--card2);border-top:1px solid var(--line);scroll-margin-top:70px;transition:background .25s ease} .md-band:first-child{border-top:none} .md-band.open{background:var(--band-open)} .md-band__btn{display:flex;width:100%;align-items:center;gap:10px;padding:16px;background:none;border:none;text-align:left} .md-band__title{flex:1;font-size:16px;font-weight:700;color:var(--ink)} .md-band.open .md-band__title{color:var(--band-ink)} /* chevron disegnato in CSS dentro il cerchio (niente glifi tipografici): chiuso = punta in giù, aperto = il cerchio ruota di 180° e punta in su */ .md-band__ico{position:relative;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink2);color:var(--ink2);transition:transform .3s ease,color .25s ease,border-color .25s ease} .md-band__ico::after{content:'';position:absolute;top:50%;left:50%;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translate(-50%,-70%) rotate(45deg)} .md-band.open .md-band__ico{border-color:var(--band-accent);color:var(--band-accent);transform:rotate(180deg)} .md-band__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1)} .md-band.open .md-band__body{grid-template-rows:1fr} .md-band__clip{overflow:hidden;min-height:0} .md-band__inner{padding:0 16px 6px;background:var(--card)} /* nota libera: testo a filo del contenuto, senza box (deciso 2026-07-28). L'HTML del ristoratore arriva appiattito a
(v. sanitizeNoteHtml in main.js), quindi il respiro tra i blocchi che davano

/ lo si rimette qui a mano. */ .md-note{margin-top:12px;padding:0 2px;font-size:13px;color:var(--ink2);line-height:1.55} .md-note>*+*{margin-top:8px} /* ---------- riga piatto ---------- */ .md-dish{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);align-items:flex-start} .md-dish--off{opacity:.55} .md-dish__thumb{flex:0 0 auto;width:56px;height:56px;border-radius:var(--radius-md);border:1px solid var(--line);background-image:var(--stripes);background-size:cover;background-position:center;cursor:zoom-in;padding:0} .md-dish__body{flex:1;min-width:0} .md-dish__name{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)} .md-dish__desc{font-size:13px;color:var(--ink2);line-height:1.4;margin-top:2px} .md-alg{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap;align-items:center} .md-alg__chip{width:21px;height:21px;border-radius:50%;border:1px solid var(--line);background:var(--card2);padding:2px;display:flex;align-items:center;justify-content:center} .md-alg__chip img{width:100%;height:100%;object-fit:contain} .md-alg__name{font-size:11.5px;font-weight:600;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;animation:md-fadeIn .2s ease} .md-dish__talg{font-size:12px;font-style:italic;color:var(--ink2);line-height:1.45;margin-top:6px} .md-dish__right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto} .md-dish__price{font-size:15px;font-weight:700;white-space:nowrap} .md-qty{display:flex;gap:6px;align-items:center} .md-minus{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(192,80,63,.5);background:transparent;color:#C0503F;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:md-fadeIn .25s ease} .md-add{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);background:var(--card2);color:var(--accent);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center} .md-add.in{background:var(--accent);color:var(--on-accent)} .md-add.pop1{animation:md-pop1 .35s ease} .md-add.pop2{animation:md-pop2 .35s ease} /* ---------- card allergeni + recensioni ---------- */ .md-card{margin:10px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow)} .md-card__title{font-family:var(--font-heading);font-weight:700;font-size:18px} .md-card__text{font-size:13px;color:var(--ink2);line-height:1.55;margin:8px 0 12px} .md-legendbtn{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;font-size:14px;font-weight:700;color:var(--accent)} .md-chev{width:7px;height:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .3s ease} .md-chev.up{transform:rotate(-135deg) translate(-1px,-1px)} .md-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:14px;animation:md-fadeUp .25s ease} .md-legend__row{display:flex;align-items:center;gap:8px} .md-legend__ico{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--card2);padding:2px} .md-legend__ico img{width:100%;height:100%;object-fit:contain} .md-legend__name{font-size:13px;font-weight:500} .md-rev{margin:14px 16px 0;text-align:center;padding:20px 18px} .md-rev__star{font-size:24px;color:var(--accent);line-height:1} .md-rev__title{font-family:var(--font-heading);font-weight:700;font-size:18px;margin-top:8px} .md-rev__sub{font-size:13px;color:var(--ink2);line-height:1.5;margin:6px auto 14px;max-width:320px} .md-rev__cta{background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;padding:12px 24px;font-size:14px;font-weight:700;transition:filter .15s} .md-rev__cta:hover{filter:brightness(1.08)} .md-made{display:flex;align-items:center;justify-content:center;gap:6px;padding:26px 0 6px;font-size:12px;color:var(--ink2)} /* ---------- barra comanda fissa ---------- */ .md-cartbar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));z-index:40;display:flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;padding:13px 18px;box-shadow:0 8px 26px rgba(0,0,0,.28);animation:md-barUp .3s ease} .md-cartbar__n{min-width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.28);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px} .md-cartbar__n.pop1{animation:md-pop1 .35s ease} .md-cartbar__n.pop2{animation:md-pop2 .35s ease} .md-badge.pop1{animation:md-pop1 .35s ease} .md-badge.pop2{animation:md-pop2 .35s ease} .md-cartbar__label{flex:1;text-align:left;font-size:15px;font-weight:700} .md-cartbar__tot{font-size:15px;font-weight:800} .md-cartbar__chev{width:8px;height:8px;border-right:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85);transform:rotate(-135deg);margin-bottom:-3px} /* ---------- bottom sheet comanda ---------- */ .md-scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s ease} .md-scrim.on{opacity:1;pointer-events:auto} .md-sheet{position:fixed;bottom:0;left:50%;z-index:51;width:min(560px,100%);transform:translateX(-50%) translateY(115%);transition:transform .38s cubic-bezier(.32,.72,0,1);background:var(--card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.2);max-height:78vh;display:flex;flex-direction:column} .md-sheet.on{transform:translateX(-50%) translateY(0)} .md-sheet__grab{padding:11px 0 5px;cursor:grab;touch-action:none} .md-sheet__grab span{display:block;width:44px;height:5px;border-radius:999px;background:var(--line);margin:0 auto} .md-sheet__head{display:flex;align-items:center;padding:6px 20px 12px;gap:10px} .md-sheet__title{font-family:var(--font-heading);font-weight:700;font-size:20px;flex:1} .md-sheet__clear{background:none;border:none;padding:0;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:underline;transition:color .15s} .md-sheet__clear.arm{background:#C0503F;color:#fff;text-decoration:none;border-radius:999px;padding:7px 12px;animation:md-fadeIn .2s ease} .md-sheet__scroll{overflow-y:auto;padding:0 20px;flex:1} .md-empty{text-align:center;padding:30px 20px 44px} .md-empty__ico{width:52px;height:52px;border-radius:50%;border:2px dashed var(--line);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:22px;font-weight:600} .md-empty__title{font-size:15px;font-weight:700} .md-empty__hint{font-size:13px;color:var(--ink2);line-height:1.5;margin:6px auto 0;max-width:280px} .md-crow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)} .md-crow__body{flex:1;min-width:0} .md-crow__name{font-size:14px;font-weight:600;line-height:1.3} .md-crow__unit{font-size:12px;color:var(--ink2);margin-top:2px} .md-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--card2)} .md-step button{width:30px;height:30px;border:none;background:none;color:var(--accent);font-size:17px;font-weight:700;border-radius:999px} .md-step span{min-width:20px;text-align:center;font-size:14px;font-weight:700} .md-crow__tot{width:70px;text-align:right;font-size:14px;font-weight:700;white-space:nowrap} /* coperto: stessa riga della comanda ma non è un articolo -> bordo tratteggiato e "-" spento quando si è al minimo (1), che non si può scendere sotto */ .md-crow--cover{border-top-style:dashed} .md-step button[disabled]{opacity:.35} .md-sheet__foot{border-top:1px solid var(--line);padding:14px 20px 20px;display:flex;align-items:center;gap:14px} .md-sheet__totlbl{font-size:12px;font-weight:600;color:var(--ink2)} .md-sheet__tot{font-family:var(--font-heading);font-weight:700;font-size:23px} .md-sheet__back{margin-left:auto;background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;padding:13px 24px;font-size:14px;font-weight:700} /* ---------- modal foto piatto + recensioni ---------- */ /* z-index 70 > splash (60): il picker lingua deve poter aprirsi SOPRA la splash; foto piatto e recensioni tanto vivono solo a catalogo visibile */ .md-modal{position:fixed;inset:0;z-index:70;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:24px;animation:md-fadeIn .25s ease} .md-photo{background:var(--card);border-radius:var(--radius-lg);overflow:hidden;width:min(420px,100%);box-shadow:0 20px 50px rgba(0,0,0,.35);animation:md-fadeUp .3s ease} .md-photo__img{height:235px;background-image:var(--stripes);background-size:cover;background-position:center;position:relative} .md-photo__x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:var(--card);color:var(--ink);font-size:15px;font-weight:700} .md-photo__pad{padding:16px 18px 18px} .md-photo__name{font-size:17px;font-weight:700;line-height:1.3} .md-photo__desc{font-size:13px;color:var(--ink2);line-height:1.45;margin-top:4px} .md-photo__price{font-size:16px;font-weight:800;color:var(--accent);margin-top:10px} .md-revmodal{background:var(--card);border-radius:var(--radius-lg);width:min(380px,100%);padding:22px 20px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:md-fadeUp .3s ease} .md-revmodal__title{font-family:var(--font-heading);font-weight:700;font-size:19px;text-align:center} .md-revmodal__text{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:10px 0 0} .md-revmodal__text--lead{color:var(--ink);font-weight:600} .md-revmodal__list{display:flex;flex-direction:column;gap:10px;margin-top:12px} .md-chrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card2);border-radius:var(--radius-md);padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s} .md-chrow:hover{border-color:var(--accent)} .md-chrow__ico{width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center} .md-chrow__name{font-size:14.5px;font-weight:700} .md-revmodal__close{margin-top:16px;width:100%;background:none;border:none;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:underline}