/* ===========================================================
Orderzy Design System Preview. Shared styles for preview/*.html
Standalone: no Bootstrap, no framework. Pure CSS + Google Fonts.
This file is the de-facto draft of what `orderzy-modern.css` would
look like after the Step 1 token migration from Section 10.
=========================================================== */
/* ---------- Self-hosted fonts ----------
Fix for Windows 7 desktops that shipped with a pre-KB-2729094 Segoe UI
cut without the rupee glyph (U+20B9). base.html still loads the same
families from Google Fonts (parallel path, CDN-cached for everyone else);
these @font-face blocks give the browser a same-origin fallback that
works offline, behind corporate DNS, and on legacy Win7 rigs. `local()`
is listed first so if the OS already has Inter installed, that gets used
(zero payload); otherwise the vendored TTF loads. `font-display: swap`
ensures text renders in the system fallback while the file arrives, so
there's no invisible-text flash. Files are the same TTFs reportlab uses
for the PDF bill (see orders/fonts.py) - one source of truth per weight.
------------------------------ */
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: normal;
font-display: swap;
src: local('Inter Regular'), local('Inter'),
url("/static/fonts/Inter-Regular.4145168e5230.ttf") format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 500;
font-style: normal;
font-display: swap;
src: local('Inter Medium'),
url("/static/fonts/Inter-Medium.a6f54808ec0a.ttf") format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: normal;
font-display: swap;
src: local('Inter Bold'),
url("/static/fonts/Inter-Bold.c7b5fabc34e7.ttf") format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: italic;
font-display: swap;
src: local('Inter Italic'),
url("/static/fonts/Inter-Italic.2247b87d078d.ttf") format('truetype');
}
@font-face {
font-family: 'DM Serif Display';
font-weight: 400;
font-style: normal;
font-display: swap;
src: local('DM Serif Display'),
url("/static/fonts/DM-Serif-Display-Regular.2312ec57b28b.ttf") format('truetype');
}
@font-face {
font-family: 'DM Serif Display';
font-weight: 400;
font-style: italic;
font-display: swap;
src: local('DM Serif Display Italic'),
url("/static/fonts/DM-Serif-Display-Italic.2cfd6017cc5c.ttf") format('truetype');
}
/* ---------- Tokens ----------
Post-Luxe-unification (2026-08-14): the former Luxe token block (previously
scoped to `body.theme-luxe`) merged into :root. Every surface now renders on
the single unified token set. Historical values from both eras noted inline
where they differed. Wordmark orange is preserved as the Orderzy brand anchor.
------------------------------ */
:root {
/* Brand (Orderzy wordmark + brand anchor; never per-outlet-tinted) */
--orderzy-brand: #f28500;
--orderzy-brand-deep: #b86600;
--orderzy-brand-hover: #965200;
--orderzy-brand-soft: #fef1e0;
--orderzy-brand-ink: #7a4500;
/* Surface */
--orderzy-canvas: #fdfbf7; /* was #faf8f4 pre-unification */
--orderzy-surface: #ffffff;
--orderzy-surface-alt: #f6f0e6; /* was #f3efe8 */
/* L18: --orderzy-surface-sand aliases --orderzy-border. Existing consumers
stay stable; future code should prefer --orderzy-border directly. */
--orderzy-surface-sand: var(--orderzy-border);
/* Text */
--orderzy-ink: #1a1815; /* was #1f1d1a */
--orderzy-ink-soft: #6b6760; /* was #5e5d59 */
--orderzy-ink-muted: #9a948b; /* was #87867f */
--orderzy-ink-invert: #fdfbf7; /* was #faf9f5 */
/* Borders */
--orderzy-border: #ede5d7; /* was #ebe5da */
--orderzy-border-soft: rgba(26,24,21,0.08);
--orderzy-border-strong: #d4cdc0;
/* Semantic */
--orderzy-success: #4a6b3a; /* was #1f9d55, Luxe muted */
--orderzy-success-soft: #e3f5ea;
--orderzy-warning: #a17a3a; /* was #c9820a */
--orderzy-warning-soft: #faf0dc;
--orderzy-danger: #8b3a3a; /* was #b53333 */
--orderzy-danger-soft: #fae5e3;
/* Per-brand accent (set by in base.html
when brand.accent_hex is set; otherwise falls through to Orderzy orange so
no-accent brands still feel like Orderzy restaurants). */
--accent: var(--orderzy-brand-deep);
--accent-hover: color-mix(in srgb, var(--accent) 88%, #000);
--accent-contrast: #fdfbf7;
--badge-veg: #4a6b3a;
--badge-nonveg: #8b3a3a;
/* Shadows (Luxe: barely-there) */
--orderzy-shadow-card: 0 2px 8px rgba(0,0,0,0.04);
--orderzy-shadow-lift: 0 8px 24px rgba(0,0,0,0.06);
--orderzy-shadow-whisper: 0 16px 48px rgba(0,0,0,0.08);
--shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
--shadow-medium: 0 8px 24px rgba(0,0,0,0.06);
--shadow-strong: 0 16px 48px rgba(0,0,0,0.08);
/* Radii: production aliases + STYLEGUIDE names */
--r-xs: 4px;
--r-sm: 4px; /* was 8px */
--r-md: 8px; /* was 12px */
--r-lg: 12px; /* was 20px */
--r-pill: 9999px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
/* Borders (composite shorthands) */
--border-thin: 1px solid var(--orderzy-border);
--border-emphasis: 1px solid var(--accent);
/* P4.C09 (2026-08-15): canonical breakpoint tokens.
CSS custom properties CANNOT be used inside `@media (max-width: …)`
conditions (the spec resolves `var()` only in a declaration context),
so the tokens below function as documentation + consistency anchors
for anyone editing the file. When adding a new media query, prefer
the four canonical widths below unless the design genuinely needs a
one-off breakpoint; if it does, add a comment explaining why. Current
one-off widths that the site still ships with, and what they map to:
360, 400, 420, 480, 540, 560 → mobile (canonical 520)
620, 640, 720 → tablet (canonical 768)
767 → tablet-minus-one; treat as 768
840, 880 → desktop (canonical 1024)
Migrating each one-off to its canonical bucket is a follow-up: the
regressions from re-flowing every layout are wider than a single-phase
cleanup can safely land, so leave existing rules alone and start
fresh rules on the canonical set.
*/
--bp-mobile: 520px;
--bp-tablet: 768px;
--bp-desktop: 1024px;
--bp-wide: 1440px;
/* Type */
--font-heading: "DM Serif Display", Georgia, serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-display: "DM Serif Display", Georgia, serif;
--font-mono: "Inter", ui-monospace, monospace;
/* Type scale: fluid clamp() on the 5 biggest tokens so type scales
smoothly from phone (540px) → desktop (1200px) instead of jumping at
the 768px breakpoint. */
--text-display: clamp(56px, calc(56px + (100vw - 540px) * 24 / 660), 80px);
--text-h1: clamp(40px, calc(40px + (100vw - 540px) * 16 / 660), 56px);
--text-h2: clamp(32px, calc(32px + (100vw - 540px) * 8 / 660), 40px);
--text-h3: clamp(24px, calc(24px + (100vw - 540px) * 4 / 660), 28px);
--text-h4: clamp(20px, calc(20px + (100vw - 540px) * 2 / 660), 22px);
--text-body: 17px;
--text-small: 15px;
--text-caption: 13px;
--text-label: 13px; /* ALL-CAPS, pair with --tracking-wide */
--text-price: 22px; /* tabular-nums */
/* Line-height */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--leading-loose: 1.85;
/* Letter-spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.12em;
--tracking-wider: 0.18em;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
--space-section: 128px; /* between menu courses */
--space-page-x: 64px; /* desktop page margin; 24px mobile (see @media) */
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* signature */
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* entering view */
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* leaving view */
--dur-fast: 180ms; /* was 120ms */
--dur-med: 320ms; /* was 200ms */
--duration-fast: 180ms;
--duration-base: 320ms;
--duration-slow: 600ms;
/* Focus ring (WCAG 2.4.7): reads per-brand accent */
--focus-ring: var(--accent);
}
/* Mobile type-scale + page-margin adjustments. The 5 biggest type tokens
(--text-display, --text-h1..h4) use clamp() in :root above; this media
query handles the remaining non-fluid sizes plus spacing tightens:
128px between courses reads as too-much-air on a phone. */
@media (max-width: 768px) {
:root {
--text-body: 16px;
--text-price: 20px;
--space-page-x: 24px;
--space-section: 64px;
--space-5: 24px;
}
}
/* RA-0 M5: respect prefers-reduced-motion. Suppresses long animations and
transitions for users who set OS-level reduced motion. The carousel
autoplay is also gated separately in JS at restaurant__detail.html. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* M22: skip-to-content link. Hidden until focused, then surfaces top-left. */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 1000;
padding: 10px 16px;
background: var(--orderzy-ink);
color: var(--orderzy-ink-invert);
font-family: var(--font-body);
font-weight: 600;
border-radius: var(--r-sm);
text-decoration: none;
transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
top: 8px;
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* ---------- Link reset for UI patterns ----------
Browsers underline every by default. That's the right behavior for
inline body-prose links, but wrong for nav items, buttons, chips, cards,
and other UI surfaces where the link is just the click target. We list
every UI-link class here so per-class rules don't keep forgetting it.
Body-prose links keep their underline via .mk-ar-prose / .mk-prose:hover
rules further down. */
.btn,
.adm-btn,
.adm-chip,
.adm-table__row-link,
.auth-field__link,
.btn-cancel,
.cart-add-more,
.cart-bar__cta,
.contact-edit-link,
.cust-nav__item,
.filter-chip,
.mb-cat,
.mini-cart,
.mk-bl-card__media,
.mk-cl-nearby__chip,
.mo-btn-sm,
.mo-filter,
.oz-nav__cart,
.oz-nav__link,
.oz-nav__link--muted,
.oz-nav__link--restaurant,
.oz-nav__user,
.oz-wordmark,
.pos-back-btn,
.r-btn,
.rest-card {
text-decoration: none;
}
/* Reset: Bootstrap handles box-sizing and base styles.
We only enforce Orderzy-specific body defaults. */
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--orderzy-ink);
background: var(--orderzy-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#main-content { flex: 1 0 auto; }
.oz-footer { flex-shrink: 0; }
h1, h2, h3, h4, h5 {
font-family: var(--font-heading);
color: var(--orderzy-ink);
margin: 0;
letter-spacing: -0.01em;
}
.num, .price, .total { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* ---------- Layout helpers ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.stack-lg > * + * { margin-top: 24px; }
.stack-md > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
/* ---------- Navbar ---------- */
.oz-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250,248,244,0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--orderzy-border-soft);
}
.oz-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.oz-wordmark {
font-family: "Playfair Display", "DM Serif Display", Georgia, serif;
font-weight: 800;
font-size: 26px;
letter-spacing: 0;
color: var(--orderzy-brand);
line-height: 1;
}
.oz-nav__links {
display: flex;
align-items: center;
gap: 28px;
}
.oz-nav__link {
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: var(--orderzy-ink);
transition: color var(--dur-fast) var(--ease);
}
.oz-nav__link:hover { color: var(--orderzy-brand); }
.oz-nav__link--restaurant {
color: var(--orderzy-ink);
padding: 8px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--orderzy-border-strong);
transition: all var(--dur-fast) var(--ease);
}
.oz-nav__link--restaurant:hover {
background: var(--orderzy-brand-soft);
border-color: var(--orderzy-brand);
color: var(--orderzy-brand-ink);
}
.oz-nav__cart {
position: relative;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--r-pill);
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
color: var(--orderzy-ink);
transition: all var(--dur-fast) var(--ease);
}
.oz-nav__cart:hover { border-color: var(--orderzy-ink); }
.oz-nav__cart-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
/* Brighter orange (brand) for the cart badge so it reads clearly distinct
from the bell's red danger badge - the two used to share a similar
dark tone, creating an unintentional visual rhyme. */
background: var(--orderzy-brand);
color: #fff;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 700;
display: grid;
place-items: center;
padding: 0 5px;
border: 2px solid var(--orderzy-canvas);
}
.oz-nav__cart-badge.hidden { display: none; }
.oz-nav__cart--empty { opacity: 0.5; }
.oz-nav__link--muted {
font-size: 14px;
font-weight: 600;
color: var(--orderzy-ink-muted);
transition: color var(--dur-fast) var(--ease);
}
.oz-nav__link--muted:hover { color: var(--orderzy-danger); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
padding: 12px 20px;
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: all var(--dur-fast) var(--ease);
text-align: center;
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
background: var(--orderzy-brand-deep);
color: #fff;
box-shadow: 0 1px 2px rgba(31,29,26,0.1);
}
.btn--primary:hover {
background: var(--orderzy-brand-hover);
box-shadow: var(--orderzy-shadow-lift);
}
/* FE1-5: .btn--ink removed - unused in production templates. */
.btn--secondary {
background: var(--orderzy-surface-sand);
color: var(--orderzy-ink);
border-color: var(--orderzy-border);
}
.btn--secondary:hover { background: var(--orderzy-border-strong); }
.btn--ghost {
background: transparent;
color: var(--orderzy-ink);
}
.btn--ghost:hover { color: var(--orderzy-brand); }
/* FE1-3: shared disabled states for buttons + inputs */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
background: inherit;
color: inherit;
transform: none;
}
.input:disabled,
.input[aria-disabled="true"] {
background: var(--orderzy-surface-alt);
color: var(--orderzy-ink-muted);
cursor: not-allowed;
border-color: var(--orderzy-border);
}
.btn--large {
font-size: 17px;
padding: 14px 26px;
}
.btn--block { width: 100%; }
/* ---------- Status pill ---------- */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.pill--success { background: var(--orderzy-success-soft); color: var(--orderzy-success); }
.pill--warn { background: var(--orderzy-warning-soft); color: var(--orderzy-warning); }
.pill--brand { background: var(--orderzy-brand-soft); color: var(--orderzy-brand-ink); }
.pill--closed { background: var(--orderzy-surface-alt); color: var(--orderzy-ink-muted); }
/* Variant for status pills laid over hero photos. Solid semi-opaque white
surface + strong shadow + frosted backdrop so the pill reads against ANY
underlying photography (bright food, dark interiors, varied compositions).
Text color is forced dark; the colored status dot via ::before stays
theme-aware (success green / closed grey). FE0 follow-up 2026-06-02:
strengthened from blur(2px) + soft shadow which faded on bright photos. */
.pill--on-photo {
background: rgba(255,255,255,0.92) !important;
color: var(--orderzy-ink) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
border: 1px solid rgba(255,255,255,0.6);
}
/* Status dot picks up the variant color even though text is dark. */
.pill--on-photo.pill--success::before { background: var(--orderzy-success); }
.pill--on-photo.pill--warn::before { background: var(--orderzy-warning); }
.pill--on-photo.pill--brand::before { background: var(--orderzy-brand-ink); }
.pill--on-photo.pill--closed::before { background: var(--orderzy-ink-muted); }
.pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ---------- Trust badge ---------- */
.trust-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
color: var(--orderzy-ink-soft);
font-size: 13px;
font-weight: 600;
}
.trust-badge__icon {
width: 14px;
height: 14px;
color: var(--orderzy-brand);
}
/* ---------- Inputs ---------- */
.input {
width: 100%;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border-strong);
border-radius: var(--r-sm);
padding: 12px 14px;
font: inherit;
color: var(--orderzy-ink);
transition: all var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--orderzy-ink-muted); }
.input:focus {
outline: none;
border-color: var(--orderzy-brand);
box-shadow: 0 0 0 3px var(--orderzy-brand-soft);
}
.input-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--orderzy-ink);
margin-bottom: 6px;
}
/* ---------- Search bar (hero) ---------- */
.search-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-pill);
padding: 6px 6px 6px 18px;
box-shadow: var(--orderzy-shadow-card);
max-width: 480px;
}
.search-bar__icon {
width: 18px;
height: 18px;
color: var(--orderzy-ink-muted);
flex-shrink: 0;
}
.search-bar__input {
flex: 1;
border: none;
background: transparent;
font: inherit;
outline: none;
color: var(--orderzy-ink);
padding: 10px 0;
}
.search-bar__input::placeholder { color: var(--orderzy-ink-muted); }
.search-bar__btn {
background: var(--orderzy-brand-deep);
color: #fff;
border: none;
width: 42px;
height: 42px;
border-radius: var(--r-pill);
display: grid;
place-items: center;
transition: background var(--dur-fast) var(--ease);
}
.search-bar__btn:hover { background: var(--orderzy-brand-hover); }
/* ---------- Quick-search chips below hero search bar ---------- */
/* P1.C05.hotfix (2026-08-16): dropped the max-width: 480px cap. It was sized
for a phantom left column that disappeared when the phone mock retired,
which forced any sixth (or wide-labelled) chip to wrap onto a second row
on desktop. The row now uses whatever horizontal space the hero column
offers; the hero__grid rules gate the actual width. */
.search-suggest {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.search-suggest__chip {
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-pill);
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
color: var(--orderzy-ink);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
font-family: inherit;
}
.search-suggest__chip:hover {
background: var(--orderzy-brand-soft);
border-color: var(--orderzy-brand);
color: var(--orderzy-brand-ink);
}
.search-suggest__chip:focus-visible {
outline: 2px solid var(--orderzy-brand);
outline-offset: 2px;
}
/* ---------- Card (Airbnb-style restaurant listing) ---------- */
.rest-card {
background: var(--orderzy-surface);
border-radius: var(--r-lg);
box-shadow: var(--orderzy-shadow-card);
overflow: hidden;
transition: box-shadow var(--dur-med) var(--ease);
display: flex;
flex-direction: column;
}
.rest-card:hover { box-shadow: var(--orderzy-shadow-lift); }
.rest-card--closed { opacity: 0.65; }
.rest-card--closed .rest-card__media img { filter: grayscale(40%); }
/* =========== Marketplace browse header =========== */
.browse-head {
padding: 32px 0 8px;
background: var(--orderzy-canvas);
position: sticky;
top: 72px;
z-index: 30;
border-bottom: 1px solid var(--orderzy-border-soft);
}
.browse-head__search {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 18px;
}
.browse-head__search .search-bar { flex: 1; min-width: 260px; margin: 0; }
.browse-head__location {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-sm);
padding: 10px 14px;
font-size: 14px;
color: var(--orderzy-ink);
font-weight: 600;
}
.browse-head__location svg { color: var(--orderzy-brand); width: 16px; height: 16px; }
.browse-head__location-change {
color: var(--orderzy-brand-ink);
font-size: 12px;
font-weight: 700;
margin-left: 4px;
border-left: 1px solid var(--orderzy-border);
padding-left: 10px;
background: none;
border-top: none;
border-right: none;
border-bottom: none;
cursor: pointer;
}
.filter-row {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 0 16px;
scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--r-pill);
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
color: var(--orderzy-ink);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: all var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--orderzy-ink); }
.filter-chip.is-active {
background: var(--orderzy-ink);
color: var(--orderzy-ink-invert);
border-color: var(--orderzy-ink);
}
.filter-chip:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.filter-chip:disabled:hover { border-color: var(--orderzy-border); }
.filter-chip__dot { width: 8px; height: 8px; border-radius: 50%; }
.filter-chip__dot--veg { background: #1f9d55; }
.filter-chip__dot--nonveg { background: #b53333; }
.results-head {
padding: 20px 0 12px;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.results-head__count { font-size: 15px; color: var(--orderzy-ink-soft); }
.results-head__count strong { color: var(--orderzy-ink); }
.results-head__sort { font-size: 14px; color: var(--orderzy-ink-soft); }
.results-head__sort strong { color: var(--orderzy-ink); font-weight: 700; }
@media (max-width: 520px) {
.browse-head { top: 56px; padding: 16px 0 4px; }
.browse-head__search { margin-bottom: 12px; }
.results-head { padding: 14px 0 10px; }
}
.rest-card__media {
aspect-ratio: 16 / 10;
background: var(--orderzy-surface-alt);
position: relative;
overflow: hidden;
}
.rest-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rest-card__badge {
position: absolute;
top: 12px;
left: 12px;
}
/* CTA row at the foot of the card. Both CTAs sit above the stretched-link
overlay (z-index:2) so they receive their own clicks. View menu is primary
(outlined, brand-ink), Book a table is secondary text-link. */
.rest-card__ctas {
position: relative;
z-index: 2;
display: flex;
gap: 8px;
align-items: center;
margin-top: 12px;
flex-wrap: wrap;
}
.rest-card__view-cta {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid var(--orderzy-brand-ink);
border-radius: 9999px;
color: var(--orderzy-brand-ink);
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rest-card__view-cta:hover {
background: var(--orderzy-brand-ink);
color: #fff;
}
.rest-card__book-cta {
display: inline-flex;
align-items: center;
padding: 8px 12px;
color: var(--orderzy-ink-muted);
font-family: var(--font-heading);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.rest-card__book-cta:hover {
color: var(--orderzy-brand-ink);
text-decoration: underline;
text-underline-offset: 4px;
}
.rest-card__body { padding: 14px 18px 18px; }
.rest-card__title {
font-size: 18px;
font-weight: 700;
color: var(--orderzy-ink);
margin: 0 0 4px;
}
.rest-card__meta {
font-size: 14px;
color: var(--orderzy-ink-soft);
line-height: 1.4;
}
.rest-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--orderzy-border);
}
.rest-card__price {
font-size: 14px;
color: var(--orderzy-ink-soft);
}
.rest-card__rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 600;
color: var(--orderzy-ink);
}
/* ---------- Hero ---------- */
.hero {
padding: 48px 0 64px;
}
.hero__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
.hero__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--orderzy-brand-ink);
background: var(--orderzy-brand-soft);
padding: 5px 12px;
border-radius: var(--r-pill);
margin-bottom: 20px;
}
.hero__headline {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--orderzy-ink);
margin: 0 0 16px;
}
.hero__headline-accent { color: var(--orderzy-brand); }
.hero__subline {
font-size: 18px;
color: var(--orderzy-ink-soft);
line-height: 1.55;
max-width: 480px;
margin: 0 0 28px;
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 28px;
}
/* ---------- Hero location pill (three-state, no CLS) ---------- */
/* P1.C05.hotfix (2026-08-16). Before this pass the pill was styled inline on
the element itself (a hostile pattern for CSP nonces) and always mounted
the Change button, so the "Add your location" state read as the literal
string "Add your location Change" - two labels smoothed together with no
affordance. State-machine is now data-state-driven and Change only shows
when there is a real location to change AWAY FROM. */
.search-bar__location {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-pill);
padding: 8px 14px;
font-size: 13px;
color: var(--orderzy-ink);
font-weight: 600;
min-height: 36px;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.search-bar__location:hover { border-color: var(--orderzy-border-strong); }
.search-bar__location svg { color: var(--orderzy-brand); flex-shrink: 0; }
.search-bar__location .location-refresh {
color: var(--orderzy-brand-ink);
font-size: 12px;
font-weight: 700;
border: none;
background: none;
cursor: pointer;
border-left: 1px solid var(--orderzy-border);
padding: 2px 0 2px 10px;
margin-left: 4px;
font-family: inherit;
transition: color var(--dur-fast) var(--ease);
}
.search-bar__location .location-refresh:hover { color: var(--orderzy-brand); }
.search-bar__location .location-refresh:focus-visible {
outline: 2px solid var(--orderzy-brand);
outline-offset: 2px;
border-radius: 4px;
}
/* Detecting: no Change button (nothing to change from). */
.search-bar__location[data-state="detecting"] .location-refresh { display: none; }
.search-bar__location[data-state="detecting"] { color: var(--orderzy-ink-muted); }
/* Add: whole pill is the affordance; no trailing Change button. */
.search-bar__location[data-state="add"] .location-refresh { display: none; }
.search-bar__location[data-state="add"] {
cursor: pointer;
color: var(--orderzy-brand-ink);
border-color: var(--orderzy-brand-soft);
background: var(--orderzy-brand-soft);
}
.search-bar__location[data-state="add"]:hover {
background: var(--orderzy-surface);
border-color: var(--orderzy-brand);
}
/* ---------- Phone mockup ---------- */
.phone {
position: relative;
width: 300px;
margin: 0 auto;
aspect-ratio: 300 / 620;
background: var(--orderzy-ink);
border-radius: 44px;
padding: 10px;
box-shadow: var(--orderzy-shadow-whisper),
0 40px 80px -20px rgba(31,29,26,0.25);
}
.phone__screen {
width: 100%;
height: 100%;
background: var(--orderzy-canvas);
border-radius: 34px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.phone__notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 22px;
background: var(--orderzy-ink);
border-radius: 16px;
z-index: 2;
}
.phone__status {
padding: 16px 22px 6px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 700;
color: var(--orderzy-ink);
z-index: 1;
}
.phone__body {
flex: 1;
padding: 6px 14px 14px;
overflow: hidden;
}
.phone__rest-header {
padding: 8px 6px 14px;
border-bottom: 1px solid var(--orderzy-border);
margin-bottom: 12px;
}
.phone__rest-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
color: var(--orderzy-ink);
margin: 0;
}
.phone__rest-meta {
font-size: 11px;
color: var(--orderzy-ink-soft);
margin-top: 2px;
}
.phone__item {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--orderzy-border-soft);
}
.phone__item:last-child { border-bottom: 0; }
.phone__item-img {
width: 58px;
height: 58px;
flex-shrink: 0;
background: var(--orderzy-surface-alt);
border-radius: var(--r-md);
overflow: hidden;
}
.phone__item-img img { width: 100%; height: 100%; object-fit: cover; }
.phone__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.phone__item-title {
font-size: 12.5px;
font-weight: 700;
color: var(--orderzy-ink);
line-height: 1.25;
margin: 0;
}
.phone__item-desc {
font-size: 10.5px;
color: var(--orderzy-ink-muted);
line-height: 1.3;
margin: 2px 0 0;
}
.phone__item-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
.phone__item-price {
font-weight: 700;
font-size: 12px;
color: var(--orderzy-ink);
}
.phone__item-add {
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--r-xs);
background: var(--orderzy-brand-deep);
color: #fff;
border: none;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* P1.C05.hotfix.r4 (2026-08-16). The stepper used to render as one text run
("− 1 +") which read as a cramped, ambiguous glyph string.
Unpacked into three balanced sub-elements: .phone__item-qty-btn for - / +
(bolder glyphs sized as buttons) and .phone__item-qty-num for the count
(tabular numeral so it stays aligned as it grows past 9). Vertical hairline
dividers between the three cells mirror the real product's .qty-stepper
shape without pretending to be interactive. */
.phone__item-qty {
display: inline-flex;
align-items: stretch;
font-weight: 700;
border-radius: var(--r-xs);
border: 1px solid var(--orderzy-brand);
color: var(--orderzy-brand-ink);
background: var(--orderzy-brand-soft);
overflow: hidden;
line-height: 1;
}
.phone__item-qty-btn,
.phone__item-qty-num {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 0;
min-width: 22px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1;
color: var(--orderzy-brand-ink);
}
.phone__item-qty-btn { font-weight: 800; }
.phone__item-qty-num {
font-weight: 700;
font-variant-numeric: tabular-nums;
border-left: 1px solid rgba(184, 102, 0, 0.22);
border-right: 1px solid rgba(184, 102, 0, 0.22);
padding-left: 4px;
padding-right: 4px;
}
/* ---------- Phone status-bar (shared across every .phone mock) ---------- */
/* P1.C05.hotfix.r3 (2026-08-16). Clock + signal indicator live at the .phone
scope, not the .phone--hero-mock scope, because both the home hero mock
and the /dine-in-ordering-system/ hero mock (base .phone) use them. */
.phone__clock {
font-family: var(--font-body);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.phone__signal {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 12px;
}
.phone__signal-dots {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 10px;
}
.phone__signal-dot {
width: 3px;
background: var(--orderzy-ink);
border-radius: 1px;
}
.phone__signal-dot:nth-child(1) { height: 4px; }
.phone__signal-dot:nth-child(2) { height: 6px; }
.phone__signal-dot:nth-child(3) { height: 8px; }
.phone__signal-dot:nth-child(4) { height: 10px; }
.phone__signal-label {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.01em;
}
/* ---------- Hero phone mock (right column, ≥1024px only) ---------- */
/* Sits inside .hero__grid's right column on home. Wider than the base .phone
(which is 300px) so the item rows breathe more, matching the mockup in
Image #4. Hides at ≤1023px (tablet + mobile) so the hero collapses to a
single centered column - matches the responsive rule set for the retired
.hero__preview card. */
.phone--hero-mock {
width: 320px;
aspect-ratio: 320 / 640;
justify-self: end;
margin: 0;
}
.phone--hero-mock .phone__status {
padding: 14px 22px 4px;
font-size: 12px;
color: var(--orderzy-ink);
}
.phone--hero-mock .phone__rest-name { font-size: 18px; letter-spacing: -0.005em; }
.phone--hero-mock .phone__rest-meta { font-size: 12px; margin-top: 4px; }
.phone--hero-mock .phone__item { padding: 12px 0; }
.phone--hero-mock .phone__item:first-of-type { padding-top: 4px; }
.phone--hero-mock .phone__item-img { width: 64px; height: 64px; }
.phone--hero-mock .phone__item-title { font-size: 13.5px; }
.phone--hero-mock .phone__item-desc { font-size: 11px; margin-top: 3px; }
.phone--hero-mock .phone__item-price { font-size: 13px; }
.phone--hero-mock .phone__item-add { font-size: 10.5px; padding: 4px 12px; }
/* Stepper sized down slightly for the hero mock; cells shrink together so
the pill stays symmetric. */
.phone--hero-mock .phone__item-qty-btn,
.phone--hero-mock .phone__item-qty-num {
font-size: 12px;
min-width: 20px;
padding-top: 4px;
padding-bottom: 4px;
}
/* Hide the phone at tablet + mobile. The tablet/mobile hero collapses to a
centered single-column via the existing @media rules on .hero__grid. */
@media (max-width: 1023px) {
.phone--hero-mock { display: none; }
}
/* ---------- Section title ---------- */
.section {
padding: 56px 0;
}
.section__head {
margin-bottom: 28px;
}
.section__title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--orderzy-ink);
margin: 0;
}
.section__sub {
font-size: 16px;
color: var(--orderzy-ink-soft);
margin-top: 6px;
}
.rest-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
/* ---------- How it works ---------- */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.step {
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-lg);
padding: 28px 24px;
text-align: left;
position: relative;
}
.step__num {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--orderzy-brand);
text-transform: uppercase;
margin-bottom: 12px;
}
.step__title {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px;
}
.step__desc {
font-size: 15px;
color: var(--orderzy-ink-soft);
line-height: 1.55;
margin: 0;
}
.step__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--orderzy-brand-soft);
color: var(--orderzy-brand-ink);
display: grid;
place-items: center;
margin-bottom: 16px;
}
/* ---------- Restaurant acquisition band ---------- */
.ra-band {
background: var(--orderzy-brand-soft);
padding: 72px 0;
position: relative;
overflow: hidden;
}
.ra-band::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 50%, rgba(242,133,0,0.08) 0%, transparent 55%);
pointer-events: none;
}
.ra-band__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
position: relative;
}
.ra-band__title {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 12px;
line-height: 1.1;
}
.ra-band__sub {
font-size: 17px;
color: var(--orderzy-ink-soft);
line-height: 1.55;
margin: 0 0 20px;
max-width: 480px;
}
.ra-band__benefits {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
}
.ra-band__benefits li {
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
color: var(--orderzy-ink);
font-weight: 600;
}
.ra-band__benefits li::before {
content: "";
width: 8px;
height: 8px;
background: var(--orderzy-brand);
border-radius: 50%;
flex-shrink: 0;
}
/* Mini dashboard mockup */
.dash-mini {
background: var(--orderzy-surface);
border-radius: var(--r-lg);
box-shadow: var(--orderzy-shadow-lift);
padding: 20px;
font-size: 12px;
}
.dash-mini__head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid var(--orderzy-border);
margin-bottom: 14px;
}
.dash-mini__brand {
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
color: var(--orderzy-brand);
}
.dash-mini__metric {
display: flex;
gap: 14px;
margin-bottom: 16px;
}
.dash-mini__metric-cell {
flex: 1;
background: var(--orderzy-surface-alt);
border-radius: var(--r-md);
padding: 10px 12px;
}
.dash-mini__metric-label {
font-size: 10px;
font-weight: 600;
color: var(--orderzy-ink-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dash-mini__metric-value {
font-family: var(--font-heading);
font-weight: 700;
font-size: 22px;
color: var(--orderzy-ink);
margin-top: 2px;
}
.dash-mini__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--orderzy-border-soft);
font-size: 12px;
}
.dash-mini__row:last-child { border-bottom: none; }
.dash-mini__row-id { color: var(--orderzy-ink-muted); font-weight: 600; }
.dash-mini__row-amt { font-weight: 700; }
/* ---------- Footer ---------- */
/* P4.C08 (2026-08-15): the legacy (dark-ink) `.oz-footer` block plus its
`.oz-footer__grid` and `.oz-footer__bottom` variants was deleted. Every
production render uses `.oz-footer .oz-footer--compact` (see
`templates/includes/footer.html`); the compact-specific rules further
down still declare the shell (background/color come from the Luxe
override at §3.6 of the components section). No template referenced
`.oz-footer__grid` or `.oz-footer__bottom` after Wave 0. */
/* ---------- Compact footer (production default) ----------
Two-column top (brand on left, 3-column link grid on right) +
bottom strip with contact + copyright. */
.oz-footer--compact { padding: 48px 0 24px; margin-top: 0; }
.oz-footer__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.oz-footer__top {
display: grid;
grid-template-columns: 1.2fr 2fr;
gap: 48px;
margin-bottom: 36px;
}
.oz-footer__brand {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Brand title uses .oz-wordmark + .oz-footer__brand-title - inherits the
Playfair Display Bold 800 from .oz-wordmark; size is footer-specific. */
.oz-footer__brand-title {
font-size: 26px;
text-decoration: none;
}
.oz-footer__tagline {
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
color: rgba(250,249,245,0.6);
}
.oz-footer__brand-desc {
color: rgba(250,249,245,0.5);
font-size: 13px;
line-height: 1.5;
margin: 8px 0 0;
max-width: 280px;
}
.oz-footer__cols {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
}
/* Selector renamed h4 → h3 on 2026-08-22 to fix H2→H4 heading-skip. */
/* Footer column titles kept their 12px uppercase caption look. */
.oz-footer__col h3 {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(250,249,245,0.85);
margin: 0 0 12px;
}
.oz-footer__col ul { list-style: none; padding: 0; margin: 0; }
.oz-footer__col li { margin-bottom: 8px; }
.oz-footer__col a {
color: rgba(250,249,245,0.55);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.oz-footer__col a:hover {
color: var(--orderzy-brand);
text-decoration: underline;
text-underline-offset: 4px;
}
.oz-footer__bottom-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
border-top: 1px solid rgba(250,249,245,0.08);
flex-wrap: wrap;
}
.oz-footer__contact {
display: flex;
align-items: center;
gap: 16px;
}
.oz-footer__contact a {
color: rgba(250,249,245,0.55);
font-size: 13px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--dur-fast) var(--ease);
}
.oz-footer__contact a:hover { color: var(--orderzy-brand); }
.oz-footer__copy {
color: rgba(250,249,245,0.4);
font-size: 12px;
}
@media (max-width: 768px) {
.oz-footer--compact { padding: 36px 0 20px; }
.oz-footer__top {
grid-template-columns: 1fr;
gap: 28px;
}
.oz-footer__cols { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.oz-footer__brand-desc { max-width: none; }
}
@media (max-width: 480px) {
.oz-footer__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
.oz-footer__bottom-strip {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.oz-footer__contact { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* =========== Restaurant detail page =========== */
.rest-hero {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: var(--orderzy-ink);
}
@media (max-width: 880px) { .rest-hero { height: 220px; } }
@media (max-width: 520px) { .rest-hero { height: 180px; } }
.rest-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.rest-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(31,29,26,0.8) 0%, rgba(31,29,26,0.2) 60%, transparent 100%);
}
.rest-hero__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 32px 24px;
color: var(--orderzy-ink-invert);
}
.rest-info { max-width: 1200px; margin: 0 auto; }
.rest-info__name {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 6px;
color: #fff;
}
.rest-info__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 14px;
color: rgba(255,255,255,0.9);
align-items: center;
}
.rest-info__meta-sep { opacity: 0.5; }
.rest-info__outlet {
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.92);
margin: -2px 0 6px;
}
.cw-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
border-radius: 17px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
background: var(--orderzy-brand);
border: 1px solid var(--orderzy-brand);
color: #fff;
transition: background 150ms, color 150ms, border-color 150ms, transform 80ms;
}
.cw-btn:hover { background: var(--orderzy-brand-ink); border-color: var(--orderzy-brand-ink); }
.cw-btn:active { transform: scale(0.98); }
.cw-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.rest-banner {
background: var(--orderzy-brand-soft);
border-bottom: 1px solid var(--orderzy-border);
padding: 14px 0;
}
.rest-banner__inner {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--orderzy-brand-ink);
font-weight: 600;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.rest-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
padding: 32px 0 120px;
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.cat-nav {
position: sticky;
top: 96px;
align-self: start;
}
.cat-nav__title {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--orderzy-ink-muted);
margin: 0 0 12px;
padding: 0 12px;
}
.cat-nav__list { list-style: none; padding: 0; margin: 0; }
.cat-nav__item {
display: flex;
justify-content: space-between;
padding: 10px 12px;
border-radius: var(--r-sm);
font-size: 14px;
color: var(--orderzy-ink);
font-weight: 600;
border-left: 3px solid transparent;
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
.cat-nav__item:hover { background: var(--orderzy-surface-alt); }
.cat-nav__item.is-active {
background: var(--orderzy-brand-soft);
border-left-color: var(--orderzy-brand);
color: var(--orderzy-brand-ink);
}
.cat-nav__count {
font-weight: 600;
color: var(--orderzy-ink-muted);
font-size: 13px;
}
.cat-nav__item.is-active .cat-nav__count { color: var(--orderzy-brand-ink); }
/* Mobile: sidebar becomes horizontal pill strip */
@media (max-width: 880px) {
.rest-layout { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
.cat-nav {
position: static;
display: flex;
overflow-x: auto;
padding: 4px 0 12px;
scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav__title { display: none; }
.cat-nav__list { display: flex; gap: 6px; }
.cat-nav__item {
white-space: nowrap;
border-left: none;
border-bottom: 3px solid transparent;
padding: 8px 14px;
border-radius: 0;
}
.cat-nav__item.is-active {
border-left: none;
border-bottom-color: var(--orderzy-brand);
background: transparent;
}
.cat-nav__count { display: none; }
.rest-info__name { font-size: 24px; }
}
@media (max-width: 520px) {
.rest-info__meta { font-size: 12px; gap: 8px; }
}
/* Cart bar (floating bottom) */
.cart-bar {
display: none;
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: calc(100% - 48px);
max-width: 560px;
background: var(--orderzy-ink);
color: var(--orderzy-ink-invert);
border-radius: var(--r-md);
padding: 14px 18px;
align-items: center;
justify-content: space-between;
box-shadow: 0 20px 48px -12px rgba(31,29,26,0.3), var(--orderzy-shadow-lift);
z-index: 40;
}
.cart-bar--visible { display: flex; }
.cart-bar__count {
display: inline-flex;
align-items: center;
gap: 10px;
}
.cart-bar__count-badge {
background: var(--orderzy-brand);
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-grid;
place-items: center;
font-weight: 700;
font-size: 13px;
}
.cart-bar__label { font-weight: 700; font-size: 15px; }
.cart-bar__total { font-family: var(--font-heading); font-weight: 700; font-size: 14px; opacity: 0.75; margin-left: 6px; }
.cart-bar__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
color: var(--orderzy-brand);
text-decoration: none;
}
@media (max-width: 880px) {
.rest-layout { grid-template-columns: 1fr; gap: 0; }
.cat-sidebar {
position: static;
display: none;
}
.rest-info__name { font-size: 24px; }
.rest-hero__content { padding: 20px 16px; }
.rest-info__meta { font-size: 12px; gap: 8px; }
}
/* =========== Checkout page specific =========== */
.co-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
padding: 40px 0 80px;
}
.co-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 6px;
}
.co-subtitle {
color: var(--orderzy-ink-soft);
font-size: 15px;
margin: 0 0 28px;
}
.co-step-indicator {
display: flex;
gap: 6px;
margin-bottom: 16px;
font-size: 13px;
color: var(--orderzy-ink-muted);
font-weight: 600;
}
.co-step-indicator strong { color: var(--orderzy-ink); }
.card-box {
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-md);
padding: 24px;
}
.card-box + .card-box { margin-top: 16px; }
.card-box__title {
font-size: 17px;
font-weight: 700;
margin: 0 0 16px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-row--single { grid-template-columns: 1fr; }
.pay-option {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid var(--orderzy-border-strong);
border-radius: var(--r-sm);
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
.pay-option + .pay-option { margin-top: 10px; }
.pay-option:hover { border-color: var(--orderzy-ink); }
.pay-option.selected {
border-color: var(--orderzy-brand);
background: var(--orderzy-brand-soft);
box-shadow: 0 0 0 3px var(--orderzy-brand-soft);
}
.pay-option__radio {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--orderzy-border-strong);
flex-shrink: 0;
position: relative;
}
.pay-option.selected .pay-option__radio { border-color: var(--orderzy-brand); }
.pay-option.selected .pay-option__radio::after {
content: "";
position: absolute;
inset: 3px;
background: var(--orderzy-brand);
border-radius: 50%;
}
.pay-option__body { flex: 1; }
.pay-option__title { font-weight: 700; font-size: 15px; }
.pay-option__sub { font-size: 13px; color: var(--orderzy-ink-soft); }
.pay-option__logos {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.pay-logo {
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
background: var(--orderzy-surface-alt);
color: var(--orderzy-ink-soft);
letter-spacing: 0.04em;
}
/* Order summary */
.summary {
position: sticky;
top: 96px;
background: var(--orderzy-surface);
border-radius: var(--r-md);
box-shadow: var(--orderzy-shadow-whisper);
padding: 24px;
border: 1px solid var(--orderzy-border);
}
.summary__title {
font-size: 17px;
font-weight: 700;
margin: 0 0 4px;
}
.summary__rest {
font-size: 13px;
color: var(--orderzy-ink-soft);
margin: 0 0 20px;
}
.summary__item {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
font-size: 14px;
}
.summary__item-name { flex: 1; }
.summary__item-qty { color: var(--orderzy-ink-muted); font-weight: 600; margin-right: 8px; }
.summary__item--rich { align-items: center; gap: 10px; }
.summary__item-thumb { width: 40px; height: 40px; border-radius: var(--r-xs, 6px); object-fit: cover; flex-shrink: 0; }
.summary__divider { border-top: 1px solid var(--orderzy-border); margin: 10px 0; }
.summary__line {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--orderzy-ink-soft);
padding: 4px 0;
}
.summary__line--total {
font-size: 20px;
font-weight: 700;
color: var(--orderzy-ink);
padding-top: 14px;
margin-top: 6px;
border-top: 1px solid var(--orderzy-border);
}
.summary__btn { margin-top: 20px; }
.summary__trust {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
margin-top: 14px;
font-size: 12px;
color: var(--orderzy-ink-muted);
}
/* Compact navbar for checkout */
.oz-nav--minimal .oz-nav__links { gap: 18px; }
/* ---------- Mobile adjustments ---------- */
/* P1.C05.hotfix (2026-08-16). Tablet range (881-1023px) between the desktop
two-column hero and the mobile stack. The preview card hides here so the
hero doesn't feel cramped, and the copy column centres to a comfortable
editorial width instead of clinging to the left edge of a 1000px viewport. */
@media (max-width: 1023px) {
.hero__preview { display: none; }
}
@media (min-width: 881px) and (max-width: 1023px) {
.hero__grid {
grid-template-columns: 1fr;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.hero__headline { font-size: 48px; }
.hero__trust { justify-content: flex-start; }
}
@media (max-width: 880px) {
.hero { padding: 32px 0 40px; }
.hero__grid { grid-template-columns: 1fr; gap: 40px; }
.hero__headline { font-size: 40px; }
.ra-band__grid { grid-template-columns: 1fr; gap: 32px; }
.ra-band__title { font-size: 30px; }
.ra-band__benefits { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.co-layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 0 48px; }
.summary { position: static; }
/* P4.C08 (2026-08-15): `.oz-footer__grid` mobile fallback deleted; the
compact footer's `.oz-footer__cols` already collapses at ≤540px. */
.oz-nav__links { gap: 14px; }
.oz-nav__link--restaurant { padding: 6px 10px; font-size: 13px; }
}
@media (max-width: 520px) {
.hero__headline { font-size: 32px; }
.section__title { font-size: 24px; }
/* P4.C08 (2026-08-15): `.oz-footer__grid` mobile fallback deleted alongside
the legacy grid selector. Compact footer collapses at its own breakpoint. */
.form-row { grid-template-columns: 1fr; }
/* Navbar: plain text links collapse at mobile. Restaurant pill + cart/bell stay visible. */
.oz-nav__inner { padding: 0 16px; height: 60px; }
.oz-nav__links { gap: 8px; }
.oz-nav__link { display: none; }
.oz-nav__link--restaurant { padding: 5px 10px; font-size: 12px; }
.oz-wordmark { font-size: 20px; }
/* Minimal checkout navbar keeps its links visible (Back + Secure badge). */
.oz-nav--minimal .oz-nav__link { display: inline-flex; font-size: 12.5px; }
.oz-nav--minimal .oz-nav__links { gap: 10px; }
}
@media (max-width: 420px) {
.oz-nav__inner { padding: 0 14px; height: 56px; }
.oz-nav__links { gap: 6px; }
.oz-nav__link--restaurant { padding: 4px 8px; font-size: 11.5px; }
.oz-nav__cart, .oz-nav__bell { width: 36px; height: 36px; }
.oz-wordmark { font-size: 19px; }
.oz-nav--minimal .oz-nav__link { font-size: 11.5px; }
}
/* ===================================================================
BATCH 1 ADDITIONS. Cross-cutting patterns
(toasts, empty states, mobile nav, bell, error pages, gallery)
=================================================================== */
/* ---------- Toasts ---------- */
.toast-stack {
position: fixed;
top: 24px;
right: 24px;
z-index: 100;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 420px;
width: calc(100% - 48px);
}
.toast-stack--inline { position: static; width: 100%; max-width: 480px; }
.toast {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--orderzy-surface);
box-shadow: var(--orderzy-shadow-lift);
border: 1px solid var(--orderzy-border);
}
.toast__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: 14px; font-weight: 700; color: var(--orderzy-ink); margin: 0; line-height: 1.4; }
.toast__msg { font-size: 13px; color: var(--orderzy-ink-soft); line-height: 1.45; margin: 3px 0 0; }
.toast__action { background: none; border: none; font-weight: 700; color: var(--orderzy-brand-ink); cursor: pointer; margin-top: 8px; font-size: 13px; padding: 0; }
.toast__action:hover { text-decoration: underline; }
.toast__close {
background: transparent;
border: none;
color: var(--orderzy-ink-muted);
cursor: pointer;
padding: 2px;
margin: -2px;
border-radius: var(--r-xs);
flex-shrink: 0;
}
.toast__close:hover { color: var(--orderzy-ink); background: var(--orderzy-surface-alt); }
.toast--success { border-left: 3px solid var(--orderzy-success); }
.toast--success .toast__icon { color: var(--orderzy-success); }
.toast--error { border-left: 3px solid var(--orderzy-danger); }
.toast--error .toast__icon { color: var(--orderzy-danger); }
.toast--warning { border-left: 3px solid var(--orderzy-warning); }
.toast--warning .toast__icon { color: var(--orderzy-warning); }
.toast--info { border-left: 3px solid var(--orderzy-brand); }
.toast--info .toast__icon { color: var(--orderzy-brand); }
/* M12: native