, so the global `p { margin: 0 0 1rem }` applies, and flex * centres the MARGIN box rather than the text — that margin pushed the line * off-centre and inflated the bar well past its min-height. */ margin: 0; text-align: center; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); } .subbar__hours .sep { color: var(--line-2); margin: 0 0.5rem; } .topbar__links { display: flex; align-items: center; gap: 1.25rem; } /* Icon beside the label, not stacked above it. * * Stacked, these two were the only things in the bar with a second line, so * they set the topbar's height on their own and sat oddly against the pill * switchers beside them. In a row the bar is one line throughout. * * 0.78rem matches `.switcher > summary` — at 0.66 the labels were sized to fit * under a 1.6rem icon, which is a constraint that no longer exists, and next * to the pills they read as a different tier of navigation. */ .topbar__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; text-transform: capitalize; color: var(--ink-soft); white-space: nowrap; } .topbar__icon { width: 1.6rem; height: 1.6rem; border-radius: var(--radius-pill); background: var(--surface-3); display: grid; place-items: center; color: var(--ink-soft); transition: background-color 0.16s var(--ease); } .topbar__link:hover .topbar__icon { background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); } .topbar__count { position: absolute; transform: translate(0.65rem, -0.85rem); background: var(--accent); color: var(--accent-contrast); font-size: 0.6rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: var(--radius-pill); } @media (max-width: 48rem) { /* On its own row the second line now has the width to survive, so only the * type size comes down — it no longer competes with the switchers. */ .subbar { font-size: 0.68rem; } .subbar__inner { min-height: 2rem; } /* Icons only on a phone. Beside rather than beneath, each label roughly * doubles its link's width, and the bar still has the hours and three * switcher pills to fit. * * Clipped, not `display: none`: the label is the link's accessible name — * the icon is a bare SVG with nothing else to read — so hiding it outright * would leave a screen reader announcing "link" and the destination URL. */ .topbar__link > span:not(.topbar__icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .topbar__links { gap: 0.75rem; } } /* Very small screens — 320px and the 4.7" phones still in use. * * At 320px the utility row asked for more than the bar had: the service tabs * (148px) plus two switchers and two links with 12px gaps came to roughly * 300px inside a 285px content box, and `flex-wrap: nowrap` turned the * shortfall into ~5px of overflow. It never showed as a page scrollbar — * `html` and `body` carry `overflow-x: clip` — but the trailing control was * clipped, and in any context where that clip does not apply it is a scroll. * * Tighter gaps first; wrapping only if that is still not enough, which costs a * line of header height rather than a control. */ @media (max-width: 22.5rem) { .topbar__inner { flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.35rem; } .topbar__links { gap: 0.5rem; } } /* ---- Header -------------------------------------------------------------- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); } /* On by default, switchable from Preferences → Header. * * Only this element is pinned, and that is the point: the service row above it * and the hours strip below it are not inside it, so they scroll away and what * stays is one bar — the nav and the cart — rather than the three tiers the * header draws at the top of the page. That is what makes it affordable on a * short screen. * * `html` and `body` carry `overflow-x: clip` rather than `hidden` precisely so * this keeps working: `hidden` would make them scroll containers and a sticky * child of a scroll container it fills has nothing to stick to. */ .site-header--sticky { position: sticky; top: 0; z-index: 50; } /* Sticky needs a containing block taller than itself, and the header does not * have one by default: the renderer wraps every section in a div of its own, * and that wrapper is exactly as tall as the header, the service row and the * hours strip together. A sticky element cannot leave its parent's box, so it * reached the top of the wrapper — which is where it already was — and then * scrolled away with it. The setting was on and nothing happened, which is * what it looked like. * * `display: contents` removes the wrapper's box without removing the element: * the three bars become children of `
` for layout, so the header sticks * against the page. The wrapper stays in the DOM, so the editor still finds * the section by walking up from a click. * * Matched by shape rather than by the wrapper's generated id — the theme does * not spell out the renderer's naming — and only when the merchant has asked * for a sticky header. */ body > div:has(> .site-header--sticky) { display: contents; } /* The dialogs live in the top layer, above any z-index, so a sticky header * cannot cover them — nothing to guard against there. */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; min-height: 5.25rem; } /* The lead grid cell: menu toggle and primary nav. */ .header__lead { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); min-width: 0; } /* ---- Delivery location panel --------------------------------------------- */ .delivery-modal { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; } .delivery-modal::backdrop { background: rgba(23, 25, 15, 0.55); } /* The form is the scroll container, not the dialog, so the head and foot stay * put while a long map + fields area scrolls between them. */ .delivery-modal__form { display: flex; flex-direction: column; max-height: inherit; } .delivery-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); } .delivery-modal__mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); } .delivery-modal__heads { display: flex; flex-direction: column; gap: 0.1rem; margin-inline-end: auto; } .delivery-modal__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); } .delivery-modal__sub { font-size: 0.85rem; color: var(--ink-soft); } /* Search sits between the head and the list, on the tinted band, so it reads * as a filter over what is below rather than another field in the form. */ .delivery-modal__search { max-width: none; padding: 0.9rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--line); } .delivery-modal__search .search-field__icon { inset-inline-start: 1.9rem; } .delivery-modal__empty { margin: 1rem 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; } /* ---- Delivery areas ------------------------------------------------------ */ .delivery-modal__legend { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .area-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .area { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 0.9rem; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); cursor: pointer; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .area:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); } .area__pin { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-soft); } .area__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; margin-inline-end: auto; } .area__name { font-family: var(--font-display); font-weight: 600; color: var(--accent); } .area__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; } .area__chip { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-soft); } /* The fee is the number that decides whether they order, so it is the one * thing in the row that is not the same grey as everything else. */ .area__addr { font-size: 0.8rem; color: var(--muted); } .area__state { flex: 0 0 auto; } .area.is-current { border-color: var(--accent); } .badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Open/closed is the one thing in the row that must survive a colour-blind * reader, so the words carry it and the tint only reinforces. */ .badge--open { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); } .badge--closed { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); } .badge--busy { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); } .area__chip--fee { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); } .delivery-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .delivery-modal__close:hover { border-color: var(--line-2); color: var(--ink); } .delivery-modal__body { padding: 1.25rem; overflow-y: auto; } .delivery-modal__body .location-picker { margin-bottom: 0; } .delivery-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface-2); } .delivery-modal__back { padding: 0.6rem 1rem; font-size: 0.85rem; } .delivery-modal__branch { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; color: var(--ink-soft); } @media (max-width: 34rem) { /* Full-height sheet on a phone: the map needs the room, and a small centred * card leaves it too short to aim a pin in. */ .delivery-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; } .delivery-modal__confirm { width: 100%; } } /* ---- Service tabs -------------------------------------------------------- */ .service-tabs { display: flex; align-items: center; gap: 0.4rem; } .service-tabs__form { margin: 0; } .service-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); cursor: pointer; transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background-color 0.16s var(--ease); } .service-tab:hover { border-color: var(--line-2); color: var(--ink); } /* Sized to sit level with the switcher pills sharing this row. */ .topbar .service-tab { padding: 0.3rem 0.75rem; font-size: 0.8rem; } /* The active tab is carried by colour AND weight of border, not colour alone — * on a warm neutral palette a tint shift on its own is easy to miss. */ .service-tab.is-active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .service-tabs__branch { font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .service-tabs__dinein { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--accent); } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.1rem); } .nav--end { justify-content: flex-end; } .nav__link { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--ink); position: relative; padding: 0.3rem 0; white-space: nowrap; } .nav__link::after { content: ""; position: absolute; /* Logical sides, so in RTL the rule grows from the right as the text reads. */ inset-inline-start: 0; inset-inline-end: 100%; bottom: 0; height: 2px; background: var(--accent); transition: inset-inline-end 0.22s var(--ease); } .nav__link:hover::after, .nav__link[aria-current]::after { inset-inline-end: 0; } .brand { display: inline-flex; align-items: center; justify-content: center; } .brand__img { max-height: 4rem; width: auto; } .brand__text { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; text-align: center; line-height: 1.15; } .brand__text em { font-style: normal; color: var(--accent); } .nav-toggle { display: none; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; cursor: pointer; } .nav-toggle span { display: block; width: 1.15rem; height: 2px; background: var(--ink); border-radius: 2px; } .nav-toggle span + span { margin-top: 4px; } /* ---- Mobile nav drawer --------------------------------------------------- */ /* Slides in from the inline start over a backdrop. `translateX` rather than * `inset-inline-start`, so the animation runs on the compositor and does not * relayout the page on every frame. */ .mobile-nav { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 70; width: min(80vw, 20rem); display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform 0.24s var(--ease); overflow-y: auto; /* Notches and the home indicator. */ padding-bottom: env(safe-area-inset-bottom); } [dir="rtl"] .mobile-nav { transform: translateX(100%); } .mobile-nav[data-open] { transform: none; } .mobile-nav__backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(23, 25, 15, 0.5); opacity: 0; transition: opacity 0.24s var(--ease); } .mobile-nav__backdrop[data-open] { opacity: 1; } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); } .mobile-nav__title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0 1rem; } .mobile-nav a { display: block; font-family: var(--font-display); font-weight: 600; padding: 0.7rem 0; border-bottom: 1px solid var(--line); } /* One item per line. * * `nav-links` is the header's markup reused, and there `.nav__item` is * `inline-flex` so the links sit in a row — that rule is both later in this * file and no less specific than `.mobile-nav a`, so it won and the drawer * read "Menu Search" / "Reservation Order Track" on two crowded lines. These * are scoped to the drawer so the header keeps its row. */ .mobile-nav ul > li { display: block; } .mobile-nav .nav__item, .mobile-nav .nav__item > .nav__link { display: block; } .mobile-nav .nav__link { padding: 0.8rem 0; border-bottom: 1px solid var(--line); } /* The sliding underline is a pointer affordance for a horizontal bar; in a * stacked list it just draws a second line under every row. */ .mobile-nav .nav__link::after { display: none; } /* Submenus expand in place — there is no room to fly one out, and hover is * not a gesture a phone has. */ .mobile-nav .nav__submenu { position: static; display: block; min-width: 0; padding: 0 0 0 0.9rem; border: 0; box-shadow: none; background: none; } .mobile-nav .nav__submenu a { font-weight: 500; } .mobile-nav__extra { padding-bottom: 1.5rem; } .mobile-nav__link { display: flex; align-items: center; gap: 0.6rem; } .mobile-nav__branch { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); } /* The drawer is a phone pattern; above the breakpoint the nav is in the * header and the button that opens this is hidden. */ @media (min-width: 60.01rem) { .mobile-nav, .mobile-nav__backdrop { display: none; } } @media (prefers-reduced-motion: reduce) { .mobile-nav, .mobile-nav__backdrop { transition: none; } } @media (max-width: 60rem) { /* Kept as `1fr auto 1fr`, not `auto 1fr auto`. * * The trailing nav is hidden at this width, so the third column has no * child. With `auto 1fr auto` the wordmark landed in the middle column — * which is then everything to the right of the menu button — and centred * itself inside that, sitting half a button's width off true centre. Two * equal `1fr` flanks put it in the middle of the PAGE whether or not the * third column has anything in it. */ .site-header__inner { grid-template-columns: 1fr auto 1fr; min-height: 4.25rem; } .site-header .nav { display: none; } /* The branch name goes first — it is context rather than control, and this * row has the tabs, two switchers and two links to fit. */ .service-tabs__branch { display: none; } .topbar .service-tab { padding: 0.3rem 0.6rem; font-size: 0.75rem; } /* The bar scrolls sideways rather than pushing the page wide. * * Its contents are not fixed: two service tabs, a language switcher, a * currency switcher, account and order — and each of those appears only * when the tenant has something to put in it. A storefront with two * languages AND two currencies has noticeably more here than one with * neither, and at some combination it will not fit any phone. Letting the * row scroll inside itself means the widest case degrades to a swipe * instead of dragging the whole page sideways. * * `min-width: 0` on the children is what actually allows it: a flex item * defaults to `min-width: auto` and refuses to shrink below its content, * which is how a row like this pushes its parent wide in the first place. */ .topbar__inner { gap: 0.5rem; } /* `min-width: 0` so a flex item may shrink below its content. The default is * `auto`, which refuses to — and that is how a row like this drags the page * wider than the screen. */ .topbar__inner > * { min-width: 0; } /* Switchers collapse to their icon. * * `div.topbar__links` measured 185px on a 375px screen — two service tabs, * a language pill, a currency pill and two links do not fit beside each * other, and the row pushed the page sideways. The words are the cheapest * thing to drop: the globe and the coin are understood, the summary already * carries `aria-label="Change language"` / `"Change currency"`, and the * chosen value is still in the menu the pill opens. * * Clipped rather than `display: none` so the label stays the control's * accessible name. */ .topbar .switcher > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Nothing left for the caret to sit beside. */ .topbar .switcher > summary .icon--caret { display: none; } .topbar .switcher > summary { padding: 0.35rem 0.5rem; gap: 0; } /* Anchored to the right edge of a pill that may itself be near the window * edge, so cap it to the screen rather than a fixed 11rem. */ .popover { min-width: 0; width: max-content; max-width: min(80vw, 14rem); } .header__lead { gap: 0.5rem; } .nav-toggle { display: block; } .brand { justify-content: flex-start; } /* Placed explicitly: with the third column empty the wordmark would * otherwise flow into the gap the missing nav left behind. */ .site-header__inner .brand { grid-column: 2; justify-self: center; } } /* ---- Hero ---------------------------------------------------------------- */ .hero { position: relative; background: var(--surface-2); background-size: cover; background-position: center; min-height: clamp(26rem, 52vw, 40rem); display: grid; place-items: center; text-align: center; isolation: isolate; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 25, 15, 0.06), rgba(23, 25, 15, 0.42)); } .hero--plain::after { background: none; } /* Video background. * * Sits behind the ::after scrim (z-index -1) rather than in front of it, so a * video hero gets the same darkening a photograph does and the white heading * stays readable over whatever frame happens to be showing. * * object-fit: cover matches how the still behaves as `background-size: cover`. * Without it a video whose aspect ratio differs from the section's letterboxes * against the surface colour. */ .hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; /* The poster is the section's background image too, so a video that has not * started yet shows the still rather than a black rectangle. */ background: transparent; } /* The still stays as the section's background-image underneath — it is the * poster and the fallback — so nothing needs hiding when the video plays. */ @media (prefers-reduced-motion: reduce) { /* theme.js does not autoplay under this preference, so the element only ever * shows its poster. Hidden anyway: a paused first frame and the background * image are the same picture, and one of them is cheaper. */ .hero__video { display: none; } } .hero__inner { padding: clamp(3rem, 8vw, 6rem) 0; max-width: 46rem; } .hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 1rem; } .hero__title em { font-style: normal; color: var(--accent); } .hero__sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0 auto 2rem; max-width: 34rem; } .hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero--on-image .hero__title, .hero--on-image .hero__sub { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .hero--on-image .hero__title em { color: color-mix(in srgb, var(--accent) 55%, #fff); } /* ---- Category cards (home "View Our Menu") ------------------------------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); align-items: end; } .cat-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-3); aspect-ratio: 3 / 4; box-shadow: var(--shadow-sm); transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease); } /* The wireframe staggers the cards; every other card sits lower. */ .cat-card:nth-child(even) { transform: translateY(1.75rem); } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .cat-card:nth-child(even):hover { transform: translateY(1.15rem); } /* The even-numbered cards sit 1.75rem lower, so the row's visual bottom edge * is below its layout box; without the extra margin the button crowds them. */ .cat-more { display: flex; justify-content: center; margin-top: 2.5rem; } .cat-more__btn { margin-top: 1.75rem; } .cat-card__img { width: 100%; height: 100%; object-fit: cover; } .cat-card__ph { width: 100%; height: 100%; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); } .cat-card__title { position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem 1.1rem 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(23, 25, 15, 0.78)); } @media (max-width: 48rem) { .cat-card:nth-child(even), .cat-card:nth-child(even):hover { transform: none; } /* Two up on a phone. * * The 13rem track minimum can only fit ONE column in a phone's ~20rem * content width, so each 3:4 card filled most of the screen and the section * read as a list of one — you had to scroll a viewport per category. The * square ratio roughly halves each card's height again. * * 8rem, not 9: at 320px the content box is 18rem, and two 9rem tracks plus * the 0.75rem gap need 18.75 — so the grid quietly fell back to one column * on the narrowest phones, which is the exact case this is fixing. * * Still `auto-fit` rather than a hard `repeat(2, …)`, so a large phone or a * small tablet gets three without needing another breakpoint. */ .cat-grid { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; } .cat-card { aspect-ratio: 1 / 1; } .cat-card__title { padding: 1.6rem 0.7rem 0.65rem; font-size: 0.85rem; /* Long category names wrapped to three lines inside a card this size and * pushed the gradient over most of the photograph. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The stagger is off above, so the row's visual bottom is its layout bottom * and the button no longer needs to clear an overhang. */ .cat-more { margin-top: 1.5rem; } .cat-more__btn { margin-top: 0; } } /* ---- Menu section rail --------------------------------------------------- */ /* A horizontal strip of the menu's sections that sticks under the header while * the bands scroll past it, with the one you are reading marked. */ .menu-rail { background: var(--surface); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* `top` is a variable because what sits above the rail changes: the sticky * header is opt-in from Preferences, so theme.liquid publishes its measured * height and this follows it rather than hard-coding a number that is wrong * for half the configurations. */ .menu-rail--sticky { position: sticky; top: var(--stuck-top, 0px); z-index: 20; } /* The bar is full-bleed; this keeps its contents on the page's own measure so * the first link lines up with the headings above and below it. */ .menu-rail__inner { padding-inline: var(--gutter); } .menu-rail__list { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; overflow-x: auto; /* The rail is wider than a phone on any real menu, so it scrolls sideways — * and the scrollbar itself is noise on a nav this short. */ scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; } .menu-rail__list::-webkit-scrollbar { display: none; } .menu-rail__link { display: block; padding: 0.85rem 0.15rem; white-space: nowrap; scroll-snap-align: center; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); /* A transparent border at rest, so the active state does not change the * link's height and shunt the row by two pixels as it moves. */ border-bottom: 2px solid transparent; transition: color 0.16s var(--ease), border-color 0.16s var(--ease); } .menu-rail__link:hover { color: var(--ink); } .menu-rail__link.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* Anchors land under the sticky rail without the script's help — this is what * makes a no-JS jump land in the right place, and it is also what the smooth * scroll uses. */ .menu-section { scroll-margin-top: calc(var(--stuck-top, 0px) + 4rem); } /* The search rides in the rail, above the section links, so it sticks with * them. In the page head (single-section menus) it keeps its old spacing. */ .section__head .search-field { margin: 1.5rem auto 0; } .menu-rail__search { padding: 0.6rem var(--gutter) 0; } .menu-rail__search .search-field { max-width: 32rem; margin-inline: auto; } .menu-rail__search .input { min-height: 2.6rem; } /* Folded to a button at the end of the tabs (theme.js, "Rail search"): the * field opens above the tabs on a tap and folds back when left empty. The * fold only exists once the script has set it up — with the script off the * field simply stays open. */ .menu-rail__inner { display: flex; align-items: center; gap: 0.5rem; } .menu-rail__inner .menu-rail__list { flex: 1 1 auto; min-width: 0; } .menu-rail__search-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; } .menu-rail__search-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); } .menu-rail__search-btn .when-open { display: none; } .menu-rail__search-btn[aria-expanded="true"] .when-open { display: inline-flex; } .menu-rail__search-btn[aria-expanded="true"] .when-closed { display: none; } .menu-rail.is-search-folded:not(.is-search-open) .menu-rail__search { display: none; } .menu-rail.is-search-open .menu-rail__search { animation: rail-search-in 0.2s var(--ease, ease-out); } @keyframes rail-search-in { from { opacity: 0; transform: translateY(-0.35rem); } } @media (prefers-reduced-motion: reduce) { .menu-rail.is-search-open .menu-rail__search { animation: none; } } /* The rail is taller by the search row; a jump with the script off still has * to land below all of it. */ body:has(.menu-rail__search) .menu-section { scroll-margin-top: calc(var(--stuck-top, 0px) + 7.5rem); } /* ---- Menu layout + order panel ------------------------------------------- */ /* One column by default; the aside only becomes a column when there is room * for it beside the bands without squeezing them. Below that the fixed bottom * bar does the job instead, so the panel is hidden rather than stacked — two * carts on one screen is one too many. */ .menu-layout__aside { display: none; } @media (min-width: 64rem) { .menu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .menu-layout__aside { display: block; } .order-card { position: sticky; /* Clears whatever is stuck above: the header (measured into --stuck-top by * theme.js) plus the section rail, plus a little air. */ top: calc(var(--stuck-top, 0px) + 5.5rem); padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } } /* The card while a quick add is round-tripping (theme.js, "The order card * while its line list is stale"): the existing lines and total stay exactly * as they were — reflowing them to grey bars, or dimming them hard, read as * the cart having emptied rather than as it being about to change. Only a * light sweep crosses them, so the wait reads as "updating" without ever * looking like the order was lost. * * `pointer-events` only — no `position` here. `.order-card` is already * `position: sticky` on desktop (below), which is a containing block for * the `::after` overlay same as `relative` would be; overriding it TO * `relative` won for specificity (two classes beat one) and silently * dropped the sticky behaviour for as long as this class was on, so the * card snapped back to its normal-flow position — off the top of a * scrolled page — and back again once the class came off. That looked * exactly like the card vanishing and reappearing, because it did. */ .order-card.is-loading { pointer-events: none; } .order-card.is-loading::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 8%, transparent) 50%, transparent 70%); background-size: 200% 100%; animation: order-card-sweep 1.1s ease-in-out infinite; } @keyframes order-card-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { .order-card.is-loading::after { animation: none; } } .order-card__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; color: var(--accent); } .order-card__title { margin: 0; font-size: 1.05rem; color: var(--accent); } .order-card__empty { color: var(--muted); font-size: 0.9rem; } .order-card__lines { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; /* A long order scrolls inside the card rather than pushing the total and * the button off the bottom of a sticky panel, where they cannot be * reached. */ max-height: 40vh; overflow-y: auto; } .order-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; font-size: 0.88rem; } .order-line__qty { color: var(--muted); } .order-line__title { min-width: 0; overflow-wrap: anywhere; } .order-line__price { font-family: var(--font-display); font-weight: 600; } .order-card__totals { margin: 0 0 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); } .order-card__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; } .order-card__row dt { color: var(--ink-soft); } .order-card__row dd { margin: 0; color: var(--ink); } .order-card__row--total { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .order-card__note { margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--muted); } /* ---- Mobile order bar ---------------------------------------------------- */ /* Hidden by default and shown only on phones — see the media query below. The * default is "not shown" so a desktop that never reads the query is right. */ .order-bar { display: none; } /* 63.99rem, not 48rem — the same width the side panel appears at. * * They were 48rem and 64rem, which left a 768–1024px band with the bar * already gone and the panel not yet there: a tablet had no way to see the * order at all. The two must be complements, so this is written against the * panel's breakpoint rather than the phone one. */ @media (max-width: 63.99rem) { .order-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; /* The home indicator on a modern phone sits over the bottom of the screen; * without this the total is under it. */ padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--accent); color: var(--accent-contrast); font-family: var(--font-display); font-weight: 700; box-shadow: 0 -6px 20px -12px rgba(23, 25, 15, 0.5); } .order-bar:hover { color: var(--accent-contrast); } .order-bar__badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18); } .order-bar__count { position: absolute; top: -0.25rem; inset-inline-end: -0.25rem; min-width: 1.15rem; padding: 0 0.25rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--accent); font-size: 0.7rem; line-height: 1.15rem; text-align: center; } .order-bar__total { font-size: 1.05rem; } .order-bar__go { margin-inline-start: auto; font-size: 0.9rem; opacity: 0.9; } /* The product page's bar, so the two read as the same object: floating, * rounded, the accent gradient, and the action as a pill on it. */ .order-bar { inset-inline: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); padding: 0.55rem 0.55rem 0.55rem 0.75rem; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 100%); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent); } .order-bar__go { padding: 0.7rem 1rem; border-radius: 10px; background: rgb(255 255 255 / 22%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%); opacity: 1; } /* Nothing in the order yet: the primary at half strength, as the product * bar is before its choices are made. */ .order-bar:has(.order-bar__count[hidden]) { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); box-shadow: none; } /* Room for the bar, so the last dish is not sitting underneath it. */ #menu-bands { padding-bottom: 6.5rem; } } /* ---- Dish grid ----------------------------------------------------------- */ .menu-section + .menu-section { margin-top: clamp(2.5rem, 5vw, 4rem); } .menu-section__title { text-align: center; font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.4vw, 2rem); list-style: none; margin: 0; padding: 0; } /* One card, every width. * * The circular medallion was the theme's signature, but it only ever worked * at one size: it cropped a wide plate to a coin, hung the price off an edge * where a long money string had to escape the shape, and centred names that * then sat wider than their column. The phone already had a rectangular card * for those reasons — this is that card, used everywhere, so a dish looks the * same on a laptop as it does in a hand. Image, name, price, action, read in * that order. * * `--dish-pad` is the text inset, declared once because five children share * it and the phone wants a smaller one. The image is deliberately NOT inset: * it runs to the card's edges, and the card's `overflow: hidden` is what * rounds its top corners. */ .dish { --dish-pad: 0.9rem; display: flex; flex-direction: column; height: 100%; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding-bottom: 0.9rem; transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease); } /* The whole card lifts now, not the image inside it — a picture that moved * within a still frame read as a glitch rather than as a response. */ .dish:hover { transform: translateY(-3px); box-shadow: var(--shadow); } /* Every card's picture is the same size, and nothing inside it gets a vote. * * `aspect-ratio` alone did not hold. This is a flex item, and a flex item's * automatic minimum size is its content's — so a portrait photo pushed the * box past the ratio and a broken image collapsed it below, which is exactly * the row of mismatched pictures this replaces. `min-height: 0` gives up that * automatic minimum and `flex: none` stops the box being stretched or * squeezed by its siblings. * * The image is then taken out of flow entirely: absolutely positioned to fill * the box, it cannot contribute any size at all. A broken one shows its alt * text inside the frame instead of resizing it, and `overflow: hidden` keeps * that text in the frame. */ .dish__media { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); margin-bottom: 0.75rem; } .dish__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* Sized by its content, never cropped — currency codes and three-decimal minor units (BHD, KWD, OMR) make this string much wider than a "$14". It sits inside the image's corner: on a square edge there is nothing to hang off, and a token half outside the card would be clipped by it. */ .dish__badge { position: absolute; inset-inline-end: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); padding: 0.4rem 0.75rem; border-radius: var(--radius-pill); background: var(--dark); color: var(--on-dark); font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-align: center; box-shadow: var(--shadow-sm); } /* Catalogue names nobody chose the length of: let them wrap anywhere rather * than push the card wider than its column. */ .dish__title, .dish__desc { max-width: 100%; overflow-wrap: anywhere; } /* The text block. Carries the inset for both children, so the two of them * stay one thing to place. */ .dish__text { padding-inline: var(--dish-pad); } .dish__title { font-size: 1.02rem; margin: 0 0 0.35rem; } .dish__desc { color: var(--muted); font-size: 0.86rem; margin: 0 0 0.6rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* `margin-top: auto` pins the action to the bottom, so cards in a row line * their buttons up however tall the names above them run. The padding is the * floor for a card that is the tallest in its row, where `auto` resolves to * nothing and the button would otherwise sit against the name. */ .dish__actions { margin-top: auto; padding-top: 0.45rem; padding-inline: var(--dish-pad); } /* Sold out as a badge — a state of the dish, not a line of copy. Sized to its * words and pinned to the card's foot where the add button would be. */ .dish__sold { align-self: flex-start; width: fit-content; /* Its cell (.dish__actions) already insets it by --dish-pad; a margin on * top of that set it twice as far in as the title. */ margin: 0; padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); font-size: 0.75rem; font-weight: 600; line-height: 1.3; } .dish__actions .btn { width: 100%; } /* The offer ribbon, across the corner of the picture — PLUS marks a * discounted card this way, and a corner is the one part of a photograph that * is never the subject. Rotated through the media's own clipped box, so the * ends disappear off the card rather than needing to be mitred. * * Not a link and not a button: the whole card already goes to the product. */ .dish__ribbon { position: absolute; z-index: 1; top: 0.85rem; inset-inline-start: -2.2rem; width: 9rem; padding: 0.22rem 0; transform: rotate(-45deg); background: var(--danger); color: #fff; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; pointer-events: none; } /* The ribbon is drawn in the start corner, so in RTL it leans the other way * or it would read as a fold on the wrong edge. */ [dir="rtl"] .dish__ribbon { transform: rotate(45deg); } /* Was-price: quieter than the price it precedes, and never the thing read * first — the token's job is still to say what this costs now. */ .dish__was { opacity: 0.7; font-weight: 500; margin-inline-end: 0.15rem; } /* In the list view the picture is a thumbnail, and a ribbon across it would * cover most of the food. A tag on the row instead. */ [data-view="list"] .dish__ribbon { top: 0.3rem; inset-inline-start: 0.3rem; width: auto; padding: 0.12rem 0.4rem; border-radius: var(--radius-sm); transform: none; font-size: 0.6rem; } [dir="rtl"] [data-view="list"] .dish__ribbon { transform: none; } /* Phone: two per row. Same card, tighter, and the description gives way — * there is no room for it beside a sibling card, and "Read more" already * leads to it. */ @media (max-width: 48rem) { .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .dish { --dish-pad: 0.6rem; padding-bottom: 0.7rem; } .dish:hover { transform: none; box-shadow: none; } .dish__media { margin-bottom: 0.6rem; } .dish__badge { inset-inline-end: 0.4rem; bottom: 0.4rem; max-width: calc(100% - 0.8rem); font-size: 0.78rem; } .dish__title { font-size: 0.9rem; /* Two lines, then ellipsis: uneven card heights are worse than a * truncated name, and the full name is on the product page. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .dish__desc { display: none; } } /* ---- Product strips: frequently bought, recently viewed ------------------ * * Native horizontal scrolling with snap points, not a scripted track. It * swipes, it takes a trackpad's sideways gesture, the scrollbar stays real for * anyone who navigates by it, and it works with the script switched off. The * arrows only add a click target for a mouse. */ .strip-section { padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); } .strip__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .strip__title { margin: 0; flex: 1; font-size: clamp(1.2rem, 2.4vw, 1.6rem); } .strip__nav { display: flex; gap: 0.4rem; } .strip__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.15s var(--ease), opacity 0.15s var(--ease); } .strip__btn:hover { border-color: var(--line-2); } /* Disabled rather than hidden at the ends: a control that disappears moves * the one beside it, and the row's edges are exactly when someone is * clicking repeatedly. */ .strip__btn[disabled] { opacity: 0.35; cursor: default; } .strip__track { list-style: none; margin: 0; padding: 0 0 0.5rem; display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Room for a card's hover lift and shadow, which a scroll container would * otherwise clip. */ padding-block-start: 0.25rem; scrollbar-width: none; } .strip__track::-webkit-scrollbar { display: none; } /* Each card takes an equal share of the visible width, gaps accounted for, so * `--strip-cols: 4` really does show four. `flex: none` because a flex item's * default is to shrink, which would fit them all in and defeat the strip. */ .strip__item { flex: none; width: calc((100% - (var(--strip-cols) - 1) * clamp(0.75rem, 2vw, 1.5rem)) / var(--strip-cols)); scroll-snap-align: start; } .strip__item > .product-card { height: 100%; } @media (max-width: 63.99rem) { /* Two and a bit on a tablet, one and a half on a phone — the part-card at * the edge is what says the row continues. */ .strip__item { width: calc((100% - 1rem) / 2.2); } } @media (max-width: 30rem) { .strip__item { width: calc((100% - 0.75rem) / 1.4); } } /* The card's square picture frame. */ .pcard__frame { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); } .pcard__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- Combo groups: slots, contents, quantities --------------------------- * * A selection group is a combo's slots — "pick two" is two questions, not one * list with two ticks — and its items carry photographs, because choosing * between two burgers is a choice between two pictures. A package group is the * same tiles with nothing to decide. Both can hang their own questions off a * chosen item, and those appear underneath it. */ /* Top and bottom padding equal: a single-slot group (one "select 1", no * step-through) used to start its first tile flush against the header's * rule above it, with only the bottom getting room — asymmetric for no * reason once there was somewhere for that top space to come from. */ .combo-slot { padding: 0.9rem 0; } .combo-slot + .combo-slot { padding-top: 0.3rem; } .combo-slot__label { display: flex; align-items: baseline; gap: 0.75rem; margin: 0.5rem 0 0.75rem; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; } /* "1 of 2" — a position in a sequence, which is what a combo's slots are. */ .combo-slot__n { color: var(--ink); } .combo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; } .combo-grid--fixed { padding-bottom: 0.9rem; } /* The cell, not the tile, is the grid item: a picked tile's own questions sit * under it inside the same cell — so the cell stacks them, and the tile sizes * to itself. * * `height: 100%` on the tile was the bug behind the overlap: the cell grows * when a pick reveals its questions, 100% of that taller cell is the tile, and * the tile then covered the very questions that made the cell tall — their * headings surfacing on top of the next slot's label. */ .combo-cell { min-width: 0; display: flex; flex-direction: column; } .combo-tile { position: relative; /* the visually-hidden input's anchor */ display: flex; flex-direction: column; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; cursor: pointer; transition: border-color 0.15s var(--ease); } .combo-tile:hover { border-color: var(--line-2); } /* The radio itself is not drawn — the tile is the control, and a checked tile * says so with its border and its tick. Kept in the layout (not `display: * none`) so it stays focusable and reachable by keyboard. */ .combo-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; } .combo-tile__media { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); } .combo-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .combo-tile__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); } .combo-tile__body { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem 0.6rem; } /* Catalogue names run long and arrive without spaces * ("LaptopLaptopLaptop3333"), and an unbroken word does not wrap — it ran * straight out through the tile's edge. Break anywhere, then stop at two * lines so tiles in a row stay close in height. */ .combo-tile__name { font-size: 0.88rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .combo-tile__price { color: var(--muted); font-size: 0.8rem; } .combo-tile:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* The tick, so a chosen tile is obvious at grid size without reading it. */ .combo-tile:has(input:checked) .combo-tile__media::after { content: ""; position: absolute; top: 0.4rem; inset-inline-end: 0.4rem; width: 1.15rem; height: 1.15rem; border-radius: var(--radius-pill); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.75rem no-repeat; } .combo-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .combo-tile--fixed { cursor: default; } /* A picked item's own questions. Hidden until it is picked — an unpicked * item's options are not questions anyone has been asked yet, and the server * ignores them too (it only walks into items that were chosen). * * A sibling of the tile grid, so it gets the group's full width; the rules * that open the right one are written per item by the snippet. */ .combo-sub { display: none; margin: 0.6rem 0.7rem 0.2rem; padding-inline-start: 0.7rem; border-inline-start: 2px solid var(--line-2); } .combo-sub--open { display: block; } /* Which content item these questions belong to — with the tiles above rather * than beside them, the block has to name its subject. */ .combo-sub__for { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); } .cfg--nested { margin: 0; } .cfg--nested > .cfg__head { padding: 0.6rem 0; } .cfg--nested .cfg__title { font-size: 0.92rem; } /* An `options` group's row: name, unit price, stepper. */ .cfg__row--qty { cursor: default; } .cfg__row--qty .cfg__name { flex: 1; } /* Small, square, and out of the way: the picture is here to identify the * thing, not to sell it — the row is a line on a list, not a card. */ .cfg__thumb { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); } .cfg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* A pill is a word; a thumbnail inside one turns it into a badge. */ .cfg__row--pill .cfg__thumb { display: none; } .stepper--sm { transform: scale(0.85); transform-origin: right center; } [dir="rtl"] .stepper--sm { transform-origin: left center; } /* ---- Product page: stock, running total, action bar ---------------------- * * The shape follows the PLUS app's item screen — stock on the photograph, the * price that answers "what will this cost me" rather than "what does the base * item cost", and quantity beside the button that uses it. */ .pdp__media { position: relative; } .pdp__stock { position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 1; padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); background: var(--dark); color: var(--on-dark); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; } .pdp__stock--out { background: var(--danger); } .pdp__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } /* "Your plate" — what the shopper has actually built so far, in one line, * written where the button already is rather than requiring a scroll back * through the groups to check it. `flex-basis: 100%` puts it on its own row * inside `.pdp__actions` whether that's the ordinary inline layout or the * fixed phone bar below, with no separate rule needed for either. Empty * while nothing is chosen yet — a size product with one modifier group may * never have anything to say here. */ .pdp__plate { flex: 1 1 100%; margin: 0; font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdp__plate:empty { display: none; } .pdp__submit { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; } /* The total is a second figure inside one button, so it is set apart rather * than run on: at a glance it reads as the price, not as part of the label. */ .pdp__submit-total { padding-inline-start: 0.6rem; border-inline-start: 1px solid currentColor; opacity: 0.85; font-variant-numeric: tabular-nums; } .pdp__submit-total:empty { display: none; } /* The figure moves when it changes, and only when it changes. * * A running total that updates silently is a number people re-read to check * they saw it right. One short lift is enough to say "this just changed" — * short enough not to delay the next tap, and on the figure alone rather than * the button, so the target never moves under a thumb. */ @keyframes total-tick { 0% { transform: translateY(0); } 35% { transform: translateY(-0.18em); } 100% { transform: translateY(0); } } .pdp__submit-total.is-changed { animation: total-tick 0.28s var(--ease); } @media (prefers-reduced-motion: reduce) { /* The change still needs marking, so the movement becomes a brief lightening * instead of being dropped altogether. */ @keyframes total-tick { 0%, 100% { opacity: 1; } 40% { opacity: 0.55; } } } @media (max-width: 63.99rem) { /* Fixed to the bottom on a phone. The groups make this page taller than the * screen, and the decision to order is taken while reading them — not after * scrolling back past them. */ .pdp__actions { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; margin: 0; padding: 0.7rem var(--gutter); padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgb(0 0 0 / 8%); /* Wrap, not nowrap. * * `.pdp__plate` is `flex-basis: 100%` precisely so it takes its own line; * `nowrap` overruled that and squeezed it into the row beside the stepper, * where a plate of two choices rendered as "C." and told nobody anything. * It costs one line of bar height to answer "what am I ordering" without * scrolling back through the groups. */ flex-wrap: wrap; row-gap: 0.35rem; } /* Quieter and tighter in the bar than in the page: it is a reminder here, * not a heading. */ .pdp__plate { font-size: 0.78rem; line-height: 1.3; } /* Clears the bar, so the last group is reachable rather than sitting under * it — the same reason the menu page pads for its order bar. */ .pdp { padding-bottom: 5.5rem; } /* Label and total on one line: "Add to / cart" broken over two lines beside * the figure made the bar look cramped and the button ambiguous. */ .pdp__submit { padding-inline: 0.9rem; font-size: 0.95rem; white-space: nowrap; } .pdp__submit-total { padding-inline-start: 0.5rem; } } /* ---- Quick add feedback -------------------------------------------------- * * A quick add used to be a form post: the page reloaded, the shopper lost * their place in a long menu, and the only sign anything had happened was a * number that had already changed by the time they could look at it. The * script now posts in the background, so the number is the ONLY thing that * moves — and a number that changes silently is a number nobody notices. The * bounce is what points at it. * * Animation, not transition: the badge ends where it started, so there is no * end state to transition to. The class is removed on `animationend`, which * is what lets a second add replay it. */ @keyframes cart-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 55% { transform: scale(0.92); } 75% { transform: scale(1.12); } 100% { transform: scale(1); } } [data-cart-count].is-bumped { animation: cart-bump 0.5s var(--ease); } /* Someone who has asked for less motion still needs to know it worked, so the * badge flashes its colours instead of moving. */ @media (prefers-reduced-motion: reduce) { @keyframes cart-bump { 0%, 100% { filter: none; } 40% { filter: brightness(1.6); } } } /* A button cannot be pressed twice while its request is in flight — two taps * on a slow connection is two of the dish. The label stays in place (color * only, not `visibility` or `display`) so the button keeps its width and its * accessible name while a small ring spins over it — dimming alone (the * previous state here) reads the same as a plain disabled button, which * says "you can't do this" rather than "this is happening". `--btn-fg` is * used rather than `currentColor` precisely because the label's own color * is turned transparent right below it. */ .btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; } .btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border: 2px solid var(--btn-fg); border-inline-end-color: transparent; border-radius: 50%; animation: btn-spin 0.6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"] { opacity: 0.65; } .btn[aria-busy="true"]::after { animation: none; } } /* ---- Menu view toggle ---------------------------------------------------- * * Grid or list. The grid is the theme's default and sells the food on the * photograph; the list fits roughly twice as many dishes on a screen and * brings the description back, which is what someone reordering a usual wants. */ .menu-toolbar { display: flex; justify-content: flex-end; margin-bottom: clamp(0.75rem, 2vw, 1.25rem); } .view-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); } .view-toggle__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .view-toggle__btn:hover { color: var(--ink); } .view-toggle__btn.is-active { background: var(--dark); color: var(--on-dark); } /* List: the same card turned on its side. The picture becomes a square rail * down the start edge spanning every row of the card, so the text column is * whatever is left — no second set of card styles, just a different flow. */ [data-view="list"] .dish-grid { grid-template-columns: 1fr; gap: 0.6rem; } /* Three columns, and the third is what makes it a list rather than a wide * card: picture, what it is, what it costs and how to get it. Stacking the * button under the name left a hole the height of the photograph in every * row — the picture sets the row's height, and a two-line name cannot fill * it. Beside the name, that space is the layout instead of a gap in it. */ [data-view="list"] .dish { display: grid; /* ONE row: picture, text, action, all centred on it. Two rows was the bug — * the picture spans them, and a spanning item hands its height to the * tracks it spans, so an absent description became a tall empty track * holding the name up at the top of the card. */ grid-template-columns: clamp(4.5rem, 15%, 7rem) minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: 0.9rem; /* Only the end side: the picture runs to the card's start edge, the action * keeps its distance from the end. Logical, so in RTL — picture on the * right — the gap is on the left, where the button or badge now sits. */ padding: 0; padding-inline-end: 0.9rem; } [data-view="list"] .dish__media { grid-column: 1; grid-row: 1; aspect-ratio: 1; margin-bottom: 0; } /* Explicit placement, because the description is optional: without it the * rows would shuffle up and the name would sit where the description was. */ [data-view="list"] .dish__text { grid-column: 2; padding-inline: 0; } [data-view="list"] .dish__actions, [data-view="list"] .dish__sold { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; padding: 0; } [data-view="list"] .dish__title { margin: 0; } /* A row with neither description nor a second line still needs its own * height, or the picture alone decides it. */ [data-view="list"] .dish { min-height: 5.5rem; } /* Room to read, and the reason someone picked this view — so it comes back on * a phone, where the grid card hides it. */ [data-view="list"] .dish__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0.2rem 0 0; } /* The picture is a third of its grid size here, so the token has to come * down with it — at the grid's size it covered most of an 88px thumbnail. */ [data-view="list"] .dish__badge { inset-inline-end: 0.3rem; bottom: 0.3rem; padding: 0.22rem 0.45rem; font-size: 0.72rem; border-radius: 0.5rem; } /* A button as wide as a laptop row is a target nobody needs. */ [data-view="list"] .dish__actions .btn { width: auto; min-width: 8rem; } [data-view="list"] .dish:hover { transform: none; } @media (max-width: 48rem) { /* No room for a third column beside a 5rem picture: the action drops under * the name, and the picture goes on spanning the rows beside both. */ /* No room for a third column beside the picture, so the action drops under * the text and the picture spans both rows. Safe here: those two rows are * taller than the 5.5rem picture, so its span has nothing to inflate. */ [data-view="list"] .dish { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; column-gap: 0.75rem; /* Logical, as on a wide screen: nothing on the picture's side, room on the * end — which is the left in RTL. */ padding-block: 0.7rem; padding-inline: 0 0.7rem; min-height: 0; } [data-view="list"] .dish__media { grid-row: 1 / -1; align-self: start; } [data-view="list"] .dish__text { grid-row: 1; } [data-view="list"] .dish__title { /* The grid card clamps hard because two sit side by side; a full-width * row has space for the whole name. */ display: block; font-size: 0.92rem; } [data-view="list"] .dish__actions, [data-view="list"] .dish__sold { grid-column: 2; grid-row: 2; justify-self: stretch; margin-top: 0.5rem; } [data-view="list"] .dish__actions .btn { min-width: 0; width: 100%; } } /* The list view zeroes its cell's padding and stretches it; the badge keeps * its own padding and stays the size of its words. */ [data-view="list"] .dish__sold { padding: 0.25rem 0.65rem; width: fit-content; } /* ---- Chef recommendation ------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; } .split--flip .split__media { order: 2; } .split__media { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); box-shadow: var(--shadow); } .split__media--round { border-radius: var(--radius-pill); } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__body p { color: var(--ink-soft); max-width: 26rem; } .split__cta { margin-top: 1.75rem; } @media (max-width: 52rem) { .split { grid-template-columns: 1fr; } .split--flip .split__media { order: 0; } } /* ---- Event countdown ----------------------------------------------------- */ .event { position: relative; text-align: center; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); background-size: cover; background-position: center; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); isolation: isolate; } .event--on-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23, 25, 15, 0.55); } .event--on-image, .event--on-image h2, .event--on-image p { color: var(--on-dark); } .event__body { max-width: 40rem; margin: 0 auto; } .event__body p { color: inherit; opacity: 0.85; } .countdown { display: flex; justify-content: center; gap: 0.75rem; margin: 2rem 0; list-style: none; padding: 0; } .countdown__cell { min-width: 4rem; padding: 0.7rem 0.5rem; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink); } .event--on-image .countdown__cell { background: rgba(255, 255, 255, 0.16); color: var(--on-dark); backdrop-filter: blur(4px); } .countdown__num { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; display: block; } .countdown__label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } /* ---- Product detail -------------------------------------------------------- * "The Pass" — the counter where the kitchen hands the dish over. The photo * reads as the room, not a portrait in a circle: full height, full width of * its column, and on a wide screen it bleeds past --maxw to the viewport's * own edge, because a window onto the food is not supposed to feel gridded. * The copy card then rides up over its lower third — the interface arriving * after the food, not beside it. `.pdp__stage`/`.pdp__card` carry that * relationship; `.pdp__body` is only a card ON MOBILE, where the two stack. */ .pdp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); align-items: start; } .pdp__stage { order: 2; } .pdp__card { order: 1; margin-top: 0; } .pdp__body { padding: 0; } /* Desktop: room between the hours strip and the dish name, which otherwise * sat flush against it. Phones lay this column out on their own. */ @media (min-width: 64rem) { .pdp__card { padding-top: clamp(1.5rem, 3vw, 2.5rem); } } .pdp__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); /* The trailing edge always ends flush with the viewport (see the bleed * margin below) — a round corner there would leave a sliver of the page's * own ground showing past the photo, which is the one thing a "window onto * the room" cannot do at its own sill. */ border-start-end-radius: 0; border-end-end-radius: 0; overflow: hidden; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); box-shadow: var(--lift-1); /* Bleeds the trailing column to the viewport's own edge: the container's * own inset (its centring gap over --maxw, plus --gutter) pulled back out. * `max()` floors the centring term at 0 so this still resolves to exactly * --gutter on a screen narrower than --maxw, where there is no gap to add. */ margin-inline-end: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--maxw)) / 2))); } .pdp__media img { width: 100%; height: 100%; object-fit: cover; } .pdp__media::after { /* Warmth under whatever sits on the photograph — the stock badge reads * without a chip drawn under it, because the scrim already carries the * contrast, not a solid ground. */ content: ""; position: absolute; inset: 0; background: var(--scrim-warm); pointer-events: none; } /* The track: one frame wide, snapping to each photo. `scroll-snap-type` plus * an id per slide is the whole mechanism — the thumbnails below are anchors * into it, so paging works with the script off and from the keyboard. */ .pdp__track { display: flex; list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .pdp__track::-webkit-scrollbar { display: none; } .pdp__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .pdp__slide { flex: none; width: 100%; height: 100%; scroll-snap-align: center; /* A slide scrolled to by anchor would otherwise land under the sticky * header. */ scroll-margin-top: var(--stuck-top, 0px); } .pdp__slide img { width: 100%; height: 100%; object-fit: cover; } .pdp__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); gap: 0.6rem; margin-top: 1rem; list-style: none; padding: 0; } /* A link, not a decorative image: it has a target, a focus ring and a name. */ .pdp__thumb { display: block; position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; transition: border-color 0.15s var(--ease); } .pdp__thumb:hover { border-color: var(--line-2); } .pdp__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pdp__thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; display: block; } /* Available to any control whose visible label is its picture. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .pdp__track { scroll-behavior: auto; } } /* Below --maxw + 2 × --gutter (nothing left to bleed into) and, more to the * point, below the stacking breakpoint: the photo goes full-bleed on BOTH * edges and the card rides up over its lower third. */ @media (max-width: 52rem) { .pdp { grid-template-columns: 1fr; } .pdp__stage { order: 1; } .pdp__card { order: 2; margin-top: -3.75rem; position: relative; z-index: 1; } .pdp__media { aspect-ratio: auto; height: min(65vh, 32rem); border-radius: 0; margin-inline-start: calc(var(--gutter) * -1); } .pdp__body { background: var(--paper); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--lift-1); padding: 1.75rem var(--gutter) 0.25rem; } } .pdp__price { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; font-size: 1.4rem; margin-bottom: 1.25rem; } .pdp__price s { color: var(--muted); font-size: 1rem; font-weight: 400; } /* The description reads as a magazine standfirst rather than body copy: the * opening paragraph is set larger and looser, and the measure is capped near * 42 characters so the line breaks fall where a reader expects them instead of * running the width of the card. Everything after the first paragraph drops to * body size — a standfirst that never ends is just text. */ .pdp__desc { color: var(--ink-soft); margin-bottom: 1.75rem; max-width: 42ch; font-size: 1.02rem; line-height: 1.7; } .pdp__desc > :first-child { font-size: 1.12rem; line-height: 1.6; color: var(--ink); } .pdp__desc > * + * { margin-top: 0.7rem; } .pdp__form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 30rem; } .pdp__foot { margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted); } .badge-save { background: var(--danger); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); align-self: center; } /* Product options — sizes, modifiers, combo picks. * * Read as a kitchen docket rather than a web form. A docket is a stack of * lines: each one asks something, each one carries its answer in writing, and * they are separated by a tear rather than boxed up individually. That gives * the page one structural device that means something — a rule between two * questions says they are different questions — instead of a card per group * whose border says only "this is a group". * * What was here before was the form vocabulary: a tracked-out capitalised * label, a red asterisk, a radio dot in every row. All three describe the * mechanism. None of them describe lunch. */ .cfg { border: 0; border-top: 1px dashed var(--line-2); border-radius: 0; background: none; padding: 0; margin: 0; overflow: visible; } .cfg:first-of-type { border-top: 0; } /* The question stays put while its answers scroll. * * A group with a dozen modifiers is taller than a phone screen, and once its * header has scrolled away the rows underneath are unlabelled — you are * ticking boxes without the question in view, and "up to 3" has gone with it. * Sticking the header to the top of its own group keeps the question and the * allowance visible for exactly as long as its answers are. * * `top` clears the site header, which is itself sticky: `--stuck-top` is its * measured height, published on every page by theme.js. An opaque ground is * required — a transparent sticky header lets the rows slide through it. */ .cfg > .cfg__head { position: sticky; top: var(--stuck-top, 0px); z-index: 2; background: var(--paper); } /* A nested group is already inside a revealed pick and is short by * construction; two headers competing for the same edge is one too many. */ .cfg--nested > .cfg__head { position: static; } /* The opaque ground has to match whatever the group is standing on, or the * stuck header is a cream band across a tinted section. */ .section--tint .cfg > .cfg__head { background: var(--surface-2); } /* Only while open, and only then — a closed header has nothing below it to * separate itself from. */ /* The open question is a chit lifted off the pass. * * Closed groups stay flat on the page, separated by the dashed tear rule, so a * stack of answered questions reads as a stack of paper. The one being * answered rises onto its own ground with a shadow under it: the page then has * exactly one object in the foreground, and it is the question you are on. * * `--lift-1` and the surface are the same pair the copy card uses over the * photograph, so the two lifts on this page are the same gesture at two * scales rather than two unrelated effects. */ .cfg[open] { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border-top-color: transparent; padding-inline: 0.85rem; margin-block: 0.35rem; } /* The sticky header has to match the ground it is stuck to, or it is a cream * band sliding over a white chit. */ .cfg[open] > .cfg__head { background: var(--surface); box-shadow: 0 1px 0 var(--line); /* Inset so the header's rule spans the chit's full width rather than * stopping short of its padding. */ margin-inline: -0.85rem; padding-inline: 0.85rem; } /* A nested group is already inside a chit; a chit inside a chit is a box * inside a box. */ .cfg--nested[open] { background: none; box-shadow: none; padding-inline: 0; margin-block: 0; } .cfg__head { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.95rem 0.1rem; cursor: pointer; list-style: none; } /* Safari draws its own triangle through `::-webkit-details-marker`, which the * standard `list-style: none` does not reach. */ .cfg__head::-webkit-details-marker { display: none; } .cfg__heading { flex: 1; min-width: 0; } .cfg__ask { display: flex; align-items: baseline; gap: 0.6rem; } /* Sentence case, no tracking. A question set in spaced capitals is shouting a * label; this one is asking something. */ .cfg__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; text-transform: none; } /* How many, in words. Sits with the question because it is part of it. */ .cfg__need { font-size: 0.82rem; color: var(--muted); white-space: nowrap; } .cfg__need--must { color: var(--accent); } /* The answer, under the question. */ .cfg__chosen { display: block; margin-top: 0.2rem; color: var(--ink-soft, var(--muted)); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfg__chosen:empty { display: none; } .cfg__caret { flex: none; color: var(--muted); transition: transform 0.18s var(--ease); } .cfg[open] > .cfg__head .cfg__caret { transform: rotate(180deg); } .cfg .cfg__list { padding: 0 0 0.9rem; } /* 0.5rem, not 0.3: adjacent tap targets need 8px between them or a thumb * lands on the row above the one it was aimed at. The gap was 4.8px. */ .cfg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } /* A handful of short choices read side by side: sizes are compared, not * scanned down a column. */ .cfg__list--pills { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .cfg__row { position: relative; display: flex; gap: 0.7rem; align-items: center; /* 48px is the floor for a row a thumb has to hit. */ min-height: 3rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .cfg__row:hover { border-color: var(--line-2); } /* A real control, drawn by the browser. * * This was a 1×1 transparent input with the answer marked by a tick at the far * end of the row. That pattern is defensible — the input kept focus and the * label kept the click — but it throws away the two things the native control * gives for free: a shape that says how many answers the group takes, and a * state assistive technology and the platform both already understand. * * `accent-color` tints it with the brand without replacing it, so a radio is * round and a checkbox square automatically. The single-vs-multiple question * is then answered by the control itself rather than by a class. */ .cfg__row input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); cursor: pointer; } .cfg__name { flex: 1; } /* Tabular figures so a column of prices lines up on the decimal — three-digit * minor units make that visible. */ .cfg__price { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; } .cfg__flag { color: var(--danger); font-size: 0.78rem; } /* Chosen: an olive spine at the leading edge and a tick at the trailing one — * the two marks a line gets when it is ticked off. */ .cfg__row:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .cfg__row::before { content: ""; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 3px; border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); background: var(--accent); opacity: 0; transition: opacity 0.15s var(--ease); } .cfg__row:has(input:checked)::before { opacity: 1; } /* No tick: the control now shows the state, and two marks for one answer is * one mark too many. The row keeps its tinted ground and its spine. */ .cfg__row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } /* Pills: same line, laid out as a chip. The tick would crowd a short label, * so a chosen pill is marked by its ground alone. */ .cfg__row--pill { padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); gap: 0.45rem; } .cfg__row--pill::before { display: none; } /* The one place the control stays hidden. A segmented pill IS the control: * its label is the accessible name, its ground is the state, and a checkbox * floating inside it would read as a second thing to press. The input keeps * its place in the tab order and the pill shows the focus ring below. */ .cfg__row--pill input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .cfg__row--pill:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); } .cfg__row--pill:has(input:checked) .cfg__price { color: inherit; opacity: 0.85; } .cfg__row--pill .cfg__name { flex: none; } /* Sold out, or a package's fixed contents: shown because a customer needs to * know what is in the box, but not offered as a choice. */ .cfg__row--off { color: var(--muted); background: var(--surface-2); cursor: not-allowed; padding-inline-end: 0.85rem; } .cfg__row--off:hover { border-color: var(--line); } .cfg__row--off::after, .cfg__row--off::before { display: none; } /* ---- Quantity stepper ---------------------------------------------------- */ /* One look for "how many" everywhere — the cart line's: a bordered box with * square buttons either side and the count between thin rules. The product * page, the option quantities and the cart all take it from here; the phone * action bar only recolours it (see "The bar"). */ .stepper { display: inline-flex; align-items: center; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; } .stepper__btn { width: 40px; height: 40px; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color 0.16s var(--ease); } .stepper__btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .stepper__input { width: 2.25rem; height: 40px; text-align: center; border: 0; border-inline: 1px solid var(--line); border-radius: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); -moz-appearance: textfield; } .stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---- Cart ---------------------------------------------------------------- */ .cart { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .cart__lines { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .cart-line { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .cart-line__media { width: 6.5rem; height: 6.5rem; border-radius: 12px; /* a rounded square, as the dish thumbnails elsewhere */ overflow: hidden; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); } .cart-line__media img { width: 100%; height: 100%; object-fit: cover; } .cart-line__title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.3rem; } .cart-line__desc { color: var(--muted); font-size: 0.86rem; margin: 0 0 0.7rem; } .cart-line__sel { list-style: none; margin: 0 0 0.6rem; padding: 0; font-size: 0.83rem; color: var(--muted); } .cart-line__sel b { color: var(--ink-soft); font-weight: 500; } .cart-line__price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; } .cart-line__remove { border: 0; background: none; color: var(--muted); font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0; } .cart-line__remove:hover { color: var(--danger); } .cart__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line-2); padding-top: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .cart__total-value { background: var(--surface-3); border-radius: var(--radius-sm); padding: 0.5rem 1.75rem; } .cart__side-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.9rem; } .cart__place { margin-top: 2rem; text-align: center; } .cart__place .btn { min-width: min(22rem, 100%); } .cart-empty { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0; } @media (max-width: 60rem) { .cart { grid-template-columns: 1fr; } .cart-line { grid-template-columns: 4.5rem minmax(0, 1fr); } .cart-line__media { width: 4.5rem; height: 4.5rem; } .cart-line__price { grid-column: 2; } } /* ---- Reservation --------------------------------------------------------- */ .reserve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .reserve__media { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); box-shadow: var(--shadow); } .reserve__media img { width: 100%; height: 100%; object-fit: cover; } .reserve__form { max-width: 26rem; } @media (max-width: 52rem) { .reserve { grid-template-columns: 1fr; } .reserve__media { order: -1; aspect-ratio: 16 / 10; } } /* ---- Generic product card (shop / search / collections) ------------------ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* ---- Footer -------------------------------------------------------------- */ /* No margin above the footer: the last section's own bottom padding already * ends the page, and a margin on top of it was a band of bare page colour with * nothing in it. The brand badge (-2.75rem) still rises over the edge, into * that padding — above it, so nothing covers it. */ .site-footer { margin-top: 0; background: var(--dark); color: var(--on-dark); text-align: center; position: relative; padding: 0 0 2.25rem; } .site-footer a { color: var(--on-dark); } .site-footer a:hover { color: color-mix(in srgb, var(--accent) 65%, #fff); } /* Buttons keep their own foreground. * * The two rules above are `.site-footer a` — one class and one element, which * out-specifies the bare `.btn` that sets `color: var(--btn-fg)`. So every * button in the footer had its text repainted in the footer's link cream, and * `.btn--light` puts that cream on a cream background: "Reserve Now" was * invisible at rest and a washed-out olive on hover. * * Written against `.btn` rather than against `--btn-fg` so it holds for every * variant — a dark or ghost button dropped into the footer later inherits the * fix instead of rediscovering the bug. */ .site-footer .btn, .site-footer .btn:hover { color: var(--btn-fg); } .footer__brand { display: inline-flex; align-items: center; justify-content: center; background: var(--paper); border-radius: var(--radius); padding: 0.9rem 1.5rem; margin-top: -2.75rem; margin-bottom: 1.75rem; box-shadow: var(--shadow); color: var(--ink); } .footer__brand:hover { color: var(--ink); } .footer__brand img { max-height: 3rem; width: auto; } .footer__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem clamp(1rem, 3vw, 2.25rem); list-style: none; margin: 0 0 1.5rem; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; } .footer__text { max-width: 42rem; margin: 0 auto 1.25rem; color: var(--on-dark-muted); font-size: 0.88rem; line-height: 1.7; } .footer__hours { color: var(--on-dark); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 2rem; } .footer__cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .footer__social { display: flex; justify-content: center; gap: 1.1rem; margin-bottom: 1.75rem; } .footer__social a { width: 2.1rem; height: 2.1rem; border-radius: var(--radius-pill); display: grid; place-items: center; border: 1px solid rgba(243, 241, 233, 0.28); transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease); } .footer__social a:hover { background: rgba(243, 241, 233, 0.12); border-color: rgba(243, 241, 233, 0.5); } .footer__legal { color: var(--on-dark-muted); font-size: 0.8rem; margin: 0; } .footer__meta { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; font-size: 0.8rem; color: var(--on-dark-muted); } /* ---- RTL ----------------------------------------------------------------- */ [dir="rtl"] body { text-align: right; } /* `.dish` is deliberately absent: its card is start-aligned, which already * flips to the right in RTL. Centring it here would have undone that. */ [dir="rtl"] .hero, [dir="rtl"] .event, [dir="rtl"] .site-footer, [dir="rtl"] .menu-section__title, [dir="rtl"] .section__head--center { text-align: center; } /* ---- Motion preference --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } } /* ---- Progressive-enhancement field swap --------------------------------- The reservation form draws Date and Time as two fields, and the name as First / Last, the way the design specifies. The platform wants one datetime and one name, so theme.js composes them on submit. With scripting off the composed fields are dropped and a single combined field takes their place — see the