/* ============================================================ TK MENU - storefront styles Tokens aligned to the brand canon (tk-brand/tokens.css) so the menu, side cart, and checkout read as one system. Legacy --tkm-* names are aliased so older selectors keep resolving. Tokens live on :root (not #tk-menu-root) because the modifier modal is appended to , outside the root, and must read them too. ============================================================ */ :root { --tk-accent: #2563EB; /* trustworthy azure: the primary chrome accent */ --tk-accent-hover: #1D4ED8; --tk-accent-pressed: #1E40AF; --tk-accent-tint: #EFF4FF; --tk-hot: #B91C1C; /* warm: kept ONLY for spice/heat cues (appetite) */ --tk-hot-tint: #FEF2F2; --ink-900: #0A0A0A; --ink-700: #262626; --ink-600: #404040; --ink-500: #737373; --ink-400: #A3A3A3; --ink-300: #D4D4D4; --ink-200: #E5E5E5; --ink-100: #F5F5F5; --ink-50: #FAFAFA; --white: #FFFFFF; --tk-amber: #E8A33D; --success: #15803D; --success-tint: #F0FDF4; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --sh-sm: 0 1px 2px rgba(0,0,0,.04); --sh-md: 0 4px 12px rgba(0,0,0,.06); --sh-lg: 0 12px 32px rgba(0,0,0,.08); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; /* Legacy aliases (older selectors + the modal) */ --tkm-fg: var(--ink-900); --tkm-muted: var(--ink-500); --tkm-border: var(--ink-200); --tkm-accent: var(--tk-accent); --tkm-accent-fg: var(--white); --tkm-surface: var(--ink-50); --tkm-shadow: var(--sh-md); --tkm-radius: var(--r-lg); --tkm-radius-sm: var(--r-sm); --tkm-gap: 16px; } #tk-menu-root { /* Sticky offset for the rail, cart and section headers. Tune against the live theme header on staging if section headers tuck behind it. */ --tkm-stick: 16px; font-family: var(--font-sans); color: var(--ink-900); max-width: 1200px; margin: 0 auto; padding: 16px; opacity: 0; transition: opacity .2s ease; } #tk-menu-root[data-ready="1"] { opacity: 1; } #tk-menu-root * { box-sizing: border-box; } #tk-menu-root button { font: inherit; color: inherit; cursor: pointer; } /* ---- Topbar ---------------------------------------------------------- */ .tkm-topbar { margin-bottom: 10px; } .tkm-topbar h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } /* ---- Masala-fountain hero ------------------------------------------- */ /* The hero carries the page title, so hide the JS topbar when it is present. */ .tkm-hero ~ #tk-menu-root .tkm-topbar { display: none; } .tkm-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 18px; height: clamp(380px, 66vh, 620px); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2a1a12 0%, #14110F 58%, #0a0807 100%); display: flex; align-items: flex-end; isolation: isolate; } .tkm-hero-media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; } .tkm-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; animation: tkm-kenburns 22s ease-in-out infinite alternate; } @keyframes tkm-kenburns { from { transform: scale(1.05); } to { transform: scale(1.14); } } /* Flowing-sauce video, lazy-loaded by menu.js and faded in over the still. */ .tkm-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s ease; } .tkm-hero-video.is-ready { opacity: 1; } /* Once the real motion is playing, drop the CSS glisten. */ .tkm-hero.is-playing .tkm-hero-flow { opacity: 0 !important; } /* A single soft warm glisten that slides down the pour and fades (no scanlines). */ .tkm-hero-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(255, 236, 208, .14) 50%, transparent 100%); background-size: 100% 55%; background-repeat: no-repeat; mix-blend-mode: screen; animation: tkm-flow 6.5s ease-in-out infinite; } @keyframes tkm-flow { 0% { background-position-y: -60%; opacity: 0; } 18% { opacity: .85; } 82% { opacity: .85; } 100% { background-position-y: 160%; opacity: 0; } } /* Bottom scrim melts the dark hero into the white menu below. */ .tkm-hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,8,7,.20) 0%, rgba(10,8,7,0) 26%, rgba(10,8,7,.42) 70%, var(--white) 100%); } .tkm-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px clamp(28px, 6vh, 60px); color: #fff; text-align: center; } .tkm-hero-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--tk-amber); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.55); } .tkm-hero-title { margin: 0; font-size: clamp(40px, 9vw, 86px); font-weight: 800; line-height: .98; letter-spacing: -0.03em; color: #fff !important; /* beat theme .entry-content heading color */ text-shadow: 0 2px 26px rgba(0,0,0,.55); } .tkm-hero-sub { margin: 12px 0 0; font-size: clamp(14px, 2.4vw, 18px); font-weight: 500; color: rgba(255,255,255,.9) !important; /* beat theme .entry-content p color */ text-shadow: 0 1px 12px rgba(0,0,0,.55); } .tkm-hero-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin-top: clamp(16px, 4vh, 32px); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); } .tkm-hero-cue svg { animation: tkm-bob 1.8s ease-in-out infinite; } @keyframes tkm-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @media (prefers-reduced-motion: reduce) { .tkm-hero-img, .tkm-hero-flow, .tkm-hero-cue svg { animation: none; } .tkm-hero-media { transform: none !important; } } /* ---- Mobile category chip bar (hidden on desktop) -------------------- */ .tkm-nav { display: none; } .tkm-chip { flex: 0 0 auto; background: var(--ink-50); border: 1px solid var(--ink-200); padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .tkm-chip.is-active { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; } /* ---- Three-pane layout ----------------------------------------------- */ .tkm-layout { display: grid; gap: 24px; align-items: start; grid-template-columns: 190px minmax(0, 1fr) 340px; } .tkm-rail { position: sticky; top: var(--tkm-stick); align-self: start; max-height: calc(100vh - var(--tkm-stick) - 16px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; } .tkm-rail::-webkit-scrollbar { display: none; } .tkm-navitem { text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; color: var(--ink-500); white-space: nowrap; transition: background .12s, color .12s; } .tkm-navitem:hover { background: var(--ink-50); color: var(--ink-900); } .tkm-navitem.is-active { background: var(--tk-accent-tint); color: var(--tk-accent); } /* chip variant overrides the rail look on mobile (declared after navitem) */ .tkm-chip.is-active { background: var(--tk-accent); color: #fff; } /* ---- Sections + cards ------------------------------------------------ */ .tkm-scroll { min-width: 0; } .tkm-section { scroll-margin-top: calc(var(--tkm-stick) + 8px); } .tkm-section + .tkm-section { margin-top: 10px; } .tkm-section-h { position: sticky; top: var(--tkm-stick); z-index: 5; margin: 0 0 14px; padding: 8px 0; background: var(--white); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); border-bottom: 1px solid var(--ink-100); } .tkm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .tkm-card { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--sh-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; } .tkm-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--ink-300); } .tkm-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink-100); display: block; } .tkm-card-img-empty { background: var(--ink-100); } .tkm-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .tkm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .tkm-card-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; } .tkm-card-desc { margin: 0; font-size: 13px; color: var(--ink-500); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tkm-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; gap: 8px; } .tkm-price { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .tkm-add { background: var(--tk-accent); color: #fff; border: 0; min-width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font-weight: 700; font-size: 13.5px; transition: background .12s, transform .12s; } .tkm-add:hover { background: var(--tk-accent-hover); } .tkm-add:active { transform: scale(.94); } .tkm-add.tkm-added { background: var(--success); transform: scale(1.06); } .tkm-card-choose .tkm-add { padding: 0 13px; } /* "Build Your Lunch Box" picker card, a tinted Choose card so it stands out. */ .tkm-boxcard { background: var(--tk-accent-tint); border-color: #f3cbc6; } .tkm-boxcard .tkm-card-head h3 { color: var(--tk-accent); } .tkm-boxcard.is-unavailable { opacity: .72; } /* Preview mode (outside the lunch window): card stays clickable, lighter dim. */ .tkm-boxcard.is-preview { opacity: .85; } .tkm-lb-closed { color: var(--tk-accent); font-weight: 600; } .tkm-boxcard .tkm-add[disabled] { background: var(--ink-300); color: var(--ink-500); cursor: not-allowed; } .tkm-add-txt { white-space: nowrap; } /* Gift-card / link cards: whole card is clickable, action is an not an add button. */ .tkm-card--link { cursor: pointer; } .tkm-add--link { text-decoration: none; } .tkm-add--link:hover { color: #fff; } /* Drink (image-toggle) grid: tappable picture tiles for a group with display="icons". */ .tkm-drinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .tkm-drink { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; background: var(--surface, #fff); border: 1.5px solid var(--ink-200, #e6e6e6); border-radius: 14px; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; text-align: center; } .tkm-drink:hover { border-color: var(--tk-accent); } .tkm-drink:active { transform: scale(.97); } .tkm-drink.is-selected { border-color: var(--tk-accent); background: var(--tk-accent-tint, #fdeeec); } .tkm-drink-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; } .tkm-drink-img--none { display: flex; align-items: center; justify-content: center; color: var(--ink-300, #c8c8c8); } .tkm-drink-label { font-size: 12px; font-weight: 600; line-height: 1.15; color: var(--ink-700, #333); } .tkm-drink-price { font-size: 11.5px; font-weight: 700; color: var(--tk-accent); } .tkm-drink-check { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--tk-accent); border-radius: 999px; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; } .tkm-drink-check svg { width: 12px; height: 12px; } .tkm-drink.is-selected .tkm-drink-check { opacity: 1; transform: scale(1); } /* ---- Dietary / spice badges ----------------------------------------- */ .tkm-badges { display: inline-flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; } .tkm-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 999px; line-height: 1; } .tkm-badge svg { width: 12px; height: 12px; } .tkm-badge-veg { background: var(--success-tint); color: var(--success); } .tkm-badge-gf { background: var(--ink-100); color: var(--ink-600); } .tkm-badge-hot { background: var(--tk-hot-tint); color: var(--tk-hot); } /* ---- Modifier modal (scrim + bottom sheet) -------------------------- */ .tkm-scrim { position: fixed; inset: 0; height: 100vh; height: 100dvh; /* track the visible viewport so the bottom sheet stays on-screen on iOS */ background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 9999; opacity: 0; transition: opacity .2s ease; } .tkm-scrim.is-open { opacity: 1; } .tkm-sheet { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; display: flex; flex-direction: column; transform: translateY(20px); transition: transform .25s ease; } .tkm-scrim.is-open .tkm-sheet { transform: translateY(0); } @media (min-width: 640px) { .tkm-scrim { align-items: center; } .tkm-sheet { border-radius: var(--r-xl); margin: 24px; max-height: 85vh; max-height: 85dvh; } } .tkm-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ink-200); } .tkm-sheet-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .tkm-icon-btn { background: none; border: 0; padding: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink-600); } .tkm-icon-btn:hover { background: var(--ink-50); color: var(--ink-900); } .tkm-sheet-body { padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0; /* scroll inside the sheet instead of pushing the header off-screen */ } .tkm-sheet-desc { color: var(--ink-500); font-size: 13px; line-height: 1.5; margin: 12px 0 0; } .tkm-group { padding: 14px 0; border-bottom: 1px solid var(--ink-200); } .tkm-group:last-child { border-bottom: 0; } .tkm-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .tkm-group h4 { margin: 0; font-size: 15px; font-weight: 600; } .tkm-req { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--tk-accent); } .tkm-opts { display: flex; flex-direction: column; gap: 6px; } .tkm-opt { display: flex; align-items: center; gap: 10px; background: var(--ink-50); border: 1px solid transparent; border-radius: var(--r-md); padding: 10px 12px; text-align: left; transition: background .1s, border-color .1s; } .tkm-opt-indicator { width: 20px; height: 20px; border: 1.5px solid var(--ink-300); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: transparent; flex: 0 0 auto; } .tkm-opt.is-selected { background: #fff; border-color: var(--tk-accent); } .tkm-opt.is-selected .tkm-opt-indicator { background: var(--tk-accent); border-color: var(--tk-accent); } .tkm-opt-label { flex: 1; font-size: 14px; } .tkm-opt-price { color: var(--ink-500); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- Add-on chip grid (group display = "chips") ---------------------- */ /* Wrapping pill toggles for stackable extras; selected = filled accent, like .tkm-boxpick.is-active. Plus icon flips to a check in the renderer. */ .tkm-addons-hint { font-size: 12px; font-weight: 600; color: var(--ink-500); } .tkm-addons { display: flex; flex-wrap: wrap; gap: 8px; } .tkm-addon { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px 8px 10px; border: 1px solid var(--ink-200); border-radius: 999px; background: var(--ink-50); color: var(--ink-700); font-size: 14px; font-weight: 600; transition: background .12s, border-color .12s, color .12s; } .tkm-addon:hover { border-color: var(--ink-300); } .tkm-addon-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-500); } .tkm-addon-ic svg { width: 16px; height: 16px; } .tkm-addon-price { font-size: 13px; color: var(--ink-500); font-variant-numeric: tabular-nums; } .tkm-addon.is-selected { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; } .tkm-addon.is-selected .tkm-addon-ic, .tkm-addon.is-selected .tkm-addon-price { color: rgba(255,255,255,.85); } /* ---- Spice heat meter ----------------------------------------------- */ /* Connected segments that fill cumulatively (volume-meter style). Per-segment hue ramps green -> red via the inline --i / --n the renderer sets. */ .tkm-heatmeter { display: flex; gap: 2px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ink-200); background: var(--ink-200); } .tkm-heat-seg { --hue: calc(112 - 112 * var(--i) / max(var(--n) - 1, 1)); /* 112 (green) -> 0 (red) */ flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; background: var(--ink-50); border: 0; color: var(--ink-400); cursor: pointer; transition: background .15s ease, color .15s ease; } .tkm-heat-seg .tkm-heat-flame { display: inline-flex; } .tkm-heat-seg svg { width: 16px; height: 16px; } .tkm-heat-name { font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; letter-spacing: .01em; } /* Lit segments take their ramp color; the active (chosen) one reads boldest. */ .tkm-heat-seg.is-filled { background: hsl(var(--hue) 72% 46%); color: #fff; } .tkm-heat-seg.is-filled svg { fill: currentColor; } .tkm-heat-seg.is-active { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); } .tkm-heat-seg:not(.is-filled):hover { background: var(--ink-100); color: var(--ink-600); } .tkm-heat-seg:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: -2px; } .tkm-heat-caption { margin: 8px 0 0; font-size: 13px; color: var(--ink-500); } .tkm-heat-caption strong { color: var(--tk-hot); font-weight: 700; } .tkm-heat-caption.is-empty { font-style: italic; } /* Rice choice: three icon tiles for a categorical pick, same polish as the heat meter. */ .tkm-ricepicker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tkm-rice-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 14px 8px 12px; border: 1.5px solid var(--ink-200); border-radius: var(--r-md); background: var(--ink-50); color: var(--ink-500); cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease, color .15s ease; } .tkm-rice-tile:hover { border-color: var(--tk-accent); background: #fff; } .tkm-rice-tile:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; } .tkm-rice-ic { display: inline-flex; color: var(--ink-500); } .tkm-rice-ic svg { width: 26px; height: 26px; } .tkm-rice-name { font-size: 12px; font-weight: 700; line-height: 1.15; color: var(--ink-700); } .tkm-rice-price { font-size: 11px; font-weight: 700; color: var(--tk-accent); } .tkm-rice-tile.is-selected { border-color: var(--tk-accent); background: var(--tk-accent-tint); } .tkm-rice-tile.is-selected .tkm-rice-ic, .tkm-rice-tile.is-selected .tkm-rice-name { color: var(--tk-accent); } .tkm-rice-check { position: absolute; top: 6px; right: 6px; display: inline-flex; color: var(--tk-accent); } .tkm-rice-check svg { width: 15px; height: 15px; } .tkm-rice-caption { margin: 8px 0 0; font-size: 13px; color: var(--ink-500); } .tkm-rice-caption strong { color: var(--tk-accent); font-weight: 700; } .tkm-rice-caption.is-empty { font-style: italic; } @media (prefers-reduced-motion: reduce) { .tkm-rice-tile { transition: none; } } .tkm-notes { width: 100%; border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: 10px 12px; font: inherit; resize: vertical; } .tkm-notes:focus { outline: 2px solid var(--tk-accent); outline-offset: -1px; border-color: var(--tk-accent); } .tkm-sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink-200); display: flex; align-items: center; gap: 10px; background: #fff; } .tkm-qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ink-200); border-radius: 999px; padding: 4px; } .tkm-qty button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700); } .tkm-qty button:hover { background: var(--ink-100); } .tkm-qty span { min-width: 20px; text-align: center; font-weight: 700; font-size: 15px; } .tkm-add-btn { flex: 1; background: var(--tk-accent); color: #fff; border: 0; border-radius: 999px; padding: 13px 16px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: background .12s; } .tkm-add-btn:hover { background: var(--tk-accent-hover); } /* Preview modal footer: disabled Add carries the availability message + live total. */ .tkm-add-btn[disabled] { background: var(--ink-300); color: var(--ink-500); cursor: not-allowed; } .tkm-add-btn[disabled]:hover { background: var(--ink-300); } .tkm-add-btn.is-preview { font-size: 13.5px; } /* ---- Lunch box builder: box-type selector --------------------------- */ .tkm-boxpicker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; } .tkm-boxpick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--ink-50); color: var(--ink-700); font-weight: 700; transition: background .12s, border-color .12s, color .12s; } .tkm-boxpick:hover { border-color: var(--ink-300); } .tkm-boxpick-name { font-size: 14px; } .tkm-boxpick-price { font-size: 12px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; } .tkm-boxpick.is-active { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; } .tkm-boxpick.is-active .tkm-boxpick-price { color: rgba(255,255,255,.85); } /* ---- Persistent side cart ------------------------------------------- */ .tkm-cart { position: sticky; top: var(--tkm-stick); align-self: start; max-height: calc(100vh - var(--tkm-stick) - 16px); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; } .tkm-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ink-200); } .tkm-cart-head h2 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .tkm-cart-count { background: var(--tk-accent); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 1px 8px; min-width: 20px; text-align: center; } .tkm-cart-close { display: none; } /* only the mobile sheet shows a close button */ .tkm-cart-body { flex: 1; min-height: 0; /* allow the line list to scroll inside the bounded aside/sheet */ overflow-y: auto; padding: 4px 16px; } .tkm-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 160px; color: var(--ink-500); font-size: 14px; padding: 24px 12px; } .tkm-cart-empty p { margin: 0; font-weight: 600; color: var(--ink-700); } .tkm-cart-empty span { font-size: 13px; } .tkm-cart-line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ink-200); } .tkm-cart-line:last-child { border-bottom: 0; } .tkm-cart-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-md); flex: 0 0 auto; background: var(--ink-100); } .tkm-cart-line-body { flex: 1; min-width: 0; } .tkm-cart-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .tkm-cart-line-top h4 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; } .tkm-cart-line-total { font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; } .tkm-cart-line-sum { margin: 4px 0 0; font-size: 12px; color: var(--ink-500); line-height: 1.4; } .tkm-cart-line-notes { margin: 4px 0 0; font-size: 12px; color: var(--ink-500); font-style: italic; } .tkm-cart-line-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tkm-cart-line-foot .tkm-qty { padding: 2px; } .tkm-cart-line-foot .tkm-qty button { width: 28px; height: 28px; } .tkm-link-btn { background: none; border: 0; color: var(--ink-600); font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: var(--r-sm); } .tkm-link-btn:hover { background: var(--ink-50); color: var(--ink-900); } .tkm-link-danger { color: var(--tk-accent); } .tkm-link-danger:hover { background: var(--tk-accent-tint); color: var(--tk-accent); } .tkm-cart-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink-200); display: flex; flex-direction: column; gap: 12px; background: #fff; } .tkm-cart-subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .tkm-checkout { width: 100%; background: var(--tk-accent); color: #fff; border: 0; border-radius: var(--r-md); padding: 14px 16px; font-size: 15px; font-weight: 700; transition: background .12s; } .tkm-checkout:hover { background: var(--tk-accent-hover); } .tkm-checkout[disabled] { background: var(--ink-300); color: var(--ink-500); cursor: not-allowed; } /* ---- Mobile floating cart bar + sheet backdrop ---------------------- */ .tkm-cartbar { display: none; } .tkm-cartbar-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: var(--tk-accent); color: #fff; border: 0; border-radius: var(--r-lg); padding: 14px 18px; font-size: 15px; font-weight: 700; box-shadow: var(--sh-lg); } .tkm-cartbar-btn:hover { background: var(--tk-accent-hover); } .tkm-cartbar-left { display: inline-flex; align-items: center; gap: 10px; } .tkm-cartbar-count { background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 8px; font-size: 13px; } .tkm-cartbar-tot { font-variant-numeric: tabular-nums; } .tkm-sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9990; } /* ---- Scroll lock + nudge animation ---------------------------------- */ body.tkm-lock { overflow: hidden; } /* The theme's Call Now button is fixed bottom-left at z-index max-int and would cover the modal/sheet footer (qty stepper). Hide it while a sheet is open. */ body.tkm-lock #callnowbutton { display: none !important; } @keyframes tkm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .tkm-shake { animation: tkm-shake .3s ease; } /* ---- Tablet: drop the persistent aside; cart via floating bar + sheet */ @media (max-width: 1024px) { .tkm-layout { grid-template-columns: 170px minmax(0, 1fr); } .tkm-cart { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 520px; margin: 0 auto; max-height: 85vh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; transform: translateY(100%); transition: transform .25s ease; z-index: 9998; } .tkm-cart.is-open { transform: translateY(0); } .tkm-cart-close { display: inline-flex; } .tkm-cartbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } .tkm-scroll { padding-bottom: 84px; } /* clear the floating bar */ } /* ---- Mobile: single column + sticky chip bar replaces the rail ------ */ @media (max-width: 680px) { #tk-menu-root { --tkm-stick: 58px; } .tkm-layout { grid-template-columns: 1fr; } .tkm-rail { display: none; } .tkm-nav { display: flex; gap: 8px; overflow-x: auto; position: sticky; top: 0; z-index: 20; background: var(--white); margin: 0 -16px 4px; padding: 10px 16px; scrollbar-width: none; box-shadow: 0 1px 0 var(--ink-100); } .tkm-nav::-webkit-scrollbar { display: none; } .tkm-cards { grid-template-columns: 1fr; } .tkm-card { flex-direction: row; } .tkm-card-img { width: 88px; height: auto; aspect-ratio: 1 / 1; align-self: stretch; } .tkm-card-body { padding: 10px 12px; } .tkm-card-desc { -webkit-line-clamp: 1; } } /* ---- Reduced motion -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tkm-scrim, .tkm-sheet, .tkm-cart, .tkm-card, #tk-menu-root, .tkm-shake, .tkm-add, .tkm-heat-seg { transition: none; animation: none; } } /* Single-cart hygiene: this stylesheet only loads on tk-menu pages, where tk-menu's own cart (.tkm-cart-*) is the single source of truth. Orderable injects its cart drawer + mini-cart globally (footer hook), so an empty, out-of-sync second cart would show here. Suppress Orderable's cart chrome (cosmetic only; the Orderable plugin is untouched). Removed for good when Orderable is retired. */ .orderable-drawer, .orderable-drawer__overlay, .orderable-mini-cart-wrapper, .orderable-mini-cart, .orderable-side-cart, .orderable-cart-link { display: none !important; } /* Single-location restaurant: hide the multi-location store-locator widget. */ .opml-store-locator { display: none !important; } /* Menu-page makeover: the masala-fountain hero IS the page title, so hide the theme's archive breadcrumb (.archive-header) + entry title (header.entry-header) above it. Scoped in practice because menu.css only loads where [tk_menu] renders (Shoptimizer; cosmetic, theme untouched). */ .shoptimizer-archive .archive-header, .shoptimizer-archive header.entry-header { display: none !important; } /* Add-to-cart acknowledgement toast (item added + Undo). Sits just ABOVE the floating "View Order" cart bar; z-index 10000 keeps it above the bar (9000) and the open cart sheet (9998) so neither covers it. Auto-dismisses. Paired with a cart bump. */ .tkm-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 10000; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 440px); padding: 12px 12px 12px 14px; background: var(--ink-900); color: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .tkm-toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .tkm-toast-ic { display: inline-flex; color: #34D399; } .tkm-toast-ic svg { width: 18px; height: 18px; } .tkm-toast-msg { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; } .tkm-toast-undo { flex: none; border: 0; background: transparent; color: #93C5FD; font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); } .tkm-toast-undo:hover { color: #fff; background: rgba(255,255,255,.1); } .tkm-toast-x { flex: none; border: 0; background: transparent; color: var(--ink-400); cursor: pointer; display: inline-flex; padding: 2px; } .tkm-toast-x:hover { color: #fff; } .tkm-toast-x svg { width: 16px; height: 16px; } /* Lift the toast above the floating View Order cart bar wherever that bar exists (<=1024px). */ @media (max-width: 1024px) { .tkm-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) { .tkm-toast { left: 12px; right: 12px; transform: translateY(16px); max-width: none; } .tkm-toast.is-open { transform: translateY(0); } } .tkm-cart-count.is-bump, [data-cartbar].is-bump { animation: tkm-bump .32s ease; } @keyframes tkm-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .tkm-toast { transition: opacity .01s linear; } .tkm-cart-count.is-bump, [data-cartbar].is-bump { animation: none; } } /* ---- Lunch Box promo billboard (Times Square) ------------------------------ Optional banner pinned at the top of the Lunch Box section. The image is the generated Times Square scene; the deal copy is HTML overlay (crisp, editable, accurate prices) over a left-to-right + bottom scrim. Driven by the tk_menu_lunchbox_banner option; clicking opens the Build Your Lunch Box picker. */ .tkm-lb-banner { position: relative; border-radius: var(--r-xl); overflow: hidden; background-size: cover; background-position: center 42%; min-height: 200px; display: flex; align-items: flex-end; margin: 4px 0 20px; box-shadow: var(--sh-lg); cursor: pointer; isolation: isolate; } .tkm-lb-banner__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(9,9,14,.95) 0%, rgba(9,9,14,.85) 34%, rgba(9,9,14,.45) 62%, rgba(9,9,14,.08) 85%, rgba(9,9,14,0) 100%), linear-gradient(0deg, rgba(9,9,14,.6) 0%, rgba(9,9,14,0) 50%); } .tkm-lb-banner__inner { position: relative; z-index: 1; padding: 22px 26px; max-width: 60%; color: var(--white); } .tkm-lb-banner__kicker { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #FCD34D; } .tkm-lb-banner__title { margin: 0 0 7px; font-size: 30px; font-weight: 800; line-height: 1.04; text-shadow: 0 2px 14px rgba(0,0,0,.55); } .tkm-lb-banner__sub { margin: 0 0 15px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.55); } .tkm-lb-banner__cta { display: inline-flex; align-items: center; gap: 7px; background: var(--tk-accent); color: #fff; font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: 999px; box-shadow: 0 6px 18px rgba(37,99,235,.4); transition: filter .15s ease, transform .15s ease; } .tkm-lb-banner__cta.is-off { background: rgba(255,255,255,.18); box-shadow: none; } .tkm-lb-banner__cta svg { width: 16px; height: 16px; } .tkm-lb-banner:hover .tkm-lb-banner__cta { filter: brightness(1.08); transform: translateX(2px); } @media (max-width: 680px) { .tkm-lb-banner { min-height: 220px; background-position: center 38%; } .tkm-lb-banner__inner { max-width: 100%; padding: 18px 18px 20px; } .tkm-lb-banner__title { font-size: 24px; } .tkm-lb-banner__sub { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .tkm-lb-banner__cta { transition: none; } } /* ---- Product-page mode: "Customize & add" button + floating View order bar -- Reuses the picker modal + cart + checkout on a WooCommerce single-product page. */ .tkm-pp-cta { margin: 16px 0 8px; } .tkm-pp-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--tk-accent); color: #fff; border: 0; font-size: 16px; font-weight: 700; line-height: 1; padding: 15px 32px; border-radius: var(--r-lg); cursor: pointer; box-shadow: 0 6px 18px rgba(37,99,235,.35); transition: filter .15s ease, transform .15s ease; } .tkm-pp-open:hover { filter: brightness(1.07); transform: translateY(-1px); } .tkm-pp-open:active { transform: translateY(0); } .tkm-pp-hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-500); } /* Floating "View order" bar, fixed to the bottom on all widths (the storefront one is tablet-only). */ .tkm-pp-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; } .tkm-pp-bar .tkm-cartbar-btn { pointer-events: auto; max-width: 520px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,.22); } /* Product-page immersive hero (front-page treatment: full-bleed image + gradient scrim). */ .tkm-pp-hero { position: relative; isolation: isolate; min-height: 360px; display: flex; align-items: flex-end; background-size: cover; background-position: center 42%; background-color: #0a0a0f; overflow: hidden; margin: 0 0 26px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Optional cinemagraph layer: the section background-image stays the instant poster/LCP; menu.js lazily appends this