/* ============================================================
03-app.css (3 of 6)
Customer screens: category tabs, quantity steppers, menu cards, deals rail,
outlet picker, sticky cart, cart, orders, item detail, account, search, auth.
Part of an ordered set. The browser concatenates these in the order they
are linked in fragments/head.html, and that order IS the cascade. Do not
reorder the tags, and do not move a rule between files without
checking what it would then stop overriding.
============================================================ */
/* ============================================================
CATEGORY TABS
The app design replaces the circular illustrated chips with a plain
underlined tab bar: a scrolling row of labels on a hairline, the active
one in primary with a 2px rule beneath it. Quieter, and it stops the
category row competing with the food photography below it.
============================================================ */
.category-chips-wrapper {
margin: 0 0 var(--stack-lg);
border-bottom: 1px solid var(--color-border);
}
.category-chips {
display: flex;
gap: 32px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: -1px;
}
.category-chips::-webkit-scrollbar { display: none; }
.category-chip {
position: relative;
display: flex;
align-items: center;
flex: none;
padding: 0 0 var(--stack-sm);
border: none;
background: transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
/* The illustrated pucks have no place in a text tab bar. */
.cat-chip-icon,
.cat-icon-img { display: none; }
.cat-chip-label {
font-family: var(--font-body);
font-size: var(--text-label-lg);
line-height: var(--lh-label-lg);
letter-spacing: 0.01em;
font-weight: 600;
color: var(--color-ink-muted);
transition: color 150ms ease;
}
.category-chip:hover .cat-chip-label { color: var(--color-ink); }
.category-chip.active .cat-chip-label { color: var(--color-primary); }
/* The active rule sits on the wrapper's hairline rather than under the label, so the
two line up exactly however tall the label happens to be. */
.category-chip.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--color-primary);
border-radius: 2px 2px 0 0;
}
/* ============================================================
QUANTITY STEPPER (+ / - buttons replacing number input)
============================================================ */
.qty-stepper,
.cart-control__stepper {
display: inline-flex;
align-items: center;
gap: 3px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--color-surface);
padding: 3px;
box-shadow: 0 2px 6px rgba(70, 45, 25, 0.05);
}
.qty-stepper button,
.cart-control__stepper button {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: var(--color-primary-tint);
color: var(--color-primary-dark);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 120ms ease;
-webkit-tap-highlight-color: transparent;
}
.qty-stepper button:hover,
.cart-control__stepper button:hover {
background: var(--color-primary);
color: #fff;
}
.qty-stepper button:active,
.cart-control__stepper button:active {
transform: scale(0.88);
}
.qty-stepper .qty-value,
.cart-control__stepper .cart-qty-value {
min-width: 28px;
text-align: center;
font-weight: 700;
font-size: 0.92rem;
color: var(--color-ink);
font-family: var(--font-display);
user-select: none;
}
/* ---------- Add / stepper swap on menu cards ----------
The card used to show a stepper reading "1" beside an Add button, on an
item that was not in the cart at all. Two controls, one of which was
lying: the 1 described what would be added, but read as what was already
there. Now the stepper only exists once the item is in the cart, so any
number on screen is a number in the cart.
Both controls are always in the DOM and .is-active picks between them.
That keeps the swap instant and, more importantly, keeps the no-JS path
honest: the server renders the correct one on load. */
.cart-control__stepper { display: none; }
.cart-control.is-active .cart-control__add { display: none; }
.cart-control.is-active .cart-control__stepper { display: inline-flex; }
/* Only the number changes on +/-, and it changes under the user's finger,
so it gets a short pop to confirm the tap registered. Anything longer
would lag behind repeated presses. */
.cart-qty-value.is-bumped { animation: qtyBump 180ms ease; }
@keyframes qtyBump {
0% { transform: scale(1); }
45% { transform: scale(1.28); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.cart-qty-value.is-bumped { animation: none; }
}
/* Solid sage pill with lively tactile micro-press */
/* ============================================================
ADD BUTTON
In the app design the add control is a small filled square that floats
over the bottom-right of the food photo, not a pill sitting in a row of
text. It stays the same object on the detail screen and the deals rail.
============================================================ */
.btn-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: var(--color-primary);
color: #fff;
font-family: var(--font-body);
font-size: 0; /* the label is for screen readers; the glyph carries it */
line-height: 0;
box-shadow: var(--shadow-md);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 120ms ease, background-color 150ms ease;
}
.btn-add::before {
content: 'add';
font-family: 'Material Symbols Outlined';
font-size: 20px;
line-height: 1;
font-weight: 400;
}
.btn-add:hover { background: var(--color-primary-dark); }
.btn-add:active { transform: scale(0.9); }
/* ============================================================
MENU CARD
Two-up grid of square-cropped photos on pure-white cards with a hairline
and the lightest shadow — the app design's main feed. The previous
horizontal row layout is gone: at two columns the photo does the work of
identifying the dish, so the text below it is only name, price, rating.
============================================================ */
.menu-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.menu-card:hover { box-shadow: var(--shadow-md); }
.menu-card:active { transform: scale(0.99); }
/* The row wrapper survives from the old markup but no longer lays anything out
sideways — the card is a column now. */
.menu-card-row {
display: flex;
flex-direction: column;
height: 100%;
}
.menu-card-photo {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--color-surface-deep);
overflow: hidden;
}
.menu-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-card:hover .menu-card-photo img { transform: scale(1.05); }
/* Generated illustrations are line art, not photography: contain them and sit them
on the tonal fill rather than cropping them to the square. */
.menu-card-photo.is-illustration {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-food);
}
.menu-card-photo.is-illustration img {
width: 62%;
height: 62%;
object-fit: contain;
}
.menu-card:hover .menu-card-photo.is-illustration img { transform: scale(1.06); }
.menu-card-body {
display: flex;
flex-direction: column;
gap: var(--stack-xs);
padding: var(--stack-sm);
flex: 1;
}
.menu-card-name {
margin: 0;
font-size: var(--text-label-lg);
line-height: var(--lh-label-lg);
letter-spacing: 0.01em;
font-weight: 600;
color: var(--color-ink);
/* One line, clipped — a long dish name must not push the price row out of
alignment with the card beside it. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-card-price {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-label-lg);
line-height: var(--lh-label-lg);
font-weight: 600;
color: var(--color-primary);
}
/* The add control floats over the photo, but it cannot live inside it: the photo is a
link to the dish page and a