/* Webica Menu — public menu framework CSS. Per-venue theme CSS variables + Google-fonts @import are injected inline in the page ; this file is the static framework. Theme-specific layout overrides are scoped under body.style-. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Clear the fixed bottom bar (56px) + iOS home-indicator safe area (QW7a). */ padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px)); margin: 0; -webkit-text-size-adjust: 100%; } /* ── HERO ─────────────────────────────────── */ .hero { position: relative; overflow: hidden; } .hero--cover { height: 250px; display: flex; align-items: flex-end; justify-content: center; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.3) 100%); } .hero--cover .hero-content { position: relative; z-index: 2; text-align: center; padding: 24px 20px 28px; width: 100%; } .hero--cover .hero-name, .hero--cover .hero-desc { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); } .hero--solid { padding: 56px 24px 40px; text-align: center; background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg) 100%); } .hero--solid .hero-content { position: relative; z-index: 2; } .hero-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; border: 3px solid rgba(255,255,255,0.2); box-shadow: var(--shadow-md); } .hero--solid .hero-logo { border-color: var(--border); } .hero-name { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.15; letter-spacing: -0.01em; } .hero-desc { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-secondary); margin-top: 8px; font-weight: 300; line-height: 1.4; max-width: 360px; margin-left: auto; margin-right: auto; } /* ── SEARCH BAR ──────────────────────────── */ .search-bar { position: sticky; top: 0; z-index: 100; background: var(--bg); padding: 10px 16px 8px; transition: box-shadow 0.2s; } .search-bar.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .search-inner { display: flex; align-items: center; gap: 8px; position: relative; max-width: 600px; margin: 0 auto; } .search-icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; display: flex; } .search-input { width: 100%; padding: 12px 16px 12px 42px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.9rem; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .search-input::placeholder { color: var(--muted); opacity: 0.7; } .lang-toggle { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; } .lang-toggle:active { transform: scale(0.96); } /* Allergen toggle & panel */ /* In-row compact pill sitting to the right of the search input (saves a whole vertical row vs. the old centered own-row layout). Height matches the input. */ .allergen-toggle { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 44px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: all 0.2s; } .allergen-toggle:active { transform: scale(0.97); } /* Narrow screens: collapse to an icon-only button so it never crowds the input (label stays available via title/aria-label). */ @media (max-width: 380px) { .allergen-toggle-label { display: none; } } .allergen-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); } .allergen-count { background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 600; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; } .allergen-toggle.active .allergen-count { background: rgba(255,255,255,0.25); } .allergen-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; max-width: 600px; margin: 0 auto; } .allergen-panel.open { max-height: 400px; padding: 12px 0 4px; } .allergen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .allergen-check { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); transition: background 0.15s; user-select: none; -webkit-user-select: none; } .allergen-check:active { background: var(--bg-secondary); } .allergen-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex-shrink: 0; } .allergen-check svg { flex-shrink: 0; } .allergen-result { font-size: 0.78rem; color: var(--accent); text-align: center; padding: 6px 0; font-weight: 500; } /* ── CATEGORY PILLS ──────────────────────── */ .cat-pills { position: sticky; top: 62px; z-index: 99; background: var(--bg-secondary); border-bottom: 1.5px solid var(--border-strong); padding-bottom: 2px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .pills-scroll { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .pills-scroll::-webkit-scrollbar { display: none; } .pill { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 2px solid var(--border-strong); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: all 0.2s; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pill:active { transform: scale(0.96); } .pill--active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent); } /* ── MENU GROUP DIVIDER (stacked mode: e.g. "Menù" categories, then a "Carta dei Vini" divider, then that menu's categories) ──────────── */ .menu-group-title { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--text); text-align: center; max-width: 600px; margin: 44px auto 20px; padding: 0 16px; } .menu-group-title[data-first="1"] { margin-top: 24px; } .menu-group-title::before { content: ''; display: block; width: 64px; height: 2px; background: var(--accent); margin: 0 auto 16px; } /* ── ANNOUNCEMENTS ───────────────────────── */ .announcements { max-width: 600px; margin: 0 auto; padding: 12px 16px 0; } .announcement { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 8px; align-items: flex-start; } .ann-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ann-title { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; margin-bottom: 2px; } .ann-content { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.4; } .ann--info { background: #EFF6FF; } .ann--info .ann-icon { background: #DBEAFE; color: #2563EB; } .ann--info .ann-title { color: #1E40AF; } .ann--info .ann-content { color: #1E3A5F; } .ann--warning { background: #FFFBEB; } .ann--warning .ann-icon { background: #FEF3C7; color: #D97706; } .ann--warning .ann-title { color: #92400E; } .ann--warning .ann-content { color: #78350F; } .ann--promo { background: #F0FDF4; } .ann--promo .ann-icon { background: #DCFCE7; color: #16A34A; } .ann--promo .ann-title { color: #15803D; } .ann--promo .ann-content { color: #14532D; } .ann--wifi { background: #F5F3FF; } .ann--wifi .ann-icon { background: #EDE9FE; color: #7C3AED; } .ann--wifi .ann-title { color: #5B21B6; } .ann--wifi .ann-content { color: #4C1D95; } .ann--cover { background: var(--bg-secondary); } .ann--cover .ann-icon { background: var(--border); color: var(--text-secondary); } .ann--cover .ann-title { color: var(--text); } .ann--cover .ann-content { color: var(--text-secondary); } /* ── FEATURED SECTION ────────────────────── */ .featured-section { max-width: 600px; margin: 0 auto; padding: 20px 16px 8px; } .section-heading { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } .section-heading-icon { color: var(--accent); font-size: 0.9rem; } .featured-scroll { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x mandatory; } .featured-scroll::-webkit-scrollbar { display: none; } .featured-card { flex-shrink: 0; width: 220px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); scroll-snap-align: start; transition: transform 0.2s; } .featured-card:active { transform: scale(0.98); } .featured-img-wrap { width: 100%; height: 130px; overflow: hidden; background: var(--bg-secondary); } .featured-img { width: 100%; height: 100%; object-fit: cover; } .featured-img-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border) 100%); } .featured-body { padding: 12px 14px 14px; } .featured-chip { display: inline-block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 8px; border-radius: var(--radius-sm); margin-bottom: 6px; } .featured-name { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.25; } .featured-price { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--accent); margin-top: 4px; display: block; } /* ── MENU CATEGORIES ─────────────────────── */ .menu-category { max-width: 600px; margin: 0 auto; padding: 0 16px; } .cat-header { padding: 32px 0 16px; text-align: center; } .cat-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--text); line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 8px; } .cat-icon { font-size: 1.2rem; } .cat-desc { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary); margin-top: 6px; font-weight: 300; font-style: italic; } .cat-note { font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); margin-top: 4px; } .items-list { display: flex; flex-direction: column; gap: 2px; } /* ── MENU ITEMS ──────────────────────────── */ .menu-item { padding: 14px 0; border-bottom: 1px solid var(--border); transition: opacity 0.2s; } .menu-item:last-child { border-bottom: none; } .menu-item--unavailable { opacity: 0.45; } /* Compact item with thumbnail */ .menu-item--compact { display: flex; align-items: flex-start; gap: 12px; } .item-thumb-wrap { flex-shrink: 0; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; } .item-thumb { width: 48px; height: 48px; object-fit: cover; display: block; } .item-compact-body { flex: 1; min-width: 0; } /* Card placeholder when no image */ .item-img-placeholder { width: 100%; height: 100%; background: var(--bg-secondary, #f3f4f6); display: flex; align-items: center; justify-content: center; } .item-img-placeholder::after { content: '🍽️'; font-size: 2.5rem; opacity: 0.4; } /* Compact item (no image) */ .item-top-line { display: flex; align-items: baseline; gap: 4px; } .item-name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.3; } .item-dots-spacer { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--border-strong); margin: 0 4px; align-self: baseline; position: relative; top: -3px; } .item-price { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; } .price-prefix, .price-suffix { font-size: 0.75rem; font-weight: 400; opacity: 0.8; } .price-struck { text-decoration: line-through; opacity: 0.6; } .sold-out-badge { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #DC2626; background: #FEF2F2; padding: 2px 8px; border-radius: var(--radius-sm); flex-shrink: 0; margin-left: 4px; } .item-desc { font-family: var(--font-body); font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; font-weight: 300; } .item-variants { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; } .variant { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-secondary); } .variant-label { font-weight: 400; } .variant-price { font-weight: 600; color: var(--accent); } .featured-label { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); flex-shrink: 0; margin-left: 6px; } .item-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .item-tags { display: flex; gap: 4px; flex-wrap: wrap; } .tag-pill { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; padding: 3px 8px; border-radius: var(--radius-sm); color: var(--tag-color, var(--accent)); background: color-mix(in srgb, var(--tag-color, var(--accent)) 10%, transparent); white-space: nowrap; } .item-chef, .item-recommended { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; } /* Item with image */ .menu-item--image { padding: 16px 0; } .item-img-wrap { position: relative; width: 100%; height: 180px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; } .item-img { width: 100%; height: 100%; object-fit: cover; } .sold-out-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .sold-out-overlay span { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(220,38,38,0.9); padding: 6px 16px; border-radius: var(--radius-sm); } .featured-badge-img { position: absolute; top: 10px; left: 10px; } .featured-badge-img .featured-label { background: var(--accent); color: #fff; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.68rem; margin-left: 0; } .item-body .item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* Composable */ .composable-section { margin-top: 10px; padding: 12px; background: var(--bg-secondary); border-radius: var(--radius-md); } .composable-title { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 8px; } .comp-group { margin-bottom: 8px; } .comp-group-name { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .comp-options { display: flex; flex-wrap: wrap; gap: 4px; } .comp-option { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-secondary); padding: 4px 10px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); } .comp-unavailable { opacity: 0.4; text-decoration: line-through; } /* ── NO RESULTS ──────────────────────────── */ .no-results { text-align: center; padding: 60px 20px; display: none; max-width: 600px; margin: 0 auto; } .no-results-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; } .no-results-title { font-family: var(--font-head); font-size: 1.1rem; color: var(--text); margin-bottom: 4px; } .no-results-text { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); } /* ── FEEDBACK ────────────────────────────── */ .feedback-section { max-width: 600px; margin: 0 auto; padding: 32px 16px; text-align: center; } .feedback-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; color: var(--text); margin-bottom: 16px; } .stars-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 16px; } .star-btn { background: none; border: none; cursor: pointer; color: var(--border-strong); padding: 4px; transition: color 0.15s, transform 0.15s; -webkit-tap-highlight-color: transparent; } .star-btn:active { transform: scale(1.2); } .star-btn.active { color: #FBBF24; } .star-btn.active svg { fill: #FBBF24; stroke: #FBBF24; } .feedback-text { width: 100%; max-width: 400px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.88rem; color: var(--text); background: var(--surface); resize: vertical; outline: none; transition: border-color 0.2s; } .feedback-text:focus { border-color: var(--accent); } .feedback-text::placeholder { color: var(--muted); } .feedback-btn { display: inline-block; margin-top: 12px; padding: 12px 32px; border: none; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.15s; -webkit-tap-highlight-color: transparent; } .feedback-btn:active { transform: scale(0.97); } .feedback-btn:disabled { opacity: 0.4; cursor: not-allowed; } .feedback-msg { margin-top: 10px; font-family: var(--font-body); font-size: 0.85rem; color: var(--accent); } /* ── FOOTER ──────────────────────────────── */ .menu-footer { max-width: 600px; margin: 0 auto; padding: 32px 16px 20px; border-top: 1px solid var(--border); } .footer-brand { text-align: center; margin-bottom: 20px; } .footer-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 2px solid var(--border); } .footer-name { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--text); } .footer-map { margin-bottom: 20px; text-align: center; } .footer-map iframe { border-radius: 12px; border: none; margin-bottom: 12px; display: block; width: 100%; } .footer-directions { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-pill, 999px); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: all 0.2s; } .footer-directions:active { color: var(--accent); border-color: var(--accent); } .footer-contacts { display: flex; flex-direction: column; gap: 10px; align-items: center; } .footer-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); text-decoration: none; font-family: var(--font-body); font-size: 0.85rem; transition: color 0.2s; } .footer-link:active { color: var(--accent); } .footer-link svg { color: var(--muted); flex-shrink: 0; } .footer-socials { display: flex; justify-content: center; gap: 16px; margin-top: 20px; } .social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); transition: all 0.2s; } .social-link:active { transform: scale(0.92); background: var(--accent); color: #fff; } .footer-wifi { margin-top: 24px; text-align: center; } .footer-section-title { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 10px; } .wifi-info { display: inline-flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; } .wifi-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.85rem; } .wifi-label { color: var(--muted); min-width: 64px; text-align: left; } .wifi-value { color: var(--text); font-weight: 500; font-family: 'SF Mono', Menlo, monospace; font-size: 0.82rem; } .wifi-copy { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; transition: color 0.2s; } .wifi-copy:active { color: var(--accent); } .footer-hours { margin-top: 24px; text-align: center; } .hours-table { display: inline-flex; flex-direction: column; gap: 2px; text-align: left; } .hours-row { display: flex; justify-content: space-between; gap: 20px; font-family: var(--font-body); font-size: 0.82rem; padding: 3px 0; } .hours-day { font-weight: 500; color: var(--text); min-width: 80px; } .hours-time { color: var(--text-secondary); font-weight: 300; } .powered { text-align: center; margin-top: 28px; font-family: var(--font-body); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; } .powered a { color: var(--accent); text-decoration: none; font-weight: 500; } /* ── BOTTOM BAR ──────────────────────────── */ .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: 56px; display: flex; align-items: center; justify-content: space-around; background: var(--bg); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); } .bar-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border: none; background: none; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s; } .bar-btn span { font-family: var(--font-body); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; } .bar-btn:active { color: var(--accent); } .bar-btn svg { width: 22px; height: 22px; } /* ── THEME-SPECIFIC OVERRIDES ────────────── */ /* Scoped under body.style-; the active theme is applied via the body class set by the renderer. Equivalent to the former inline conditional CSS. */ /* Classico */ body.style-classico .hero--solid { background: var(--bg); border-bottom: 1px solid var(--border); } body.style-classico .hero-name { font-size: 2.2rem; letter-spacing: 0.02em; } body.style-classico .cat-title { font-size: 1.5rem; letter-spacing: 0.02em; } body.style-classico .cat-header::after { content: ''; display: block; width: 40px; height: 1px; background: var(--accent); margin: 8px auto 0; opacity: 0.5; } body.style-classico .item-dots-spacer { border-bottom: 1px dotted var(--border-strong); } /* Moderno */ body.style-moderno .hero-name { font-size: 2.6rem; font-weight: 400; letter-spacing: -0.02em; font-style: italic; } body.style-moderno .cat-title { font-size: 1.8rem; font-weight: 400; font-style: italic; letter-spacing: -0.01em; } body.style-moderno .item-name { font-style: italic; font-weight: 400; } body.style-moderno .item-dots-spacer { display: none; } body.style-moderno .menu-item--compact { background: var(--surface); padding: 16px; border-radius: var(--radius-md); border-bottom: none; margin-bottom: 8px; } body.style-moderno .menu-item--compact:last-child { margin-bottom: 0; } body.style-moderno .menu-item--image { background: var(--surface); padding: 16px; border-radius: var(--radius-lg); border-bottom: none; margin-bottom: 8px; } body.style-moderno .menu-item--image:last-child { margin-bottom: 0; } body.style-moderno .menu-item--image .item-img-wrap { border-radius: var(--radius-md); margin-bottom: 12px; } body.style-moderno .items-list { gap: 0; } /* Scuro */ body.style-scuro .hero--solid { background: linear-gradient(180deg, #141312 0%, var(--bg) 100%); } body.style-scuro .hero--cover .hero-overlay { background: linear-gradient(0deg, rgba(12,11,10,0.85) 0%, rgba(12,11,10,0.3) 50%, rgba(12,11,10,0.5) 100%); } body.style-scuro .hero-name { font-size: 2.4rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; } body.style-scuro .hero-desc { letter-spacing: 0.04em; } body.style-scuro .cat-title { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } body.style-scuro .cat-header::after { content: ''; display: block; width: 24px; height: 1px; background: var(--accent); margin: 10px auto 0; } body.style-scuro .item-name { font-weight: 500; letter-spacing: 0.02em; } body.style-scuro .item-dots-spacer { border-bottom: 1px solid var(--border); opacity: 0.3; } body.style-scuro .tag-pill { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; } body.style-scuro .pill { background: var(--surface); border-color: var(--border-strong); color: var(--text-secondary); } body.style-scuro .pill--active { background: var(--accent); color: var(--bg); border-color: var(--accent); } body.style-scuro .search-input { background: var(--surface); border-color: var(--border); color: var(--text); } body.style-scuro .ann--info { background: rgba(37,99,235,0.1); } body.style-scuro .ann--info .ann-icon { background: rgba(37,99,235,0.2); } body.style-scuro .ann--warning { background: rgba(217,119,6,0.1); } body.style-scuro .ann--warning .ann-icon { background: rgba(217,119,6,0.2); } body.style-scuro .ann--promo { background: rgba(22,163,74,0.1); } body.style-scuro .ann--promo .ann-icon { background: rgba(22,163,74,0.2); } body.style-scuro .ann--wifi { background: rgba(124,58,237,0.1); } body.style-scuro .ann--wifi .ann-icon { background: rgba(124,58,237,0.2); } body.style-scuro .ann--cover { background: var(--surface); } body.style-scuro .ann--info .ann-title, body.style-scuro .ann--info .ann-content, body.style-scuro .ann--warning .ann-title, body.style-scuro .ann--warning .ann-content, body.style-scuro .ann--promo .ann-title, body.style-scuro .ann--promo .ann-content, body.style-scuro .ann--wifi .ann-title, body.style-scuro .ann--wifi .ann-content { color: var(--text); } body.style-scuro .sold-out-badge { background: rgba(220,38,38,0.2); color: #F87171; } body.style-scuro .social-link { background: var(--surface); } body.style-scuro .wifi-info { background: var(--surface); } body.style-scuro .feedback-text { background: var(--surface); } body.style-scuro .bottom-bar { background: color-mix(in srgb, var(--bg) 85%, transparent); } body.style-scuro .allergen-check:active { background: var(--surface); } /* Naturale */ body.style-naturale .hero--solid { background: linear-gradient(180deg, #E8E4DB 0%, var(--bg) 100%); } body.style-naturale .hero-name { font-size: 2rem; } body.style-naturale .cat-title { font-size: 1.3rem; } body.style-naturale .item-dots-spacer { display: none; } body.style-naturale .menu-item--compact { background: var(--surface); padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 8px; } body.style-naturale .menu-item--compact:last-child { margin-bottom: 0; } body.style-naturale .menu-item--image { background: var(--surface); padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 8px; } body.style-naturale .menu-item--image:last-child { margin-bottom: 0; } body.style-naturale .items-list { gap: 0; } body.style-naturale .tag-pill { background: #EAF0E6; color: var(--accent); } body.style-naturale .featured-chip { background: #EAF0E6; color: var(--accent); } /* ── UTILITY & ANIMATION ─────────────────── */ .hidden { display: none !important; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .menu-category { animation: fadeIn 0.3s ease both; } .menu-category:nth-child(2) { animation-delay: 0.05s; } .menu-category:nth-child(3) { animation-delay: 0.1s; } .menu-category:nth-child(4) { animation-delay: 0.15s; } .menu-category:nth-child(5) { animation-delay: 0.2s; } @media (min-width: 480px) { .item-img-wrap { height: 220px; } .hero--cover { height: 280px; } .hero-name { font-size: 2.4rem; } .allergen-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .search-bar { padding: 12px 24px 0; } .cat-pills .pills-scroll { padding: 12px 24px; } .announcements { padding: 12px 24px 0; } .featured-section { padding: 20px 24px 8px; } .menu-category { padding: 0 24px; } .feedback-section { padding: 32px 24px; } .menu-footer { padding: 32px 24px 20px; } } /* Prevent iOS zoom on input focus */ @supports (-webkit-touch-callout: none) { .search-input, .feedback-text { font-size: 16px; } } /* Language toggle visibility */ .lang-hidden { display: none !important; } /* ── MENU TABS ───────────────────────────── */ .menu-tabs { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0; } .menu-tabs-scroll { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; max-width: 600px; margin: 0 auto; padding: 0 16px; } .menu-tabs-scroll::-webkit-scrollbar { display: none; } .menu-tab { display: inline-flex; align-items: center; gap: 4px; padding: 14px 16px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; flex-shrink: 0; } .menu-tab:hover { color: var(--text); } .menu-tab--active { color: var(--accent); border-bottom-color: var(--accent); } .menu-tab-schedule { font-size: 0.7rem; font-weight: 400; opacity: 0.65; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 2px 6px; border-radius: var(--radius-pill); } /* ── EMPTY STATE (published but no items) — task 3 ───── */ .menu-empty { max-width: 600px; margin: 0 auto; padding: 64px 24px 56px; text-align: center; } .menu-empty-icon { font-size: 3rem; opacity: 0.5; margin-bottom: 16px; } .menu-empty-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--text); margin-bottom: 10px; } .menu-empty-text { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); max-width: 360px; margin: 0 auto; } /* ── ALLERGEN TEXT (a11y, not colour-only) — task 6 ──── */ .item-allergens-text { font-family: var(--font-body); font-size: 0.74rem; line-height: 1.4; color: var(--text-secondary); margin-top: 6px; } /* ── WIFI REVEAL — task 5 ────────────────────────────── */ .wifi-pass-value { letter-spacing: 0.08em; min-width: 72px; display: inline-block; text-align: left; } .wifi-reveal { background: none; border: none; color: var(--muted); cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s; } .wifi-reveal:active, .wifi-reveal.revealed { color: var(--accent); } /* ── STAFF / TEAM — task 4 ───────────────────────────── */ .footer-staff { margin-top: 24px; text-align: center; } .staff-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; margin-top: 4px; } .staff-member { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; } .staff-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--bg-secondary); border: 1px solid var(--border); line-height: 1; } .staff-name { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text); line-height: 1.2; } .staff-role { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.2; } body.style-scuro .staff-avatar { background: var(--surface); } /* ── A11Y: tap targets + contrast + reduced motion — task 7 ── */ /* Min 44px hit area on the small interactive controls. The visible chrome stays compact; we pad the touch surface instead of resizing the glyph. */ .lang-toggle, .allergen-toggle, .footer-directions, .pill, .allergen-check { min-height: 44px; } .star-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .wifi-copy { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .bar-btn { min-height: 48px; justify-content: center; } /* Lift the muted tone where it carries small body text, to clear WCAG AA on the light themes. Scuro already runs lighter mutes on a near-black bg. */ body.style-classico { --muted: #7A6E5E; } body.style-moderno { --muted: #6E6E6E; } body.style-naturale { --muted: #5E6E5E; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .menu-category { animation: none; } }