/* ============================================================================ mtc.css — Munch Time Cafe · shared design system (mobile-first) Used by all pages. Tokens: motion (--ease/--d-*), radius (--r-*), shadows (--shadow/-md/-lg), sticky offset (--nav-h). ========================================================================== */ :root { --brand: #c1440e; --brand-dark: #96340a; --brand-soft: #fdf0e9; --accent: #e8a020; --green: #2e7d32; --green-soft: #e8f5e9; --wa: #25d366; --red: #c62828; --bg: #faf7f2; --card: #ffffff; --ink: #241b14; --muted: #82756a; --line: #eee3d6; --shadow: 0 1px 2px rgba(60, 35, 10, .05), 0 2px 8px rgba(60, 35, 10, .06); --shadow-md: 0 6px 20px rgba(60, 35, 10, .10); --shadow-lg: 0 16px 48px rgba(60, 35, 10, .16); --r-sm: 10px; --r: 16px; --r-lg: 22px; --nav-h: 57px; --ease: cubic-bezier(.32, .72, .25, 1); --d-fast: .15s; --d-med: .3s; --d-slow: .6s; --font: 'DM Sans', system-ui, sans-serif; --display: 'Bebas Neue', 'DM Sans', sans-serif; --serif: 'Playfair Display', Georgia, serif; } /* warm atelier theme — cakes.html & collection.html set this on */ .theme-atelier { --at-bg: #faf6ef; --at-ink: #241b12; --at-soft: #8a7a66; --at-gold: #a8802d; --at-line: #ece1cf; --at-serif: 'Bebas Neue', 'DM Sans', sans-serif; --bg: var(--at-bg); --accent: var(--at-gold); background: var(--at-bg); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 16px; } /* 16px stops iOS zoom */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; } .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; } /* ── Top navigation ──────────────────────────────────────────────────────── */ .mtc-nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* blur behind a sticky bar repaints every scrolled frame — too costly on phones */ @media (max-width: 767px) { .mtc-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .97); } } .mtc-nav__in { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; } .mtc-nav__brand { display: flex; align-items: center; gap: 8px; min-width: 0; } .mtc-nav__brand img { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; } .mtc-nav__brand .t { font-family: var(--display); font-size: 1.35rem; letter-spacing: .5px; color: var(--ink); white-space: nowrap; } .mtc-nav__links { display: none; gap: 4px; margin-left: 10px; } .mtc-nav__links a { padding: 8px 13px; border-radius: 99px; color: var(--ink); font-weight: 500; font-size: .95rem; transition: background var(--d-fast) var(--ease); } .mtc-nav__links a:hover { background: var(--brand-soft); } .mtc-nav__links a.active { background: var(--brand); color: #fff; } .mtc-nav__spacer { flex: 1; } .mtc-cartbtn { position: relative; display: flex; align-items: center; gap: 7px; border: 1.5px solid var(--brand); background: #fff; color: var(--brand); padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: .9rem; transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .mtc-cartbtn:active { transform: scale(.95); } .mtc-cartbtn .n { background: var(--brand); color: #fff; border-radius: 99px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: .75rem; padding: 0 5px; } .acct { display: flex; align-items: center; gap: 6px; max-width: 44vw; border: 1.5px solid var(--line); background: #fff; color: var(--ink); padding: 8px 13px; border-radius: 99px; font-weight: 700; font-size: .85rem; transition: transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); white-space: nowrap; overflow: hidden; } .acct:active { transform: scale(.95); } .acct .pts { color: var(--accent); } /* live order-status pill (header row) — mounted by app.js after an order is sent */ .orderpill { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1.5px solid var(--line); background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 99px; font-weight: 700; font-size: .78rem; white-space: nowrap; overflow: hidden; } .orderpill .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); flex: 0 0 auto; animation: opulse 1.4s ease-in-out infinite; } @keyframes opulse { 50% { opacity: .35; } } .orderpill .num { color: var(--muted); font-weight: 600; } .orderpill .st { overflow: hidden; text-overflow: ellipsis; max-width: 34vw; } .orderpill button { border: 0; background: none; color: var(--muted); font-size: .8rem; padding: 0 0 0 2px; line-height: 1; cursor: pointer; } .orderpill.ok { border-color: var(--green); } .orderpill.ok .dot { background: var(--green); } .orderpill.bad { border-color: var(--red); } .orderpill.bad .dot { background: var(--red); animation: none; } @media (max-width: 520px) { .orderpill .num { display: none; } .orderpill .st { max-width: 30vw; } } /* checkout loyalty-redeem toggle */ .co-redeem { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px dashed var(--line); background: #fff; border-radius: var(--r-sm); padding: 11px 13px; width: 100%; font-weight: 700; font-size: .86rem; color: var(--ink); margin-bottom: 10px; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .co-redeem .r { font-size: .78rem; font-weight: 600; color: var(--muted); } .co-redeem.on { border-style: solid; border-color: var(--green); background: var(--green-soft, #e9f5ea); color: var(--green); } .co-redeem.on .r { color: var(--green); } /* Crumb Club account popover */ .apanel-bg { position: fixed; inset: 0; z-index: 240; background: rgba(30,20,10,.35); display: none; } .apanel-bg.open { display: block; } .apanel { position: fixed; top: 64px; right: 12px; z-index: 250; width: min(330px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 18px; display: none; } .apanel.open { display: block; animation: fadeDown .22s var(--ease); } .apanel .who { font-weight: 800; } .apanel .idn { color: var(--muted); font-size: .8rem; } .apanel .balance { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--accent); margin: 8px 0 0; } .apanel .tier { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; } .apanel .bar { height: 6px; border-radius: 99px; background: #f0e7d5; overflow: hidden; margin: 4px 0 12px; } .apanel .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .apanel .hist { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; max-height: 150px; overflow-y: auto; } .apanel .h { display: flex; justify-content: space-between; font-size: .8rem; padding: 4px 0; color: var(--muted); } .apanel .h b.plus { color: var(--green); } .apanel .h b.minus { color: var(--red); } .verified { color: var(--green); font-size: .74rem; font-weight: 700; } .mtc-burger { width: 42px; height: 42px; border: 0; background: none; display: grid; place-items: center; gap: 0; border-radius: var(--r-sm); } .mtc-burger span { display: block; width: 21px; height: 2px; background: var(--ink); margin: 2.5px 0; border-radius: 2px; transition: transform var(--d-med) var(--ease), opacity var(--d-fast) var(--ease); } .mtc-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mtc-burger.open span:nth-child(2) { opacity: 0; } .mtc-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mtc-mobilemenu { position: fixed; inset: 0; z-index: 300; background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 72px 28px calc(28px + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; clip-path: circle(0% at calc(100% - 32px) 34px); transition: clip-path .5s cubic-bezier(.77,0,.18,1), opacity .35s var(--ease), visibility 0s linear .5s; } .mtc-mobilemenu.open { opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 32px) 34px); transition: clip-path .55s cubic-bezier(.16,1,.3,1), opacity .3s var(--ease); } /* mobile menu heading — logo, name, open-till */ .mm-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px calc(16px + env(safe-area-inset-top)); gap: 12px; border-bottom: 1px solid var(--line); } .mm-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); } .mm-brand img { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; } .mm-brand__t { display: flex; flex-direction: column; line-height: 1.15; } .mm-brand__t b { font-family: inherit; font-weight: 800; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; } .mm-brand__t em { font-style: normal; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-top: 2px; } .mm-brand__t em.open { color: var(--green); } .mm-close { width: 62px; height: 62px; border: 0; background: none; border-radius: var(--r-sm); font-size: 2em; line-height: 1; color: var(--ink); cursor: pointer; } .mtc-mobilemenu a { display: block; padding: 14px 12px; border-radius: var(--r-sm); color: var(--ink); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-style: normal; font-weight: 700; font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(22px); } .mtc-mobilemenu .mm-brand { opacity: 1; transform: none; text-transform: none; border: 0; padding: 0; } .mtc-mobilemenu.open a:not(.mm-brand) { animation: menuIn .5s var(--ease) forwards; } .mtc-mobilemenu.open a:nth-of-type(2) { animation-delay: .12s; } .mtc-mobilemenu.open a:nth-of-type(3) { animation-delay: .18s; } .mtc-mobilemenu.open a:nth-of-type(4) { animation-delay: .24s; } .mtc-mobilemenu.open a:nth-of-type(5) { animation-delay: .30s; } .mtc-mobilemenu.open a:nth-of-type(6) { animation-delay: .36s; } .mtc-mobilemenu.open a:nth-of-type(7) { animation-delay: .42s; } .mtc-mobilemenu a.active { color: var(--brand); } @keyframes menuIn { to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } } .mtc-burger { position: relative; z-index: 310; } @media (min-width: 860px) { .mtc-nav__links { display: flex; } .mtc-burger, .mtc-mobilemenu { display: none !important; } } /* ── Buttons / pills / chips ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 99px; padding: 13px 24px; font-weight: 700; font-size: 1rem; transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .btn:active { transform: scale(.96); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-outline { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); } .btn-wa { background: var(--wa); color: #fff; } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; pointer-events: none; } .chiprow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent); } .chiprow::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; color: var(--ink); padding: 8px 15px; border-radius: 99px; font-weight: 600; font-size: .87rem; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); white-space: nowrap; } .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } .chiprow--wrap { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } .chip--filter { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); border: 1.5px solid var(--brand); color: var(--brand); } .chip--filter.active { background: var(--brand); border-color: var(--brand); color: #fff; } .chip--filter svg { flex: 0 0 auto; } .pill { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; background: #f6efe6; color: #6b5b4c; border-radius: 99px; padding: 3px 9px; } .pill--veg { background: var(--green-soft); color: var(--green); } .pill--nonveg { background: #fdecea; color: var(--red); } /* ── Sticky filter bars (menu / blog / atelier) ──────────────────────────── */ .stickybar { position: sticky; top: var(--nav-h); z-index: 50; background: var(--bg); box-shadow: 0 8px 12px -12px rgba(60, 35, 10, .18); } /* ── Search input (menu / blog) ──────────────────────────────────────────── */ .searchwrap { position: relative; margin-bottom: 8px; } .searchwrap input { width: 100%; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; padding: 11px 40px 11px 42px; outline: none; box-shadow: var(--shadow); transition: border-color var(--d-fast) var(--ease); } .searchwrap input:focus { border-color: var(--brand); } .searchwrap .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); } .searchwrap .clr { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: #f3ece2; width: 28px; height: 28px; border-radius: 99px; display: none; } .searchwrap.has-value .clr { display: block; } /* ── Section headers ─────────────────────────────────────────────────────── */ .sec-head { display: flex; align-items: baseline; gap: 10px; margin: 48px 0 16px; } .sec-head h2 { font-family: var(--display); font-size: 1.9rem; letter-spacing: .8px; color: var(--ink); } .sec-head .sub { color: var(--muted); font-size: .9rem; } /* ── Specials strip ──────────────────────────────────────────────────────── */ .specials { margin: 18px 0 6px; animation: fadeUp var(--d-med) var(--ease); } .specials__row { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; } .specials__row::-webkit-scrollbar { display: none; } .sp-card { flex: 0 0 168px; scroll-snap-align: start; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; transition: transform var(--d-fast) var(--ease); } .sp-card:active { transform: scale(.97); } .sp-card img, .sp-card .ph { width: 100%; height: 110px; object-fit: cover; } .sp-card .ph { display: grid; place-items: center; font-size: 2rem; background: var(--brand-soft); } .sp-card .b { padding: 9px 11px 12px; } .sp-card .n { font-weight: 700; font-size: .88rem; line-height: 1.25; } .sp-card .p { color: var(--brand); font-weight: 800; margin-top: 4px; font-size: .95rem; } .sp-card .q { font-size: .72rem; color: var(--green); font-weight: 700; } .sp-card .tag { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; } .sp-card .addmini { position: absolute; top: 78px; right: 8px; width: 30px; height: 30px; border-radius: 99px; border: 0; background: #fff; color: var(--brand); font-size: 1.2rem; font-weight: 800; box-shadow: var(--shadow-md); line-height: 1; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .sp-card .addmini.in { background: var(--brand); color: #fff; } /* ── Product grid & cards ────────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 680px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (min-width: 980px) { .grid { grid-template-columns: repeat(4, 1fr); } } .pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } @media (hover: hover) { .pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } } .pcard__imgwrap { position: relative; cursor: pointer; } .pcard__img, .pcard__ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .pcard__ph { display: grid; place-items: center; font-size: 2.4rem; background: var(--brand-soft); } .pcard__badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 85%; } .pcard__badges .pill { background: rgba(255, 255, 255, .92); } .pcard__fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, .92); border: 0; display: grid; place-items: center; color: var(--ink); cursor: pointer; transition: transform var(--d-fast) var(--ease); } .pcard__fav:active { transform: scale(.88); } .pcard__fav.on { color: #e63950; } .pcard__fav.on svg { fill: currentColor; } .pcard__body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; } .pcard__name { font-weight: 700; font-size: .95rem; line-height: 1.28; } .pcard__desc { color: var(--muted); font-size: .78rem; margin-top: 3px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 6px; flex-wrap: wrap; } .pcard__price { font-weight: 800; color: var(--brand); font-size: .98rem; white-space: nowrap; } .pcard__price .from { font-size: .68rem; color: var(--muted); font-weight: 600; display: block; line-height: 1; } /* home “Crafted Daily” feature cards */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 860px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } .feature-grid .pcard__img { aspect-ratio: 16/9; } .feature-grid .pcard__name { font-size: 1.1rem; } .feature-grid .pcard__desc { -webkit-line-clamp: 4; } /* home “Get In Touch” grid */ .git-grid { display: grid; gap: 16px; } @media (min-width: 760px) { .git-grid { grid-template-columns: 1.2fr 1fr; } } /* card cart stepper: + ADD ⇄ − qty + */ .stepper { display: flex; align-items: center; height: 36px; } .stepper .add { height: 36px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--brand); background: #fff; color: var(--brand); font-weight: 800; font-size: .85rem; transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .stepper .add:active { transform: scale(.93); } .stepper .ctrl { display: none; align-items: center; gap: 0; background: var(--brand); border-radius: 99px; height: 36px; overflow: hidden; animation: popIn var(--d-fast) var(--ease); } .stepper.has .add { display: none; } .stepper.has .ctrl { display: flex; } .stepper .ctrl button { width: 34px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1; } .stepper .ctrl .q { color: #fff; font-weight: 800; min-width: 18px; text-align: center; font-size: .92rem; } @keyframes popIn { from { transform: scale(.7); opacity: 0; } } /* ── Overlay / bottom sheets / drawer ────────────────────────────────────── */ .ovl { position: fixed; inset: 0; background: rgba(30, 18, 8, .5); z-index: 90; opacity: 0; visibility: hidden; transition: opacity var(--d-med) var(--ease), visibility var(--d-med); } .ovl.open { opacity: 1; visibility: visible; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; transform: translateY(105%); transition: transform var(--d-med) var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .sheet.open { transform: translateY(0); } .sheet__grab { width: 44px; height: 5px; border-radius: 99px; background: #e5dbce; margin: 10px auto 2px; flex: 0 0 auto; } .sheet__body { overflow-y: auto; padding: 8px 18px 10px; -webkit-overflow-scrolling: touch; } .sheet__foot { padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; flex: 0 0 auto; } @media (min-width: 720px) { .sheet { left: 50%; right: auto; width: 460px; transform: translate(-50%, 105%); border-radius: var(--r-lg); bottom: 24px; max-height: 86dvh; } .sheet.open { transform: translate(-50%, 0); } } .automation-popup__body { position: relative; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); } .automation-popup__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 18px; cursor: pointer; color: #888; } .automation-popup__title { font-weight: 700; font-size: 16px; margin: 0 24px 12px 0; } .automation-popup__product { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .automation-popup__product img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md, 10px); } .automation-popup__pname { font-weight: 600; } .automation-popup__pprice { color: #888; font-size: 14px; } .automation-popup__cta { width: 100%; } .automation-popup__survey { display: flex; gap: 6px; font-size: 26px; } .automation-popup__star { border: 0; background: none; cursor: pointer; color: #ddd; padding: 0; line-height: 1; transition: color .15s; } .automation-popup__star:hover { color: #ffb703; } /* cart drawer */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 100; background: var(--bg); transform: translateX(103%); transition: transform var(--d-med) var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .drawer.open { transform: none; } .drawer__head { padding: 16px 18px 10px; display: flex; align-items: center; gap: 10px; background: #fff; border-bottom: 1px solid var(--line); } .drawer__head h3 { font-family: var(--display); font-size: 1.4rem; letter-spacing: .5px; } .drawer__head .sub { color: var(--muted); font-size: .82rem; } .drawer__x, .sheet__x { margin-left: auto; width: 34px; height: 34px; border-radius: 99px; border: 0; background: #f3ece2; color: #6b5b4c; font-size: 1rem; font-weight: 700; } .drawer__body { flex: 1; overflow-y: auto; padding: 12px 14px; } .drawer__foot { background: #fff; border-top: 1px solid var(--line); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); } .ci { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin-bottom: 10px; } .ci__img, .ci__ph { width: 58px; height: 58px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; } .ci__ph { display: grid; place-items: center; background: var(--brand-soft); font-size: 1.4rem; } .ci__mid { flex: 1; min-width: 0; } .ci__name { font-weight: 700; font-size: .9rem; line-height: 1.25; } .ci__meta { color: var(--muted); font-size: .76rem; margin-top: 1px; } .ci__row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; } .ci__qty { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; } .ci__qty button { width: 30px; height: 28px; border: 0; background: none; color: var(--brand); font-weight: 800; font-size: 1.05rem; } .ci__qty span { min-width: 20px; text-align: center; font-weight: 700; font-size: .88rem; } .ci__price { font-weight: 800; color: var(--brand); font-size: .92rem; } .ci__del { border: 0; background: none; color: #b9a998; font-size: 1rem; align-self: flex-start; padding: 2px; } .sumrow { display: flex; justify-content: space-between; font-size: .92rem; padding: 3px 0; color: var(--ink); } .sumrow .v { font-weight: 700; } .sumrow.total { font-size: 1.08rem; font-weight: 800; border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 9px; } .sumrow.free .v { color: var(--green); } /* ── Product dialog options (menu) ───────────────────────────────────────── */ .dlg-sect { font-weight: 800; font-size: .85rem; margin: 16px 0 8px; } .dlg-sect .req { color: var(--red); font-size: .7rem; } .dlg-sect small { color: var(--muted); font-size: .7rem; font-weight: 600; } .vrow-list { display: flex; flex-direction: column; gap: 8px; } .vrow { display: flex; justify-content: space-between; align-items: center; padding: 11px 15px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; font-weight: 600; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .vrow b { color: var(--brand); } .vrow.on { border-color: var(--brand); background: var(--brand-soft); } .mpick-row { display: flex; flex-wrap: wrap; gap: 8px; } .mpick { padding: 8px 14px; border-radius: 99px; font-weight: 600; font-size: .84rem; border: 1.5px solid var(--line); background: #fff; color: var(--ink); transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .mpick.on { border-color: var(--brand); background: var(--brand); color: #fff; } .dlg-note { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; outline: none; transition: border-color var(--d-fast) var(--ease); } .dlg-note:focus { border-color: var(--brand); } .dlg-foot { display: flex; gap: 10px; align-items: center; } .ci__qty--lg { height: 46px; } .ci__qty--lg button { width: 40px; height: 44px; font-size: 1.3rem; } .ci__qty--lg span { min-width: 26px; font-size: 1rem; } .dlg-add { flex: 1; justify-content: space-between; } /* ── Checkout form ───────────────────────────────────────────────────────── */ .seg { display: grid; grid-template-columns: 1fr 1fr; background: #f3ece2; border-radius: var(--r); padding: 4px; gap: 4px; } .seg button { border: 0; border-radius: var(--r-sm); padding: 11px 8px; background: transparent; font-weight: 700; font-size: .95rem; color: var(--muted); transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } .seg button.sel { background: #fff; color: var(--brand); box-shadow: var(--shadow); } .field { margin: 12px 0; } .field label { display: block; font-weight: 700; font-size: .82rem; margin-bottom: 5px; color: #5d5044; } .field label .req { color: var(--red); } .field input, .field textarea, .field select { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: #fff; outline: none; transition: border-color var(--d-fast) var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); } .field .hint { font-size: .75rem; color: var(--muted); margin-top: 4px; } .locbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border: 1.5px dashed var(--brand); color: var(--brand); background: var(--brand-soft); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: .83rem; } .fee-note { display: none; margin-top: 10px; border-radius: var(--r-sm); padding: 10px 13px; font-size: .85rem; font-weight: 600; } .fee-note.show { display: block; animation: fadeDown var(--d-med) var(--ease); } .fee-note.free { background: var(--green-soft); color: var(--green); } .fee-note.paid { background: #fff7e6; color: #9a6b00; } /* ── Floating action buttons ─────────────────────────────────────────────── */ .fab-cart { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; display: none; align-items: center; justify-content: space-between; background: var(--brand); color: #fff; border: 0; border-radius: var(--r); padding: 14px 18px; font-weight: 800; font-size: .98rem; box-shadow: var(--shadow-lg); animation: fadeUp var(--d-med) var(--ease); } .fab-cart.show { display: flex; } @media (min-width: 860px) { .fab-cart { display: none !important; } } @keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } } .wa-float { position: fixed; right: 14px; bottom: calc(132px + env(safe-area-inset-bottom)); z-index: 65; width: 48px; height: 48px; border-radius: 99px; background: var(--wa); border: 0; display: grid; place-items: center; box-shadow: var(--shadow-md); } .wa-float svg { width: 26px; height: 26px; fill: #fff; } /* ── Floating QR button + modal ──────────────────────────────────────────── */ .qr-fab { position: fixed; right: 14px; bottom: calc(188px + env(safe-area-inset-bottom)); z-index: 65; width: 48px; height: 48px; border-radius: 99px; border: 0; background: var(--brand); color: #fff; font-size: 1.35rem; display: grid; place-items: center; box-shadow: var(--shadow-md); cursor: pointer; animation: qrFloat 2.6s var(--ease) infinite; } .qr-fab:hover { animation-play-state: paused; transform: scale(1.05); } @keyframes qrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .qr-fab { animation: none; } } .qr-modal { position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 20px; } .qr-modal.open { display: flex; } .qr-modal__box { background: #fff; border-radius: var(--r); padding: 22px; max-width: 340px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); } .qr-modal__box img { width: 100%; border-radius: var(--r-sm); } .qr-modal__close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; } /* ── Chatbot widget ──────────────────────────────────────────────────────── */ .chat-fab { position: fixed; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 65; width: 48px; height: 48px; border-radius: 99px; border: 0; background: var(--ink); color: #fff; font-size: 1.35rem; display: grid; place-items: center; box-shadow: var(--shadow-md); } .chat-panel { position: fixed; z-index: 110; right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: min(560px, 82dvh); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px) scale(.96); opacity: 0; visibility: hidden; transition: transform var(--d-med) var(--ease), opacity var(--d-med) var(--ease), visibility var(--d-med); } .chat-panel.open { transform: none; opacity: 1; visibility: visible; } @media (min-width: 560px) { .chat-panel { left: auto; width: 380px; right: 18px; bottom: 18px; } } .chat-head { background: var(--brand); color: #fff; padding: 13px 16px; display: flex; align-items: center; gap: 10px; } .chat-head .em { font-size: 1.5rem; } .chat-head .t { font-weight: 800; line-height: 1.15; } .chat-head .s { font-size: .74rem; opacity: .9; } .chat-head button { margin-left: auto; border: 0; background: rgba(255,255,255,.18); color: #fff; width: 30px; height: 30px; border-radius: 99px; font-weight: 700; } .chat-body { flex: 1; overflow-y: auto; padding: 14px 12px; background: var(--bg); } .msg { max-width: 84%; margin-bottom: 10px; padding: 10px 13px; border-radius: var(--r); font-size: .88rem; white-space: pre-line; line-height: 1.45; animation: fadeUp .2s var(--ease); } .msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; } .msg.user { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; } .msg.typing { color: var(--muted); font-style: italic; background: #fff; border: 1px solid var(--line); } .msg-cards { display: flex; gap: 8px; overflow-x: auto; margin: 2px 0 10px; padding-bottom: 4px; scrollbar-width: none; } .msg-cards::-webkit-scrollbar { display: none; } .msg-card { flex: 0 0 120px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .msg-card.linkable { transition: border-color var(--d) var(--ease), transform var(--d) var(--ease); } .msg-card.linkable:hover { border-color: var(--brand); transform: translateY(-2px); } .msg-card img, .msg-card .ph { width: 100%; height: 70px; object-fit: cover; } .msg-card .ph { display: grid; place-items: center; background: var(--brand-soft); font-size: 1.3rem; } .msg-card .n { font-size: .7rem; font-weight: 700; padding: 5px 7px 1px; line-height: 1.2; } .msg-card .p { font-size: .7rem; color: var(--brand); font-weight: 800; padding: 0 7px 6px; } .chat-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 8px; background: var(--bg); } .chat-quick button { border: 1.5px solid var(--brand); color: var(--brand); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: .78rem; font-weight: 700; } .chat-foot { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); } .chat-foot input { flex: 1; border: 1.5px solid var(--line); border-radius: 99px; padding: 10px 16px; outline: none; } .chat-foot input:focus { border-color: var(--brand); } .chat-foot button { width: 42px; height: 42px; border-radius: 99px; border: 0; background: var(--brand); color: #fff; font-size: 1.05rem; } /* ── Toast ───────────────────────────────────────────────────────────────── */ .toast { position: fixed; left: 50%; bottom: calc(188px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); z-index: 130; background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 99px; font-weight: 700; font-size: .88rem; opacity: 0; visibility: hidden; transition: opacity var(--d-med) var(--ease), transform var(--d-med) var(--ease), visibility var(--d-med); max-width: 90vw; text-align: center; } .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%); } .toast.green { background: var(--green); } .toast.red { background: var(--red); } /* ── Hero / info / footer (home & shared) ────────────────────────────────── */ .infobar { background: #fff; border-bottom: 1px solid var(--line); font-size: .8rem; color: #5d5044; text-align: center; padding: 8px 14px; display: flex; gap: 6px 22px; justify-content: center; flex-wrap: wrap; min-height: 36px; } .infobar #hoursInfo { min-width: 170px; } .infobar #hoursInfo.closed { color: var(--red); font-weight: 700; } .hero { text-align: center; padding: 56px 20px 40px; background: radial-gradient(1000px 400px at 50% -140px, rgba(193, 68, 14, .12), transparent), var(--bg); } .hero .kicker { text-transform: uppercase; letter-spacing: 2.5px; color: var(--brand); font-weight: 700; font-size: .82rem; } .hero h1 { font-family: var(--display); font-size: clamp(2.2rem, 6.5vw, 3.6rem); line-height: 1.08; letter-spacing: 1px; margin: 12px auto 8px; max-width: 800px; } .hero .tagline { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.05rem; } .hero .cta { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } .generic-hero { padding: 40px 20px 12px; text-align: center; } .generic-hero h1 { font-family: var(--display); font-size: clamp(1.9rem, 6vw, 2.8rem); letter-spacing: 1px; } .generic-hero p { color: var(--muted); font-size: .92rem; max-width: 560px; margin: 6px auto 0; } .open-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 16px; font-weight: 700; font-size: .85rem; box-shadow: var(--shadow); } .open-pill .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--green); animation: pulse 1.6s infinite; } .open-pill.closed .dot { background: var(--red); animation: none; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,125,50,.4);} 60% { box-shadow: 0 0 0 6px rgba(46,125,50,0);} } .footer { background: #1d140d; color: #cbb9a8; margin-top: 56px; padding: 40px 18px calc(34px + env(safe-area-inset-bottom)); text-align: center; } body:has(.fab-cart.show) .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); } @media (min-width: 860px) { .footer, body:has(.fab-cart.show) .footer { padding-bottom: 34px; } } .footer__links { display: flex; gap: 8px 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .footer__links a { color: #f0e4d6; font-weight: 600; font-size: .9rem; } .footer small { font-size: .78rem; opacity: .75; display: block; line-height: 1.7; } /* ── FAQ (AEO) ───────────────────────────────────────────────────────────── */ .faq { max-width: 760px; margin: 0 auto; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; } .faq-q { width: 100%; text-align: left; border: 0; background: none; padding: 15px 18px; font-weight: 700; font-size: .95rem; display: flex; justify-content: space-between; gap: 12px; align-items: center; } .faq-q .ico { color: var(--brand); font-size: 1.2rem; font-weight: 800; line-height: 1; width: 20px; text-align: center; transition: transform var(--d-med) var(--ease); flex: 0 0 auto; } .faq-item.open .faq-q .ico { transform: rotate(45deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-med) var(--ease); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a p { min-height: 0; overflow: hidden; padding: 0 18px; color: #5d5044; font-size: .9rem; } .faq-a p::after { content: ''; display: block; height: 15px; } /* ── Account cards (account.html + track.html) ───────────────────────────── */ .acct-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); } .acct-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 10px; } .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .acct-row:last-child { border-bottom: 0; } .acct-row .meta { font-size: .78rem; color: var(--muted); margin-top: 2px; } /* ── Misc ────────────────────────────────────────────────────────────────── */ .skeleton { border-radius: var(--r); background: linear-gradient(100deg, #f1e9dd 40%, #faf5ec 50%, #f1e9dd 60%); background-size: 200% 100%; animation: sk 1.3s infinite; } @keyframes sk { to { background-position-x: -200%; } } .hidden { display: none !important; } .empty-note { text-align: center; color: var(--muted); padding: 40px 16px; } .sold { filter: grayscale(1); opacity: .6; } /* ── Login sheet (OTP + social) ──────────────────────────────────────────── */ .otp { font-size: 1.5rem !important; letter-spacing: .55em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } .sso { margin-top: 16px; text-align: center; } .sso__or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; } .sso__or::before, .sso__or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .sso__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .sso__btn { flex: 1; min-width: 100px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 11px 10px; font-weight: 700; font-size: .9rem; color: var(--ink); transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .sso__btn:hover { border-color: #cbb89d; } .sso__btn:active { transform: scale(.96); } .sso__btn[data-soon] { opacity: .78; } /* ── Order wait overlay (POS approval) ───────────────────────────────────── */ .order-wait { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 14, 6, .48); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s var(--ease); } .order-wait.open { opacity: 1; } .order-wait__card { width: 100%; max-width: 400px; padding: 38px 28px 32px; text-align: center; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--r-lg); box-shadow: 0 24px 70px rgba(60, 35, 10, .3); transform: scale(.88) translateY(14px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); } .order-wait.open .order-wait__card { transform: scale(1) translateY(0); opacity: 1; } .order-wait__icon { position: relative; width: 88px; height: 88px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 2.7rem; border-radius: 50%; background: var(--brand-soft); animation: ow-float 2.6s ease-in-out infinite; } .order-wait__icon::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; animation: ow-glow 2s ease-out infinite; } @keyframes ow-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes ow-glow { 0% { box-shadow: 0 0 0 0 rgba(193, 68, 14, .35); } 100% { box-shadow: 0 0 0 24px rgba(193, 68, 14, 0); } } .order-wait__card h2 { font-family: var(--display); font-size: 1.7rem; letter-spacing: .5px; margin-bottom: 6px; color: var(--ink); } .order-wait__num { font-size: 1rem; font-weight: 800; color: var(--brand); margin-bottom: 14px; } .order-wait__msg { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .order-wait__sub { font-size: .9rem; color: var(--muted); line-height: 1.5; margin-bottom: 22px; } .order-wait__status { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 16px; background: var(--brand-soft); border-radius: var(--r-sm); margin-bottom: 14px; transition: background var(--d-med) var(--ease); } .order-wait__status.ok { background: #e9f5ea; } .order-wait__status.ok .order-wait__label { color: var(--green); } .order-wait__status.bad { background: #fdecec; } .order-wait__status.bad .order-wait__label { color: var(--red); } .order-wait__loader { display: inline-flex; gap: 5px; } .order-wait__loader i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: ow-bounce 1.2s ease-in-out infinite; } .order-wait__loader i:nth-child(2) { animation-delay: .15s; } .order-wait__loader i:nth-child(3) { animation-delay: .3s; } @keyframes ow-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-7px); opacity: 1; } } .order-wait__label { font-size: .92rem; font-weight: 700; color: var(--brand); } .order-wait__dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: ow-dots 1.4s steps(4, end) infinite; } @keyframes ow-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } } .order-wait__pts { font-size: .9rem; font-weight: 600; color: var(--green); margin-bottom: 0; }