/* ========================================================= Dynamic Menu & Ordering — style.css Neutral shell is fixed; --primary and its shades are set per-restaurant inline in (see index.php), derived server-side from restaurants.primary_color. ========================================================= */ :root{ /* fallback palette if the inline block somehow fails to load */ --primary: #c2402f; --primary-light: #dd6a58; --primary-dark: #9c2f21; --primary-soft: rgba(194,64,47,.14); --primary-soft-2: rgba(194,64,47,.28); --on-primary: #ffffff; --bg: #1a1713; --bg-soft: #201c17; --surface: #26221c; --surface-2: #2e2921; --surface-hi: #383228; --line: #3c362c; --ivory: #f5efe6; --ivory-dim: #cdc3b4; --muted: #9a8f7f; --sage: #7fa06a; --whatsapp: #3fb96a; --radius-s: 10px; --radius-m: 16px; --radius-l: 22px; --radius-pill: 999px; --shadow-card: 0 8px 20px -12px rgba(0,0,0,.5); --shadow-float: 0 10px 24px -8px rgba(0,0,0,.55); --shadow-sheet: 0 -12px 34px -10px rgba(0,0,0,.6); --font-display: "Spectral", Georgia, serif; --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin:0; background: var(--bg); color: var(--ivory); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } button{ font-family: inherit; } a{ color: inherit; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; } p{ margin:0; } i.fa-solid, i.fa-regular, i.fa-brands{ line-height:1; } ::selection{ background: var(--primary); color: var(--on-primary); } :focus-visible{ outline: 2px solid var(--primary-light); outline-offset: 2px; border-radius: 6px; } .eyebrow{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-light); display:flex; align-items:center; gap:8px; } .dot-live{ width:6px; height:6px; border-radius:50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(127,160,106,.22); } /* ===================== APP SHELL ===================== */ .app-shell{ position: relative; max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--bg); } @media (min-width: 900px){ .app-shell{ max-width: 480px; margin: 24px auto 0; border-radius: 30px; border: 1px solid var(--line); box-shadow: 0 34px 80px -28px rgba(0,0,0,.75); overflow: hidden; min-height: calc(100vh - 48px); } body{ background: #0f0d0a; } } /* ===================== TOP BAR ===================== */ .topbar{ position: sticky; top:0; z-index: 40; display:flex; align-items:center; gap:10px; padding: calc(12px + var(--safe-top)) 16px 12px; background: rgba(26,23,19,.88); backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid var(--line); } .brand{ display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; } .logo{ width:38px; height:38px; border-radius:11px; object-fit:cover; flex:0 0 auto; } .logo-fallback{ display:grid; place-items:center; background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-weight:600; font-size:15px; } .wordmark{ display:flex; flex-direction:column; line-height:1.15; min-width:0; } .wordmark b{ font-family: var(--font-display); font-size: 18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wordmark span{ font-size: 11px; color: var(--muted); display:flex; align-items:center; gap:4px; } .icon-btn{ width:38px; height:38px; border-radius: var(--radius-pill); display:grid; place-items:center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ivory); cursor:pointer; flex:0 0 auto; font-size:15px; } .icon-btn:active{ transform: scale(.92); } .search-wrap{ position: sticky; top: 62px; z-index: 39; overflow: hidden; max-height: 0; transition: max-height .28s ease; background: var(--bg); } .search-wrap.open{ max-height: 70px; } .search-inner{ padding: 8px 16px 12px; } .search-inner input{ width:100%; background: var(--surface); border: 1px solid var(--line); color: var(--ivory); padding: 11px 14px; border-radius: var(--radius-m); font-size: 15px; font-family: var(--font-body); } .search-inner input::placeholder{ color: var(--muted); } /* ===================== HERO ===================== */ .hero{ padding: 20px 18px 14px; } .hero h1{ font-size: 27px; font-weight:600; font-style:italic; color: var(--ivory); margin-top: 8px; line-height:1.3; } .meta-line{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 12px; font-size: 12.5px; color: var(--ivory-dim); } .meta-line span{ display:flex; align-items:center; gap:6px; } .meta-line i{ color: var(--primary-light); font-size:12px; } .special-ribbon{ margin: 16px 0 4px; display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--primary-soft); border: 1px solid var(--primary-soft-2); } .special-ribbon .flame{ width: 38px; height:38px; flex: 0 0 auto; border-radius: 50%; display:grid; place-items:center; background: var(--primary); color: var(--on-primary); font-size: 15px; } .special-ribbon .txt{ min-width:0; } .special-ribbon .txt b{ display:block; font-size: 14px; font-weight:700; } .special-ribbon .txt span{ display:block; font-size: 12px; color: var(--ivory-dim); margin-top:2px; } .special-ribbon .clock{ margin-left:auto; font-family: var(--font-mono); font-size: 11px; color: var(--ivory); background: rgba(0,0,0,.22); padding: 5px 8px; border-radius: 8px; flex:0 0 auto; } /* ===================== CATEGORY PILLS ===================== */ .pill-nav{ position: sticky; top: var(--safe-top); z-index: 38; background: var(--bg); padding: 10px 0; border-bottom: 1px solid var(--line); } .pill-scroll{ display:flex; gap:8px; overflow-x:auto; padding: 2px 16px; scrollbar-width:none; } .pill-scroll::-webkit-scrollbar{ display:none; } .pill{ flex: 0 0 auto; padding: 9px 15px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ivory-dim); font-size: 13.5px; font-weight:600; cursor:pointer; white-space: nowrap; display:flex; align-items:center; gap:6px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .pill i{ font-size:11px; } .pill.active{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .pill:active{ transform: scale(.96); } /* ===================== SECTION / MENU ===================== */ .menu{ padding: 6px 16px 150px; } .menu-section{ margin-top: 24px; } .menu-section .head{ display:flex; align-items: baseline; gap:10px; margin-bottom:12px; } .menu-section .head h2{ font-size: 19px; font-style: italic; } .menu-section .head .count{ font-family: var(--font-mono); font-size:11px; color: var(--muted); } .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (min-width: 560px){ .grid{ grid-template-columns: 1fr 1fr; } } /* ---- item card ---- */ .card{ position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); display:flex; flex-direction:column; cursor: pointer; } .card .media{ position:relative; width:100%; aspect-ratio: 4/3; background: linear-gradient(150deg, var(--surface-hi), var(--surface-2)); overflow:hidden; } .card .media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .card:active .media img{ transform: scale(1.03); } .card .media .emoji-fallback{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size: 42px; } .card .media.no-photo .emoji-fallback{ display:flex; } .card .media.no-photo img{ display:none; } .badges{ position:absolute; top:9px; left:9px; display:flex; gap:6px; flex-wrap:wrap; max-width: calc(100% - 18px); } .badges.inline{ position:static; margin-bottom:10px; } .badge{ font-size: 10.5px; font-weight:700; padding: 4px 8px 4px 7px; border-radius: 7px; backdrop-filter: blur(4px); display:flex; align-items:center; gap:4px; } .badge i{ font-size:9.5px; } .badge.chef{ background: rgba(0,0,0,.55); color: var(--primary-light); border:1px solid var(--primary-soft-2); } .badge.hot{ background: var(--primary); color: var(--on-primary); } .badge.veg{ background: rgba(127,160,106,.9); color: #10190c; } .badge.pop{ background: rgba(0,0,0,.55); color: var(--ivory); border:1px solid rgba(255,255,255,.15); } .card .body{ padding: 12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1; } .card .body h3{ font-size: 16px; line-height:1.25; color: var(--ivory); font-weight: 600; font-style: normal; } .card .body p{ font-size: 12.5px; color: var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card .foot{ margin-top: auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top: 10px; } .price-tag{ font-family: var(--font-mono); font-size: 14px; font-weight:600; color: var(--primary-light); } .add-btn{ width:34px; height:34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); border:none; display:grid; place-items:center; font-size: 15px; cursor:pointer; flex: 0 0 auto; } .add-btn:active{ transform: scale(.9); } .stepper{ display:flex; align-items:center; gap:0; background: var(--primary); border-radius: var(--radius-pill); overflow:hidden; height:34px; } .stepper button{ width:32px; height:34px; border:none; background:transparent; color: var(--on-primary); font-size:13px; cursor:pointer; display:grid; place-items:center; } .stepper button:active{ background: rgba(0,0,0,.15); } .stepper .qty{ min-width: 18px; text-align:center; font-family: var(--font-mono); font-weight:600; color: var(--on-primary); font-size: 13px; } .customize-btn{ position:relative; display:flex; align-items:center; gap:6px; background: var(--surface-2); border: 1px solid var(--primary-soft-2); color: var(--ivory); padding: 8px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight:600; cursor:pointer; } .customize-btn i{ font-size:11px; color: var(--primary-light); } .customize-btn:active{ transform: scale(.96); } .count-pip{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:50%; background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size:10px; font-weight:700; display:grid; place-items:center; border: 2px solid var(--bg); } .empty-state{ text-align:center; padding: 50px 20px; color: var(--muted); } .empty-state i{ font-size:26px; margin-bottom:12px; color: var(--primary-light); display:block; } /* ===================== FLOATING RAIL ===================== */ .float-rail{ position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 45; display:flex; flex-direction:column; gap:12px; } @media (min-width: 900px){ .float-rail{ right: calc(50% - 240px + 14px); } } .float-btn{ width:54px; height:54px; border-radius:50%; border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-float); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; position:relative; color: var(--ivory); font-size:16px; } .float-btn .lb{ font-family: var(--font-mono); font-size: 7.5px; letter-spacing:.03em; text-transform:uppercase; color: var(--ivory-dim); } .float-btn:active{ transform: scale(.92); } .float-btn.chef{ color: var(--primary-light); } .float-btn.special.is-active{ color: var(--primary-light); border-color: var(--primary-soft-2); } .float-btn.special.is-active::before{ content:""; position:absolute; inset:-4px; border-radius:50%; border: 2px solid var(--primary-light); animation: pulse-ring 2.2s ease-out infinite; } .float-btn .pip{ position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:50%; background: var(--primary); border: 2px solid var(--bg); display:none; } .float-btn.special.is-active .pip{ display:block; } @keyframes pulse-ring{ 0%{ opacity:.8; transform: scale(1); } 100%{ opacity:0; transform: scale(1.3); } } /* ===================== CART BAR ===================== */ .cart-bar{ position: fixed; left:0; right:0; bottom: 0; z-index: 46; display:flex; justify-content:center; padding: 0 14px calc(14px + var(--safe-bottom)); pointer-events:none; transform: translateY(140%); transition: transform .32s cubic-bezier(.2,.9,.25,1); } .cart-bar.show{ transform: translateY(0); } .cart-bar .inner{ pointer-events:all; width:100%; max-width: 528px; background: var(--primary); color: var(--on-primary); border-radius: var(--radius-pill); padding: 8px 8px 8px 18px; display:flex; align-items:center; gap:12px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); } .cart-bar .count{ font-family: var(--font-mono); font-weight:600; font-size: 13px; } .cart-bar .total{ margin-left:auto; font-family: var(--font-mono); font-weight:700; font-size:13.5px; } .cart-bar .view{ background: rgba(0,0,0,.2); color: var(--on-primary); border:none; padding: 11px 17px; border-radius: var(--radius-pill); font-weight:600; font-size: 13px; display:flex; align-items:center; gap:7px; cursor:pointer; } /* ===================== BOTTOM SHEETS ===================== */ .overlay{ position: fixed; inset:0; z-index: 60; background: rgba(9,7,5,.6); opacity:0; pointer-events:none; transition: opacity .25s ease; } .overlay.show{ opacity:1; pointer-events:all; } .sheet{ position: fixed; left:0; right:0; bottom:0; z-index: 61; max-width: 560px; margin: 0 auto; background: var(--bg-soft); border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom:none; box-shadow: var(--shadow-sheet); transform: translateY(102%); transition: transform .34s cubic-bezier(.2,.9,.25,1); max-height: 88vh; display:flex; flex-direction:column; } .sheet.show{ transform: translateY(0); } .sheet .grabber{ width:36px; height:4px; border-radius:4px; background: var(--line); margin: 10px auto 4px; } .sheet .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding: 6px 18px 10px; border-bottom:1px solid var(--line); } .sheet .sheet-head h3{ font-size:17px; } .sheet .sheet-body{ padding: 16px 18px calc(18px + var(--safe-bottom)); overflow-y:auto; } #itemSheet .detail-media{ width:100%; aspect-ratio: 16/10; border-radius: var(--radius-m); overflow:hidden; background: linear-gradient(150deg, var(--surface-hi), var(--surface-2)); display:grid; place-items:center; position:relative; margin-bottom:14px; } #itemSheet .detail-media img{ width:100%; height:100%; object-fit:cover; } #itemSheet .detail-media .emoji-fallback{ font-size:50px; display:none; } #itemSheet .detail-media.no-photo img{ display:none; } #itemSheet .detail-media.no-photo .emoji-fallback{ display:block; } .detail-name{ font-size:20px; margin-bottom:6px; } .detail-desc{ color: var(--ivory-dim); font-size:13.5px; line-height:1.6; margin-bottom: 18px; } /* option groups */ .option-group{ margin-bottom: 18px; padding-bottom:16px; border-bottom: 1px solid var(--line); } .option-group:last-child{ border-bottom:none; margin-bottom:6px; } .og-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .og-head h4{ font-size:14px; font-weight:700; font-family: var(--font-body); } .og-tag{ font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); } .og-choices{ display:flex; flex-direction:column; gap:8px; } .choice-row{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); cursor:pointer; } .choice-row input{ accent-color: var(--primary); width:16px; height:16px; flex:0 0 auto; } .choice-row .cr-label{ flex:1; font-size:13.5px; } .choice-row .cr-price{ font-family: var(--font-mono); font-size:12px; color: var(--primary-light); } .choice-row:has(input:checked){ border-color: var(--primary-soft-2); background: var(--primary-soft); } .detail-foot{ display:flex; align-items:center; gap:12px; margin-top:6px; } .qty-select{ display:flex; align-items:center; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-pill); height:46px; flex:0 0 auto; } .qty-select button{ width:42px; height:46px; border:none; background:transparent; color: var(--ivory); font-size:14px; cursor:pointer; } .qty-select .qty{ min-width:24px; text-align:center; font-family: var(--font-mono); font-weight:600; font-size:14px; } .btn-primary{ flex:1; background: var(--primary); color: var(--on-primary); border:none; border-radius: var(--radius-pill); padding: 14px 16px; font-weight:700; font-size:14px; cursor:pointer; } .btn-primary:active{ transform: scale(.98); } /* cart sheet */ .cart-item{ display:flex; gap:12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .cart-item:last-of-type{ border-bottom:none; } .cart-item .thumb{ width:54px; height:54px; border-radius:12px; flex:0 0 auto; overflow:hidden; background: linear-gradient(150deg, var(--surface-hi), var(--surface-2)); display:grid; place-items:center; font-size:20px; } .cart-item .thumb img{ width:100%; height:100%; object-fit:cover; } .cart-item .thumb.no-photo img{ display:none; } .cart-item .info{ flex:1; min-width:0; } .cart-item .info h4{ font-size:13.5px; font-weight:700; font-family: var(--font-body); } .cart-item .info .opts{ font-size:11.5px; color: var(--muted); margin-top:3px; line-height:1.5; } .cart-item .info .line-price{ font-family: var(--font-mono); font-size:12px; color: var(--primary-light); margin-top:4px; } .cart-item .ctrl{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .cart-item .stepper{ height:30px; } .cart-item .stepper button{ width:28px; height:30px; font-size:12px; } .cart-item .remove{ font-family: var(--font-mono); font-size:10px; color: var(--muted); background:none; border:none; cursor:pointer; text-decoration:underline; } .summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color: var(--ivory-dim); padding: 5px 0; } .summary-row.total{ color: var(--ivory); font-weight:700; font-size:16px; border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-family: var(--font-mono); } .ticket-no{ font-family: var(--font-mono); font-size:10.5px; color: var(--muted); margin-top: 4px; } .field{ margin-top: 12px; } .field label{ display:block; font-size:11px; color: var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; } .field input, .field textarea{ width:100%; background: var(--surface); border:1px solid var(--line); color: var(--ivory); padding:11px 13px; border-radius: var(--radius-s); font-size:14.5px; font-family: var(--font-body); } .field textarea{ resize:vertical; min-height:56px; } .order-mode{ display:flex; gap:8px; margin-top:4px; } .order-mode button{ flex:1; padding:10px; border-radius: var(--radius-s); background: var(--surface); border:1px solid var(--line); color: var(--ivory-dim); font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; } .order-mode button.active{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .whatsapp-btn{ margin-top:18px; width:100%; background: var(--whatsapp); color:#fff; border:none; border-radius: var(--radius-pill); padding:15px; font-weight:700; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; } .whatsapp-btn:active{ transform: scale(.98); } .whatsapp-btn:disabled{ opacity:.5; } .cart-empty{ text-align:center; padding: 34px 10px; color: var(--muted); } .cart-empty i{ font-size:26px; margin-bottom:10px; display:block; color: var(--primary-light); } /* ===================== TOAST ===================== */ .toast{ position: fixed; left:50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 80; background: var(--surface-hi); color: var(--ivory); border: 1px solid var(--line); padding: 11px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight:600; opacity:0; pointer-events:none; transition: opacity .22s ease, transform .22s ease; box-shadow: var(--shadow-float); max-width: 86%; } .toast.show{ opacity:1; transform: translate(-50%, 0); } /* ===================== FOOTER ===================== */ .site-footer{ padding: 28px 20px calc(120px + var(--safe-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; } .site-footer .fname{ font-family: var(--font-display); font-size:19px; font-style:italic; color: var(--ivory); margin-bottom:6px; } .site-footer .rows{ margin-top:12px; display:flex; flex-direction:column; gap:7px; } .site-footer .rows span{ display:flex; gap:8px; align-items:center; } .site-footer .rows i{ color: var(--primary-light); width:14px; text-align:center; } .site-footer .fine-print{ margin-top:16px; font-size:11px; opacity:.75; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; transition-duration: .001ms !important; } }