/* Shared shell for every public page (doc 10 surfaces). Tokens + the header, so a customer moving business page → menu → advance orders → pay never sees the chrome change under them. Page-specific layout stays local to each page; only what must match lives here. Paper & Ink per docs/DESIGN.md. */ :root{ --paper:#F7F6F3; --card:#FFFFFF; --hair:#E7E5E0; --ink:#1C1B19; --ink2:#5F5D57; --ink3:#8F8C85; --accent:#4C51E0; /* Indigo — shell accent, never the tenant's */ --brand:#111111; --on-brand:#ffffff; /* set per business at runtime */ /* ONE measure for every surface. The business page and the order page used to set their own (1000 vs 760) with differently-contained heroes, so the two read as separate sites on a wide screen. Everything centres on this. */ --shell:100%; --gutter:20px; } @media (min-width:720px){ :root{ --shell:880px; --gutter:40px } } @media (min-width:1100px){ :root{ --shell:1000px } } /* The shared content measure: same width and gutters as the header's inner box, so body text lines up with the business name above it on every page. */ .shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} @media (prefers-color-scheme: dark){ :root{ --paper:#161512; --card:#1E1C18; --hair:#2A2722; --ink:#ECEAE4; --ink2:#A8A499; --ink3:#6E6A60; } } *{box-sizing:border-box;margin:0} body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif; background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased} .serif{font-family:ui-serif,"New York",Georgia,serif} button{font:inherit;border:0;cursor:pointer;background:none;color:inherit} /* ── the header every surface shares ── */ /* Flat brand (..099): the venue asked for no ramp. Set by the page adding `flat` to . The photo scrim over a header image is NOT affected — that is legibility, not branding. */ html.flat .hero{background:var(--brand) !important} .hero{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 82%,#fff 0%),var(--brand)); color:var(--on-brand);padding:34px 0 24px} /* position:relative so .back can float in the hero's top padding without occupying flow — the logo/name/blurb start at the SAME y on every surface, so hopping business page ↔ menu no longer jolts the header (Vlad, 5 Aug). */ .hero .in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);position:relative} .hero .logo{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.22); display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:800; margin-bottom:12px;overflow:hidden} .hero .logo img{width:100%;height:100%;object-fit:cover} .hero h1{font-size:28px;font-weight:700;letter-spacing:-.01em} .hero p{opacity:.92;font-size:14.5px;margin-top:4px} /* The tag sits in the hero's BOTTOM slot now (same slot the business page fills with its CTA chips), not between logo and name — the two layouts used to disagree about where the name started. */ .hero .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;background:rgba(255,255,255,.22);padding:4px 10px; border-radius:8px;margin-top:14px} /* Back to the business page — the way out that the order surfaces were missing. */ .hero .back{position:absolute;top:-26px;left:var(--gutter);display:inline-flex;align-items:center; gap:6px;color:inherit;text-decoration:none;font-size:13.5px;font-weight:600;opacity:.9} .hero .back:hover{opacity:1} @media (min-width:720px){ .hero{padding:48px 0 34px} .hero h1{font-size:38px} .hero p{font-size:16px;margin-top:6px} .hero .logo{width:70px;height:70px;font-size:31px;border-radius:19px} } /* ── the footer every surface shares ── */ .foot{border-top:1px solid var(--hair);margin-top:36px;padding:26px 0 34px; background:var(--paper)} .foot .in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter); display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center; font-size:13px;color:var(--ink3)} .foot a{color:var(--ink2);text-decoration:none} .foot a:hover{text-decoration:underline} .foot .sep{flex:1} .foot .pb{white-space:nowrap} .foot .pb a{font-weight:700;color:var(--ink2)} @media (max-width:520px){ .foot .in{flex-direction:column;align-items:flex-start;gap:8px} .foot .sep{display:none} } /* Platform notice — one bar at the very top; never covers page content. */ .p360notice{width:100%;color:#fff;font-size:13px;line-height:1.35} .p360notice .in{max-width:var(--shell);margin:0 auto;padding:9px var(--gutter); display:flex;align-items:center;gap:10px} .p360notice .t{flex:1;font-weight:600} .p360notice button{background:rgba(255,255,255,.22);color:#fff;border:0;cursor:pointer; font:inherit;font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px} .p360notice .x{background:none;padding:4px 6px;font-size:13px} .p360noticedlg{border:0;border-radius:14px;padding:22px;max-width:440px;width:calc(100% - 40px); color:var(--ink,#1c1b19);background:var(--card,#fff);box-shadow:0 18px 50px rgba(0,0,0,.25)} .p360noticedlg::backdrop{background:rgba(0,0,0,.35)} .p360noticedlg h3{margin:0 0 10px;font-size:17px} .p360noticedlg p{margin:0 0 12px;font-size:14.5px;line-height:1.5;white-space:pre-wrap} .p360noticedlg .until{color:#6e6e73;font-size:13px} .p360noticedlg button{width:100%;border:0;cursor:pointer;font:inherit;font-weight:700; padding:11px;border-radius:11px;background:var(--brand,#4C51E0);color:var(--on-brand,#fff)}